/* DabV "how it works" scroll explainer (device.js). Uses the site tokens defined on :root. */
.dev { position: relative; height: 560vh; }
.dev-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; align-items: center; gap: clamp(24px, 4vw, 64px); max-width: 1360px; margin: 0 auto; padding: 0 var(--gut); overflow: hidden; }
.dev-copy { position: relative; min-height: 340px; }
.dev-head { margin-bottom: 28px; }
.dev-head h2 { font-size: clamp(34px, 4vw, 58px); font-weight: 300; letter-spacing: -.03em; line-height: 1.04; }
.dev-steps { position: relative; min-height: 210px; }
.dev-step { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.dev-step.on { opacity: 1; transform: none; pointer-events: auto; }
.dev-step .dev-n { color: var(--cobalt); display: block; margin-bottom: 14px; }
.dev-step h3 { font-size: clamp(22px, 2.1vw, 30px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; }
.dev-step p { color: var(--mute); font-size: 16px; line-height: 1.6; max-width: 460px; margin: 0; }
.dev-step a { color: var(--cobalt); }
.dev-bar { position: relative; height: 2px; background: var(--line); margin-top: 26px; max-width: 460px; border-radius: 2px; overflow: hidden; }
.dev-bar i { position: absolute; inset: 0; background: var(--cobalt); transform-origin: left; transform: scaleX(0); }
.dev-stage { position: relative; }
.dev-svg { width: 100%; height: auto; display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 97%, transparent); }
.dv-flow { stroke: #2f62ff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 16 28; fill: none; }
.dv-waves ellipse { fill: none; stroke: #0131ce; stroke-width: 2.5; }
.dv-scale circle { fill: #b39b74; }
.dv-buzz path { fill: none; stroke: #0131ce; stroke-width: 2; stroke-linecap: round; }
.dv-core, .dv-tag { opacity: 0; }
.dv-tag line { stroke: var(--navy); stroke-width: 1.2; }
.dv-tag circle { fill: var(--navy); }
.dv-tag text { font-family: var(--f); font-size: 17px; fill: var(--navy); font-weight: 500; }
.dv-tag text.sm { font-size: 14px; fill: var(--mute); font-weight: 400; }
.dv-note { font-family: var(--fm); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--mute); }
@media (max-width: 899px) {
  .dev { height: 620vh; }
  .dev-pin { grid-template-columns: 1fr; align-content: center; gap: 8px; }
  .dev-stage { order: -1; margin: 0 -8px; }
  .dev-copy { min-height: 300px; }
  .dev-head { margin-bottom: 16px; }
  .dev-head h2 { font-size: 30px; }
  .dev-steps { min-height: 190px; }
  .dev-step p { font-size: 15px; }
  .dv-tag text { font-size: 20px; } .dv-tag text.sm { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dev { height: auto; }
  .dev-pin { position: static; height: auto; padding-top: 12vh; padding-bottom: 12vh; }
  .dev-steps { min-height: 0; }
  .dev-step { position: static; opacity: 1; transform: none; margin-bottom: 22px; }
}