/* Deft Digital Media — Video ads service page (Daniel, October 24, 2026). Loads after styles/service.css; prefix ddm-va-.
   Record: qa/video-ads-page.md. Hero: three vertical job frames, the middle one shown as a feed ad (before/after wipe, once).
   Unique element, "From job site to feed": one frame on a fixed stage changes shape with the beat (data-beat on
   [data-va-stage]): 0 a camera viewfinder on site, 1 a vertical cut over a timeline, 2 the ad in a phone feed, 3 the tap on
   Send message opening a chat through a lens. Fit check: three yes/not-yet questions in the obsidian chapter. */

/* ---------- Hero: three vertical frames ---------- */
.ddm-x .ddm-va-hero-vis { position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:1 / 1.02; }
.ddm-x .ddm-va-reel { position:absolute; overflow:hidden; border-radius:22px; background:#0d0d0e; box-shadow:0 40px 70px -40px rgb(0 0 0/.6), 0 0 0 1px rgb(17 17 17/.06); }
.ddm-x .ddm-va-reel > img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-va-reel-l, .ddm-x .ddm-va-reel-r { top:12%; width:38%; aspect-ratio:9 / 16; filter:saturate(.85) brightness(.92); }
.ddm-x .ddm-va-reel-l { left:1%; rotate:-7deg; }
.ddm-x .ddm-va-reel-r { right:1%; rotate:7deg; }
.ddm-x .ddm-va-reel-play { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:52px; height:52px; translate:-50% -50%; border-radius:50%;
  background:rgb(255 255 255/.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgb(255 255 255/.6); transition:scale .4s var(--ease), background .3s; }
.ddm-x .ddm-va-reel-play svg { width:22px; height:22px; margin-left:3px; fill:#fff; }
.ddm-x .ddm-va-reel-c { z-index:2; left:24%; top:0; width:52%; display:flex; flex-direction:column; background:#fff; border-radius:24px; rotate:-1.5deg;
  box-shadow:0 50px 90px -40px rgb(0 0 0/.6), 0 0 0 1px rgb(17 17 17/.08); }
.ddm-x .ddm-va-ad-head, .ddm-x .ddm-va-feed-head { display:flex; align-items:center; gap:9px; padding:12px 14px; font-size:.78rem; line-height:1.15; }
.ddm-x .ddm-va-ad-head img, .ddm-x .ddm-va-feed-head img { width:30px; height:30px; border-radius:50%; box-shadow:0 0 0 1px rgb(17 17 17/.1); }
.ddm-x .ddm-va-ad-head span, .ddm-x .ddm-va-feed-head span { display:grid; }
.ddm-x .ddm-va-ad-head b, .ddm-x .ddm-va-feed-head b { font-weight:600; }
.ddm-x .ddm-va-ad-head small, .ddm-x .ddm-va-feed-head small { color:var(--ink-3); font-size:.68rem; }
.ddm-x .ddm-va-ad-media { position:relative; aspect-ratio:4 / 5; overflow:hidden; background:#ddd; }
.ddm-x .ddm-va-ad-media img, .ddm-x .ddm-va-frame > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* The after photo wipes in over the before photo, left to right */
.ddm-x .ddm-va-after { clip-path:inset(0 0 0 100%); }
.ddm-x .ddm-va-ad-media .ddm-va-after { animation:ddm-va-wipe 1.3s cubic-bezier(.65,0,.25,1) 1.6s both; }
@keyframes ddm-va-wipe { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0 0 0 0); } }
.ddm-x .ddm-va-cap { position:absolute; left:50%; bottom:9%; translate:-50% 0; padding:7px 13px; border-radius:999px; background:rgb(11 11 12/.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; font-size:.76rem; font-weight:600; white-space:nowrap; letter-spacing:-.01em; }
.ddm-x .ddm-va-cap b { color:var(--sun); font-weight:600; }
.ddm-x .ddm-va-prog { position:absolute; left:10px; right:10px; top:10px; height:3px; border-radius:3px; background:rgb(255 255 255/.35); overflow:hidden; }
.ddm-x .ddm-va-prog i { position:absolute; inset:0; background:#fff; transform-origin:0 50%; animation:ddm-va-prog 5s linear .6s both; }
@keyframes ddm-va-prog { from { transform:scaleX(0); } }
.ddm-x .ddm-va-ad-cta, .ddm-x .ddm-va-feed-cta { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 12px 14px; font-size:.74rem; font-weight:600; }
.ddm-x .ddm-va-ad-cta em, .ddm-x .ddm-va-feed-cta em { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; font-style:normal; background:var(--sun-sheen,none), var(--sun); box-shadow:var(--sun-depth,none); white-space:nowrap; }
.ddm-x .ddm-va-ad-cta .ddm-se-wa, .ddm-x .ddm-va-feed-cta .ddm-se-wa { width:14px; height:14px; }

/* ---------- Hero: the director's monitor (Daniel picked it, Oct 24) ----------
   A field monitor on a light hero: dark bezel, our shoot footage in the middle with frame corners and thirds, histogram and
   audio meters on the left, camera readouts on the right. The finished ad slides out from behind it once on load (.is-in,
   scripts/video-ads.js); a fine pointer tilts the pair slightly (--px/--py). */
.ddm-x .ddm-va-dm { aspect-ratio:auto; max-width:620px; padding:4% 0 18%; perspective:1400px; }
.ddm-x .ddm-va-dm > * { transform:rotateX(calc(var(--py,0) * -3deg)) rotateY(calc(var(--px,0) * 4deg)); transition:transform .6s var(--ease); }
.ddm-x .ddm-va-mon { position:relative; width:90%; padding:11px; border-radius:20px; background:linear-gradient(180deg,#1b1b1d,#0b0b0c); rotate:-1.5deg;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.12), 0 0 0 1px rgb(17 17 17/.2), 0 50px 90px -44px rgb(0 0 0/.7); }
.ddm-x .ddm-va-mon-shoe { position:absolute; left:50%; top:-14px; width:64px; height:14px; translate:-50% 0; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#2a2a2d,#141416); box-shadow:inset 0 1px 0 rgb(255 255 255/.15); }
.ddm-x .ddm-va-mon-scr { position:relative; display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:auto 1fr auto; aspect-ratio:16 / 10; overflow:hidden; border-radius:10px; background:#060607; color:#fff;
  font:500 .62rem/1 var(--mono); letter-spacing:.08em; }
.ddm-x .ddm-va-mon-top, .ddm-x .ddm-va-mon-bot { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; color:rgb(255 255 255/.72); }
.ddm-x .ddm-va-mon-top b { color:#fff; font-weight:500; }
.ddm-x .ddm-va-mon-rec { display:inline-flex; align-items:center; gap:6px; color:#fff; }
.ddm-x .ddm-va-mon-rec i { width:8px; height:8px; border-radius:50%; background:var(--sun); box-shadow:0 0 10px rgb(255 199 0/.8); animation:ddm-va-blink 1.2s steps(1,end) 6 both; }
.ddm-x .ddm-va-mon-pic { position:relative; grid-row:2; grid-column:2; height:100%; aspect-ratio:3 / 4; overflow:hidden; background:#151516; }
.ddm-x .ddm-va-mon-pic video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-va-mon-pic .ddm-va-vf { position:absolute; inset:8%; }
.ddm-x .ddm-va-mon-pic .ddm-va-vf i { width:14px; height:14px; }
.ddm-x .ddm-va-mon-thirds { position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgb(255 255 255/.22) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgb(255 255 255/.22) 0 calc(66.66% + .5px),transparent 0),
  linear-gradient(180deg,transparent calc(33.33% - .5px),rgb(255 255 255/.22) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgb(255 255 255/.22) 0 calc(66.66% + .5px),transparent 0); }
.ddm-x .ddm-va-mon-side { grid-row:2; display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; padding:0 12px; }
.ddm-x .ddm-va-mon-l { align-items:flex-end; } /* histogram + audio sit right, readouts left, so the ad never covers the numbers */
.ddm-x .ddm-va-mon-l small { color:rgb(255 255 255/.5); font-size:.55rem; }
.ddm-x .ddm-va-hist { display:flex; align-items:flex-end; gap:2px; width:100%; max-width:84px; height:34px; padding:3px; border-radius:4px; box-shadow:inset 0 0 0 1px rgb(255 255 255/.14); }
.ddm-x .ddm-va-hist i { flex:1; height:calc(var(--h) * 100%); border-radius:1px; background:rgb(255 255 255/.55); }
.ddm-x .ddm-va-meter { display:flex; flex-direction:column; gap:3px; width:100%; max-width:84px; }
.ddm-x .ddm-va-meter i { height:4px; border-radius:2px; background:linear-gradient(90deg,#fff 0 60%,var(--sun) 60% 80%,rgb(255 255 255/.15) 80%); transform-origin:0 50%; animation:ddm-va-meter 1.1s ease-in-out 8 alternate both; }
.ddm-x .ddm-va-meter i + i { animation-delay:.35s; animation-duration:.9s; }
@keyframes ddm-va-meter { from { transform:scaleX(.45); } to { transform:scaleX(.95); } }
.ddm-x .ddm-va-mon-r { margin:0; list-style:none; align-items:flex-start; }
.ddm-x .ddm-va-mon-r li { display:grid; justify-items:start; gap:3px; color:#fff; }
.ddm-x .ddm-va-mon-r small { color:rgb(255 255 255/.5); font-size:.52rem; }
.ddm-x .ddm-va-batt { position:relative; width:22px; height:10px; border-radius:2px; box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.6); }
.ddm-x .ddm-va-batt i { position:absolute; inset:2.5px 6px 2.5px 2.5px; background:#fff; border-radius:1px; }
/* The finished ad: white feed card, slides out from behind the monitor once */
.ddm-x .ddm-va-dm-ad { position:absolute; z-index:2; right:0; bottom:4%; width:36%; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:#fff;
  box-shadow:0 40px 70px -34px rgb(0 0 0/.6), 0 0 0 1px rgb(17 17 17/.08); rotate:3deg; }
.ddm-x .ddm-va-dm-ad .ddm-va-ad-head { padding:9px 11px; font-size:.68rem; }
.ddm-x .ddm-va-ad-av { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--sun); font:600 .55rem/1 var(--mono); font-style:normal; }
.ddm-x .ddm-va-dm-ad .ddm-va-ad-media { aspect-ratio:4 / 5; }
.ddm-x .ddm-va-dm-ad video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-va-dm-ad .ddm-va-ad-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 50%; } /* still ad (Daniel, Oct 24): Elevated Finishes hallway */
.ddm-x .ddm-va-dm-ad .ddm-va-ad-cta { padding:8px 9px 9px 11px; font-size:.62rem; }
.ddm-x .ddm-va-dm-ad .ddm-va-ad-cta em { padding:6px 9px; }
.ddm-x .ddm-va-dm-ad .ddm-va-ad-cta .ddm-se-wa { width:12px; height:12px; }
.ddm-x .ddm-va-dm.is-ready .ddm-va-dm-ad { opacity:0; translate:-40% -8%; scale:.9; }
.ddm-x .ddm-va-dm.is-in .ddm-va-dm-ad { opacity:1; translate:0 0; scale:1; transition:opacity .5s var(--ease), translate .9s cubic-bezier(.2,.9,.25,1.12), scale .9s cubic-bezier(.2,.9,.25,1.12), transform .6s var(--ease); }
.ddm-x .ddm-va-dm.is-in .ddm-va-dm-ad .ddm-va-ad-cta em { animation:ddm-va-glow 1.4s var(--ease) 1s 1 both; }
.ddm-x .ddm-va-dm-ad .ddm-va-prog i { animation-delay:1.2s; }
.ddm-x .ddm-va-dm-cap { position:absolute; left:2%; bottom:6%; margin:0; display:grid; gap:2px; font-size:.82rem; color:var(--ink-3); transform:none; }
.ddm-x .ddm-va-dm-cap b { color:var(--ink); font-weight:600; }

/* ---------- Why it matters: "From job site to feed" ----------
   Launch pass (Daniel, Oct 24): one real Elevated Finishes job from drywall to done. A 400 x 500 stage (zoomed whole on big
   screens and phones) where one frame changes shape per beat: 0 a 16:9 viewfinder on the job, 1 a 9:16 cut that follows the
   playhead over a real timeline, 2 the ad inside a feed, 3 the tap on Send message opening the chat. data-clip on the stage
   picks the shot (scripts/video-ads.js). Undo: source/archive/va-stage-pre-launch-2026-10-24/. */
.ddm-x .ddm-va-stage { --w:min(400px,34vw); --t:.8s cubic-bezier(.65,0,.25,1); position:relative; z-index:1; width:var(--w); aspect-ratio:4 / 5; font-size:16px; }
.ddm-x .ddm-va-stage > * { position:absolute; }
@media (min-width:1100px) and (min-height:800px) { .ddm-x .ddm-va-stage { --w:400px; zoom:1.15; } }
@media (min-width:1300px) and (min-height:860px) { .ddm-x .ddm-va-stage { zoom:1.22; } }
.ddm-x .ddm-va-sym { width:0; height:0; }
.ddm-x .ddm-va-stage svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Floor shadow under whatever stands on the stage */
.ddm-x .ddm-va-floor { z-index:0; left:50%; top:71%; width:94%; height:8%; translate:-50% -50%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgb(17 17 17/.24),rgb(17 17 17/.08) 55%,rgb(17 17 17/0)); transition:top var(--t), width var(--t); }
.ddm-x .ddm-va-stage[data-beat="1"] .ddm-va-floor { top:94%; width:92%; }
.ddm-x .ddm-va-stage:is([data-beat="2"],[data-beat="3"]) .ddm-va-floor { top:101.5%; width:62%; }

/* The frame */
.ddm-x .ddm-va-frame { z-index:2; left:0; top:24%; width:100%; height:45%; overflow:hidden; border-radius:16px; background:#151516;
  box-shadow:0 40px 70px -40px rgb(0 0 0/.6), 0 0 0 1px rgb(17 17 17/.08);
  transition:left var(--t), top var(--t), width var(--t), height var(--t), border-radius var(--t), box-shadow .5s; }
.ddm-x .ddm-va-stage[data-beat="1"] .ddm-va-frame { left:30%; top:3%; width:40%; height:57%; border-radius:14px; }
.ddm-x .ddm-va-stage:is([data-beat="2"],[data-beat="3"]) .ddm-va-frame { left:21%; top:26%; width:58%; height:37%; border-radius:0; box-shadow:none; }
.ddm-x .ddm-va-frame > [data-c] { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.ddm-x .ddm-va-stage[data-clip="0"] .ddm-va-frame > [data-c="0"], .ddm-x .ddm-va-stage[data-clip="1"] .ddm-va-frame > [data-c="1"],
.ddm-x .ddm-va-stage[data-clip="2"] .ddm-va-frame > [data-c="2"], .ddm-x .ddm-va-stage[data-clip="3"] .ddm-va-frame > [data-c="3"],
.ddm-x .ddm-va-stage[data-clip="f"] .ddm-va-frame > :is([data-c="0"],[data-c="1"]) { opacity:1; }
.ddm-x .ddm-va-stage[data-clip="f"] .ddm-va-frame > [data-c="1"] { animation:ddm-va-wipe 1.2s cubic-bezier(.65,0,.25,1) .9s both; }
/* Film plays our Aug 27 push through a remodel in progress (Daniel, Oct 24) */
.ddm-x .ddm-va-frame > .ddm-va-shoot { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; transition:opacity .4s; }
.ddm-x .ddm-va-stage:not([data-beat="0"]) .ddm-va-frame > .ddm-va-shoot { opacity:0; }
.ddm-x .ddm-va-stage[data-beat="1"] .ddm-va-frame > img[data-c] { object-position:var(--op,50%) 50%; }
.ddm-x .ddm-va-frame > [data-c="0"] { --op:42%; } .ddm-x .ddm-va-frame > [data-c="1"] { --op:62%; } .ddm-x .ddm-va-frame > [data-c="2"] { --op:48%; }
.ddm-x .ddm-va-endcard { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#F4F4F1; color:var(--ink); }
.ddm-x .ddm-va-endcard img { width:58px; height:58px; }
.ddm-x .ddm-va-endcard b { font-size:.82rem; font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-va-endcard em { padding:7px 14px; border-radius:999px; background:var(--sun); font-size:.7rem; font-style:normal; font-weight:600; }

/* Frame overlays: viewfinder (0), ratio (0, 1), reel caption (1), sound (2, 3) */
.ddm-x .ddm-va-frame > :not([data-c]) { position:absolute; z-index:2; pointer-events:none; transition:opacity .4s; }
.ddm-x .ddm-va-thirds { inset:0; background:linear-gradient(rgb(11 11 12/.42),rgb(11 11 12/0) 30%,rgb(11 11 12/0) 75%,rgb(11 11 12/.3)),linear-gradient(90deg,transparent calc(33.33% - .5px),rgb(255 255 255/.22) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgb(255 255 255/.22) 0 calc(66.66% + .5px),transparent 0),
  linear-gradient(transparent calc(33.33% - .5px),rgb(255 255 255/.22) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgb(255 255 255/.22) 0 calc(66.66% + .5px),transparent 0); }
.ddm-x .ddm-va-vf { inset:7%; }
.ddm-x .ddm-va-vf i { position:absolute; width:20px; height:20px; border:0 solid rgb(255 255 255/.92); }
.ddm-x .ddm-va-vf i:nth-child(1) { left:0; top:0; border-width:2px 0 0 2px; }
.ddm-x .ddm-va-vf i:nth-child(2) { right:0; top:0; border-width:2px 2px 0 0; }
.ddm-x .ddm-va-vf i:nth-child(3) { left:0; bottom:0; border-width:0 0 2px 2px; }
.ddm-x .ddm-va-vf i:nth-child(4) { right:0; bottom:0; border-width:0 2px 2px 0; }
.ddm-x .ddm-va-rec { left:10%; top:11%; display:flex; align-items:center; gap:7px; color:#fff; font:600 .66rem/1 var(--mono); letter-spacing:.08em; text-shadow:0 1px 6px rgb(0 0 0/.5); }
.ddm-x .ddm-va-rec i { width:8px; height:8px; border-radius:50%; background:#ff3b30; box-shadow:0 0 10px rgb(255 59 48/.7); animation:ddm-va-blink 1.2s steps(1,end) infinite; }
.ddm-x .ddm-va-rec b { font-weight:500; }
@keyframes ddm-va-blink { 50% { opacity:.25; } }
.ddm-x .ddm-va-focus { left:56%; top:46%; width:58px; height:58px; translate:-50% -50%; border:1.5px solid rgb(255 199 0/.95); border-radius:4px; }
.ddm-x .ddm-va-stage[data-beat="0"] .ddm-va-focus { animation:ddm-va-focus .9s var(--ease) .4s both; }
@keyframes ddm-va-focus { 0% { scale:1.5; opacity:0; } 60% { scale:.92; opacity:1; } 100% { scale:1; } }
.ddm-x .ddm-va-ratio { right:10%; top:10%; padding:4px 7px; border-radius:6px; background:rgb(11 11 12/.5); color:#fff; font:500 .6rem/1 var(--mono); letter-spacing:.08em; }
.ddm-x .ddm-va-frame .ddm-va-cap { left:50%; top:auto; bottom:12%; translate:-50% 0; padding:6px 12px; font-size:.7rem; white-space:nowrap; }
.ddm-x .ddm-va-sound { right:8px; bottom:8px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgb(11 11 12/.55); color:#fff; }
.ddm-x .ddm-va-sound svg { width:13px; height:13px; }
.ddm-x .ddm-va-stage:not([data-beat="0"]) :is(.ddm-va-thirds,.ddm-va-vf,.ddm-va-rec,.ddm-va-focus),
.ddm-x .ddm-va-stage:is([data-beat="2"],[data-beat="3"]) .ddm-va-ratio,
.ddm-x .ddm-va-stage:not([data-beat="1"]) .ddm-va-frame .ddm-va-cap, .ddm-x .ddm-va-frame .ddm-va-cap.is-off,
.ddm-x .ddm-va-stage:is([data-beat="0"],[data-beat="1"]) .ddm-va-sound { opacity:0; }

/* 1: the edit. A ruler, a picture track (clip widths = clip lengths), an audio track and the playhead */
.ddm-x .ddm-va-timeline { z-index:1; left:3%; right:3%; top:64%; height:28%; display:flex; flex-direction:column; gap:6px; padding:8px 10px 10px; border-radius:12px; background:#141415;
  box-shadow:0 30px 50px -30px rgb(0 0 0/.65), inset 0 0 0 1px rgb(255 255 255/.06); opacity:0; translate:0 14px; transition:opacity .45s var(--ease), translate .45s var(--ease); }
.ddm-x .ddm-va-stage[data-beat="1"] .ddm-va-timeline { opacity:1; translate:0 0; transition-delay:.35s; }
.ddm-x .ddm-va-ruler { display:flex; justify-content:space-between; padding-bottom:5px; color:rgb(255 255 255/.45); font:500 .5rem/1 var(--mono); letter-spacing:.06em;
  background:repeating-linear-gradient(90deg,rgb(255 255 255/.22) 0 1px,transparent 1px 100%) 0 100% / calc((100% - 1px) / 15) 4px repeat-x; }
.ddm-x .ddm-va-tracks { position:relative; display:flex; flex:1; flex-direction:column; gap:5px; }
.ddm-x .ddm-va-track { display:flex; flex:1; gap:3px; }
.ddm-x .ddm-va-clip { flex:var(--f) 1 0; overflow:hidden; border-radius:5px; background:#222; box-shadow:inset 0 0 0 1px rgb(255 255 255/.14); }
.ddm-x .ddm-va-clip img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-va-clip-end { display:grid; place-items:center; background:#F4F4F1; }
.ddm-x .ddm-va-clip-end img { width:24px; height:24px; object-fit:contain; }
.ddm-x .ddm-va-stage[data-beat="1"] .ddm-va-clip { animation:ddm-va-clip .45s var(--ease) both; animation-delay:calc(.45s + var(--k,0) * 100ms); }
.ddm-x .ddm-va-clip:nth-child(2) { --k:1; } .ddm-x .ddm-va-clip:nth-child(3) { --k:2; } .ddm-x .ddm-va-clip:nth-child(4) { --k:3; }
@keyframes ddm-va-clip { from { opacity:0; translate:0 8px; scale:.92; } }
.ddm-x .ddm-va-wave { height:18px; border-radius:4px; background:rgb(255 199 0/.12);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9h120' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M2 6v6M5 4v10M8 7v4M11 3v12M14 5v8M17 8v2M20 4v10M23 2v14M26 6v6M29 4v10M32 7v4M35 5v8M38 3v12M41 6v6M44 8v2M47 4v10M50 2v14M53 5v8M56 7v4M59 3v12M62 6v6M65 4v10M68 8v2M71 5v8M74 3v12M77 6v6M80 2v14M83 5v8M86 7v4M89 4v10M92 6v6M95 3v12M98 8v2M101 5v8M104 4v10M107 6v6M110 7v4M113 5v8M116 8v2' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9h120' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M2 6v6M5 4v10M8 7v4M11 3v12M14 5v8M17 8v2M20 4v10M23 2v14M26 6v6M29 4v10M32 7v4M35 5v8M38 3v12M41 6v6M44 8v2M47 4v10M50 2v14M53 5v8M56 7v4M59 3v12M62 6v6M65 4v10M68 8v2M71 5v8M74 3v12M77 6v6M80 2v14M83 5v8M86 7v4M89 4v10M92 6v6M95 3v12M98 8v2M101 5v8M104 4v10M107 6v6M110 7v4M113 5v8M116 8v2' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  background:rgb(255 199 0/.5); }
.ddm-x .ddm-va-head { position:absolute; top:-15px; bottom:-3px; left:calc(var(--p,0) * (100% - 2px)); width:2px; border-radius:2px; background:var(--sun); box-shadow:0 0 10px rgb(255 199 0/.7); }
.ddm-x .ddm-va-head::before { content:""; position:absolute; left:50%; top:0; width:10px; height:10px; translate:-50% 0; border-radius:3px 3px 50% 50%; background:var(--sun); }

/* 2: the phone, a feed around the ad */
.ddm-x .ddm-va-phone { z-index:1; left:21%; top:0; width:58%; height:100%; overflow:hidden; border-radius:34px; background:#fff;
  box-shadow:0 0 0 9px #0d0d0e, 0 0 0 10px rgb(255 255 255/.08), 0 50px 80px -40px rgb(0 0 0/.65); opacity:0; scale:.94; transition:opacity .5s var(--ease), scale .7s var(--ease); }
.ddm-x .ddm-va-stage:is([data-beat="2"],[data-beat="3"]) .ddm-va-phone { opacity:1; scale:1; transition-delay:.15s; }
.ddm-x .ddm-va-feed { position:absolute; inset:0; font-size:.62rem; line-height:1.3; color:var(--ink); }
.ddm-x .ddm-va-feed > * { position:absolute; left:0; right:0; margin:0; }
.ddm-x .ddm-va-icons { display:flex; gap:11px; }
.ddm-x .ddm-va-icons svg { width:17px; height:17px; }
.ddm-x .ddm-va-fprev { top:7.4%; display:grid; gap:5px; padding:6px 12px 9px; border-bottom:1px solid rgb(17 17 17/.07); }
.ddm-x .ddm-va-fprev b, .ddm-x .ddm-va-fnext b { height:6px; border-radius:3px; background:rgb(17 17 17/.1); }
.ddm-x .ddm-va-fprev b:last-child { width:62%; }
.ddm-x .ddm-va-feed .ddm-va-feed-head { top:18.6%; height:7.4%; padding:0 12px; gap:8px; font-size:.64rem; }
.ddm-x .ddm-va-feed .ddm-va-feed-head img { width:24px; height:24px; }
.ddm-x .ddm-va-feed .ddm-va-feed-head small { font-size:.56rem; }
.ddm-x .ddm-va-more { margin-left:auto; width:14px; height:4px; background:radial-gradient(circle,var(--ink) 1.2px,transparent 1.6px) 0 50% / 5px 4px repeat-x; }
.ddm-x .ddm-va-feed .ddm-va-feed-cta { top:63%; height:6.6%; display:flex; align-items:center; justify-content:space-between; padding:0 9px 0 12px; background:#F2F2EF; border-bottom:1px solid rgb(17 17 17/.06); font-weight:600; }
.ddm-x .ddm-va-feed .ddm-va-feed-cta em { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:var(--sun); font-size:.6rem; font-style:normal; font-weight:600; box-shadow:var(--sun-depth,none); }
.ddm-x .ddm-va-feed .ddm-va-feed-cta .ddm-se-wa { width:11px; height:11px; fill:currentColor; stroke:none; }
.ddm-x .ddm-va-feed-act { top:70.6%; padding:0 12px; }
.ddm-x .ddm-va-feed-cap { top:76%; padding:0 12px; font-size:.6rem; line-height:1.35; }
.ddm-x .ddm-va-feed-cap b { font-weight:600; }
.ddm-x .ddm-va-fnext { top:85.2%; display:flex; align-items:center; gap:8px; padding:7px 12px 0; border-top:1px solid rgb(17 17 17/.07); }
.ddm-x .ddm-va-fnext i { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#d9d6cf,#bfbab0); }
.ddm-x .ddm-va-fnext b { width:38%; }
.ddm-x .ddm-va-tabs { bottom:0; height:7.4%; display:flex; justify-content:space-around; align-items:flex-start; padding-top:8px; background:#fff; border-top:1px solid rgb(17 17 17/.07); }
.ddm-x .ddm-va-tabs i { width:15px; height:15px; border:1.6px solid var(--ink); border-radius:4px; }
.ddm-x .ddm-va-tabs i:first-child { background:var(--ink); }
.ddm-x .ddm-va-tabs i:nth-child(2) { border-radius:50%; }
.ddm-x .ddm-va-tabs i:last-child { border-radius:50%; background:linear-gradient(135deg,#d9d6cf,#bfbab0); border-color:transparent; }
.ddm-x .ddm-va-stage:is([data-beat="2"],[data-beat="3"]) .ddm-va-feed > * { animation:ddm-va-feed .9s var(--ease) both; }
@keyframes ddm-va-feed { from { translate:0 30px; } }
.ddm-x .ddm-va-stage[data-beat="2"] .ddm-va-feed-cta em { animation:ddm-va-glow 1.6s var(--ease) 1.6s 2 both; }
@keyframes ddm-va-glow { 50% { box-shadow:var(--sun-depth,none), 0 0 0 4px rgb(255 199 0/.35), 0 0 18px rgb(255 199 0/.6); } }

/* Status bar and island, over both screens */
.ddm-x .ddm-va-chrome { z-index:5; left:21%; top:0; width:58%; height:7%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:2px 16px 0 20px; color:var(--ink);
  opacity:0; transition:opacity .4s; pointer-events:none; }
.ddm-x .ddm-va-stage:is([data-beat="2"],[data-beat="3"]) .ddm-va-chrome { opacity:1; transition-delay:.4s; }
.ddm-x .ddm-va-chrome b { font-size:.62rem; font-weight:600; }
.ddm-x .ddm-va-island { width:64px; height:19px; border-radius:12px; background:#0d0d0e; }
.ddm-x .ddm-va-sys { display:flex; justify-content:flex-end; align-items:center; gap:4px; }
.ddm-x .ddm-va-sys i { height:8px; border-radius:2px; background:var(--ink); }
.ddm-x .ddm-va-sys i:nth-child(1) { width:11px; -webkit-mask:linear-gradient(90deg,#000 0 2px,transparent 0 3px,#000 0 5px,transparent 0 6px,#000 0 8px,transparent 0 9px,#000 0); mask:linear-gradient(90deg,#000 0 2px,transparent 0 3px,#000 0 5px,transparent 0 6px,#000 0 8px,transparent 0 9px,#000 0); clip-path:polygon(0 100%,100% 0,100% 100%); }
.ddm-x .ddm-va-sys i:nth-child(2) { width:10px; border-radius:10px 10px 2px 2px; clip-path:polygon(0 0,100% 0,50% 100%); }
.ddm-x .ddm-va-sys i:nth-child(3) { width:18px; border-radius:3px; background:none; box-shadow:inset 0 0 0 1.2px rgb(17 17 17/.5), inset 0 0 0 2.4px #fff, inset 13px 0 0 0 var(--ink); }

/* 3: the tap on Send message, then the chat opens from the button */
.ddm-x .ddm-va-tap { z-index:6; left:65%; top:66.3%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:rgb(255 255 255/.6);
  box-shadow:0 0 0 1px rgb(17 17 17/.15), 0 6px 14px -6px rgb(0 0 0/.4); opacity:0; pointer-events:none; }
.ddm-x .ddm-va-stage[data-beat="3"] .ddm-va-tap { animation:ddm-va-tap .9s var(--ease) .1s both; }
@keyframes ddm-va-tap { 0% { opacity:0; scale:1.6; } 35% { opacity:1; scale:1; } 55% { scale:.8; } 100% { opacity:0; scale:1; } }
.ddm-x .ddm-va-chat { z-index:3; left:21%; top:0; width:58%; height:100%; overflow:hidden; border-radius:34px; background:#EFEEEA; font-size:.62rem; line-height:1.35; color:var(--ink);
  clip-path:circle(0% at 76% 66.3%); transition:clip-path .8s cubic-bezier(.65,0,.25,1); }
.ddm-x .ddm-va-stage[data-beat="3"] .ddm-va-chat { clip-path:circle(150% at 76% 66.3%); transition-delay:.45s; }
.ddm-x .ddm-va-chat > * { position:absolute; left:0; right:0; margin:0; }
.ddm-x .ddm-va-chat-top { top:0; display:flex; align-items:center; gap:7px; padding:40px 12px 9px 8px; background:#fff; box-shadow:0 1px 0 rgb(17 17 17/.08); }
.ddm-x .ddm-va-back { width:16px; height:16px; }
.ddm-x .ddm-va-chat-top img { width:26px; height:26px; border-radius:50%; box-shadow:0 0 0 1px rgb(17 17 17/.1); }
.ddm-x .ddm-va-chat-top span { display:grid; }
.ddm-x .ddm-va-chat-top b { font-size:.66rem; font-weight:600; }
.ddm-x .ddm-va-chat-top small { color:var(--ink-3); font-size:.54rem; }
.ddm-x .ddm-va-chat-body { top:17%; bottom:11%; display:flex; flex-direction:column; gap:7px; padding:12px 10px 8px; }
.ddm-x .ddm-va-chat-body > p { margin:0; }
.ddm-x .ddm-va-reply { align-self:center; width:72%; overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 6px 16px -10px rgb(0 0 0/.35); }
.ddm-x .ddm-va-reply img { display:block; width:100%; height:62px; object-fit:cover; object-position:60% 50%; }
.ddm-x .ddm-va-reply span { display:grid; padding:6px 9px 7px; }
.ddm-x .ddm-va-reply small { color:var(--ink-3); font-size:.52rem; }
.ddm-x .ddm-va-reply b { font-weight:600; }
.ddm-x .ddm-va-day { align-self:center; color:var(--ink-3); font-size:.52rem; letter-spacing:.02em; }
.ddm-x .ddm-va-bubble { max-width:82%; padding:7px 10px; border-radius:14px 14px 4px 14px; background:var(--sun); align-self:flex-end; box-shadow:0 6px 14px -10px rgb(0 0 0/.3); }
.ddm-x .ddm-va-bubble.is-them, .ddm-x .ddm-va-typing { align-self:flex-start; border-radius:14px 14px 14px 4px; background:#fff; }
.ddm-x .ddm-va-typing { display:flex; gap:3px; padding:9px 11px; }
.ddm-x .ddm-va-typing i { width:5px; height:5px; border-radius:50%; background:rgb(17 17 17/.35); }
.ddm-x .ddm-va-compose { bottom:2.6%; left:10px; right:10px; display:flex; align-items:center; justify-content:space-between; height:6.4%; padding:0 12px; border-radius:999px; background:#fff; color:var(--ink-3);
  box-shadow:0 0 0 1px rgb(17 17 17/.06); }
.ddm-x .ddm-va-compose svg { width:16px; height:16px; color:var(--ink); }
.ddm-x .ddm-va-stage[data-beat="3"] .ddm-va-chat-body > * { animation:ddm-va-bubble .45s var(--ease) both; animation-delay:var(--d,1s); }
.ddm-x .ddm-va-chat-body > :nth-child(3) { --d:1.5s; } .ddm-x .ddm-va-chat-body > :nth-child(4) { --d:2.6s; } .ddm-x .ddm-va-chat-body > :nth-child(5) { --d:3.6s; } .ddm-x .ddm-va-chat-body > :nth-child(6) { --d:4.4s; }
.ddm-x .ddm-va-stage[data-beat="3"] .ddm-va-typing i { animation:ddm-va-dot 1.2s ease-in-out 4.6s infinite; }
.ddm-x .ddm-va-typing i:nth-child(2) { animation-delay:4.75s !important; } .ddm-x .ddm-va-typing i:nth-child(3) { animation-delay:4.9s !important; }
@keyframes ddm-va-dot { 30% { translate:0 -3px; background:rgb(17 17 17/.6); } 60% { translate:0 0; } }
@keyframes ddm-va-bubble { from { opacity:0; translate:0 10px; scale:.96; } }

/* Named steps under the stage */
.ddm-x .ddm-va-steps { gap:clamp(14px,1.6vw,22px); margin-top:clamp(10px,2.4vh,26px); }
.ddm-x .ddm-va-steps li { width:auto; height:auto; padding:0 0 7px; border-radius:0; background:none; scale:1; position:relative;
  color:rgb(17 17 17/.5); font:500 .74rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; transition:color .3s; }
.ddm-x .ddm-va-steps li::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:rgb(17 17 17/.12); }
.ddm-x .ddm-va-steps li::before { content:""; position:absolute; z-index:1; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--sun); transform-origin:0 50%; transform:scaleX(0); transition:transform .5s var(--ease); }
.ddm-x .ddm-va-steps li.is-on { background:none; scale:1; color:var(--ink); }
.ddm-x .ddm-va-steps li.is-on::before { transform:scaleX(1); }

/* ---------- Proof: vertical job frames ---------- */
.ddm-x .ddm-va-frames { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-va-shot { display:block; position:relative; border-radius:18px; overflow:hidden; aspect-ratio:9 / 16; background:#1a1a1b; box-shadow:0 20px 40px -30px rgb(0 0 0/.5); }
.ddm-x .ddm-va-shot img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.ddm-x .ddm-va-shot:hover img { transform:scale(1.05); }
.ddm-x .ddm-va-shot:hover .ddm-va-reel-play { scale:1.12; background:rgb(255 255 255/.4); }
.ddm-x .ddm-va-shot > span { position:absolute; left:10px; right:10px; bottom:10px; display:grid; gap:1px; padding:9px 12px; border-radius:12px;
  background:rgb(255 255 255/.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 #fff; }
.ddm-x .ddm-va-shot b { font-size:.86rem; font-weight:600; }
.ddm-x .ddm-va-shot small { font-size:.72rem; color:var(--ink-3); }

/* ---------- Fit check (obsidian) ---------- */
.ddm-x .ddm-va-fit { display:grid; gap:20px; padding:clamp(22px,2.6vw,36px); border-radius:24px; background:rgb(255 255 255/.035);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 0 18px -4px rgb(255 255 255/.25), 0 30px 60px -40px #000; }
.ddm-x .ddm-va-qs { margin:0; padding:0; list-style:none; counter-reset:q; }
.ddm-x .ddm-va-q { counter-increment:q; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px 0; border-top:1px solid var(--line-dark); }
.ddm-x .ddm-va-q:first-child { border-top:0; padding-top:0; }
.ddm-x .ddm-va-q p { flex:1 1 240px; margin:0; color:#fff; font-size:1.06rem; font-weight:500; letter-spacing:-.01em; }
.ddm-x .ddm-va-q p::before { content:counter(q); display:inline-grid; place-items:center; width:24px; height:24px; margin-right:12px; border-radius:50%; box-shadow:inset 0 0 0 1px rgb(255 255 255/.4); font:500 .7rem/1 var(--mono); color:var(--on-dark-2); vertical-align:2px; transition:background .3s, color .3s, box-shadow .3s; }
.ddm-x .ddm-va-q.is-yes p::before { background:var(--sun); color:var(--ink); box-shadow:0 0 12px rgb(255 199 0/.5); }
.ddm-x .ddm-va-ans { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:rgb(255 255 255/.06); box-shadow:inset 0 0 0 1px var(--line-dark); }
.ddm-x .ddm-va-ans[hidden] { display:none; }
.ddm-x .ddm-va-ans button { min-width:84px; min-height:40px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--on-dark); font:500 .9rem/1 var(--sans); cursor:pointer; transition:background .3s var(--ease), color .3s; }
.ddm-x .ddm-va-ans button:hover { background:rgb(255 255 255/.08); }
.ddm-x .ddm-va-ans button[data-a="yes"][aria-pressed="true"] { background:var(--sun); color:var(--ink); }
.ddm-x .ddm-va-ans button[data-a="no"][aria-pressed="true"] { background:#fff; color:var(--ink); }
.ddm-x .ddm-va-ans button:focus-visible { outline:2px solid var(--blue-light,#7D93FF); outline-offset:2px; }
.ddm-x .ddm-va-result { min-height:7.2em; padding:18px 20px; border-radius:16px; background:rgb(255 255 255/.05); box-shadow:inset 0 0 0 1px var(--line-dark); }
.ddm-x .ddm-va-result[hidden] { display:none; }
.ddm-x .ddm-va-out { display:none; }
.ddm-x .ddm-va-out.is-on { display:block; animation:ddm-va-out .45s var(--ease) both; }
@keyframes ddm-va-out { from { opacity:0; translate:0 6px; } }
.ddm-x .ddm-va-out p { margin:0; color:var(--on-dark-2); }
.ddm-x .ddm-va-out .ddm-va-out-h { margin-bottom:6px; color:#fff; font-size:1.3rem; font-weight:600; letter-spacing:-.03em; }
.ddm-x .ddm-va-out[data-out="wait"] .ddm-va-out-h { font-size:1.02rem; font-weight:500; color:var(--on-dark-2); letter-spacing:0; }
.ddm-x .ddm-va-out-h span { color:var(--sun); }
.ddm-x .ddm-va-out .ddm-link { margin-top:12px; color:#fff; }
.ddm-x .ddm-va-fit-btn { justify-self:stretch; }
.ddm-x .ddm-va-fit.is-fit .ddm-va-fit-btn { animation:ddm-va-glow 1.4s var(--ease) .2s 1 both; }
.ddm-x .ddm-va-fit-note { margin:-6px 0 0; font-size:13px; line-height:1.5; color:var(--on-dark-2); text-align:center; }
/* The fit check sits inside the lens portal ("Does it work / for you?"); compact so it fits one screen */
.ddm-x .ddm-va-portal .ddm-portal-words { font-size:clamp(34px,4.4vw,76px); }
.ddm-x .ddm-va-portal .ddm-portal-chip { margin-bottom:16px; }
.ddm-x .ddm-va-portal .ddm-portal-copy h2 { margin-bottom:22px; font-size:clamp(2rem,min(4.4vw,6.4vh),4rem); }
.ddm-x .ddm-va-portal .ddm-va-fit { width:min(100%,660px); gap:14px; text-align:left; background:rgb(34 34 37/.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ddm-x .ddm-va-portal .ddm-va-q { padding:11px 0; }
.ddm-x .ddm-va-portal .ddm-va-result { min-height:0; padding:14px 18px; }
.ddm-x .ddm-va-portal .ddm-va-out .ddm-va-out-h { font-size:1.15rem; }
.ddm-x .ddm-va-portal .ddm-va-out .ddm-link { margin-top:8px; }
.ddm-x .ddm-va-portal .ddm-va-fit-note { margin-top:-4px; }

/* FAQ: one dark background with the portal before it (Daniel, Oct 24): same digit field (no mask, same strength) and the
   same grain, so the seam disappears; the bottom is a flat, clean edge back to studio light */
.ddm-x .ddm-va-portal .ddm-portal-inner .ddm-digits, .ddm-x .ddm-va-faq .ddm-digits { opacity:.7; -webkit-mask:none; mask:none; }
.ddm-x .ddm-va-faq .ddm-grain { mix-blend-mode:normal; opacity:.14; }
.ddm-x .ddm-va-faq { margin-top:-1px; padding-top:clamp(0px,2.4vw,36px); } /* portal-into-dark recipe (qa/portal-into-dark-howto.md): start almost at once */
.ddm-x .ddm-va-faq .ddm-se-faq { margin-top:0; }
/* The numbers step back behind the questions (Daniel, Oct 24): a soft obsidian pool under the accordion */
.ddm-x .ddm-va-faq .ddm-se-qa { position:relative; isolation:isolate; }
.ddm-x .ddm-va-faq .ddm-se-qa::before { content:""; position:absolute; inset:-110px -140px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgb(11 11 12/.96) 66%,rgb(11 11 12/0) 100%); }

/* ---------- Next card picture ---------- */
.ddm-x .ddm-va-next-vis img { width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:50% 0; transition:transform .8s var(--ease); }
.ddm-x .ddm-se-next-card:hover .ddm-va-next-vis img { transform:scale(1.03); }

/* ---------- Our sites reel (Daniel, Oct 24): real client sites drift past at the bottom of the page.
   Copied from the Get Found page (itself from Websites) with this page's prefix; it closes the page, after the Next card, with room to breathe. ---------- */
.ddm-x .ddm-va-sites { padding-block:clamp(64px,9vw,130px) clamp(16px,3vw,48px); overflow:hidden; }
/* The reel runs straight into the footer: no divider line above it (Daniel, Oct 24) */
.ddm-x.ddm-va-page .ddm-footer { border-top:0; }
.ddm-x.ddm-va-page .ddm-footer::before { display:none; }
.ddm-x .ddm-va-sites-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px); }
.ddm-x .ddm-va-sites-head .ddm-head { margin:0; }
.ddm-x .ddm-va-sites-head h2 { margin:0; }
.ddm-x .ddm-va-sites-head > .ddm-link { margin-bottom:10px; }
.ddm-x .ddm-va-sites-view { --gap:clamp(18px,2vw,32px); display:flex; gap:var(--gap); padding-block:12px 20px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); width:100%; }
.ddm-x .ddm-va-sites-track { display:flex; gap:var(--gap); flex:none; margin:0; padding:0; list-style:none; animation:ddm-va-sites 60s linear infinite; }
.ddm-x .ddm-va-sites:not(.is-on) .ddm-va-sites-track { animation-play-state:paused; } /* only runs while on screen */
@keyframes ddm-va-sites { to { translate:calc(-100% - var(--gap)) 0; } }
.ddm-x .ddm-va-sites-item { position:relative; flex:none; width:clamp(260px,30vw,460px); }
.ddm-x .ddm-va-sites-card { position:absolute; inset:0; z-index:8; border-radius:14px; }
.ddm-x .ddm-va-sites-win { display:block; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:0 1px 2px rgb(0 0 0/.06), 0 18px 40px -22px rgb(0 0 0/.35); transition:translate .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.ddm-x .ddm-va-sites-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-bottom:1px solid var(--line); background:#f6f5f2; }
.ddm-x .ddm-va-sites-bar i { width:8px; height:8px; border-radius:50%; background:rgb(0 0 0/.14); }
.ddm-x .ddm-va-sites-bar span { margin-left:10px; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:500 .68rem var(--mono); letter-spacing:.04em; color:var(--ink-3); }
.ddm-x .ddm-va-sites-win img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-va-sites-cap { display:flex; flex-direction:column; gap:2px; padding:14px 4px 0; }
.ddm-x .ddm-va-sites-cap b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-va-sites-cap small { font:500 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-va-sites-item:is(:hover,:focus-within) .ddm-va-sites-win { translate:0 -6px; box-shadow:0 1px 2px rgb(0 0 0/.06), 0 28px 50px -24px rgb(0 0 0/.45); }
.ddm-x .ddm-va-sites-card:focus-visible { outline:none; }
/* Hover: the light-double-yellow/blue rim (light.css) wakes on the window; the row keeps drifting (Daniel, Oct 24) */
/* The orbit always runs; hover only fades it in. (The link sits over the item, not around it: inside a link Chrome froze the orbit.) */
.ddm-x .ddm-va-sites-win.ddm-light-double::after { opacity:0; transition:opacity .45s var(--ease); }
.ddm-x .ddm-va-sites-item:is(:hover,:focus-within) .ddm-va-sites-win.ddm-light-double::after { opacity:1; }
.ddm-x .ddm-va-sites-item:has(.ddm-va-sites-card:focus-visible) .ddm-va-sites-win { outline:2px solid var(--blue-ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-va-sites-track { animation:none; }
  .ddm-x .ddm-va-sites-track[aria-hidden] { display:none; }
  .ddm-x .ddm-va-sites-view { overflow-x:auto; -webkit-mask:none; mask:none; padding-inline:var(--gutter,20px); }
}
.ddm-x.ddm-va-page .ddm-se-next { padding-top:clamp(96px,11vw,160px); padding-bottom:clamp(8px,1.5vw,24px); }

/* ---------- Phones and tablets ---------- */
@media (max-width:960px) {
  .ddm-x .ddm-va-hero-vis { max-width:460px; }
  .ddm-x .ddm-va-stage { --w:min(300px,40vw); }
  .ddm-x .ddm-va-frames { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; }
  .ddm-x .ddm-va-frames::-webkit-scrollbar { display:none; }
  .ddm-x .ddm-va-frames li { flex:0 0 31%; scroll-snap-align:start; }
}
@media (max-width:640px) {
  .ddm-x .ddm-va-mon-side { padding:0 7px; gap:7px; }
  .ddm-x .ddm-va-mon-r li:nth-child(n+4), .ddm-x .ddm-va-meter, .ddm-x .ddm-va-mon-l small { display:none; }
  .ddm-x .ddm-va-dm-cap { font-size:.74rem; }
  .ddm-x .ddm-va-dm-ad { width:40%; right:1%; }
  .ddm-x .ddm-va-dm-ad .ddm-va-ad-cta span { display:none; }
  .ddm-x .ddm-va-dm-ad .ddm-va-ad-cta { justify-content:center; }
  .ddm-x .ddm-va-stage { --w:400px; zoom:.4; } /* the desktop stage, scaled whole so its parts keep their layout */
  .ddm-x .ddm-va-steps { gap:8px; }
  .ddm-x .ddm-va-steps li { width:7px; height:7px; padding:0; border-radius:50%; background:rgb(17 17 17/.18); font-size:0; }
  .ddm-x .ddm-va-steps li::before, .ddm-x .ddm-va-steps li::after { content:none; }
  .ddm-x .ddm-va-steps li.is-on { background:var(--ink); scale:1.25; }
  .ddm-x .ddm-va-frames li { flex-basis:58%; }
  .ddm-x .ddm-va-q p { flex-basis:100%; }
  .ddm-x .ddm-va-ans { width:100%; }
  .ddm-x .ddm-va-ans button { flex:1; min-height:38px; }
  .ddm-x .ddm-va-portal .ddm-va-q { gap:8px; padding:9px 0; }
  .ddm-x .ddm-va-portal .ddm-va-q p { font-size:.98rem; }
  .ddm-x .ddm-va-portal .ddm-va-fit { padding:16px; gap:10px; }
  .ddm-x .ddm-va-portal .ddm-va-fit-note { display:none; }
  .ddm-x .ddm-va-portal .ddm-portal-copy h2 { font-size:1.9rem; margin-bottom:14px; }
}

@media (max-height:760px) and (min-width:641px) {
  .ddm-x .ddm-va-portal :is(.ddm-portal-chip,.ddm-va-fit-note) { display:none; }
}

/* ---------- Reduced motion, reduced transparency, forced colors ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-va-after { clip-path:none; }
  .ddm-x .ddm-va-stage .ddm-va-frame > [data-c] { animation:none !important; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x :is(.ddm-va-shot > span,.ddm-va-reel-play,.ddm-va-cap) { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ddm-x .ddm-va-shot > span { background:#fff; }
}
@media (forced-colors:active) {
  .ddm-x :is(.ddm-va-fit,.ddm-va-result,.ddm-va-shot) { border:1px solid CanvasText; }
  .ddm-x .ddm-va-ans button[aria-pressed="true"] { outline:2px solid Highlight; }
}