/* Deft Digital Media — Social media content page (Daniel, October 24, 2026). Sits on the shared service template
   (styles/service.css, prefix ddm-se-) and only adds what this page has of its own, prefix ddm-so-: the fanned posts in
   the hero, the unique element "From job site to feed" (a camera viewfinder on a job that shoots, edits, then folds into
   a phone whose feed fills), the feed-style proof with a draggable before and after, the spots panel in the obsidian
   chapter and the small ad scene on the Next card. Sunflower is the only brand color (no red REC dot). Motion:
   scripts/service-social.js. Record: qa/social-media-page.md. */

/* ---------- Hero: three job photos laid out as posts, fanned like a feed ---------- */
.ddm-x .ddm-so-hero-vis { position:relative; }
.ddm-x .ddm-so-fan { position:relative; height:clamp(380px,40vw,560px); }
.ddm-x .ddm-so-post { position:absolute; width:min(46%,280px); margin:0; padding:10px 10px 8px; border-radius:24px; background:rgb(255 255 255/.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.06), 0 40px 70px -40px rgb(0 0 0/.55);
  animation:ddm-so-deal 1s var(--ease) both; animation-delay:calc(.35s + var(--k,0) * 120ms); }
.ddm-x .ddm-so-post img { display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:15px; }
.ddm-x .ddm-so-post.f1 { --k:0; --r:-8deg; left:2%; top:12%; rotate:var(--r); }
.ddm-x .ddm-so-post.f2 { --k:1; --r:7deg; right:2%; top:9%; rotate:var(--r); }
.ddm-x .ddm-so-post.f3 { --k:2; --r:-1deg; left:50%; top:0; translate:-50% 0; rotate:var(--r); z-index:2; }
@keyframes ddm-so-deal { from { opacity:0; rotate:0deg; transform:translateY(40px); } }
.ddm-x .ddm-so-post-head { display:flex; align-items:center; gap:8px; padding:2px 4px 10px; font-size:.78rem; }
.ddm-x .ddm-so-post-head > i { flex:none; width:24px; height:24px; border-radius:50%; background:var(--ink) url("https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/logo/nav-logo-wht.png") center/68% no-repeat; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--sun); }
.ddm-x .ddm-so-post-head b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-so-post-head small { margin-left:auto; color:var(--ink-3); font-size:.68rem; }
.ddm-x .ddm-so-rec { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:var(--ink); color:#fff !important; font:500 .6rem/1 var(--mono) !important; letter-spacing:.08em; text-transform:uppercase; }
.ddm-x .ddm-so-rec i { width:6px; height:6px; border-radius:50%; background:var(--sun); box-shadow:0 0 8px var(--sun); }
.ddm-x .ddm-so-post-acts { display:flex; gap:12px; padding:10px 4px 2px; }
.ddm-x .ddm-so-post-acts svg { width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.ddm-x .ddm-so-post-acts svg.is-liked { fill:var(--sun); stroke:var(--ink); animation:ddm-so-pop .6s var(--ease) 1.6s both; }
@keyframes ddm-so-pop { 0% { scale:.4; fill:transparent; } 60% { scale:1.25; } 100% { scale:1; } }

/* ---------- Why it matters: "From job site to feed" ---------- */
.ddm-x .ddm-so-why { padding-top:clamp(64px,8vw,120px); }
.ddm-x .ddm-so-why-head { margin-bottom:clamp(8px,2vw,24px); }
.ddm-x .ddm-so-why-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); }
.ddm-x .ddm-so-beats { margin:0; padding:0 0 18vh; list-style:none; }
.ddm-x .ddm-so-beat { min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding-left:22px; border-left:2px solid var(--line); transition:border-color .4s var(--ease); }
.ddm-x .ddm-so-beat h3 { font-size:clamp(1.6rem,2.6vw,2.3rem); margin-bottom:12px; transition:color .4s var(--ease); }
.ddm-x .ddm-so-beat p { max-width:38ch; font-size:1.08rem; color:var(--ink-2); margin:0; transition:color .4s var(--ease); }
.ddm-x .ddm-so-why.is-live .ddm-so-beat:not(.is-on) :is(h3,p) { color:var(--ink-3); }
.ddm-x .ddm-so-beat.is-on { border-left-color:var(--sun); }
.ddm-x .ddm-so-stage-col { position:sticky; top:calc(var(--nav-h) + 4vh); height:calc(100vh - var(--nav-h) - 8vh); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.ddm-x .ddm-so-digits { inset:-6% -20%; width:140%; height:112%; opacity:.8; -webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 30%,transparent 100%); mask:radial-gradient(50% 50% at 50% 50%,#000 30%,transparent 100%); }
.ddm-x .ddm-so-dots { position:relative; z-index:1; }

/* The stage: one dark frame. 0-2 a landscape camera viewfinder; 3-4 the same frame folds into a phone. */
.ddm-x .ddm-so-stage { --cw:min(540px,40vw); --pw:min(290px,26vw); position:relative; z-index:1; width:var(--cw); height:calc(var(--cw) * .6667); border-radius:24px; background:#0d0d0e;
  box-shadow:0 50px 90px -40px rgb(0 0 0/.6), inset 0 0 0 1px rgb(255 255 255/.12), 0 0 0 1px rgb(17 17 17/.08);
  transition:width .9s cubic-bezier(.65,0,.25,1), height .9s cubic-bezier(.65,0,.25,1), border-radius .9s cubic-bezier(.65,0,.25,1); }
.ddm-x .ddm-so-stage:is([data-beat="3"],[data-beat="4"]) { width:var(--pw); height:calc(var(--pw) * 2.05); border-radius:42px; }

.ddm-x .ddm-so-cam { position:absolute; inset:8px; border-radius:17px; overflow:hidden; background:#111; transition:opacity .45s var(--ease), border-radius .9s; }
.ddm-x .ddm-so-stage:is([data-beat="3"],[data-beat="4"]) .ddm-so-cam { opacity:0; border-radius:33px; }
.ddm-x .ddm-so-shot { position:absolute; inset:0; transition:transform 1.2s var(--ease); transform:scale(1.08); }
.ddm-x .ddm-so-stage:not([data-beat="0"]) .ddm-so-shot { transform:scale(1); }
.ddm-x .ddm-so-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-so-raw { filter:saturate(.35) contrast(.86) brightness(.9); }
.ddm-x .ddm-so-graded { clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.65,0,.25,1) .2s; filter:saturate(1.12) contrast(1.04); }
.ddm-x .ddm-so-stage:is([data-beat="2"],[data-beat="3"],[data-beat="4"]) .ddm-so-graded { clip-path:inset(0 0 0 0); }

/* Camera HUD */
.ddm-x .ddm-so-hud { position:absolute; inset:0; color:#fff; font:500 .66rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.ddm-x .ddm-so-hud-rec, .ddm-x .ddm-so-hud-spec { position:absolute; top:14px; display:flex; align-items:center; gap:7px; padding:6px 9px; border-radius:8px; background:rgb(0 0 0/.42); transition:opacity .4s var(--ease); }
.ddm-x .ddm-so-hud-rec { left:14px; } .ddm-x .ddm-so-hud-spec { right:14px; }
.ddm-x .ddm-so-hud-rec i { width:8px; height:8px; border-radius:50%; background:var(--sun); box-shadow:0 0 10px var(--sun); }
.ddm-x .ddm-so-hud-rec b { font-weight:500; font-variant-numeric:tabular-nums; }
.ddm-x .ddm-so-stage[data-beat="2"] :is(.ddm-so-hud-rec,.ddm-so-hud-spec,.ddm-so-thirds,.ddm-so-focus) { opacity:0; }
.ddm-x .ddm-so-thirds { position:absolute; inset:0; opacity:.5; transition:opacity .4s;
  background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgb(255 255 255/.45) calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),rgb(255 255 255/.45) calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
             linear-gradient(180deg,transparent calc(33.33% - .5px),rgb(255 255 255/.45) calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),rgb(255 255 255/.45) calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px)); }
.ddm-x .ddm-so-focus { position:absolute; left:50%; top:52%; width:26%; height:34%; translate:-50% -50%; transition:opacity .4s; }
.ddm-x .ddm-so-focus i { position:absolute; width:16px; height:16px; border:2px solid #fff; }
.ddm-x .ddm-so-focus i:nth-child(1) { left:0; top:0; border-right:0; border-bottom:0; }
.ddm-x .ddm-so-focus i:nth-child(2) { right:0; top:0; border-left:0; border-bottom:0; }
.ddm-x .ddm-so-focus i:nth-child(3) { left:0; bottom:0; border-right:0; border-top:0; }
.ddm-x .ddm-so-focus i:nth-child(4) { right:0; bottom:0; border-left:0; border-top:0; }
.ddm-x .ddm-so-stage[data-beat="0"] .ddm-so-focus { animation:ddm-so-focus .9s var(--ease) .3s both; }
.ddm-x .ddm-so-stage[data-beat="0"] .ddm-so-focus i { animation:ddm-so-lock .3s ease 1s both; }
@keyframes ddm-so-focus { from { scale:1.5; opacity:0; } }
@keyframes ddm-so-lock { to { border-color:var(--sun); } }
.ddm-x .ddm-so-stage:not([data-beat="0"]) .ddm-so-focus i { border-color:var(--sun); }
/* 2: crop to 4:5, edit chips, caption */
.ddm-x .ddm-so-crop { position:absolute; top:17%; bottom:22%; left:50%; aspect-ratio:4 / 5; translate:-50% 0; border:1.5px solid #fff; border-radius:6px; box-shadow:0 0 0 999px rgb(0 0 0/.5); opacity:0; scale:1.3; transition:opacity .5s var(--ease) .5s, scale .7s var(--ease) .5s; }
.ddm-x .ddm-so-stage[data-beat="2"] .ddm-so-crop { opacity:1; scale:1; }
.ddm-x .ddm-so-edit { position:absolute; left:14px; top:14px; display:flex; gap:5px; opacity:0; translate:0 -6px; transition:opacity .4s var(--ease) .3s, translate .4s var(--ease) .3s; }
.ddm-x .ddm-so-edit b, .ddm-x .ddm-so-edit em { padding:6px 9px; border-radius:8px; background:rgb(0 0 0/.5); font-style:normal; font-weight:500; }
.ddm-x .ddm-so-edit b { background:var(--sun); color:var(--ink); font-weight:600; }
.ddm-x .ddm-so-stage[data-beat="2"] .ddm-so-edit { opacity:1; translate:0 0; }
.ddm-x .ddm-so-caption { position:absolute; left:50%; bottom:6%; width:min(86%,360px); translate:-50% 0; margin:0; padding:9px 12px; border-radius:12px; background:rgb(255 255 255/.92); color:var(--ink); font-size:.74rem; line-height:1.3; text-align:center;
  opacity:0; transition:opacity .4s var(--ease); }
.ddm-x .ddm-so-stage[data-beat="2"] .ddm-so-caption { opacity:1; transition-delay:.9s; }
/* 1: the shutter flashes and the shots land in the roll */
.ddm-x .ddm-so-flash { position:absolute; inset:8px; border-radius:17px; background:#fff; opacity:0; pointer-events:none; }
.ddm-x .ddm-so-stage[data-beat="1"] .ddm-so-flash { animation:ddm-so-flash .6s ease-out .25s both; }
@keyframes ddm-so-flash { 0% { opacity:0; } 15% { opacity:.85; } 100% { opacity:0; } }
.ddm-x .ddm-so-roll { position:absolute; left:14px; bottom:14px; display:flex; gap:6px; margin:0; padding:0; list-style:none; transition:opacity .4s; }
.ddm-x .ddm-so-roll li { width:52px; height:40px; border-radius:7px; overflow:hidden; box-shadow:0 0 0 1.5px #fff, 0 8px 16px -8px #000; opacity:0; }
.ddm-x .ddm-so-roll img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-so-stage[data-beat="1"] .ddm-so-roll li { animation:ddm-so-land .6s var(--ease) both; animation-delay:calc(.45s + var(--k,0) * 380ms); }
.ddm-x .ddm-so-roll li:nth-child(2) { --k:1; } .ddm-x .ddm-so-roll li:nth-child(3) { --k:2; }
.ddm-x .ddm-so-stage[data-beat="2"] .ddm-so-roll { opacity:0; }
@keyframes ddm-so-land { from { opacity:0; transform:translate(40px,-60px) scale(2.2); } to { opacity:1; } }

/* 3-4: the phone feed */
.ddm-x .ddm-so-feed { position:absolute; inset:10px; border-radius:33px; overflow:hidden; background:#fff; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s; }
.ddm-x .ddm-so-stage:is([data-beat="3"],[data-beat="4"]) .ddm-so-feed { opacity:1; visibility:visible; transition:opacity .5s var(--ease) .55s; }
.ddm-x .ddm-so-feed-bar { display:flex; align-items:center; padding:40px 16px 10px; font-size:.82rem; box-shadow:0 1px 0 var(--line); }
.ddm-x .ddm-so-feed-bar b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-so-feed-bar i { margin-left:auto; width:18px; height:18px; border-radius:6px; box-shadow:inset 0 0 0 1.8px var(--ink); }
.ddm-x .ddm-so-feed-bar::before { content:""; position:absolute; top:12px; left:50%; width:30%; height:18px; translate:-50% 0; border-radius:12px; background:#0d0d0e; }
.ddm-x .ddm-so-feed-list { padding:10px 10px 0; display:grid; gap:12px; }
.ddm-x .ddm-so-fpost .ddm-so-post-head { padding:0 2px 8px; font-size:.7rem; }
.ddm-x .ddm-so-fpost .ddm-so-post-head > i { width:20px; height:20px; }
.ddm-x .ddm-so-fpost img { display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:12px; }
.ddm-x .ddm-so-fpost + .ddm-so-fpost img { aspect-ratio:4 / 3; }
.ddm-x .ddm-so-fpost .ddm-so-post-acts { gap:10px; padding:8px 2px 4px; }
.ddm-x .ddm-so-fpost .ddm-so-post-acts svg { width:18px; height:18px; }
.ddm-x .ddm-so-fpost p { margin:0; padding:0 2px; font-size:.66rem; line-height:1.3; color:var(--ink-2); }
.ddm-x .ddm-so-stage:is([data-beat="3"],[data-beat="4"]) .ddm-so-feed-list { animation:ddm-so-push .8s var(--ease) .7s both; }
.ddm-x .ddm-so-stage:is([data-beat="3"],[data-beat="4"]) .ddm-so-fpost.is-new { animation:ddm-so-in .7s var(--ease) .8s both; }
@keyframes ddm-so-push { from { transform:translateY(-38%); } }
@keyframes ddm-so-in { from { opacity:0; scale:.94; } }
.ddm-x .ddm-so-like { transition:fill .3s, scale .3s; }
.ddm-x .ddm-so-stage[data-beat="4"] .ddm-so-like { fill:var(--sun); animation:ddm-so-pop .6s var(--ease) .3s both; }
.ddm-x .ddm-so-pings { position:absolute; left:8px; right:8px; top:40px; display:grid; gap:6px; }
.ddm-x .ddm-so-ping { display:flex; align-items:center; gap:9px; margin:0; padding:10px 12px; border-radius:16px; background:rgb(255 255 255/.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.07), 0 14px 26px -14px rgb(0 0 0/.5); font-size:.66rem; line-height:1.3; opacity:0; translate:0 -14px; transition:opacity .3s, translate .3s; }
.ddm-x .ddm-so-ping svg { flex:none; width:22px; height:22px; padding:5px; border-radius:50%; background:var(--sun); fill:var(--ink); }
.ddm-x .ddm-so-ping b { font-weight:600; }
.ddm-x .ddm-so-stage[data-beat="4"] .ddm-so-ping { opacity:1; translate:0 0; transition:opacity .5s var(--ease), translate .6s var(--ease); transition-delay:calc(.8s + var(--k,0) * 600ms); }
.ddm-x .ddm-so-ping + .ddm-so-ping { --k:1; }

/* ---------- Proof: the feed, with a draggable before and after ---------- */
.ddm-x .ddm-so-proof-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(10px,1.4vw,18px); }
.ddm-x .ddm-so-ba { position:relative; margin:0; border-radius:22px; overflow:hidden; background:var(--paper); box-shadow:0 20px 40px -30px rgb(0 0 0/.45); min-height:320px; touch-action:pan-y; }
.ddm-x .ddm-so-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-so-ba .ddm-so-ba-before { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.ddm-x .ddm-so-ba-line { position:absolute; top:0; bottom:0; left:var(--split); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 12px rgb(0 0 0/.35); pointer-events:none; }
.ddm-x .ddm-so-ba-line i { position:absolute; top:50%; left:50%; width:44px; height:44px; translate:-50% -50%; border-radius:50%; background:var(--sun-sheen,none), var(--sun); box-shadow:var(--sun-depth,none), 0 10px 20px -8px rgb(0 0 0/.5); }
.ddm-x .ddm-so-ba-line i::before, .ddm-x .ddm-so-ba-line i::after { content:""; position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.ddm-x .ddm-so-ba-line i::before { left:11px; rotate:45deg; } .ddm-x .ddm-so-ba-line i::after { right:11px; rotate:-135deg; }
.ddm-x .ddm-so-ba-tag { position:absolute; top:14px; padding:6px 10px; border-radius:8px; background:rgb(17 17 17/.62); color:#fff; font:500 .64rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.ddm-x .ddm-so-ba-tag.is-before { left:14px; } .ddm-x .ddm-so-ba-tag.is-after { right:14px; }
.ddm-x .ddm-so-ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ddm-x .ddm-so-ba:has(.ddm-so-ba-range:focus-visible) { outline:2px solid var(--blue-ink); outline-offset:3px; }
.ddm-x .ddm-so-ba figcaption { position:absolute; left: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; pointer-events:none; }
.ddm-x .ddm-so-ba figcaption b { font-size:.86rem; font-weight:600; }
.ddm-x .ddm-so-ba figcaption small { font-size:.74rem; color:var(--ink-3); }
.ddm-x .ddm-so-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1vw,12px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-so-grid .ddm-se-job { border-radius:14px; }
.ddm-x .ddm-so-grid .ddm-se-job > span { left:6px; right:6px; bottom:6px; padding:6px 9px; border-radius:9px; }
.ddm-x .ddm-so-grid .ddm-se-job b { font-size:.76rem; }
.ddm-x .ddm-so-grid .ddm-se-job small { font-size:.66rem; }

/* ---------- Spots and price (obsidian chapter) ---------- */
.ddm-x .ddm-so-spot { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,64px); align-items:center; padding:clamp(24px,3.2vw,44px); 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-so-spot h3 { font-size:clamp(1.9rem,3.2vw,2.9rem); color:#fff; margin-bottom:14px; }
.ddm-x .ddm-so-spot h3 span { color:var(--sun); }
.ddm-x .ddm-so-spot-copy > p:not(.ddm-se-tier-name) { color:var(--on-dark-2); max-width:46ch; margin-bottom:26px; }
.ddm-x .ddm-so-spot-sets { padding:clamp(18px,2vw,26px); border-radius:18px; background:rgb(255 255 255/.04); box-shadow:inset 0 0 0 1px var(--line-dark); }
.ddm-x .ddm-so-sets-title { margin:0; font:500 .7rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); }
.ddm-x .ddm-so-spot-sets .ddm-se-care-list { margin-top:16px; gap:12px; }
.ddm-x .ddm-so-price .ddm-se-small a, .ddm-x .ddm-so-price .ddm-se-qa a { color:#fff; text-decoration:underline; text-decoration-color:rgb(255 255 255/.4); text-underline-offset:3px; }

/* ---------- Next card: a small ad scene (Grow / Video ads) ---------- */
.ddm-x .ddm-so-mini-ad { position:relative; display:block; aspect-ratio:16 / 10; background:var(--obsidian); }
.ddm-x .ddm-so-mini-ad img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; transition:transform .8s var(--ease); }
.ddm-x .ddm-se-next-card:hover .ddm-so-mini-ad img { transform:scale(1.04); }
.ddm-x .ddm-so-play { position:absolute; left:50%; top:46%; width:56px; height:56px; translate:-50% -50%; border-radius:50%; background:rgb(255 255 255/.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgb(255 255 255/.6); }
.ddm-x .ddm-so-play::after { content:""; position:absolute; left:22px; top:18px; border-left:16px solid #fff; border-block:10px solid transparent; }
.ddm-x .ddm-so-mini-ad b { position:absolute; left:12px; top:12px; padding:5px 9px; border-radius:8px; background:rgb(17 17 17/.6); color:#fff; font:500 .62rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.ddm-x .ddm-so-mini-ad em { position:absolute; left:12px; right:12px; bottom:12px; padding:10px; border-radius:999px; background:var(--sun-sheen,none), var(--sun); box-shadow:var(--sun-depth,none); color:var(--ink); font-style:normal; font-weight:600; font-size:.82rem; text-align:center; }

/* ---------- Phones and tablets ---------- */
@media (max-width:960px) {
  .ddm-x .ddm-so-why-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
  .ddm-x .ddm-so-stage { --cw:min(420px,44vw); --pw:min(240px,30vw); }
  .ddm-x .ddm-so-proof-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-so-ba { aspect-ratio:3 / 2; min-height:0; }
  .ddm-x .ddm-so-spot { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .ddm-x .ddm-so-fan { height:clamp(300px,92vw,420px); }
  .ddm-x .ddm-so-post { width:47%; padding:7px 7px 5px; border-radius:18px; }
  .ddm-x .ddm-so-post img { border-radius:11px; }
  .ddm-x .ddm-so-post-head { font-size:.66rem; padding-bottom:7px; }
  .ddm-x .ddm-so-post-acts svg { width:16px; height:16px; }
  .ddm-x .ddm-so-rec { display:none; }
  /* The stage rides on top while the beats scroll under it */
  .ddm-x .ddm-so-why-grid { grid-template-columns:1fr; gap:0; }
  .ddm-x .ddm-so-stage-col { order:-1; z-index:2; top:var(--nav-h); height:auto; padding:10px 0 26px; margin-inline:-20px; gap:10px;
    background:linear-gradient(180deg,var(--canvas) 82%,rgb(236 236 234/0)); }
  .ddm-x .ddm-so-stage-col { height:340px; justify-content:center; }
  .ddm-x .ddm-so-stage { --cw:min(340px,calc(100vw - 40px)); --pw:146px; }
  .ddm-x .ddm-so-stage:is([data-beat="3"],[data-beat="4"]) { border-radius:30px; }
  .ddm-x .ddm-so-feed { zoom:.56; inset:calc(8px / .56); border-radius:calc(22px / .56); }
  .ddm-x .ddm-so-hud { font-size:.56rem; }
  .ddm-x .ddm-so-hud-rec, .ddm-x .ddm-so-hud-spec, .ddm-x .ddm-so-edit { top:10px; }
  .ddm-x .ddm-so-hud-rec, .ddm-x .ddm-so-edit { left:10px; } .ddm-x .ddm-so-hud-spec { right:10px; }
  .ddm-x .ddm-so-edit em:nth-of-type(3) { display:none; }
  .ddm-x .ddm-so-roll li { width:40px; height:30px; }
  .ddm-x .ddm-so-caption { font-size:.62rem; padding:7px 9px; }
  .ddm-x .ddm-so-beats { padding-bottom:10vh; }
  .ddm-x .ddm-so-beat { min-height:44vh; padding-left:16px; }
  .ddm-x .ddm-so-beat h3 { font-size:1.45rem; }
  .ddm-x .ddm-so-beat p { font-size:1rem; }
  .ddm-x .ddm-so-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- Reduced motion, reduced transparency, forced colors ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-so-shot { transform:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x :is(.ddm-so-post,.ddm-so-ping,.ddm-so-ba figcaption,.ddm-so-play) { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
  .ddm-x .ddm-so-play { background:rgb(17 17 17/.7); }
}
@media (forced-colors:active) {
  .ddm-x :is(.ddm-so-spot,.ddm-so-post,.ddm-so-stage) { border:1px solid CanvasText; }
}

/* ---------- One dark run: the portal flows straight into Spots and FAQ (Daniel, Oct 24; qa/portal-into-dark-howto.md) ----------
   The portal now sits right after the proof, so the dark chapter after it wears the portal's background: the same full
   number field and the same soft grain, with no fade at the seam. */
.ddm-x.ddm-so-page .ddm-portal-inner .ddm-digits { -webkit-mask:linear-gradient(180deg,transparent 0,#000 30%); mask:linear-gradient(180deg,transparent 0,#000 30%); }
.ddm-x .ddm-so-price { margin-top:-1px; padding-top:clamp(0px,2.4vw,36px); }
.ddm-x .ddm-so-price > .ddm-digits { opacity:1; -webkit-mask:linear-gradient(180deg,#000 88%,transparent); mask:linear-gradient(180deg,#000 88%,transparent); }
.ddm-x .ddm-so-price > .ddm-grain { mix-blend-mode:normal; opacity:.14; }
/* Quiet the number field where people read: grey veil on the cards, a soft halo behind the lede and the questions */
.ddm-x .ddm-so-price .ddm-so-spot { background:rgb(34 34 37/.66); }
.ddm-x .ddm-so-price .ddm-so-spot-sets { background:rgb(40 40 43/.7); }
.ddm-x .ddm-so-price .ddm-head > p:not(.ddm-eyebrow) { position:relative; }
.ddm-x .ddm-so-price .ddm-head > p:not(.ddm-eyebrow)::before { content:""; position:absolute; z-index:-1; inset:-48px -72px; pointer-events:none;
  background:radial-gradient(closest-side,rgb(11 11 12/.72) 50%,rgb(11 11 12/0)); }
.ddm-x .ddm-so-price .ddm-se-qa { position:relative; }
.ddm-x .ddm-so-price .ddm-se-qa::before { content:""; position:absolute; z-index:-1; inset:-64px -96px; pointer-events:none;
  background:radial-gradient(farthest-side,rgb(11 11 12/.74) 60%,rgb(11 11 12/0)); }
/* Even spacing: main blocks about 230px apart on desktop; more room above the path bar, less below the Next card */
.ddm-x .ddm-so-price .ddm-se-faq { margin-top:clamp(120px,16vw,230px); }
.ddm-x.ddm-so-page .ddm-se-next { padding-top:clamp(96px,11vw,160px); padding-bottom:clamp(8px,1.5vw,24px); }

/* ---------- A real account we run: LAG Kitchen & Bath (Daniel, Oct 24) ----------
   Profile card (links to their Instagram) beside the heading, then their posted reels as a row of phone-shaped tiles that
   play while on screen. Phones: the row scrolls sideways. */
.ddm-x .ddm-so-lag { padding-top:clamp(56px,7vw,110px); }
.ddm-x .ddm-so-lag-top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 48px; margin-bottom:clamp(28px,4vw,48px); }
.ddm-x .ddm-so-lag-top .ddm-head { margin-bottom:0; max-width:760px; }
.ddm-x .ddm-so-profile { display:grid; grid-template-columns:auto 1fr; gap:14px 14px; align-items:center; min-width:min(100%,340px); padding:18px 20px; border-radius:22px; background:var(--paper);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.07), 0 24px 48px -32px rgb(0 0 0/.3); transition:transform .5s var(--ease); }
.ddm-x .ddm-so-profile:hover { transform:translateY(-3px); }
.ddm-x .ddm-so-avatar { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#1E3FAE; color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.04em; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--sun); }
.ddm-x .ddm-so-profile-id { display:grid; line-height:1.25; }
.ddm-x .ddm-so-profile-id b { font-weight:600; }
.ddm-x .ddm-so-profile-id small { color:var(--ink-3); font-size:.82rem; }
.ddm-x .ddm-so-profile-stats { grid-column:1 / -1; display:flex; gap:28px; padding:12px 0; border-block:1px solid var(--line); }
.ddm-x .ddm-so-profile-stats span { display:grid; line-height:1.1; }
.ddm-x .ddm-so-profile-stats b { font-size:1.5rem; font-weight:600; letter-spacing:-.03em; }
.ddm-x .ddm-so-profile-stats small { color:var(--ink-3); font-size:.78rem; }
.ddm-x .ddm-so-profile .ddm-link { grid-column:1 / -1; justify-self:start; }
.ddm-x .ddm-so-reels { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-so-reel { position:relative; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:9 / 16; background:#111; box-shadow:0 24px 44px -28px rgb(0 0 0/.55); }
.ddm-x .ddm-so-reel :is(video,img) { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-so-reel::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 62%,rgb(0 0 0/.6)); }
.ddm-x .ddm-so-reel-ico { position:absolute; z-index:1; top:10px; right:10px; width:22px; height:22px; border-radius:7px; background:rgb(0 0 0/.35); box-shadow:inset 0 0 0 1.6px #fff; }
.ddm-x .ddm-so-reel-ico::after { content:""; position:absolute; left:8px; top:6px; border-left:8px solid #fff; border-block:5px solid transparent; }
.ddm-x .ddm-so-reel figcaption { position:absolute; z-index:1; left:12px; right:12px; bottom:11px; display:grid; color:#fff; line-height:1.25; }
.ddm-x .ddm-so-reel figcaption b { font-size:.86rem; font-weight:600; }
.ddm-x .ddm-so-reel figcaption small { font-size:.72rem; color:rgb(255 255 255/.8); }
@media (max-width:960px) {
  .ddm-x .ddm-so-reels { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:clamp(150px,28vw,200px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; }
  .ddm-x .ddm-so-reels li { scroll-snap-align:start; }
}
@media (max-width:640px) {
  .ddm-x .ddm-so-reels { grid-auto-columns:46vw; margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px; }
}

/* ---------- 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-so-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-so-page .ddm-footer { border-top:0; }
.ddm-x.ddm-so-page .ddm-footer::before { display:none; }
.ddm-x .ddm-so-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-so-sites-head .ddm-head { margin:0; }
.ddm-x .ddm-so-sites-head h2 { margin:0; }
.ddm-x .ddm-so-sites-head > .ddm-link { margin-bottom:10px; }
.ddm-x .ddm-so-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-so-sites-track { display:flex; gap:var(--gap); flex:none; margin:0; padding:0; list-style:none; animation:ddm-so-sites 60s linear infinite; }
.ddm-x .ddm-so-sites:not(.is-on) .ddm-so-sites-track { animation-play-state:paused; } /* only runs while on screen */
@keyframes ddm-so-sites { to { translate:calc(-100% - var(--gap)) 0; } }
.ddm-x .ddm-so-sites-item { position:relative; flex:none; width:clamp(260px,30vw,460px); }
.ddm-x .ddm-so-sites-card { position:absolute; inset:0; z-index:8; border-radius:14px; }
.ddm-x .ddm-so-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ddm-x .ddm-so-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-so-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-so-sites-bar i { width:8px; height:8px; border-radius:50%; background:rgb(0 0 0/.14); }
.ddm-x .ddm-so-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-so-sites-win img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-so-sites-cap { display:flex; flex-direction:column; gap:2px; padding:14px 4px 0; }
.ddm-x .ddm-so-sites-cap b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-so-sites-cap small { font:500 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-so-sites-item:is(:hover,:focus-within) .ddm-so-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-so-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-so-sites-win.ddm-light-double::after { opacity:0; transition:opacity .45s var(--ease); }
.ddm-x .ddm-so-sites-item:is(:hover,:focus-within) .ddm-so-sites-win.ddm-light-double::after { opacity:1; }
.ddm-x .ddm-so-sites-item:has(.ddm-so-sites-card:focus-visible) .ddm-so-sites-win { outline:2px solid var(--blue-ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-so-sites-track { animation:none; }
  .ddm-x .ddm-so-sites-track[aria-hidden] { display:none; }
  .ddm-x .ddm-so-sites-view { overflow-x:auto; -webkit-mask:none; mask:none; padding-inline:var(--gutter,20px); }
}