/* Deft Digital Media — Home ticker, 03 Services, included checks and footer edge (October 17, 2026, light overhaul).
   Same language as the showcase and How it works (design-system/DECISIONS.md 5b): one white light from the upper
   left, contour traces, switch-on, blur focus and backlit glass. Sunflower stays the only fill; blue is a trace only.
   scripts/sections.js adds the motion; without it everything is visible and lit. Nothing here loops by itself. */

/* ---------- Ticker: runs on its own loop (scripts/sections.js), each word switches on as it crosses the middle ---------- */
.ddm-x .ddm-ticker-track { animation:none; will-change:transform; transform:translate3d(var(--tx,0px),0,0); }
.ddm-x .ddm-ticker.is-live .ddm-ticker-set > * { opacity:.32; }
.ddm-x .ddm-ticker.is-live .ddm-ticker-set > .is-lit { opacity:1; animation:ddm-word-on .8s steps(1,end) 1 both; }
@keyframes ddm-word-on { 0% { opacity:.32 } 10% { opacity:.85 } 18% { opacity:.4 } 30%,100% { opacity:1 } }
/* A thin light along the band's top edge, from the upper left */
.ddm-x .ddm-ticker::after { content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none; background:linear-gradient(90deg,rgb(255 255 255/.85),rgb(255 255 255/0) 60%); }

/* ---------- Services: shared row, screen and pane parts (the dark 02 layout is further down) ---------- */
.ddm-x .ddm-services { overflow:clip; }
.ddm-x .ddm-svc { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,88px); align-items:start; }
.ddm-x .ddm-svc-row { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:6px 16px; padding:30px 0 32px; border-top:1px solid var(--line); transition:filter .5s var(--ease), opacity .5s var(--ease); }
.ddm-x .ddm-svc-row:last-child { border-bottom:1px solid var(--line); }
/* A short light runs down the row's left edge when it takes focus */
.ddm-x .ddm-svc-row::before { content:""; position:absolute; left:-18px; top:30px; bottom:32px; width:1.5px; border-radius:2px; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(180deg,rgb(59 91 255/0),rgb(125 147 255/.85) 55%,#fff 80%,rgb(59 91 255/0)); transition:transform .7s var(--ease); }
.ddm-x .ddm-svc.is-live .ddm-svc-row.is-on::before { transform:scaleY(1); }
.ddm-x .ddm-svc.is-live .ddm-svc-row:not(.is-on) { filter:blur(1.2px) saturate(.6); opacity:.5; }
.ddm-x .ddm-svc-no { margin:6px 0 0; font:500 .75rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); transition:color .4s; }
.ddm-x .ddm-svc.is-live .ddm-svc-row.is-on .ddm-svc-no { color:var(--blue-ink); }
.ddm-x .ddm-svc-row h3 { font-size:clamp(1.6rem,2.4vw,2.2rem); margin-bottom:12px; }
.ddm-x .ddm-svc-row p:not(.ddm-svc-no):not(.ddm-tags) { color:var(--ink-2); max-width:34em; }
.ddm-x .ddm-tags { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px; }
.ddm-x .ddm-tags span { padding:6px 12px; border-radius:999px; background:rgb(17 17 17/.05); font-size:.82rem; font-weight:500; }

/* Dark bezel, backlit like the showcase frames */
.ddm-x .ddm-svc-screen { position:relative; border-radius:20px; padding:10px; background:#0d0d0e;
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.18), 0 0 0 1px rgb(17 17 17/.5), 0 40px 80px -36px rgb(0 0 0/.55), 0 0 60px -20px rgb(255 255 255/.9); }
.ddm-x .ddm-svc-bar { display:flex; align-items:center; gap:6px; padding:4px 8px 12px; }
.ddm-x .ddm-svc-bar i { width:8px; height:8px; border-radius:50%; background:rgb(255 255 255/.18); }
.ddm-x .ddm-svc-bar span { margin-left:10px; font:500 .72rem/1 var(--mono); letter-spacing:.03em; color:#b9b9b4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-svc-panes { position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:12px; background:#050506; box-shadow:inset 0 0 0 1px rgb(255 255 255/.5); isolation:isolate; }
.ddm-x .ddm-svc-panes::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.6), inset 0 0 28px 4px rgb(255 255 255/.16); }
.ddm-x .ddm-svc-pane { position:absolute; inset:0; visibility:hidden; }
.ddm-x .ddm-svc-pane.is-on { visibility:visible; }
.ddm-x .ddm-svc-pane img { width:100%; height:100%; object-fit:cover; object-position:50% 0; }
/* Switch-on: a dark veil flickers away whenever the pane changes */
.ddm-x .ddm-svc-pane::before { content:""; position:absolute; inset:0; z-index:3; background:#050506; opacity:0; pointer-events:none; }
.ddm-x .ddm-svc-pane.is-flick::before { animation:ddm-switch-on 1.1s steps(1,end) 1 both; }

/* Print pane (Branding & print page widget, Oct 24): our three real foil cards on obsidian; a light sweep crosses each foil */
.ddm-x .ddm-svc-print { display:grid; grid-template-rows:1fr auto; padding:7% 6% 5%; background:radial-gradient(90% 80% at 60% 20%,#1d1d20,#08080a 75%); }
.ddm-x .ddm-svc-deck { position:relative; }
.ddm-x .ddm-svc-fc { position:absolute; overflow:hidden; border-radius:6px; box-shadow:0 0 0 1px rgb(255 255 255/.08), 0 18px 30px -14px rgb(0 0 0/.9); }
.ddm-x .ddm-svc-pane .ddm-svc-fc img { display:block; width:100%; height:auto; object-fit:initial; }
.ddm-x .ddm-svc-fc i { position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgb(255 240 200/.4) 48%,transparent 60%); translate:-110% 0; }
.ddm-x .ddm-svc-fc.is-glass { left:4%; top:6%; width:21%; rotate:-8deg; }
.ddm-x .ddm-svc-fc.is-scaffold { right:3%; top:0; width:47%; rotate:5deg; --n:1; }
.ddm-x .ddm-svc-fc.is-interiors { left:24%; bottom:0; width:50%; rotate:-2deg; z-index:2; --n:2; }
.ddm-x .ddm-svc-cap { margin:8px 0 0; font:500 .58rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:rgb(255 255 255/.5); text-align:right; }

/* Shoot pane (Video ads page widget, Oct 24): the director's monitor on set, with the ad it turns into */
.ddm-x .ddm-svc-shoot { background:radial-gradient(90% 80% at 30% 20%,#1d1d20,#08080a 75%); }
.ddm-x .ddm-svc-mon { position:absolute; left:6%; top:12%; width:64%; aspect-ratio:16 / 10.5; border-radius:10px; background:#050506; box-shadow:0 0 0 1px rgb(255 255 255/.14), 0 24px 40px -22px rgb(0 0 0/.9); color:rgb(255 255 255/.85); font:500 .5rem/1.3 var(--mono); }
.ddm-x .ddm-svc-mon-top { position:absolute; left:8px; right:8px; top:6px; display:flex; justify-content:space-between; align-items:center; }
.ddm-x .ddm-svc-mon-top em { display:flex; align-items:center; gap:4px; font-style:normal; }
.ddm-x .ddm-svc-mon-top em i { width:6px; height:6px; border-radius:50%; background:#E5484D; }
.ddm-x .ddm-svc-mon-top b { font-weight:500; letter-spacing:.06em; }
.ddm-x .ddm-svc-mon-side { position:absolute; left:8px; top:28%; display:grid; gap:1px; }
.ddm-x .ddm-svc-mon-side small { margin-top:4px; font-size:.42rem; color:rgb(255 255 255/.45); }
.ddm-x .ddm-svc-mon-frame { position:absolute; left:50%; top:14%; bottom:13%; aspect-ratio:3 / 4; translate:-50% 0; overflow:hidden; }
.ddm-x .ddm-svc-pane .ddm-svc-mon-frame video { display:block; width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-svc-mon-frame i { position:absolute; inset:6px; border:1px solid rgb(255 255 255/.55);
  -webkit-mask:linear-gradient(#000 0 0) top left/10px 10px no-repeat, linear-gradient(#000 0 0) top right/10px 10px no-repeat, linear-gradient(#000 0 0) bottom left/10px 10px no-repeat, linear-gradient(#000 0 0) bottom right/10px 10px no-repeat;
  mask:linear-gradient(#000 0 0) top left/10px 10px no-repeat, linear-gradient(#000 0 0) top right/10px 10px no-repeat, linear-gradient(#000 0 0) bottom left/10px 10px no-repeat, linear-gradient(#000 0 0) bottom right/10px 10px no-repeat; }
.ddm-x .ddm-svc-mon-bot { position:absolute; left:8px; bottom:5px; color:rgb(255 255 255/.55); }
.ddm-x .ddm-svc-ad { position:absolute; right:5%; top:20%; width:32%; overflow:hidden; border-radius:9px; background:#fff; box-shadow:0 20px 34px -16px rgb(0 0 0/.9); z-index:2; }
.ddm-x .ddm-svc-pane .ddm-svc-ad img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.ddm-x .ddm-svc-ad-h { display:flex; align-items:center; gap:5px; padding:5px 7px; font-size:.5rem; font-weight:600; line-height:1.2; color:var(--ink); }
.ddm-x .ddm-svc-ad-h > i { width:11px; height:11px; flex:none; border-radius:50%; background:var(--ink); box-shadow:0 0 0 1.5px var(--sun); }
.ddm-x .ddm-svc-ad-h small { display:block; font-size:.44rem; font-weight:400; color:var(--ink-3); }
.ddm-x .ddm-svc-ad-f { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:5px 7px; font-size:.46rem; color:var(--ink-2); }
.ddm-x .ddm-svc-ad-f em { position:relative; overflow:hidden; padding:3px 6px; border-radius:99px; background:var(--sun); color:var(--ink); font-style:normal; font-weight:600; white-space:nowrap; }
.ddm-x .ddm-svc-ad-f em i { position:absolute; left:50%; top:50%; width:18px; height:18px; translate:-50% -50%; border-radius:50%; background:rgb(17 17 17/.3); opacity:0; }

/* They come alive once the wall switches on: cards deal in and catch the light, the ad slides out of the monitor and gets a tap */
.ddm-x .ddm-svc-wall.is-lit .ddm-svc-fc { animation:ddm-svc-deal .8s cubic-bezier(.3,1.25,.5,1) both, ddm-svc-bob 6s ease-in-out infinite; animation-delay:calc(.5s + var(--n,0) * 140ms), calc(1.6s + var(--n,0) * 700ms); }
.ddm-x .ddm-svc-wall.is-lit .ddm-svc-fc i { animation:ddm-svc-sweep 1.6s ease both; animation-delay:calc(1.4s + var(--n,0) * 220ms); }
.ddm-x .ddm-svc-wall.is-lit [data-svc-screen="brand"].is-on:hover .ddm-svc-fc i { animation:ddm-svc-sweep2 1.4s ease both; animation-delay:calc(var(--n,0) * 160ms); }
.ddm-x .ddm-svc-wall.is-lit .ddm-svc-mon-top em i { animation:ddm-svc-blink 1.2s steps(1) infinite; }
.ddm-x .ddm-svc-wall.is-lit .ddm-svc-ad { animation:ddm-svc-slide .7s var(--ease) 1.5s both; }
.ddm-x .ddm-svc-wall.is-lit .ddm-svc-ad-f em i { animation:ddm-svc-tap .6s ease-out 2.6s both; }
@keyframes ddm-svc-deal { from { opacity:0; translate:0 40px; rotate:0deg; } }
@keyframes ddm-svc-bob { 50% { translate:0 -5px; } }
@keyframes ddm-svc-sweep { to { translate:110% 0; } }
@keyframes ddm-svc-sweep2 { from { translate:-110% 0; } to { translate:110% 0; } }
@keyframes ddm-svc-blink { 50% { opacity:.2; } }
@keyframes ddm-svc-slide { from { opacity:0; translate:-40px 0; } }
@keyframes ddm-svc-tap { 0% { opacity:.9; scale:.2; } 100% { opacity:0; scale:2.6; } }

/* Included: a glass package card; its checks switch on one by one */
.ddm-x .ddm-pack { display:flex; flex-wrap:wrap; gap:32px 64px; align-items:flex-start; margin-top:clamp(56px,8vw,104px); padding:clamp(26px,3.6vw,48px); border-radius:24px; background:rgb(255 255 255/.55); }
.ddm-x .ddm-pack-rim { position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.ddm-x .ddm-pack-copy { flex:1 1 320px; }
.ddm-x .ddm-pack-copy .ddm-svc-no { margin:0 0 22px; }
.ddm-x .ddm-pack h3 { font-size:clamp(1.7rem,2.6vw,2.4rem); margin-bottom:14px; }
.ddm-x .ddm-pack-copy > p:not(.ddm-svc-no) { color:var(--ink-2); }
.ddm-x .ddm-checklist { position:relative; z-index:2; flex:1 1 380px; list-style:none; margin:0; padding:0; }
.ddm-x .ddm-checklist li { display:flex; gap:14px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); font-weight:500; }
.ddm-x .ddm-checklist li:last-child { border-bottom:0; }
.ddm-x .ddm-checklist li::before { content:''; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m7 12.5 3.2 3.2L17 9'/%3E%3C/svg%3E") center/16px no-repeat; }
.ddm-x .ddm-pack.is-waiting .ddm-checklist li::before { background:transparent; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.2); }
.ddm-x .ddm-pack.is-lighting .ddm-checklist li::before { animation:ddm-check-on .9s steps(1,end) calc(var(--k,0) * 140ms + 500ms) 1 both; }
@keyframes ddm-check-on { 0% { background-color:transparent; background-size:0 0; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.2) } 12% { background-color:var(--sun); background-size:16px } 20% { background-color:transparent; background-size:0 0 } 34%,100% { background-color:var(--sun); background-size:16px; box-shadow:0 0 12px rgb(255 199 0/.5) } }

/* ---------- The dark chapter: 02 Services + 03 How it works (October 18, 2026) ----------
   One continuous background for both sections (Daniel): obsidian, one grain and How it works' dark number field, held
   on screen by a sticky viewport layer so it runs unbroken through both (and through How it works' pin). No section
   paints its own background, so there are no containers, gaps or colour steps between them.
   The entrance: Snapshots ends on the light page and the chapter arrives as a card at content width that opens to
   full bleed as it scrolls up (--open 0 to 1 on .ddm-dark, from scripts/sections.js; the idea comes from Galaxy's
   closets photo). The same clip shapes the background and the Services content; around the closed card you see
   Snapshots' own ground, which extends under it (styles/showcase.css). Corners keep their full radius until the
   last stretch. Without motion: open. */
.ddm-x .ddm-dark { --open:1; --svc-r:calc(clamp(24px,3vw,44px) * min(1, (1 - var(--open)) * 12));
  --svc-clip-t:calc((1 - var(--open)) * 56px); --svc-clip-x:calc((1 - var(--open)) * max(20px, (100vw - 1320px) / 2));
  position:relative; z-index:1; color:var(--on-dark); }
.ddm-x .ddm-dark-bg { position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--obsidian);
  clip-path:inset(var(--svc-clip-t) var(--svc-clip-x) 0 round var(--svc-r)); }
/* One white light from the upper left where the chapter begins */
.ddm-x .ddm-dark-bg::before { content:""; position:absolute; left:0; right:0; top:0; height:120vh; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 12% 0%,rgb(255 255 255/.08),transparent 70%); }
.ddm-x .ddm-dark-view { position:sticky; top:0; height:100vh; overflow:hidden; }
/* The radial falloff (ellipse 70% 80% at 80% 50%, solid to 15%, gone at 70%) is applied per digit in home.js, so the digit seam can reach across the page */
.ddm-x .ddm-dark-view .ddm-digits { opacity:.7; }
.ddm-x .ddm-dark-view .ddm-grain { mix-blend-mode:overlay; opacity:.5; }
.ddm-x .ddm-dark.is-open .ddm-dark-bg, .ddm-x .ddm-dark.is-open .ddm-svc-frame { clip-path:none; }
/* How it works keeps its own light and layout but sits on the shared ground */
.ddm-x .ddm-dark .ddm-hw { background:transparent; z-index:1; }

.ddm-x .ddm-svc-dark { --svc-gap:clamp(14px,2vw,28px); position:relative; z-index:1; }
.ddm-x .ddm-svc-after { display:flow-root; padding-bottom:clamp(32px,3.5vw,48px); }
/* The card's content shares the clip (open at the bottom, so no bottom corners show) */
.ddm-x .ddm-svc-frame { position:relative; clip-path:inset(var(--svc-clip-t) var(--svc-clip-x) -100vh round var(--svc-r)); }
/* Glass rim while the card enters and opens (Daniel, Oct 18): one crisp 1px white line with a soft white glow, drawn only
   on the visible edge (up the left side, across the top, down the right; sections.js draws the path). It sits outside the
   clip, follows the same inset and radius, and fades out as the card reaches full bleed. The blue and Sunflower lights that
   travelled it with the scroll were removed at Daniel's request (archive/rim-pre-white-only-2026-10-18, Idea bank). */
.ddm-x .ddm-svc-open { position:relative; }
/* Only one screen tall (its bottom is always below the view while it shows) and only rendered while the card is opening */
.ddm-x .ddm-svc-rim { display:none; position:absolute; z-index:3; pointer-events:none; inset:var(--svc-clip-t) var(--svc-clip-x) auto;
  height:110vh; border-radius:var(--svc-r); opacity:calc(min(1, var(--open) * 8) * min(1, (1 - var(--open)) * 5)); }
.ddm-x .ddm-svc-rim-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke-linecap:round;
  }
.ddm-x .ddm-rim-base { stroke:#fff; stroke-width:1; filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgb(255 255 255/.7)); }
.ddm-x .ddm-dark.is-opening .ddm-svc-rim { display:block; }
.ddm-x .ddm-dark.is-opening .ddm-svc-wall { will-change:transform; }

.ddm-x .ddm-svc-frame-in { padding-block:clamp(88px,10vw,148px) 0; }
.ddm-x .ddm-svc-dark .ddm-head { opacity:calc(.25 + var(--open) * .75); }
.ddm-x .ddm-svc-dark .ddm-eyebrow { color:var(--on-dark-2); }
.ddm-x .ddm-svc-dark h2 { color:#fff; }
.ddm-x .ddm-svc-dark h2 > span { color:var(--sun); }
.ddm-x .ddm-svc-dark .ddm-head > p:not(.ddm-eyebrow) { color:var(--on-dark-2); max-width:34em; }

/* The wall: three backlit screens, slightly zoomed while the frame is closed and settling as it opens */
.ddm-x .ddm-svc-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--svc-gap); margin-top:clamp(44px,6vw,84px);
  transform:scale(calc(1 + (1 - var(--open)) * .06)); transform-origin:50% 0; }
.ddm-x .ddm-svc-wall .ddm-svc-screen { padding:8px; border-radius:16px; transition:filter .5s var(--ease), opacity .5s var(--ease);
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.16), 0 30px 70px -30px rgb(0 0 0/.9), 0 0 50px -24px rgb(255 255 255/.55); }
.ddm-x .ddm-svc-wall .ddm-svc-bar { padding:2px 6px 9px; }
.ddm-x .ddm-svc-wall .ddm-svc-pane { visibility:visible; }
.ddm-x .ddm-svc-wall .ddm-svc-panes { border-radius:10px; }
/* Switch-on: dark until the frame has opened, then each screen flickers on in turn */
.ddm-x .ddm-svc-wall .ddm-svc-screen:nth-child(2) { --i:1; }
.ddm-x .ddm-svc-wall .ddm-svc-screen:nth-child(3) { --i:2; }
.ddm-x .ddm-svc-wall.is-waiting .ddm-svc-pane::before { opacity:.84; }
.ddm-x .ddm-svc-wall.is-lit .ddm-svc-pane::before { animation:ddm-switch-on 1.1s steps(1,end) calc(var(--i,0) * 220ms + 80ms) 1 both; }

/* The services, each under its own screen */
.ddm-x .ddm-svc-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--svc-gap); margin-top:clamp(28px,3vw,44px); }
.ddm-x .ddm-svc-cols .ddm-svc-row { grid-template-columns:1fr; gap:0; padding:22px 0 0; border:0; border-top:1px solid var(--line-dark); }
.ddm-x .ddm-svc-cols .ddm-svc-row::before { left:0; right:auto; top:-1px; bottom:auto; width:100%; height:1.5px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,rgb(59 91 255/0),rgb(125 147 255/.85) 45%,#fff 80%,rgb(59 91 255/0)); }
.ddm-x .ddm-svc-dark .ddm-svc-no { margin:0 0 14px; color:var(--on-dark-2); }
.ddm-x .ddm-svc-cols .ddm-svc-row h3 { color:#fff; font-size:clamp(1.4rem,2vw,1.9rem); }
.ddm-x .ddm-svc-cols .ddm-svc-row p:not(.ddm-svc-no):not(.ddm-tags) { color:var(--on-dark-2); }
.ddm-x .ddm-svc-dark .ddm-tags span { background:rgb(255 255 255/.07); color:var(--on-dark); }
/* Tags that link to their own page (Get found, get seen, grow card): same pill, with an arrow and a hover */
.ddm-x .ddm-svc-dark .ddm-tags a { padding:6px 12px; border-radius:999px; background:rgb(255 255 255/.07); color:var(--on-dark); font-size:.82rem; font-weight:500; text-decoration:none; transition:background .25s ease, color .25s ease; }
.ddm-x .ddm-svc-dark .ddm-tags a::after { content:" \2192"; color:var(--sun); }
.ddm-x .ddm-svc-dark .ddm-tags a:hover { background:rgb(255 255 255/.14); color:#fff; }
.ddm-x .ddm-svc-dark .ddm-tags a:focus-visible { outline:2px solid var(--blue-light); outline-offset:2px; }
/* Focus: pointing at a service (or its screen) lights it and softens the other two */
.ddm-x .ddm-svc-dark[data-focus] .ddm-svc-row.is-on::before { transform:scaleX(1); }
.ddm-x .ddm-svc-dark[data-focus] .ddm-svc-row.is-on .ddm-svc-no { color:var(--blue-light); }
.ddm-x .ddm-svc-dark[data-focus] :is(.ddm-svc-row,.ddm-svc-wall .ddm-svc-screen):not(.is-on) { filter:blur(1.2px) saturate(.6); opacity:.45; }

/* Included, as dark glass */
.ddm-x .ddm-svc-dark .ddm-pack { background:rgb(255 255 255/.035); -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.14), inset 0 0 0 1px rgb(255 255 255/.07), 0 30px 60px -30px rgb(0 0 0/.8); }
.ddm-x .ddm-svc-dark .ddm-pack::before { opacity:.35; }
.ddm-x .ddm-svc-dark .ddm-pack h3 { color:#fff; }
.ddm-x .ddm-svc-dark .ddm-pack-copy > p:not(.ddm-svc-no) { color:var(--on-dark-2); }
.ddm-x .ddm-svc-dark .ddm-checklist li { border-bottom-color:var(--line-dark); color:var(--on-dark); }
.ddm-x .ddm-svc-dark .ddm-pack.is-waiting .ddm-checklist li::before { box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.25); }
/* The dark runs straight on into How it works */
.ddm-x .ddm-svc-dark ~ .ddm-hw { padding-top:clamp(48px,6vw,96px); }
/* Pinned, the stage already clears the nav and centres itself, so no extra top padding (Daniel: close the gap, Oct 18) */
.ddm-x .ddm-svc-dark ~ .ddm-hw.hw-pinned { padding-top:0; }

/* ---------- Footer: one light runs along the top edge as you arrive ---------- */
.ddm-x .ddm-footer { position:relative; }
.ddm-x .ddm-footer::before { content:""; position:absolute; left:0; right:0; top:-1px; height:1.5px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,transparent 0 30%,rgb(59 91 255/.35) 40%,rgb(125 147 255/.85) 46%,#fff 49%,rgb(255 199 0/.9) 51%,transparent 56%) 0 0/300% 100% no-repeat; background-position:100% 0; }
.ddm-x .ddm-footer.is-traced::before { animation:ddm-edge-run 2.1s cubic-bezier(.5,.05,.3,1) .2s 1 both; }
@keyframes ddm-edge-run { 0% { opacity:0; background-position:100% 0 } 10% { opacity:1 } 85% { opacity:1 } 100% { opacity:0; background-position:0% 0 } }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .ddm-x .ddm-svc { grid-template-columns:1fr; }
  /* Phones: the screen rides along at the top while the rows pass under it; the row nearest the middle takes focus */
  .ddm-x .ddm-svc-screen { padding:7px; border-radius:16px; }
  .ddm-x .ddm-svc-bar { padding:2px 6px 8px; }
  .ddm-x .ddm-svc-row::before { left:-12px; }
}
@media (max-width:900px) {
  /* Tablets and phones: the screens overlap as a small collage; the services stack under it */
  .ddm-x .ddm-svc-wall { grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; }
  .ddm-x .ddm-svc-wall .ddm-svc-screen:nth-child(1) { grid-column:1 / 11; grid-row:1; }
  .ddm-x .ddm-svc-wall .ddm-svc-screen:nth-child(2) { grid-column:1 / 7; grid-row:2; margin:-14% 0 0 4%; z-index:1; }
  .ddm-x .ddm-svc-wall .ddm-svc-screen:nth-child(3) { grid-column:6 / 13; grid-row:2; margin-top:-26%; z-index:2; }
  .ddm-x .ddm-svc-cols { grid-template-columns:1fr; gap:0; }
  .ddm-x .ddm-svc-cols .ddm-svc-row { padding:24px 0 8px; }
}
@media (max-width:620px) {
  .ddm-x .ddm-svc-wall .ddm-svc-screen { padding:5px; border-radius:11px; }
  .ddm-x .ddm-svc-wall .ddm-svc-bar { padding:1px 4px 5px; }
  .ddm-x .ddm-svc-wall .ddm-svc-bar span { font-size:.55rem; margin-left:4px; }
  .ddm-x .ddm-svc-wall .ddm-svc-bar i { width:5px; height:5px; }
          .ddm-x .ddm-svc-row { grid-template-columns:1fr; padding:26px 0 28px; }
  .ddm-x .ddm-svc-mon-side, .ddm-x .ddm-svc-mon-bot, .ddm-x .ddm-svc-cap { display:none; }
  .ddm-x .ddm-svc-mon { width:66%; font-size:.42rem; }
  .ddm-x .ddm-svc-ad { width:34%; }
}

/* ---------- Preferences: lit and still ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-ticker-track { transform:none; }
  .ddm-x .ddm-ticker .ddm-ticker-set > * { opacity:1 !important; }
  .ddm-x .ddm-svc-row, .ddm-x .ddm-svc-wall .ddm-svc-screen { filter:none !important; opacity:1 !important; }
  .ddm-x .ddm-dark { --open:1 !important; }
  .ddm-x .ddm-svc-rim { display:none; }
  .ddm-x .ddm-svc-wall .ddm-svc-pane::before { animation:none !important; opacity:0 !important; }
  .ddm-x .ddm-svc-wall .ddm-svc-pane *, .ddm-x .ddm-svc-wall .ddm-svc-pane *::before { animation:none !important; }
  .ddm-x .ddm-pack .ddm-checklist li::before { animation:none !important; }
  .ddm-x .ddm-footer::before { display:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-pack { background:var(--paper); }
  .ddm-x .ddm-svc-dark .ddm-pack { background:#161617; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-svc-row { filter:none !important; opacity:1 !important; }
  .ddm-x .ddm-svc-row::before, .ddm-x .ddm-footer::before, .ddm-x .ddm-ticker::after { display:none; }
  .ddm-x .ddm-svc-screen, .ddm-x .ddm-pack { border:1px solid CanvasText; }
}
.ddm-x .ddm-svc-cta { align-self:flex-start; margin-top:6px; }
.ddm-x .ddm-svc-cta:hover .ddm-arrow { transform:translate(2px,-2px); }

/* Digit seam (Daniel, Oct 18): between Services and How it works, one or two rows of the dark number field itself light
   up unevenly in Sunflower once the gap scrolls into place. This marker only tells the field where the gap is (home.js). */
.ddm-x .ddm-seam { position:relative; height:0; top:clamp(12px, 2.4vw + 8px, 48px); }