/* C1b. Collect and check: one client's September request as one story in five recorded moments (owner, 22 Oct 2026 ~22:30 IST: "organise
   them with the right title and flow"). Site tokens and the site's own frames only (.browser-frame for the firm's screens, .ph for the
   client's phone, .tag-you for who acts next). The one bold move: the client's two moments sit on the dark band, so the story reads
   light (your firm sends), dark (the client's phone, the check), light (your firm again). Everything is scoped (.dcf, .hero-media). */

/* the hero picture as a muted loop: the poster image keeps the box (no shift), the video sits on top of it; reduced motion shows the poster only */
.hero-media { position: relative; }
.hero-media > img { display: block; width: 100%; height: auto; }
.hero-media > .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero-media > .hero-video { display: none; } }

.dcf { --dcf-n: 40px; --dcf-gap: 14px; }
.dcf-head h2 { max-width: 24ch; }
.dcf-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.dcf-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: center; min-width: 0; }
/* phone width: the clip above its words */
.dcf-media { order: -1; margin: 0; min-width: 0; }
.dcf-txt { min-width: 0; }
.dcf-txt h3 { display: flex; align-items: center; gap: var(--dcf-gap); margin: 0 0 var(--s-1); font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.dcf-n { flex: none; display: grid; place-items: center; width: var(--dcf-n); height: var(--dcf-n); border-radius: 50%; background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dcf-txt > p { margin: 0; padding-left: calc(var(--dcf-n) + var(--dcf-gap)); font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); max-width: calc(44ch + var(--dcf-n) + var(--dcf-gap)); }
.dcf-txt > .dcf-next { margin-top: var(--s-2); color: var(--ink); font-weight: 500; }
.dcf-next .tag { margin-right: 6px; vertical-align: .1em; }
.dcf .browser-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--surface-2); }

/* the client's two moments: the dark band, its title the old storyboard's, its close the "never rejects" line */
.dcf-band { margin-block: var(--s-5); padding: clamp(24px, 4vw, 48px); border-radius: 20px; background: var(--surface-dark); color: #e8ebf0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dcf-band-h { margin: 0 0 var(--s-4); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.dcf-band .dcf-txt h3 { color: #fff; }
.dcf-band .dcf-n { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #8fb0ff; }
.dcf-band .dcf-txt > p { color: rgba(232, 235, 240, .82); }
.dcf-band-note { margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(232, 235, 240, .82); font-size: 1rem; line-height: 1.5; }
.dcf-phone { justify-self: center; }
.dcf-phone .ph { width: 210px; border-radius: 32px; padding: 8px; }
.dcf-phone .ph::before { top: 14px; width: 64px; height: 18px; margin-left: -32px; }
.dcf-phone .ph-screen { border-radius: 25px; padding-top: 28px; background: #fff; }
.dcf-phone video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; }

@media (min-width: 600px) {
  /* the phone beside its words from tablet width */
  .dcf-step.is-phone { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
  .dcf-step.is-phone .dcf-media { order: 0; }
}
@media (min-width: 960px) {
  .dcf { --dcf-n: 44px; }
  /* the firm's screens: words and clip side by side, stepping left and right down the page (1 words left, 4 clip left, 5 words left) */
  .dcf-step:not(.is-phone) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-5); }
  .dcf-step:not(.is-phone) .dcf-media { order: 0; }
  .dcf-step.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dcf-step.is-flip .dcf-media { order: -1; }
  .dcf-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .dcf-phone .ph { width: 200px; }
}
.dcf-more { margin: var(--s-4) 0 0; }
/* one page-level "Pause motion" for every loop (WCAG 2.2.2): beside the section's lead, the site's ghost-button form, 44 px */
.dcf-head { position: relative; }
.motion-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: var(--s-2); padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 .95rem var(--font); cursor: pointer; }
.motion-btn:hover { border-color: var(--ink-2); }
.motion-btn svg { width: 16px; height: 16px; flex: none; }
.motion-btn[hidden] { display: none; }
.motion-off .hero-media > .hero-video { display: none; }
.motion-on .hero-media > .hero-video { display: block; }   /* a reduced-motion visitor who presses Play gets the hero loop too */