/* Deft Digital Media — Home "How it works" (October 17, 2026, light overhaul). The preview offer, delivery and
   ownership told as one obsidian chapter right after the lens portal. Four backlit glass panels on one rail; on wide
   screens the chapter pins, a single light travels down the rail to the open step, the others soften, and the big
   readout switches on like a display each time it changes. Base layout (no JS, reduced motion, phones) is a stacked,
   fully readable list. Follows design-system/DECISIONS.md 5b: one white light, blue only at its edge, Sunflower as
   text only on obsidian, nothing loops by itself. */

.ddm-x .ddm-hw { position:relative; padding-block:clamp(88px,11vw,160px); }
/* The number field fades in from the top edge, so the portal's dark screen flows into this chapter without a seam */
.ddm-x .ddm-hw .ddm-digits { -webkit-mask:linear-gradient(180deg,transparent 0,#000 26%),radial-gradient(ellipse 60% 75% at 22% 62%,#000 10%,transparent 70%); -webkit-mask-composite:source-in;
  mask:linear-gradient(180deg,transparent 0,#000 26%) intersect,radial-gradient(ellipse 60% 75% at 22% 62%,#000 10%,transparent 70%); }
/* Upper-left light falling into the chapter */
.ddm-x .ddm-hw::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 55% 40% at 8% 34%,rgb(255 255 255/.06),transparent 70%); }
.ddm-x .ddm-hw-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,104px); align-items:start; }
.ddm-x .ddm-hw-head > p:not(.ddm-eyebrow) { max-width:30em; margin-top:24px; color:var(--on-dark-2); font-size:clamp(1.02rem,1.3vw,1.16rem); }

/* ---------- Readout: a display that switches on (only shown when pinned) ---------- */
.ddm-x .ddm-hw-readout, .ddm-x .ddm-hw-meter { display:none; }
.ddm-x .ddm-hw-readout { position:relative; align-items:baseline; gap:14px; margin-top:clamp(20px,4vh,48px); color:#fff; }
.ddm-x .ddm-hw-num { font:700 clamp(6rem,13vw,13rem)/.8 var(--sans); letter-spacing:-.07em; font-variant-numeric:tabular-nums; }
.ddm-x .ddm-hw-num { position:relative; z-index:1; text-shadow:0 0 28px rgb(255 255 255/.28), 0 0 2px rgb(255 255 255/.6); }
.ddm-x .ddm-hw-num.is-flick { animation:ddm-hw-flick .9s steps(1,end) 1 both; }
@keyframes ddm-hw-flick { 0% { opacity:.08 } 8% { opacity:.7 } 13% { opacity:.12 } 21% { opacity:.9 } 27% { opacity:.35 } 36%,100% { opacity:1 } }
.ddm-x .ddm-hw-num.ddm-hw-word { font-size:clamp(4rem,8.6vw,9rem); letter-spacing:-.06em; white-space:nowrap; }
.ddm-x .ddm-hw-meter { gap:6px; margin-top:28px; max-width:360px; }
.ddm-x .ddm-hw-meter i { flex:1; height:3px; border-radius:3px; background:rgb(255 255 255/.12); transition:background .5s var(--ease), box-shadow .5s var(--ease); }
.ddm-x .ddm-hw-meter i.is-lit { background:#fff; box-shadow:0 0 10px rgb(255 255 255/.55); }

/* ---------- Rail + steps ---------- */
.ddm-x .ddm-hw-track { position:relative; padding-left:34px; }
.ddm-x .ddm-hw-line { position:absolute; left:8px; top:10px; bottom:10px; width:1px; background:rgb(255 255 255/.12); }
.ddm-x .ddm-hw-lit { position:absolute; left:0; top:0; width:1px; height:var(--bead,0px); background:linear-gradient(180deg,transparent,rgb(125 147 255/.55) 55%,#fff); transition:height .7s var(--ease); }
.ddm-x .ddm-hw-bead { position:absolute; left:-3px; top:var(--bead,0px); width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 0 3px rgb(255 255 255/.08), 0 0 14px 2px rgb(255 255 255/.75), 0 -10px 18px rgb(125 147 255/.45); transition:top .7s var(--ease), opacity .4s; }
.ddm-x .hw-railed .ddm-hw-bead { opacity:1; }

.ddm-x .ddm-hw-steps { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
/* Backlit dark glass panel */
.ddm-x .ddm-hw-step { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:8px 18px; padding:24px 26px 26px; border-radius:18px;
  /* No backdrop blur (Oct 18, speed): a dark tint keeps the moving number field quiet behind the panels instead */
  background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(255 255 255/.02)),rgb(10 10 12/.72);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.14), inset 0 0 0 1px rgb(255 255 255/.07);
  transition:box-shadow .6s var(--ease), background .6s var(--ease), filter .6s var(--ease), opacity .6s var(--ease); }
.ddm-x .ddm-hw-step.is-on, .ddm-x .ddm-hw:not(.hw-ready) .ddm-hw-step {
  background:linear-gradient(180deg,rgb(255 255 255/.09),rgb(255 255 255/.03)),rgb(10 10 12/.72);
  /* The open panel wears the Services card's rim: a solid white 1px line with the same three-step white glow */
  box-shadow:inset 0 0 0 1px #fff, 0 0 1.5px #fff, 0 0 6px #fff, 0 0 14px rgb(255 255 255/.7), 0 30px 60px -30px rgb(0 0 0/.6); }
.ddm-x .ddm-hw-step h3 { color:#fff; font-size:clamp(1.3rem,1.9vw,1.7rem); margin:4px 0 12px; }
.ddm-x .ddm-hw-step p { margin:0; color:var(--on-dark-2); }

/* Step 01: a small glass screen where the homepage preview switches on */
.ddm-x .ddm-hw-screen { position:relative; overflow:hidden; margin-top:18px; max-width:400px; border-radius:12px; background:#151517;
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.55), inset 0 0 22px 3px rgb(255 255 255/.12), 0 0 34px -4px rgb(255 255 255/.16); }
.ddm-x .ddm-hw-screen-bar { display:flex; align-items:center; gap:5px; padding:9px 12px; border-bottom:1px solid rgb(255 255 255/.08); }
.ddm-x .ddm-hw-screen-bar i { width:6px; height:6px; border-radius:50%; background:rgb(255 255 255/.22); }
.ddm-x .ddm-hw-screen-bar span { margin-left:8px; font:500 10px/1 var(--mono); letter-spacing:.04em; color:#bdbdb8; }
.ddm-x .ddm-hw-screen-page { display:grid; gap:8px; padding:12px; background:#F7F7F5; }
.ddm-x .ddm-hw-screen .ddm-wf { display:block; border-radius:5px; background:#E2E2DF; }
.ddm-x .ddm-hw-screen .ddm-wf-nav { height:8px; width:100%; }
.ddm-x .ddm-hw-screen .ddm-wf-hero { position:relative; height:66px; background:#111; }
.ddm-x .ddm-hw-screen .ddm-wf-hero::after { content:""; position:absolute; left:12px; top:14px; width:44%; height:9px; border-radius:4px; background:rgb(255 255 255/.8); box-shadow:0 16px 0 -1px rgb(255 255 255/.4); }
.ddm-x .ddm-hw-screen .ddm-wf-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ddm-x .ddm-hw-screen .ddm-wf-card { height:30px; }
.ddm-x .ddm-hw-screen::after { content:""; position:absolute; inset:0; background:#050506; opacity:0; pointer-events:none; }
.ddm-x.ddm-lit-ready .ddm-hw-step:not(.is-on) .ddm-hw-screen::after { opacity:.86; }
.ddm-x.ddm-lit-ready .ddm-hw-step.is-on .ddm-hw-screen::after { animation:ddm-switch-on 1.1s steps(1,end) .35s both; }

.ddm-x .ddm-hw-foot { grid-column:1 / -1; padding-top:24px; border-top:1px solid var(--line-dark); }
.ddm-x .ddm-hw-foot p { margin:0; color:var(--on-dark-2); font-size:.95rem; }
.ddm-x .ddm-hw-foot .ddm-link { margin-left:6px; }

/* Stacked reveal (motion on, not pinned): panels rise in once and light up */
.ddm-x .ddm-hw.hw-ready:not(.hw-pinned) .ddm-hw-step { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease); }
.ddm-x .ddm-hw.hw-ready:not(.hw-pinned) .ddm-hw-step.is-in { opacity:1; transform:none; }

/* ---------- Pinned (wide screens with motion): one step open at a time, the rest soften ---------- */
.ddm-x .ddm-hw.hw-pinned { padding-block:0; }
.ddm-x .hw-pinned .ddm-hw-stage { min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav-h) + 20px) 0 clamp(56px,10vh,120px); } /* more room below the foot (Daniel, Oct 18) */
.ddm-x .hw-pinned .ddm-hw-grid { align-items:center; row-gap:clamp(24px,4vh,48px); }
.ddm-x .hw-pinned .ddm-hw-readout, .ddm-x .hw-pinned .ddm-hw-meter { display:flex; }
.ddm-x .hw-pinned .ddm-hw-steps { gap:8px; }
.ddm-x .hw-pinned .ddm-hw-step { padding:15px 22px 16px; filter:blur(1.6px); }
.ddm-x .hw-pinned .ddm-hw-step.is-on { filter:none; }
/* Closed steps are just their titles; the box (tint + white rim) fades in only around the open step (Daniel, Oct 18) */
.ddm-x .hw-pinned .ddm-hw-step, .ddm-x .hw-pinned .ddm-hw-step.is-on { background:none; box-shadow:none; }
.ddm-x .hw-pinned .ddm-hw-step::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgb(255 255 255/.09),rgb(255 255 255/.03)),rgb(10 10 12/.72);
  box-shadow:inset 0 0 0 1px #fff, 0 0 1.5px #fff, 0 0 6px #fff, 0 0 14px rgb(255 255 255/.7), 0 30px 60px -30px rgb(0 0 0/.6);
  opacity:0; transform:scale(.98); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.ddm-x .hw-pinned .ddm-hw-step.is-on::after { opacity:1; transform:none; }
/* Hovering a closed title plays the heading glint across it instead of the contour (Daniel, Oct 18; scripts/offer.js) */
.ddm-x .hw-pinned .ddm-hw-step:not(.is-on)::before { display:none; }
.ddm-x .hw-pinned .ddm-hw-step h3 { justify-self:start; }
/* Closed titles are dimmed by colour (not a brightness filter), so the glint's white band still reads brighter */
.ddm-x .hw-pinned .ddm-hw-step h3 { transition:color .6s var(--ease); }
.ddm-x .hw-pinned .ddm-hw-step:not(.is-on) h3 { color:rgb(255 255 255/.62); }
.ddm-x .hw-pinned .ddm-hw-step h3 { margin-bottom:0; }
.ddm-x .hw-pinned .ddm-hw-step > div > :not(h3) { overflow:hidden; min-height:0; }
.ddm-x .hw-pinned .ddm-hw-step > div > p { padding-top:0; transition:padding-top .6s var(--ease); }
.ddm-x .hw-pinned .ddm-hw-step.is-on > div > p { padding-top:10px; }
/* The body row holds the paragraph and (step 01) the screen together */
.ddm-x .hw-pinned .ddm-hw-step > div { display:grid; grid-template-rows:auto 0fr auto; transition:grid-template-rows .6s var(--ease); }
.ddm-x .hw-pinned .ddm-hw-step.is-on > div { grid-template-rows:auto 1fr auto; }
.ddm-x .hw-pinned .ddm-hw-screen { margin-top:0; max-height:0; transition:max-height .6s var(--ease), margin-top .6s var(--ease); }
.ddm-x .hw-pinned .ddm-hw-step.is-on .ddm-hw-screen { margin-top:14px; max-height:200px; }
/* Short screens: type scales with height too, so the whole chapter fits while pinned */
.ddm-x .hw-pinned h2 { font-size:min(clamp(2.4rem,5.4vw,4.8rem),8.4vh); }
.ddm-x .hw-pinned .ddm-hw-num { font-size:min(clamp(6rem,13vw,13rem),20vh); }
.ddm-x .hw-pinned .ddm-hw-num.ddm-hw-word { font-size:min(clamp(4rem,8.6vw,9rem),16vh); }
.ddm-x .hw-pinned .ddm-hw-head > p:not(.ddm-eyebrow) { margin-top:min(24px,2.4vh); }
.ddm-x .hw-pinned .ddm-eyebrow { margin-bottom:min(22px,2.2vh); }
.ddm-x .hw-pinned .ddm-hw-meter { margin-top:min(28px,3vh); }
@media (max-height:760px) {
  .ddm-x .hw-pinned .ddm-hw-stage { padding-bottom:36px; }
  .ddm-x .hw-pinned .ddm-hw-step { padding:12px 20px 13px; }
  .ddm-x .hw-pinned .ddm-hw-step.is-on .ddm-hw-screen { max-height:112px; }
  .ddm-x .hw-pinned .ddm-hw-screen .ddm-wf-hero { height:30px; }
  .ddm-x .hw-pinned .ddm-hw-screen .ddm-wf-card { height:20px; }
}

@media (max-width:900px) {
  .ddm-x .ddm-hw-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .ddm-x .ddm-hw-track { padding-left:22px; }
  .ddm-x .ddm-hw-line { left:4px; }
  .ddm-x .ddm-hw-step { padding:20px 18px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-hw-num.is-flick, .ddm-x .ddm-hw-screen::after { animation:none; opacity:0; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-hw-step { background:#1a1a1c; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-hw-step { border:1px solid CanvasText; filter:none !important; }
  .ddm-x .ddm-hw-line, .ddm-x .ddm-hw::after, .ddm-x .ddm-hw-screen::after { display:none; }
}