/*
 * /business-dashboards/v1..v3 (staging variations, 2026-10-01).
 * Design plan: _work/design-plan.md. Hand-written so no Tailwind rebuild is
 * needed. Everything is scoped under .dv; nothing here touches the shared
 * header or footer.
 *
 * Rules carried from the design plan: solid colours only, no monospace
 * running text, no narrow text columns. Since 2026-10-02 the type, buttons
 * and corners follow the main site (Inter, pill buttons, rounded cards):
 * see "Site skin" at the end.
 */

.dv {
    --dv-ink: #142a50;
    --dv-ink-2: #1b3767;
    --dv-navy: #224685;
    --dv-paper: #ffffff;
    --dv-mist: #eef1f8;
    --dv-line: #d7deea;
    --dv-line-2: #c3ccdc;
    --dv-stamp: #d6157d;
    --dv-stamp-dark: #b10f66;
    --dv-flap: #f5b921;
    --dv-text: #334155;
    --dv-muted: #475569;
    --dv-heading: #0f172a;
    --dv-brand: #224685;
    --dv-brand-dark: #1b386a;
    --dv-r: 16px;
    --dv-r-sm: 12px;
    --dv-card-line: #e2e8f0;
    --dv-shadow: 0 1px 2px rgba(15,23,42,.05), 0 24px 48px -28px rgba(20,42,80,.32);
    --dv-on-ink: #c9d4e7;
    --dv-display: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
    --dv-gutter: clamp(16px, 4vw, 40px);
    color: var(--dv-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-x: clip;
}
@font-face {
    font-family: 'Archivo Fallback';
    src: local('Arial');
    size-adjust: 106%;
    ascent-override: 88%;
    descent-override: 21%;
}

.dv-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding-inline: var(--dv-gutter); }
.dv-band { position: relative; padding-block: clamp(72px, 9vw, 136px); }
.dv-paper { background: var(--dv-paper); }
.dv-mist { background: var(--dv-mist); }
.dv-ink { background: var(--dv-ink); color: var(--dv-on-ink); }

/* ---------- Type ---------- */
.dv .dv-h1, .dv .dv-h2 {
    font-family: var(--dv-display);
    font-weight: 700;
    color: var(--dv-heading);
    margin: 0;
    display: flow-root;
}
.dv .dv-h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -.025em; }
.dv .dv-h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.1; letter-spacing: -.022em; }
.dv-ink .dv-h1, .dv-ink .dv-h2 { color: #fff; }
.dv-lede { font-size: clamp(1.08rem, 1rem + .32vw, 1.25rem); line-height: 1.6; color: var(--dv-muted); margin: 22px 0 0; }
.dv-ink .dv-lede { color: var(--dv-on-ink); }
.dv-body { color: var(--dv-muted); margin: 20px 0 0; }
.dv-ink .dv-body { color: var(--dv-on-ink); }
.dv-small { font-size: .95rem; color: var(--dv-muted); margin: 0 0 26px; }
.dv a:not(.dv-btn):not(.dv-iconbtn) { color: inherit; text-decoration-color: var(--dv-stamp); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dv :is(p, li) a:not(.dv-btn), .dv-fix a, .dv-res__talk a { text-decoration-line: underline; }
.dv-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; }

/* SplitText line masks: the padding lets descenders and accents through the
   clip, and the matching negative margin keeps the layout identical with
   motion on and off (frontend-design, headings must never clip). Every line
   is padded above too, because at line-height 1.03 Archivo's ascenders stand
   2px proud of the line box; the bottom margin of the line before takes that
   padding back, so the lines sit exactly where they would unsplit. */
.dv .dv-mask { display: block; padding: .2em .15em .5em; margin: 0 -.15em -.7em; }
.dv .dv-mask:first-child { margin-top: -.2em; }
.dv .dv-mask:last-child { margin-bottom: -.5em; }

/* ---------- Buttons: the site's own pills (bg-primary-700, rounded-full, font-bold, px-7 py-4) ---------- */
.dv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.dv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    font-family: var(--dv-display); font-weight: 700; font-size: 1rem; line-height: 1.25;
    padding: calc(1rem - 2px) 1.75rem; border: 2px solid transparent; border-radius: 9999px;
    text-decoration: none !important; cursor: pointer; text-align: center;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.dv-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(15,23,42,.14), 0 8px 10px -6px rgba(15,23,42,.12); }
.dv-btn--stamp { background: var(--dv-brand); color: #fff !important; }
.dv-btn--stamp:hover { background: var(--dv-brand-dark); }
.dv-btn--ghost { background: #fff; border-color: var(--dv-brand); color: var(--dv-brand) !important; }
.dv-btn--ghost:hover { background: #eef1f8; }
/* On the navy bands the main button turns white, as the site's cta-band does */
.dv-ink .dv-btn--stamp, .dv-night .dv-btn--stamp, .dv-score .dv-btn--stamp, .dv-proto__done .dv-btn--stamp { background: #fff; color: var(--dv-brand) !important; }
.dv-ink .dv-btn--stamp:hover, .dv-night .dv-btn--stamp:hover { background: #f1f5f9; }
.dv-btn--light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff !important; }
.dv-btn--light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.dv-btn--sm { font-size: .95rem; padding: calc(.75rem - 2px) 1.3rem; }
.dv-btn:focus-visible, .dv button:focus-visible, .dv a:focus-visible { outline: 3px solid var(--dv-flap); outline-offset: 3px; }
.dv-iconbtn { width: 48px; height: 48px; display: inline-grid; place-items: center; border: 2px solid var(--dv-brand); border-radius: 9999px; background: #fff; color: var(--dv-brand); cursor: pointer; transition: background-color .2s, color .2s; }
.dv-iconbtn:hover { background: var(--dv-brand); color: #fff; }
.dv-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }

.dv-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dv-stamp); flex: none; animation: dv-pulse 1.8s ease-out infinite; }
@keyframes dv-pulse { 0% { box-shadow: 0 0 0 0 rgba(214,21,125,.55); } 75%, 100% { box-shadow: 0 0 0 10px rgba(214,21,125,0); } }
.dv-ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.dv-ticks li { position: relative; padding-left: 32px; font-weight: 500; }
.dv-ticks li::before {
    content: ''; position: absolute; left: 0; top: .3em; width: 19px; height: 15px; background: var(--dv-stamp);
    clip-path: polygon(0 55%, 14% 41%, 37% 64%, 86% 0, 100% 14%, 37% 92%);
}
.dv-ink .dv-ticks li { color: #e3e9f4; }

/* ---------- Reveal start states (only once JS is on; never for reduced motion or a failed load) ---------- */
html.dv-js:not(.dv-static):not(.dv-reduced) [data-r="up"] { opacity: 0; transform: translateY(26px); }
html.dv-js:not(.dv-static):not(.dv-reduced) [data-r="clip"] { clip-path: inset(0 0 100% 0); }
html.dv-js:not(.dv-static):not(.dv-reduced) [data-r="lines"] { visibility: hidden; }
html.dv-js:not(.dv-static):not(.dv-reduced) [data-rline] { opacity: 0; }
/* First screens wait for their fonts (open.php adds .dv-fonts, at most 1.5 s in) */
html.dv-js:not(.dv-fonts) :is(.dv-hero1, .dv-hero3, .dv-sweep__copy--a, .dv-frags) { opacity: 0; }
html.dv-js.dv-fonts :is(.dv-hero1, .dv-hero3, .dv-sweep__copy--a, .dv-frags) { animation: dv-fade-in .5s ease-out; }
@keyframes dv-fade-in { from { opacity: 0; } }
html.dv-static [data-r], html.dv-reduced [data-r] { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; }
html.dv-static [data-rline], html.dv-reduced [data-rline] { opacity: 1 !important; }

/* =================================================================
   V1 hero: the Two-Week Test
   ================================================================= */
.dv-hero1 { padding-top: min(clamp(36px, 5.5vw, 84px), 6vh); padding-bottom: clamp(56px, 7vw, 110px); overflow: clip; }
.dv-hero1 > .dv-wrap { position: relative; z-index: 1; }
.dv-hero1__tool { position: relative; }
/* Two real demo screens fanned behind the test card */
.dv-fan { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dv-fan__screen { position: absolute; top: 0; right: 0; width: 100%; transform-origin: 70% 100%; }
/* The tilted frames below take their 16:10 shape from padding rather than
   aspect-ratio: a rotated box's on-screen bounds are taller than its shape,
   which site-audit reads as content stretching the frame. */
.dv-fan__inner { position: relative; display: block; height: 0; padding-bottom: 62.5%; overflow: hidden; background: #fff; border: 1px solid var(--dv-line-2); box-shadow: 0 30px 60px -28px rgba(20,42,80,.45); }
.dv-fan__inner img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dv-fan__screen--1 { transform: translate(-13%, -12%) rotate(-7deg); }
.dv-fan__screen--2 { transform: translate(-6.5%, -6%) rotate(-3.5deg); }
.dv-test { z-index: 1; }
.dv-hero1__grid {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "intro tool" "extra tool";
    /* The test card spans both rows; any height it needs beyond the intro
       goes to the second row, so the buttons sit right under the intro. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 84px); row-gap: 0; align-items: start;
}
.dv-hero1__intro { grid-area: intro; }
.dv-hero1__tool { grid-area: tool; }
.dv-hero1__extra { grid-area: extra; }
.dv-mark { position: relative; color: var(--dv-stamp); white-space: nowrap; }
.dv-mark__line { position: absolute; left: 0; bottom: -.1em; width: 100%; height: .22em; overflow: visible; }
.dv-mark__line path { fill: none; stroke: var(--dv-stamp); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.dv-away { margin-top: 38px; border-top: 3px solid var(--dv-ink); padding-top: 16px; }
.dv-away__head { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: .98rem; color: var(--dv-ink); }
.dv-away__day { margin-left: auto; color: var(--dv-stamp); font-variant-numeric: tabular-nums; }
/* One svg of fourteen day blocks: a row of fourteen small boxes beside the
   headline's underline reads to site-qa's thread check as timeline markers. */
.dv-away__bar { display: block; width: 100%; height: 9px; margin: 12px 0 14px; }
.dv-away__bar rect { fill: var(--dv-line); transition: fill .35s; }
.dv-away__bar rect.is-done { fill: var(--dv-ink); }
.dv-away__bar rect.is-now { fill: var(--dv-stamp); }
.dv-away__list { list-style: none; margin: 0; padding: 0; position: relative; height: 1.75em; overflow: hidden; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); color: var(--dv-ink); }
.dv-away__list li { position: absolute; inset: 0; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-away__list li.is-on { opacity: 1; }
.dv-away__list b { color: var(--dv-stamp); font-weight: 700; margin-right: .35em; }
.dv-proof { margin: 24px 0 0; font-size: .98rem; font-weight: 500; color: var(--dv-muted); }
/* Short laptop screens (1366x768, 1280x720): everything a visitor reads or
   presses in the hero has to sit above the fold, so the type and spacing
   tighten and the fortnight ticker, which repeats the headline's promise,
   steps out. */
@media (min-width: 1024px) and (max-height: 800px) {
    .dv-hero1 { padding-top: 22px; }
    .dv.dv-hero1 .dv-h1 { font-size: min(clamp(2.55rem, 1.3rem + 4.3vw, 5.4rem), 8.6vh); }
    .dv-hero1 .dv-lede { margin-top: 14px; }
    .dv-hero1 .dv-away { display: none; }
    /* the headline runs longer lines here, so the screens behind the card fan out less far left */
    .dv-fan__screen--1 { transform: translate(-3%, -10%) rotate(-6deg); }
    .dv-fan__screen--2 { transform: translate(0%, -5%) rotate(-3deg); }
    .dv-hero1 .dv-proof { margin-top: 16px; }
    .dv-hero1 .dv-actions { margin-top: 18px; }
    .dv-test { min-height: 0; }
    .dv-test__head { padding: 12px 18px; }
    .dv-test__body { padding: 16px 20px 10px; }
    .dv-tstep__q { margin: 6px 0 14px; font-size: 1.35rem; }
    .dv-test .dv-chips { gap: 7px; }
    .dv-test .dv-chip { padding: 8px 12px; font-size: .92rem; }
    .dv-tstep__note { padding-top: 12px; font-size: .9rem; }
    .dv-test__foot { padding: 0 20px 12px; min-height: 44px; }
}
.dv-proof i { font-style: normal; color: var(--dv-stamp); margin: 0 .45em; font-weight: 700; }

/* The test card */
.dv-test {
    position: relative; display: flex; flex-direction: column; background: #fff;
    border: 2px solid var(--dv-ink); box-shadow: 10px 10px 0 var(--dv-ink);
    min-height: 560px;
}
.dv-test__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--dv-ink); color: #fff; padding: 16px 22px; }
.dv-test__title { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: 1.22rem; }
.dv-test__meta { margin: 0; font-size: .9rem; color: var(--dv-on-ink); }
.dv-test__bar { height: 6px; background: var(--dv-mist); }
.dv-test__bar span { display: block; height: 100%; width: 0; background: var(--dv-stamp); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.dv-test__body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 26px 24px 18px; }
.dv-test__body > .dv-tstep.is-on { display: flex; flex-direction: column; flex: 1; }
.dv-test__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px 20px; min-height: 52px; }
.dv-test__back { background: none; border: 0; padding: 8px 0; font-weight: 700; color: var(--dv-navy); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dv-test__keys { font-size: .82rem; color: var(--dv-muted); }
.dv-test__noscript { padding: 0 24px 22px; margin: 0; }
.dv-tstep { display: none; }
.dv-tstep.is-on { display: block; }
.dv-tstep__count { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-stamp); }
.dv-tstep__q { margin: 8px 0 20px; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); line-height: 1.16; color: var(--dv-ink); }
.dv-tstep__note { margin: auto 0 0; padding-top: 22px; font-size: .95rem; color: var(--dv-muted); }
.dv-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.dv-chip {
    border: 2px solid var(--dv-line-2); background: #fff; color: var(--dv-ink);
    padding: 11px 15px; font-weight: 600; font-size: .97rem; line-height: 1.2; cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s, transform .15s;
}
.dv-chip:hover { border-color: var(--dv-ink); background: var(--dv-mist); }
.dv-chip.is-hint { border-color: var(--dv-stamp); color: var(--dv-stamp); transition-duration: .35s; }
.dv-chip.is-picked, .dv-chip[aria-pressed="true"] { background: var(--dv-ink); border-color: var(--dv-ink); color: #fff; }
.dv-answers { display: grid; gap: 10px; }
.dv-answer {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 14px 16px; border: 2px solid var(--dv-line-2); background: #fff; color: var(--dv-ink);
    font-weight: 600; font-size: 1rem; line-height: 1.3; cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.dv-answer:hover { border-color: var(--dv-ink); background: var(--dv-mist); }
.dv-answer.is-picked { background: var(--dv-ink); border-color: var(--dv-ink); color: #fff; }
.dv-answer__key { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid currentColor; font-family: var(--dv-display); font-weight: 700; font-size: .85rem; }
.dv-answer__dots { margin-left: auto; display: flex; gap: 4px; flex: none; }
.dv-answer__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--dv-line-2); }
.dv-answer__dots i.on { background: var(--dv-stamp); }
.dv-answer.is-picked .dv-answer__dots i:not(.on) { background: rgba(255,255,255,.3); }
.dv-field { margin: 0 0 20px; }
.dv-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; color: var(--dv-ink); margin-bottom: 8px; }
.dv-field__top output { font-family: var(--dv-display); font-weight: 700; font-size: 1.25rem; color: var(--dv-stamp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.dv-range::-webkit-slider-runnable-track { height: 6px; background: var(--dv-line); }
.dv-range::-moz-range-track { height: 6px; background: var(--dv-line); }
.dv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; background: var(--dv-stamp); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--dv-ink); }
.dv-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 0; background: var(--dv-stamp); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--dv-ink); }
.dv-step-next { margin-top: 8px; }
.dv-eaters-note { font-size: .88rem; color: var(--dv-muted); margin: 0 0 10px; }

/* Results */
.dv-res__top { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; }
.dv-gauge { position: relative; width: 180px; }
.dv-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.dv-gauge__track { fill: none; stroke: var(--dv-mist); stroke-width: 16; }
.dv-gauge__fill { fill: none; stroke: var(--dv-stamp); stroke-width: 16; }
.dv-gauge__num { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-family: var(--dv-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--dv-ink); font-variant-numeric: tabular-nums; }
.dv-gauge__num small { font-size: .9rem; font-weight: 700; color: var(--dv-muted); }
.dv-res__band { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--dv-ink); }
.dv-res__why { margin: 6px 0 0; font-size: .95rem; color: var(--dv-muted); }
.dv-res__relies { margin: 18px 0 0; padding: 12px 14px; background: var(--dv-mist); font-weight: 600; color: var(--dv-ink); }
.dv-res__relies b { color: var(--dv-stamp); }
.dv-pillars { display: grid; gap: 9px; margin: 18px 0 0; }
.dv-pillar { display: grid; grid-template-columns: 9.5rem 1fr 2.6rem; gap: 10px; align-items: center; font-size: .9rem; font-weight: 600; color: var(--dv-ink); }
.dv-pillar__track { height: 10px; background: var(--dv-mist); }
.dv-pillar__fill { display: block; height: 100%; width: 0; background: var(--dv-navy); }
.dv-pillar.is-low .dv-pillar__fill { background: var(--dv-stamp); }
.dv-pillar__val { text-align: right; font-variant-numeric: tabular-nums; }
.dv-res__cost { margin: 20px 0 0; padding: 20px; background: var(--dv-ink); color: #fff; }
.dv-res__cost p { margin: 0; }
.dv-res__money { font-family: var(--dv-display); font-weight: 800; font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.9rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.dv-res__per { font-size: .46em; font-weight: 700; white-space: nowrap; }
.dv-res__weeks { color: var(--dv-on-ink); margin-top: 4px !important; }
.dv-res__payback { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); font-size: .95rem; color: #fff; }
.dv-fixes { margin: 22px 0 0; display: grid; gap: 10px; counter-reset: fix; }
.dv-fixes h4 { margin: 0 0 4px; font-family: var(--dv-display); font-weight: 700; font-size: 1.15rem; color: var(--dv-ink); }
.dv-fix { position: relative; padding: 14px 14px 14px 56px; border: 2px solid var(--dv-line); counter-increment: fix; }
.dv-fix::before { content: counter(fix); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--dv-stamp); color: #fff; font-family: var(--dv-display); font-weight: 700; }
.dv-fix b { display: block; color: var(--dv-ink); }
.dv-fix p { margin: 4px 0 6px; font-size: .92rem; color: var(--dv-muted); line-height: 1.5; }
.dv-fix a { font-size: .9rem; font-weight: 700; }
.dv-res__ctas { display: grid; gap: 10px; margin-top: 20px; }
.dv-res__ctas .dv-btn { width: 100%; }
.dv-res__talk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; font-weight: 600; }
.dv-res__again { min-height: 44px; background: none; border: 0; padding: 0; font-weight: 700; color: var(--dv-navy); text-decoration: underline; cursor: pointer; }

/* =================================================================
   The Two-Week Test as a section (#test): wide card, score beside it
   ================================================================= */
.dv-wtest__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 80px); align-items: start; }
.dv-wtest__head .dv-lede { margin: 0; }
.dv-wtest__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: clamp(24px, 3vw, 40px); }
.dv-test--wide { min-height: 0; }
.dv-test--wide .dv-test__body { padding: 26px 32px 16px; min-height: 360px; }
.dv-wtest, .dv-proto { padding-block: clamp(56px, 6vw, 92px); }
.dv-answers--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-answer__text { flex: 1; }
.dv-answers--grid .dv-answer { align-items: flex-start; min-height: 74px; }
.dv-tstep__sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.dv-res--wide .dv-res__band { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.dv-res__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; }
.dv-res--wide .dv-res__ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-res--wide .dv-fixes { margin-top: 18px; }

/* The running score: an instrument of its own, so it sits on ink */
.dv-score { position: sticky; top: calc(var(--dv-head, 80px) + 20px); background: var(--dv-ink); color: #fff; padding: 22px 22px 24px; box-shadow: 10px 10px 0 var(--dv-stamp); }
.dv-score__head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--dv-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.dv-score__top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.dv-gauge--live { width: 150px; }
.dv-gauge--live .dv-gauge__track { stroke: rgba(255,255,255,.14); }
.dv-gauge--live .dv-gauge__fill { stroke-dasharray: 0 100; transition: stroke-dasharray .6s cubic-bezier(.2,.8,.2,1), stroke .4s; stroke: #9db7ea; }
.dv-score.is-low .dv-gauge__fill { stroke: var(--dv-stamp); }
.dv-gauge--live .dv-gauge__num { color: #fff; font-size: 2.2rem; }
.dv-gauge--live .dv-gauge__num small { color: var(--dv-on-ink); }
.dv-score__band { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: #fff; }
/* one square per question, coloured by the answer: the problem building up */
.dv-score__pips { display: block; width: 100%; height: 14px; margin: 18px 0 10px; }
.dv-score__pips rect { fill: rgba(255,255,255,.12); transition: fill .35s; }
.dv-score__pips rect.is-3 { fill: #fff; }
.dv-score__pips rect.is-2 { fill: #9db7ea; }
.dv-score__pips rect.is-1 { fill: var(--dv-flap); }
.dv-score__pips rect.is-0 { fill: var(--dv-stamp); }
.dv-score__pips rect.is-next { animation: dv-pip 1.4s ease-in-out infinite; }
@keyframes dv-pip { 50% { fill: rgba(255,255,255,.42); } }
.dv-score__relies { margin: 0; font-size: .95rem; color: var(--dv-on-ink); }
.dv-score__relies b { font-family: var(--dv-display); font-size: 1.2rem; color: var(--dv-flap); }
.dv-score__pillars { margin-top: 16px; }
.dv-score .dv-pillar { grid-template-columns: 9.8rem 1fr 2.6rem; color: #fff; font-size: .875rem; }
.dv-score .dv-pillar__track { background: rgba(255,255,255,.12); }
.dv-score .dv-pillar__fill { background: #9db7ea; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.dv-score .dv-pillar.is-low .dv-pillar__fill { background: var(--dv-stamp); }
.dv-score__cost { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.dv-score__money { margin: 0; font-family: var(--dv-display); font-weight: 800; font-size: 2rem; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.dv-score__per { margin: 2px 0 0; font-size: .95rem; color: var(--dv-on-ink); }

/* =================================================================
   Free prototype request (#prototype)
   ================================================================= */
.dv-proto__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 80px); align-items: start; }
.dv-proto__head .dv-lede { margin: 0; }
.dv-proto__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: clamp(32px, 4vw, 52px); }
.dv-proto__grid[hidden] { display: none; }
.dv-proto__main { background: #fff; border: 2px solid var(--dv-ink); box-shadow: 10px 10px 0 var(--dv-ink); padding: 0 0 26px; }
.dv-proto__nav { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--dv-ink); }
.dv-proto__navbtn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 0; border-right: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--dv-on-ink); font-weight: 700; font-size: .95rem; line-height: 1.2; text-align: left; cursor: pointer; }
.dv-proto__nav li:last-child .dv-proto__navbtn { border-right: 0; }
.dv-proto__navbtn span { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid currentColor; font-family: var(--dv-display); font-weight: 700; font-size: .9rem; }
.dv-proto__navbtn.is-done { color: #fff; }
.dv-proto__navbtn.is-done span { background: var(--dv-navy); border-color: var(--dv-navy); }
.dv-proto__navbtn.is-on { background: var(--dv-stamp); color: #fff; }
.dv-proto__navbtn.is-on span { border-color: #fff; }
.dv-proto__error { margin: 0 28px 20px; padding: 14px 16px; background: #fdecf4; border-left: 4px solid var(--dv-stamp); color: var(--dv-ink); font-weight: 600; }
.dv-pstep { border: 0; margin: 0; padding: 0 28px; min-width: 0; }
html.dv-js:not(.dv-static) .dv-pstep:not(.is-on) { display: none; }
html:not(.dv-js) .dv-proto__nav, html.dv-static .dv-proto__nav,
html:not(.dv-js) .dv-pstep__foot .dv-btn, html.dv-static .dv-pstep__foot .dv-btn,
html:not(.dv-js) .dv-pstep__back, html.dv-static .dv-pstep__back { display: none; }
html:not(.dv-js) .dv-pstep__foot [data-proto-submit], html.dv-static .dv-pstep__foot [data-proto-submit] { display: inline-flex; }
html:not(.dv-js) .dv-pstep + .dv-pstep, html.dv-static .dv-pstep + .dv-pstep { margin-top: 26px; padding-top: 26px; border-top: 2px solid var(--dv-line); }
.dv-pstep__title { display: block; float: left; width: 100%; margin: 0 0 18px; padding: 0; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); line-height: 1.15; color: var(--dv-ink); }
.dv-pstep__title + * { clear: both; }
.dv-pstep__title:focus { outline: none; }
.dv-pstep__lede { margin: 0 0 22px; color: var(--dv-muted); }
.dv-pfield { margin: 0 0 22px; }
.dv-pfield__label { display: block; margin: 0 0 9px; font-weight: 700; color: var(--dv-ink); }
.dv-pfield__label i, .dv-pfield__sub i { font-style: normal; font-weight: 500; color: var(--dv-muted); margin-left: 6px; font-size: .92em; }
.dv-pfield__sub { display: block; margin: 14px 0 8px; font-weight: 600; color: var(--dv-ink); font-size: .95rem; }
.dv-pfield--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.dv-pinput { width: 100%; padding: 12px 14px; border: 2px solid var(--dv-line-2); border-radius: 0; background: #fff; color: var(--dv-ink); font: inherit; font-size: 1rem; line-height: 1.45; }
textarea.dv-pinput { resize: vertical; min-height: 96px; }
.dv-pinput:focus { outline: none; border-color: var(--dv-ink); box-shadow: 4px 4px 0 var(--dv-stamp); }
.dv-pinput::placeholder { color: #7a8499; }
.dv-pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-pchip { position: relative; display: inline-flex; }
.dv-pchip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dv-pchip span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 2px solid var(--dv-line-2); background: #fff; color: var(--dv-ink); font-weight: 600; font-size: .95rem; line-height: 1.25; transition: border-color .15s, background-color .15s, color .15s; }
.dv-pchip:hover span { border-color: var(--dv-ink); }
.dv-pchip input:checked + span { background: var(--dv-ink); border-color: var(--dv-ink); color: #fff; }
.dv-pchip input:focus-visible + span { outline: 3px solid var(--dv-stamp); outline-offset: 2px; }
.dv-pchip--check span::before { content: ''; flex: none; width: 15px; height: 15px; margin-right: 10px; border: 2px solid currentColor; }
.dv-pchip--check input:checked + span::before { background: var(--dv-stamp); border-color: var(--dv-stamp); box-shadow: inset 0 0 0 2px var(--dv-ink); }
.dv-pgroup { margin: 0 0 24px; padding-top: 16px; border-top: 2px solid var(--dv-line); }
.dv-pgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.dv-pgroup__title { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: 1.12rem; color: var(--dv-ink); }
.dv-pgroup__line { margin: 0; font-size: .95rem; color: var(--dv-muted); }
.dv-pfile { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px; border: 2px dashed var(--dv-line-2); cursor: pointer; }
.dv-pfile input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dv-pfile__btn { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; background: var(--dv-ink); color: #fff; font-weight: 700; }
.dv-pfile__name { flex: 1 1 220px; font-size: .95rem; color: var(--dv-muted); }
.dv-pfile:focus-within { border-color: var(--dv-ink); box-shadow: 4px 4px 0 var(--dv-stamp); }
.dv-pstep__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.dv-pstep__foot .dv-btn { margin-left: auto; }
.dv-pstep__back { min-height: 44px; padding: 0 4px; border: 0; background: none; font-weight: 700; color: var(--dv-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dv-pstep__small { margin: 14px 0 0; font-size: .95rem; color: var(--dv-muted); text-align: right; }
.dv-proto__done { margin-top: clamp(32px, 4vw, 52px); padding: clamp(28px, 4vw, 48px); background: var(--dv-ink); color: var(--dv-on-ink); box-shadow: 10px 10px 0 var(--dv-stamp); }
.dv-proto__done:focus { outline: none; }
.dv-proto__done-title { margin: 0 0 10px; font-family: var(--dv-display); font-weight: 800; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.08; color: #fff; }
.dv-proto__done a { color: #fff; }

/* The system building beside the form */
.dv-proto__preview { position: sticky; top: calc(var(--dv-head, 80px) + 20px); }
.dv-proto__preview-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--dv-display); font-weight: 700; font-size: 1.15rem; color: var(--dv-ink); }
.dv-mini { background: #fff; border: 1px solid var(--dv-line-2); box-shadow: 0 40px 70px -40px rgba(20,42,80,.55), 0 0 0 8px rgba(20,42,80,.04); overflow: hidden; }
.dv-mini__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #eef1f6; border-bottom: 1px solid var(--dv-line); font-size: .875rem; color: #4f5a73; }
.dv-mini__bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-mini__app { display: grid; grid-template-columns: 40% minmax(0, 1fr); min-height: 340px; }
.dv-mini__side { background: #1f2430; color: #d5dae3; padding: 12px 10px; }
.dv-mini__brand { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #fff; font-weight: 700; font-size: .875rem; line-height: 1.25; }
.dv-mini__brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-mini__logo { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--dv-stamp); color: #fff; font-weight: 700; font-size: .8rem; }
.dv-mini__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .875rem; }
.dv-mini__nav li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; line-height: 1.25; }
.dv-mini__nav li.is-on { background: var(--dv-stamp); color: #fff; font-weight: 700; }
.dv-mini__nav small { flex: none; min-width: 20px; padding: 0 5px; background: rgba(255,255,255,.14); color: #fff; font-size: .8rem; font-weight: 700; text-align: center; }
.dv-mini__main { background: #f5f7fa; padding: 12px; min-width: 0; }
.dv-mini__count { margin: 0 0 10px; padding: 10px 12px; background: #fff; border: 1px solid #e3e7ee; font-size: .875rem; color: #4f5a73; }
.dv-mini__count b { display: block; font-family: var(--dv-display); font-size: 1.8rem; line-height: 1.05; color: var(--dv-ink); font-variant-numeric: tabular-nums; }
.dv-mini__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dv-mini__list li { padding: 8px 10px; background: #fff; border-left: 3px solid var(--dv-stamp); font-size: .875rem; line-height: 1.35; color: #4f5a73; }
.dv-mini__list b { display: block; color: var(--dv-ink); }
.dv-mini__empty { margin: 0; font-size: .875rem; color: #4f5a73; }
.dv-mini__empty[hidden] { display: none; }
.dv-proto__test { margin: 14px 0 0; padding: 12px 14px; background: var(--dv-ink); color: #fff; font-size: .95rem; font-weight: 600; }
.dv-proto__test[hidden] { display: none; }

/* =================================================================
   Pains: marquee rows with hand-drawn strike-throughs
   ================================================================= */
.dv-pains__rows { display: grid; gap: 16px; margin: clamp(36px, 5vw, 60px) 0; }
.dv-marquee { overflow: hidden; }
.dv-marquee__track { display: flex; width: max-content; animation: dv-marq 70s linear infinite; }
.dv-marquee--rev .dv-marquee__track { animation-direction: reverse; animation-duration: 82s; }
.dv-marquee:hover .dv-marquee__track, .dv-marquee.is-paused .dv-marquee__track { animation-play-state: paused; }
.dv-pains__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.dv-pains__score { margin: 0 0 6px; padding: 10px 16px; border: 2px solid rgba(255,255,255,.28); font-family: var(--dv-display); font-weight: 700; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: #fff; font-variant-numeric: tabular-nums; }
.dv-pains__score span { color: #ff74b8; }
.dv-pains__hl { color: #ff74b8; }
.dv-marquee__set { display: flex; align-items: center; list-style: none; margin: 0; padding: 30px 0 16px; }
.dv-pain {
    position: relative; flex: none; margin-right: 26px; padding: 16px 24px;
    font-family: var(--dv-display); font-weight: 700;
    font-size: clamp(1.08rem, .85rem + .95vw, 1.62rem); line-height: 1.2; color: #17213a; white-space: nowrap;
    box-shadow: 0 14px 22px -16px rgba(0,0,0,.65);
}
/* Five scraps of a messy business */
.dv-pain--note { background: #f7d65a; transform: rotate(-2.2deg); }
.dv-pain--bubble { background: #e3f5d6; border-radius: 20px 20px 20px 4px; }
.dv-pain--cell { background: #fff; outline: 3px solid #1f7a4d; outline-offset: -3px; padding-inline: 20px; }
.dv-pain--cell::before { content: 'C14'; position: absolute; top: -21px; left: -3px; padding: 1px 6px; background: #1f7a4d; color: #fff; font-size: .72rem; font-weight: 700; }
.dv-pain--tab { background: #e6ebf3; border-radius: 12px 12px 0 0; padding-left: 46px; }
.dv-pain--tab::before { content: ''; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 3px; background: var(--dv-navy); }
.dv-pain--slip { background: #fff; transform: rotate(1.6deg); }
.dv-pain--slip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M0 0h16L8 10z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x; background-size: 16px 10px; }
.dv-strike { position: absolute; left: 16px; top: 50%; width: calc(100% - 32px); height: 18px; transform: translateY(-38%); overflow: visible; pointer-events: none; }
.dv-strike path { fill: none; stroke: var(--dv-stamp); stroke-width: 4.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
html.dv-js:not(.dv-static):not(.dv-reduced) .dv-strike { visibility: hidden; }
@keyframes dv-marq { to { transform: translateX(-50%); } }
/* Reduced motion: the scraps sit still, wrapped onto as many lines as they
   need, and the copy that made the loop seamless steps out. */
@media (prefers-reduced-motion: reduce) {
    .dv-marquee { overflow: visible; }
    .dv-marquee__track { width: auto; }
    .dv-marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 34px; }
    .dv-marquee__set[aria-hidden="true"] { display: none; }
    .dv-pain { white-space: normal; }
}
.dv-pains__line { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.55rem); line-height: 1.15; color: #fff; }
.dv-pains__line .dv-ch { display: inline; }

/* =================================================================
   Ladder: three ways in
   ================================================================= */
.dv-stairs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
.dv .dv-stairs__title { grid-column: 1 / 3; grid-row: 1; align-self: start; position: relative; z-index: 2; }
.dv-stairs__line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.dv-stairs__line path { fill: none; stroke: var(--dv-stamp); stroke-width: 4; stroke-linejoin: miter; }
.dv-step-card { position: relative; z-index: 1; grid-row: 1; background: #fff; border: 2px solid var(--dv-ink); padding: 40px 28px 30px; }
.dv-step-card--1 { grid-column: 1; margin-top: clamp(200px, 16vw, 240px); }
.dv-step-card--2 { grid-column: 2; margin-top: clamp(118px, 9vw, 132px); }
.dv-step-card--3 { grid-column: 3; margin-top: 0; }
.dv-step-card__num { position: absolute; top: -24px; left: 26px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--dv-stamp); color: #fff; font-family: var(--dv-display); font-weight: 800; font-size: 1.3rem; animation: dv-step 3.6s ease-in-out infinite; }
.dv-step-card--2 .dv-step-card__num { animation-delay: -1.2s; }
.dv-step-card--3 .dv-step-card__num { animation-delay: -2.4s; }
@keyframes dv-step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dv .dv-step-card__kick { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); line-height: 1; color: var(--dv-ink); }
.dv-step-card__title { margin: 12px 0 0; font-weight: 700; font-size: 1.15rem; color: var(--dv-ink); }
.dv-step-card__text { margin: 8px 0 22px; color: var(--dv-muted); }
.dv-ladder__more { margin: clamp(40px, 5vw, 60px) 0 0; padding-top: 22px; border-top: 2px solid var(--dv-ink); font-size: 1.08rem; color: var(--dv-text); }
.dv-ladder__more a { font-weight: 700; margin-left: .4em; }

/* =================================================================
   V1 demo filmstrip
   ================================================================= */
.dv-strip__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.dv-strip__head .dv-lede { margin: 0; }
.dv-strip__viewport { margin-top: clamp(36px, 4.5vw, 56px); padding-inline: max(var(--dv-gutter), calc((100vw - 1400px) / 2 + var(--dv-gutter))); overflow: hidden; cursor: grab; touch-action: pan-y; }
.dv-strip__viewport.is-dragging { cursor: grabbing; }
/* Without JavaScript, or with reduced motion, the strip is a plain side scroller. */
html:not(.dv-js) .dv-strip__viewport, html.dv-reduced .dv-strip__viewport { overflow-x: auto; overflow-y: visible; cursor: auto; scroll-snap-type: x proximity; }
.dv-strip__track { display: flex; gap: 26px; width: max-content; padding: 6px 0 26px; }
.dv-democard { flex: none; width: clamp(290px, 31vw, 450px); background: #fff; border: 1px solid var(--dv-line); border-top: 6px solid var(--tint, var(--dv-navy)); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.dv-democard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(20,42,80,.55); }
.dv-democard__shot { display: block; text-decoration: none; }
.dv-browser { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef1f6; border-bottom: 1px solid var(--dv-line); }
.dv-browser i { width: 9px; height: 9px; border-radius: 50%; background: #c9d1de; flex: none; }
.dv-browser span { margin-left: 8px; font-size: .875rem; color: #4f5a73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-democard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: #f4f6fa; }
.dv-democard__img img { display: block; width: 100%; height: auto; transition: transform 5.5s cubic-bezier(.3,.1,.2,1); user-select: none; -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) {
    .dv-democard:hover .dv-democard__img img { transform: translateY(calc(-100% + 100cqh)); }
}
.dv-democard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.dv-democard__type { margin: 0; font-size: .88rem; font-weight: 600; color: var(--tint, var(--dv-muted)); }
.dv .dv-democard__name { margin: 4px 0 12px; font-family: var(--dv-display); font-weight: 700; font-size: 1.32rem; line-height: 1.15; color: var(--dv-ink); }
.dv-democard__parts { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dv-democard__parts li { font-size: .875rem; font-weight: 600; padding: 5px 9px; background: var(--dv-mist); color: var(--dv-ink); }
.dv-democard__body .dv-btn { margin-top: auto; align-self: flex-start; }
.dv-strip__nav { display: flex; align-items: center; gap: 20px; }
.dv-strip__count { font-family: var(--dv-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dv-ink); min-width: 3.5em; }
.dv-strip__progress { flex: 1; height: 3px; background: var(--dv-line); position: relative; }
.dv-strip__progress i { position: absolute; left: 0; top: 0; height: 100%; width: 12%; background: var(--dv-ink); }
.dv-strip__btns { display: flex; gap: 8px; }

/* =================================================================
   V1 belief busters: flip cards
   ================================================================= */
.dv-busters__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 3.5vw, 44px); }
.dv-flip { grid-column: span 4; position: relative; min-height: 236px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; perspective: 1400px; }
.dv-flip--1 { grid-column: span 5; }
.dv-flip--2 { grid-column: span 7; }
.dv-flip--3 { grid-column: span 4; }
.dv-flip--4 { grid-column: span 3; }
.dv-flip--5 { grid-column: span 5; }
.dv-flip__inner { position: relative; display: block; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.2,.75,.2,1); }
.dv-flip.is-flipped .dv-flip__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .dv-flip:hover .dv-flip__inner { transform: rotateY(180deg); } }
.dv-flip__face { position: absolute; inset: 0 0 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 30px 32px 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* The front is what the owner says: a speech bubble, tail and all (a shape that means something, so it keeps its curves) */
.dv-flip__front { background: #fff; border-radius: 28px; }
.dv-flip__front::after { content: ''; position: absolute; left: 44px; bottom: -20px; width: 34px; height: 22px; background: #fff; clip-path: polygon(0 0, 100% 0, 8% 100%); }
/* The back is our answer */
.dv-flip__back { background: var(--dv-stamp); color: #fff; transform: rotateY(180deg); justify-content: center; gap: 12px; }
.dv-flip__q { font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.45rem, 1rem + 1.3vw, 2.15rem); line-height: 1.1; color: var(--dv-ink); }
.dv-flip__lead { font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.15; color: #fff; }
.dv-flip__a { font-size: 1.04rem; line-height: 1.55; color: #fff; }
.dv-flip__hint { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .95rem; color: var(--dv-stamp); }
html:not(.dv-js) .dv-flip__inner, html.dv-reduced .dv-flip__inner, html.dv-static .dv-flip__inner { transform: none !important; }
html:not(.dv-js) .dv-flip__face, html.dv-reduced .dv-flip__face, html.dv-static .dv-flip__face { position: relative; transform: none; }
html:not(.dv-js) .dv-flip__hint, html.dv-reduced .dv-flip__hint, html.dv-static .dv-flip__hint { display: none; }

/* =================================================================
   Receipt pricing
   ================================================================= */
.dv-price__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 410px); gap: clamp(36px, 5vw, 84px); align-items: center; }
.dv-paytoggle { display: inline-grid; grid-auto-flow: column; border: 2px solid var(--dv-ink); margin: 30px 0 20px; }
.dv-paytoggle__btn { padding: 13px 18px; border: 0; border-right: 2px solid var(--dv-ink); background: transparent; color: var(--dv-ink); font-weight: 700; font-size: .98rem; cursor: pointer; transition: background-color .2s, color .2s; }
.dv-paytoggle__btn:last-child { border-right: 0; }
.dv-paytoggle__btn.is-on { background: var(--dv-ink); color: #fff; }
.dv-price__slip { display: flex; justify-content: center; }
.dv-receipt {
    position: relative; width: min(100%, 410px); background: #fff; color: #17213a;
    padding: 30px 28px 24px; transform: rotate(-1.4deg);
    box-shadow: 0 34px 60px -34px rgba(20,42,80,.6), 0 2px 0 rgba(20,42,80,.06);
    font-family: var(--dv-display);
    animation: dv-sway 7s ease-in-out infinite alternate;
}
.dv-receipt::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M0 0h20L10 12z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
    background-size: 20px 12px;
}
@keyframes dv-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(-.6deg) translateY(-4px); } }
.dv-receipt__head { text-align: center; padding-bottom: 14px; border-bottom: 2px dashed #c4ccda; }
.dv-receipt__logo { display: block; width: 30px; height: auto; margin: 0 auto 8px; }
.dv-receipt__shop { margin: 0; font-weight: 800; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; }
.dv-receipt__sub { margin: 2px 0 0; font-size: .9rem; color: #59647d; font-weight: 600; }
.dv-receipt__lines { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 11px; }
.dv-receipt__line { display: flex; align-items: baseline; gap: 8px; font-size: 1.04rem; font-weight: 600; }
.dv-receipt__label { flex: none; }
.dv-receipt__dots { flex: 1 1 18px; min-width: 18px; border-bottom: 2px dotted #a8b1c3; transform: translateY(-5px); }
.dv-receipt__value { flex: none; max-width: 62%; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dv-receipt__total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 2px dashed #c4ccda; font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dv-receipt__thanks { margin: 14px 0 0; text-align: center; font-size: .92rem; font-weight: 600; color: #4c5770; }
.dv-receipt__code { display: flex; justify-content: center; align-items: stretch; gap: 2px; height: 44px; margin-top: 14px; }
.dv-receipt__code i { display: block; background: #17213a; }
.dv-receipt__value.is-printing { color: var(--dv-stamp); }

/* =================================================================
   We run on one
   ================================================================= */
.dv-own__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 80px); align-items: center; }

/* =================================================================
   FAQ
   ================================================================= */
.dv-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.dv-faq__intro { position: sticky; top: calc(var(--dv-head, 80px) + 32px); }
.dv-faq__intro > div { margin-top: 22px; }
.dv-faq__mark { display: block; width: max-content; margin-top: 26px; font-family: var(--dv-display); font-weight: 800; font-size: clamp(150px, 15vw, 250px); line-height: .82; color: #d6deeb; transform-origin: 40% 85%; animation: dv-bob 6.5s ease-in-out infinite; }
@keyframes dv-bob { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-14px); } }
.dv-qa { border-top: 2px solid var(--dv-ink); }
.dv-qa:last-child { border-bottom: 2px solid var(--dv-ink); }
.dv-qa__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem); line-height: 1.25; color: var(--dv-ink); }
/* A square tick box: the plus turns to a minus and the box fills with ink. */
.dv-qa__icon { position: relative; flex: none; width: 34px; height: 34px; border: 2px solid var(--dv-ink); transition: background-color .25s; }
.dv-qa__icon::before, .dv-qa__icon::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--dv-stamp); transition: transform .3s, background-color .25s; }
.dv-qa__icon::after { transform: rotate(90deg); }
.dv-qa__q:hover .dv-qa__icon { background: #fff; }
.dv-qa__q[aria-expanded="true"] .dv-qa__icon { background: var(--dv-ink); }
.dv-qa__q[aria-expanded="true"] .dv-qa__icon::before, .dv-qa__q[aria-expanded="true"] .dv-qa__icon::after { background: #fff; }
.dv-qa__q[aria-expanded="true"] .dv-qa__icon::after { transform: rotate(0deg); }
.dv-qa__a p { margin: 0; padding: 0 0 24px; color: var(--dv-muted); line-height: 1.65; }
html.dv-js .dv-qa__a { height: 0; overflow: hidden; }

/* =================================================================
   Final call to action
   ================================================================= */
.dv-final { overflow: clip; padding-block: clamp(96px, 12vw, 176px); }
/* The screen is framed at 16:10 and drifts inside its frame, so it never
   stands taller than the window (media-height-check). */
.dv-final__screen { position: absolute; right: -6%; top: 6%; width: min(66%, 960px); height: 0; padding-bottom: min(41.25%, 600px); overflow: hidden; opacity: .11; transform: rotate(-5deg); pointer-events: none; }
.dv-final__screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.1) translate(2%, 2.5%); animation: dv-drift 16s ease-in-out infinite alternate; }
@keyframes dv-drift { from { transform: scale(1.1) translate(2%, 2.5%); } to { transform: scale(1.1) translate(-2%, -2.5%); } }
.dv-final__inner { position: relative; }
.dv .dv-final__title { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); }

/* =================================================================
   V2 "One screen"
   ================================================================= */
html.dv-js { --dv-head: 80px; }
@media (max-width: 1023px) { html.dv-js { --dv-head: 64px; } }

/* The sweep: a tall section with a sticky stage (no pin-spacer) */
.dv-sweep { padding: 0; height: 300svh; }
.dv-sweep__stage { position: sticky; top: var(--dv-head, 80px); height: calc(100svh - var(--dv-head, 80px)); overflow: clip; }
.dv-sweep__gl { position: absolute; inset: 0; z-index: 0; }
.dv-sweep__gl canvas { display: block; width: 100% !important; height: 100% !important; }
.dv-sweep__inner { position: relative; z-index: 1; height: 100%; perspective: 1500px; }
.dv-sweep__copy { position: absolute; left: var(--dv-gutter); top: 0; bottom: 0; margin: auto 0; height: max-content; width: min(40%, 600px); z-index: 4; }
.dv .dv-sweep__h1 { font-size: clamp(2.3rem, 1.1rem + 3.3vw, 4.25rem); }
.dv-sweep__or { display: block; color: #ff74b8; }
.dv-sweep__copy--b { visibility: hidden; opacity: 0; }
.dv-sweep__copy--b .dv-link { display: inline-block; margin-top: 22px; color: #fff; }
.dv-proof--ink { color: var(--dv-on-ink); }
.dv-proof--ink i { color: #ff74b8; }
.dv-sweep__frame { position: absolute; right: var(--dv-gutter); top: 0; bottom: 0; margin: auto 0; height: max-content; width: 52%; z-index: 1; background: #fff; box-shadow: 0 50px 90px -40px rgba(0,0,0,.7); opacity: 0; }
.dv-sweep__screen { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.dv-sweep__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dv-frags { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-style: preserve-3d; }
.dv-frag { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)) translateZ(var(--z)); transform-origin: 50% 50%; }
.dv-frag__card { display: block; font-size: .92rem; line-height: 1.3; color: #17213a; box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); animation: dv-float 6s ease-in-out infinite; }
.dv-frag:nth-child(2n) .dv-frag__card { animation-duration: 7.4s; animation-delay: -2s; }
.dv-frag:nth-child(3n) .dv-frag__card { animation-duration: 5.2s; animation-delay: -3.5s; }
@keyframes dv-float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(4px, -12px) rotate(1.5deg); } }
.dv-frag__bar { display: block; padding: 6px 10px; background: #e6ebf3; font-size: .74rem; font-weight: 700; color: #4b5671; }
.dv-frag--sheet { background: #fff; width: 300px; }
.dv-sheet { display: grid; grid-template-columns: 1fr 1.3fr 1fr .8fr; font-size: .78rem; }
.dv-sheet b, .dv-sheet i { padding: 5px 7px; border-right: 1px solid #d5dbe6; border-bottom: 1px solid #d5dbe6; font-style: normal; white-space: nowrap; }
.dv-sheet b { background: #f2f5f9; font-weight: 700; }
.dv-sheet i.is-err { color: #c2263b; font-weight: 700; }
.dv-frag--chat { width: 250px; background: #efeae2; padding-bottom: 8px; }
.dv-bub { display: block; margin: 8px 10px 0; padding: 8px 11px; max-width: 85%; border-radius: 12px; font-size: .875rem; background: #fff; }
.dv-bub--out { margin-left: auto; background: #d8f6c6; }
.dv-frag--note, .dv-frag--note2 { padding: 22px 20px; width: 170px; background: #f7d65a; font-family: var(--dv-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.dv-frag--note2 { width: 120px; background: #ff9fc7; }
.dv-frag--mail { width: 280px; padding: 12px 14px 12px 30px; background: #fff; position: relative; }
.dv-frag--mail b { display: block; font-size: .9rem; }
.dv-frag--mail span:last-child { display: block; font-size: .875rem; color: #59647d; margin-top: 2px; }
.dv-frag__dot { position: absolute; left: 12px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: #1a73e8; }
.dv-frag--pdf { width: 170px; padding: 14px; background: #fff; border-top: 26px solid #c2263b; position: relative; }
.dv-frag__tag { position: absolute; top: -21px; left: 12px; color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .06em; }
.dv-frag--pdf b { display: block; font-size: .8rem; }
.dv-frag__big { display: block; font-family: var(--dv-display); font-weight: 800; font-size: 1.4rem; margin: 4px 0; }
.dv-frag--pdf span:last-child { font-size: .74rem; color: #6a7590; }
.dv-frag--tabs { display: flex; gap: 2px; background: #cdd5e2; padding: 6px 6px 0; }
.dv-frag--tabs span { padding: 7px 12px; background: #e6ebf3; font-size: .78rem; font-weight: 600; white-space: nowrap; border-radius: 8px 8px 0 0; }
.dv-frag--tabs span.is-on { background: #fff; }
.dv-frag--cal { width: 150px; background: #fff; text-align: center; padding: 0 0 12px; }
.dv-frag__month { display: block; background: #c2263b; color: #fff; font-weight: 700; font-size: .78rem; padding: 4px; letter-spacing: .08em; text-transform: uppercase; }
.dv-frag--cal b { display: block; font-family: var(--dv-display); font-weight: 800; font-size: 1.9rem; margin: 6px 0 2px; }
.dv-frag--cal span:last-child { font-size: .74rem; color: #4b5671; padding: 0 8px; display: block; }
.dv-frag--stock { width: 180px; background: #fffdf3; padding: 12px 14px; border-top: 10px solid #5b6478; }
.dv-frag--stock b { display: block; margin-bottom: 4px; }
.dv-frag--stock span { display: block; font-size: .82rem; border-bottom: 1px solid #d9dfe9; padding: 3px 0; }
.dv-frag--call { padding: 12px 16px; background: #fff; font-weight: 700; font-size: .9rem; border-left: 5px solid #c2263b; white-space: nowrap; }
.dv-frag--sms { padding: 12px 16px; background: #1a63c9; color: #fff; border-radius: 18px 18px 4px 18px; font-weight: 600; white-space: nowrap; }
.dv-frag--slip { padding: 12px 14px; background: #fff; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.dv-sweep__hint { position: absolute; left: 50%; bottom: 22px; z-index: 5; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); font-weight: 600; font-size: .9rem; color: var(--dv-on-ink); }
.dv-sweep__hint span { width: 2px; height: 26px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.dv-sweep__hint span::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #ff74b8; animation: dv-hint 1.6s ease-in-out infinite; }
@keyframes dv-hint { to { top: 100%; } }
/* No sticky scene without motion: the finished screen, the copy and no scraps */
html.dv-reduced .dv-sweep, html.dv-static .dv-sweep, html:not(.dv-js) .dv-sweep { height: auto; padding-block: clamp(56px, 7vw, 100px); }
html.dv-reduced .dv-sweep__stage, html.dv-static .dv-sweep__stage, html:not(.dv-js) .dv-sweep__stage { position: relative; top: 0; height: auto; }
html.dv-reduced .dv-sweep__inner, html.dv-static .dv-sweep__inner, html:not(.dv-js) .dv-sweep__inner { display: grid; grid-template-columns: min(calc(40% + var(--dv-gutter) * .8), 600px) minmax(0, 1fr); grid-template-areas: "a frame" "b frame"; gap: 32px 48px; align-items: center; height: auto; }
html.dv-reduced .dv-sweep__copy, html.dv-static .dv-sweep__copy, html:not(.dv-js) .dv-sweep__copy,
html.dv-reduced .dv-sweep__frame, html.dv-static .dv-sweep__frame, html:not(.dv-js) .dv-sweep__frame { position: relative; left: auto; right: auto; inset: auto; width: auto; margin: 0; opacity: 1; visibility: visible; }
/* Copy at the same width as in the scene, so its headings break the same way with and without motion. */
html.dv-reduced .dv-sweep__copy--a, html.dv-static .dv-sweep__copy--a, html:not(.dv-js) .dv-sweep__copy--a { grid-area: a; }
html.dv-reduced .dv-sweep__copy--b, html.dv-static .dv-sweep__copy--b, html:not(.dv-js) .dv-sweep__copy--b { grid-area: b; }
html.dv-reduced .dv-sweep__frame, html.dv-static .dv-sweep__frame, html:not(.dv-js) .dv-sweep__frame { grid-area: frame; }
html.dv-reduced .dv-frags, html.dv-static .dv-frags, html:not(.dv-js) .dv-frags,
html.dv-reduced .dv-sweep__hint, html.dv-static .dv-sweep__hint, html:not(.dv-js) .dv-sweep__hint { display: none; }

/* One job, enquiry to paid */
.dv-job { padding-bottom: 0; }
.dv-job__track { position: relative; height: 420svh; }
.dv-job__stage { position: sticky; top: var(--dv-head, 80px); height: calc(100svh - var(--dv-head, 80px)); display: flex; align-items: center; }
.dv-job__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.dv-job__steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: 2px; }
.dv-job__steps::before, .dv-job__steps::after { content: ''; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 3px; background: var(--dv-line); }
.dv-job__steps::after { background: var(--dv-stamp); transform-origin: top; transform: scaleY(var(--job-p, 0)); }
.dv-job__step { position: relative; padding: 9px 0 9px 14px; opacity: .38; transition: opacity .35s; }
.dv-job__step::before { content: ''; position: absolute; left: -29px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--dv-line-2); transition: border-color .35s, background-color .35s; }
.dv-job__step.is-done { opacity: .62; }
.dv-job__step.is-done::before { border-color: var(--dv-stamp); background: var(--dv-stamp); }
.dv-job__step.is-on { opacity: 1; }
.dv-job__step.is-on::before { border-color: var(--dv-stamp); }
.dv-job__when { display: block; font-family: var(--dv-display); font-weight: 700; font-size: .92rem; color: var(--dv-stamp); }
.dv-job__what { display: block; font-size: clamp(.98rem, .9rem + .3vw, 1.1rem); line-height: 1.45; color: var(--dv-ink); font-weight: 500; }
.dv-job__shot { display: none; }
.dv-laptop { position: relative; }
.dv-laptop__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f6fa; border: 14px solid #1b2232; border-bottom-width: 18px; border-radius: 16px 16px 0 0; container-type: size; }
.dv-laptop__shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .45s; }
.dv-laptop__shot.is-on { opacity: 1; animation: dv-pan 18s ease-in-out infinite alternate; }
@media (min-width: 1024px) and (max-height: 860px) {
    .dv-job__step { padding: 5px 0 5px 14px; }
    .dv-job__step::before { top: 10px; }
    .dv-job__when { font-size: .84rem; }
    .dv-job__what { font-size: .94rem; line-height: 1.35; }
}
@media (min-width: 1024px) and (max-height: 760px) {
    .dv-job__step:not(.is-on) .dv-job__what { display: none; }
}
.dv-clock__sec { stroke: #ff74b8; stroke-width: 2; stroke-linecap: round; transform-origin: 60px 60px; animation: dv-sec 12s linear infinite; }
@keyframes dv-sec { to { transform: rotate(360deg); } }
.dv-laptop__base { position: relative; height: 16px; margin: 0 -7%; background: #c8d0dd; border-radius: 0 0 14px 14px; }
.dv-laptop__base::after { content: ''; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; margin-left: -9%; background: #aab4c5; border-radius: 0 0 8px 8px; }
.dv-job__count { margin: 16px 0 0; text-align: right; font-family: var(--dv-display); font-weight: 700; color: var(--dv-muted); font-variant-numeric: tabular-nums; }
/* The rubber stamp (its rounded border is the shape of a real stamp) */
.dv-stamp {
    position: absolute; right: 7%; bottom: 12%; z-index: 3; padding: 10px 18px;
    border: 5px double var(--dv-stamp); border-radius: 8px; background: rgba(255,255,255,.82); color: var(--dv-stamp);
    font-family: var(--dv-display); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1vw, 2rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    transform: rotate(-12deg); opacity: 0; pointer-events: none;
}
.dv-stamp--sm { font-size: 1.05rem; padding: 6px 12px; border-width: 4px; right: 5%; bottom: 8%; }
html.dv-reduced .dv-job__track, html.dv-static .dv-job__track, html:not(.dv-js) .dv-job__track { height: auto; }
html.dv-reduced .dv-job__stage, html.dv-static .dv-job__stage, html:not(.dv-js) .dv-job__stage { position: relative; top: 0; height: auto; padding-bottom: clamp(72px, 9vw, 136px); }
html.dv-reduced .dv-job__step, html.dv-static .dv-job__step, html:not(.dv-js) .dv-job__step { opacity: 1; }

/* Overnight: solid colours stepping from night to morning */
.dv-night { padding: 0; background: #0b1730; color: #fff; }
.dv-night .dv-h2 { color: inherit; }
.dv-night .dv-lede { color: inherit; opacity: .85; }
.dv-night__track { height: 260svh; }
.dv-night__stage { position: sticky; top: var(--dv-head, 80px); height: calc(100svh - var(--dv-head, 80px)); display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 48px); overflow: clip; }
.dv-night__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.dv-clock { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.dv-clock svg { width: clamp(90px, 9vw, 128px); height: auto; overflow: visible; }
.dv-clock__face { fill: none; stroke: currentColor; stroke-width: 3; opacity: .55; }
.dv-clock__tick { stroke: currentColor; stroke-width: 3; opacity: .55; }
.dv-clock__hour { stroke: var(--dv-flap); stroke-width: 6; stroke-linecap: round; transform-origin: 60px 60px; }
.dv-clock__min { stroke: currentColor; stroke-width: 4; stroke-linecap: round; transform-origin: 60px 60px; }
.dv-clock__pin { fill: var(--dv-flap); }
.dv-clock__time { font-family: var(--dv-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); font-variant-numeric: tabular-nums; color: var(--dv-flap); }
.dv-board { background: #070d1b; color: var(--dv-flap); padding: clamp(14px, 1.6vw, 22px); border: 2px solid #26324d; box-shadow: inset 0 0 0 4px #0b1428, 0 30px 60px -30px rgba(0,0,0,.7); }
.dv-board__row { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); padding: 5px 0; border-bottom: 1px solid #18233b; }
.dv-board__row:last-child { border-bottom: 0; }
.dv-board__time, .dv-board__label, .dv-board__value { display: flex; gap: 2px; }
.dv-board__label { flex: 1; }
.dv-flap {
    position: relative; display: inline-grid; place-items: center; width: 1.08em; height: 1.5em;
    background: #131c31; color: var(--dv-flap);
    font-family: var(--dv-display); font-weight: 700; font-size: clamp(.7rem, .42rem + .82vw, 1.2rem); line-height: 1;
}
.dv-flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.6); }
.dv-board__time .dv-flap { color: #fff; }
.dv-night__morning { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.dv-brief { position: relative; background: #fff; color: var(--dv-ink); padding: 22px 26px; border-left: 6px solid var(--dv-stamp); box-shadow: 0 30px 60px -30px rgba(20,42,80,.5); }
.dv-brief__head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--dv-display); font-weight: 700; font-size: .95rem; color: var(--dv-stamp); }
.dv-brief__text { margin: 0; font-size: clamp(1rem, .92rem + .3vw, 1.15rem); line-height: 1.55; font-weight: 500; }
.dv-night__close { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.2rem); line-height: 1.15; }
html.dv-js:not(.dv-static):not(.dv-reduced) .dv-night__morning { opacity: 0; transform: translateY(30px); }
html.dv-reduced .dv-night, html.dv-static .dv-night { background: #142a50; }
html.dv-reduced .dv-night__track, html.dv-static .dv-night__track, html:not(.dv-js) .dv-night__track { height: auto; }
html.dv-reduced .dv-night__stage, html.dv-static .dv-night__stage, html:not(.dv-js) .dv-night__stage { position: relative; top: 0; height: auto; padding-block: clamp(72px, 9vw, 136px); }

/* System map */
.dv-map__head, .dv-pick__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.dv-map__head .dv-lede, .dv-pick__head .dv-lede { margin: 0; }
.dv-map__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 3vw, 48px); margin-top: clamp(36px, 4.5vw, 56px); align-items: center; }
.dv-map__board { position: relative; aspect-ratio: 1000 / 640; }
.dv-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dv-map__spoke { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dv-map__feed { fill: none; stroke: var(--dv-stamp); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .3s; }
.dv-map__feed.is-on { opacity: 1; }
.dv-map__pulse { fill: none; stroke: #ff74b8; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dv-map__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 22px; background: var(--dv-stamp); color: #fff; font-family: var(--dv-display); font-weight: 700; font-size: clamp(.95rem, .8rem + .4vw, 1.15rem); white-space: nowrap; box-shadow: 0 0 0 8px rgba(214,21,125,.18); animation: dv-core 2.6s ease-in-out infinite; }
@keyframes dv-core { 50% { box-shadow: 0 0 0 16px rgba(214,21,125,.06); } }
.dv-map__node { position: absolute; transform: translate(-50%, -50%); padding: 9px 13px; background: var(--dv-ink-2); border: 1px solid rgba(255,255,255,.22); color: #fff; font-family: var(--dv-display); font-weight: 700; font-size: clamp(.72rem, .6rem + .3vw, .9rem); white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
.dv-map__node:hover { border-color: #fff; }
.dv-map__node.is-fed { border-color: var(--dv-stamp); color: #ffb6d8; }
.dv-map__node.is-on { background: #fff; color: var(--dv-ink); border-color: #fff; transform: translate(-50%, -50%) scale(1.06); }
.dv-map__panel { background: #fff; color: var(--dv-ink); padding: clamp(22px, 2.4vw, 32px); }
.dv-map__spot { display: block; width: 128px; height: 128px; object-fit: contain; margin: 0 auto 14px; mix-blend-mode: multiply; }
.dv .dv-map__title { margin: 0; font-family: var(--dv-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--dv-ink); text-align: center; }
.dv-map__desc { margin: 10px 0 0; color: var(--dv-muted); text-align: center; }
.dv-map__feeds-head { margin: 18px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-stamp); text-align: center; }
.dv-map__feeds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dv-map__feeds li { padding: 5px 10px; background: var(--dv-mist); font-size: .85rem; font-weight: 600; }
.dv-map__connects { margin: clamp(28px, 3vw, 40px) 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); color: var(--dv-on-ink); }

/* Demos: a list with a preview pane */
.dv-pick__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 3.5vw, 56px); margin-top: clamp(36px, 4.5vw, 56px); align-items: start; }
.dv-pick__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--dv-ink); }
.dv-pick { padding-block: clamp(48px, 5vw, 76px); }
.dv-pick .dv-pick__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(28px, 3vw, 40px); }
/* One line per business, its trade set to the right, so the list and the
   screen beside it fit one screen together. */
.dv-pick__item { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; grid-template-areas: "num name type"; align-items: baseline; column-gap: 10px; padding: 12px 14px 12px 10px; border-bottom: 1px solid var(--dv-line-2); text-decoration: none !important; color: var(--dv-ink) !important; transition: background-color .25s, padding-left .25s; }
.dv-pick__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--tint); transition: width .25s; }
.dv-pick__item.is-on { background: #fff; padding-left: 20px; }
.dv-pick__item.is-on::before { width: 6px; }
.dv-pick__num { grid-area: num; align-self: center; font-family: var(--dv-display); font-weight: 700; font-size: 1.05rem; color: var(--dv-muted); font-variant-numeric: tabular-nums; }
.dv-pick__item.is-on .dv-pick__num { color: var(--tint); }
.dv-pick__name { grid-area: name; font-family: var(--dv-display); font-weight: 700; font-size: 1.16rem; line-height: 1.2; }
.dv-pick__type { grid-area: type; font-size: .9rem; color: var(--dv-muted); text-align: right; }
.dv-pick__thumb { display: none; }
.dv-pick__pane { position: sticky; top: calc(var(--dv-head, 80px) + 24px); }
.dv-pick__frame { background: #fff; border: 1px solid var(--dv-line); box-shadow: 0 34px 60px -34px rgba(20,42,80,.5); }
.dv-pick__screen { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: size; }
.dv-pick__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; animation: dv-pan 16s ease-in-out infinite alternate; }
/* The screen scrolls down its own page inside the frame. Moving object-position
   rather than the image keeps the image element the size of its frame, so a
   long screenshot never stands taller than the window. */
@keyframes dv-pan { 0%, 12% { object-position: 50% 0; } 88%, 100% { object-position: 50% 100%; } }
.dv-pick__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.dv-pick__parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 320px; }
.dv-pick__parts li { padding: 5px 9px; background: #fff; border: 1px solid var(--dv-line); font-size: .875rem; font-weight: 600; }

/* =================================================================
   V3 "Test drive it"
   ================================================================= */
/* A configurator: the headline across the top, then the controls beside
   the live screen. Everything a visitor reads or presses fits the first
   screen of a 1366x768 laptop; only the bottom of the (aria-hidden) screen
   may run past the fold there. */
.dv-hero3 { padding-top: clamp(22px, 3.4vh, 52px); padding-bottom: clamp(56px, 7vw, 104px); overflow: clip; }
.dv-hero3__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro intro" "tools screen"; gap: clamp(18px, 2.8vh, 32px) clamp(28px, 3.5vw, 56px); align-items: start; }
.dv-hero3__intro { grid-area: intro; }
.dv-hero3__tools { grid-area: tools; }
.dv-hero3__screen { grid-area: screen; }
.dv .dv-hero3__h1 { font-size: clamp(2.4rem, 1.2rem + 2.5vw, 3.5rem); }
.dv-hero3__intro .dv-lede { margin-top: clamp(8px, 1.4vh, 16px); }
.dv-tune { display: grid; gap: 14px; padding: 18px; border: 2px solid var(--dv-ink); background: #fff; box-shadow: 8px 8px 0 var(--dv-ink); }
.dv-tune__field { display: grid; gap: 6px; }
.dv-tune__label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-stamp); }
.dv-tune__input { width: 100%; padding: 13px 14px; border: 2px solid var(--dv-line-2); border-radius: 0; font-family: var(--dv-display); font-weight: 700; font-size: 1.15rem; color: var(--dv-ink); background: #fff; }
.dv-tune__input:focus { outline: none; border-color: var(--dv-ink); box-shadow: 4px 4px 0 var(--dv-stamp); }
/* Paint chips: taller than wide, so every one is a full 44px thumb target. */
.dv-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.dv-swatch { width: 100%; height: 46px; border: 3px solid #fff; background: var(--sw); box-shadow: 0 0 0 2px var(--dv-line-2); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.dv-swatch:hover { transform: translateY(-2px); }
.dv-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--dv-ink); transform: translateY(-2px); }
.dv-chips--sm .dv-chip { min-height: 44px; padding: 8px 10px; font-size: .88rem; }
.dv-hero3__tools .dv-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dv-hero3__tools .dv-actions { margin-top: clamp(18px, 2.6vh, 28px); }
.dv-chip[aria-checked="true"] { background: var(--dv-ink); border-color: var(--dv-ink); color: #fff; }
.dv-hero3__note { margin: 12px 0 0; font-size: .9rem; color: var(--dv-muted); }
/* Short laptop screens: the controls tighten so the buttons and the note stay above the fold at 1280x720. */
@media (min-width: 1024px) and (max-height: 800px) {
    .dv-hero3 { padding-top: 18px; }
    .dv-hero3__grid { row-gap: 16px; }
    .dv-tune { gap: 10px; padding: 14px; }
    .dv-swatch { height: 40px; }
    .dv-hero3__tools .dv-chip { min-height: 40px; padding-block: 6px; }
    .dv-hero3__tools .dv-actions { margin-top: 14px; }
}

/* The replica: an HTML version of a demo home screen that the controls
   restyle. It is set at the size a real dashboard is read at (14px text), so
   a visitor can read their own name and figures in it, not squint at them. */
.dv-rep {
    --acc: #b45309; --acc-soft: #fdf0e0; --side: #20242c; --side-ink: #d5dae3;
    background: #fff; border: 1px solid var(--dv-line-2); box-shadow: 0 50px 90px -46px rgba(20,42,80,.55), 0 0 0 10px rgba(20,42,80,.04);
    font-size: 14px; line-height: 1.4; color: #1d2433; overflow: hidden;
}
.dv-rep__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eef1f6; border-bottom: 1px solid var(--dv-line); }
/* The three window dots are one element: three small boxes in a row next to
   the charts read to site-qa's thread check as a timeline the charts should join. */
.dv-rep__dots { flex: none; width: 42px; height: 10px; background: radial-gradient(circle 5px at 5px 5px, #c9d1de 96%, transparent 100%) 0 0 / 16px 10px repeat-x; }
.dv-rep__bar span { margin-left: 8px; font-size: 14px; color: #4f5a73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-rep__app { display: grid; grid-template-columns: 25% 1fr; }
.dv-rep__side { background: var(--side); color: var(--side-ink); padding: 16px 12px; transition: background-color .6s; }
.dv-rep__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.dv-rep__logo { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--acc); color: #fff; font-weight: 700; font-size: 13px; transition: background-color .6s; }
.dv-rep__who { min-width: 0; }
.dv-rep__who b { display: block; color: #fff; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-rep__who small { display: block; font-size: 13px; line-height: 1.3; margin-top: 2px; }
.dv-rep__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dv-rep__nav li { padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-rep__nav li.is-on { background: var(--acc); color: #fff; font-weight: 700; transition: background-color .6s; }
.dv-rep__main { padding: 16px 18px 18px; background: #f5f7fa; display: grid; gap: 12px; align-content: start; min-width: 0; }
.dv-rep__top { display: flex; justify-content: space-between; align-items: center; }
.dv-rep__today b { display: block; font-size: 14px; }
.dv-rep__today small { color: #556079; font-size: 13px; }
.dv-rep__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff; border: 1px solid var(--dv-line); font-weight: 700; font-size: 13px; }
.dv-rep__live i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: dv-blink 1.4s ease-in-out infinite; }
@keyframes dv-blink { 50% { opacity: .25; } }
.dv-rep__hello { margin: 0; }
.dv-rep__hello b { display: block; font-size: 20px; line-height: 1.25; color: #111827; }
.dv-rep__hello span { color: #556079; font-size: 14px; }
/* Each figure is a small card: the label across the top, the number with its
   trend line beside it, and how it moved across the bottom. */
.dv-rep__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dv-rep__kpi { transition: box-shadow .5s, background-color .5s; display: grid; grid-template-columns: minmax(0, 1fr) 40%; grid-template-areas: "label label" "value spark" "move move"; column-gap: 12px; align-items: end; background: #fff; border: 1px solid #e3e7ee; padding: 11px 14px 12px; min-width: 0; }
.dv-rep__kpi span { grid-area: label; display: block; color: #556079; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-rep__kpi b { grid-area: value; display: block; font-size: 26px; line-height: 1.15; margin-top: 4px; color: #111827; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-rep__kpi small { grid-area: move; display: block; font-size: 14px; color: var(--acc); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .6s; }
.dv-rep__kpi svg { grid-area: spark; display: block; width: 100%; height: 34px; margin-bottom: 4px; overflow: visible; }
.dv-rep__kpi path { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .6s; }
.dv-rep__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
.dv-rep__card { background: #fff; border: 1px solid #e3e7ee; padding: 12px 14px; min-width: 0; }
.dv-rep__h { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; color: #111827; }
.dv-rep__h i { display: inline-block; padding: 1px 6px; margin-right: 4px; background: var(--acc-soft); color: var(--acc); font-style: normal; font-size: 12px; transition: background-color .6s, color .6s; }
.dv-rep__kpi.is-live { box-shadow: inset 0 0 0 2px var(--acc); background-color: color-mix(in srgb, var(--acc-soft) 55%, #fff); transition-duration: .15s; }
.dv-rep__plot { position: relative; display: block; }
.dv-rep__chart svg { display: block; width: 100%; height: 118px; overflow: visible; }
/* "Now" on the revenue line: a data point, so a circle, pinging while the screen is live. */
.dv-rep__now { position: absolute; right: -5px; top: calc(var(--now-y, .2) * 100%); width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--acc); transition: top .6s, background-color .6s; }
.dv-rep__now::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: dv-ping 1.8s ease-out infinite; }
@keyframes dv-ping { from { transform: scale(1); opacity: .55; } to { transform: scale(3.4); opacity: 0; } }
.dv-rep__area { fill: var(--acc-soft); stroke: none; transition: fill .6s; }
.dv-rep__line { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .6s; }
.dv-rep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dv-rep__attn li, .dv-rep__brief li, .dv-rep__feed li { position: relative; padding-left: 16px; font-size: 14px; }
.dv-rep__attn li::before, .dv-rep__brief li::before, .dv-rep__feed li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--acc); transition: background-color .6s; }
/* New activity arrives at the top and the oldest slides out under a fade. */
.dv-rep__rest { visibility: hidden; }
.dv-rep__feed ul { height: 128px; overflow: hidden; align-content: start; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* The admin ledger */
.dv-cost__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dv-cost .dv-field__top { color: #fff; }
.dv-cost .dv-field__top output { color: #ff74b8; }
.dv-cost .dv-range::-webkit-slider-runnable-track { background: rgba(255,255,255,.22); }
.dv-cost .dv-range::-moz-range-track { background: rgba(255,255,255,.22); }
.dv-cost__fields { margin-top: 30px; }
.dv-sup { text-decoration: none !important; color: #ff74b8 !important; font-weight: 700; padding-left: 2px; }
.dv-ledger { position: relative; background: #fff; color: var(--dv-ink); padding: 26px 28px 26px 58px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.65); }
.dv-ledger::before { content: ''; position: absolute; left: 38px; top: 0; bottom: 0; width: 2px; background: #e2647f; }
.dv-ledger__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--dv-ink); font-family: var(--dv-display); font-weight: 700; font-size: 1.2rem; }
.dv-ledger__head span { font-size: .85rem; font-weight: 700; color: var(--dv-muted); }
.dv-ledger__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid #cdd8ea; font-size: 1.02rem; }
.dv-ledger__row b { font-family: var(--dv-display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.dv-ledger__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 16px 0 12px; border-bottom: 4px double var(--dv-ink); }
.dv-ledger__total > span { font-weight: 700; }
.dv-ledger__total b { font-family: var(--dv-display); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.2rem); line-height: 1; color: var(--dv-stamp); font-variant-numeric: tabular-nums; }
.dv-ledger__total small { font-size: .38em; font-weight: 700; color: var(--dv-ink); }
.dv-ledger__weeks { margin: 14px 0 0; font-weight: 600; }
.dv-ledger__pay { margin: 8px 0 0; color: var(--dv-muted); font-size: .95rem; }
.dv-cost__source { margin: clamp(28px, 3vw, 40px) 0 0; font-size: .9rem; color: var(--dv-on-ink); }
.dv-cost__source a { color: #fff; }

/* The demo ring: a curved wall of nine screens (CSS 3D, not WebGL) */
.dv-wall__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 80px); align-items: start; }
.dv-wall__head .dv-lede { margin: 0; }
.dv-wall__stage { position: relative; height: clamp(320px, 30vw, 430px); margin-top: clamp(32px, 4vw, 52px); perspective: 2000px; perspective-origin: 50% 45%; cursor: grab; touch-action: pan-y; user-select: none; }
.dv-wall__stage.is-dragging { cursor: grabbing; }
.dv-wall__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.dv-wall__card {
    --w: clamp(250px, 23vw, 340px); --r: calc(var(--w) * 1.62);
    position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -0.42); width: var(--w);
    display: block; background: #fff; border-top: 5px solid var(--tint); text-decoration: none !important; color: var(--dv-ink) !important;
    transform: rotateY(calc(var(--i) * 40deg)) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 30px 50px -30px rgba(20,42,80,.6); transition: box-shadow .3s;
}
.dv-wall__card.is-front { box-shadow: 0 40px 70px -30px rgba(20,42,80,.75), 0 0 0 3px var(--tint); }
.dv-wall__shot { position: relative; display: block; height: 0; padding-bottom: 62.5%; overflow: hidden; }
.dv-wall__shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; pointer-events: none; }
.dv-wall__label { display: block; padding: 10px 12px 12px; }
.dv-wall__label b { display: block; font-family: var(--dv-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.dv-wall__label small { display: block; font-size: .82rem; color: var(--dv-muted); }
.dv-wall__detail { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(24px, 3vw, 40px); align-items: start; }
/* A deeper magenta than the stamp: the stamp itself is 4.4:1 on mist, short of AA for text. */
.dv-wall__type { margin: 0; font-weight: 700; color: #b8106a; }
.dv .dv-wall__name { margin: 4px 0 0; font-family: var(--dv-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; color: var(--dv-ink); }
.dv-wall__nav { display: inline-flex; gap: 8px; }
.dv-wall__parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.dv-wall__parts li { padding-top: 10px; border-top: 2px solid var(--dv-ink); font-size: .95rem; }
.dv-wall__parts b { display: block; color: var(--dv-ink); }
.dv-wall__parts span { color: var(--dv-muted); }

/* =================================================================
   Textures: every band carries something to look at (SVG patterns, never gradients)
   ================================================================= */
/* graph paper for the light openers */
.dv-hero1, .dv-hero3, .dv-wtest, .dv-proto, .dv-pick, .dv-film { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 .5H.5V44' fill='none' stroke='%23e8ecf3'/%3E%3C/svg%3E"); background-size: 44px 44px; }
/* a scatter of light on the dark bands */
.dv-busters, .dv-cost, .dv-night, .dv-map { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='14' cy='22' r='1.2' opacity='.18'/%3E%3Ccircle cx='76' cy='10' r='.9' opacity='.12'/%3E%3Ccircle cx='98' cy='64' r='1.3' opacity='.16'/%3E%3Ccircle cx='40' cy='88' r='1' opacity='.12'/%3E%3Ccircle cx='62' cy='46' r='.8' opacity='.1'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; }
/* notepad rules behind the questions */
.dv-faq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='38'%3E%3Cpath d='M0 37.5H40' stroke='%23dfe5ef'/%3E%3C/svg%3E"); background-size: 40px 38px; }
/* the shared reviews band, on these pages only */
#swd-testimonials { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23e4e9f1'/%3E%3C/svg%3E"); background-size: 26px 26px; }
@media (max-width: 1023px) {
    #swd-testimonials [aria-label="Previous reviews"] { left: -4px; }
    #swd-testimonials [aria-label="Next reviews"] { right: -4px; }
}
/* Keep the floating chat button clear of the footer's last row */
@media (min-width: 1024px) { footer { padding-bottom: 76px; } }
/* "We run on one" fits one laptop screen */
.dv-own { padding-block: clamp(64px, 7.5vw, 112px); }
.dv-own .dv-body { font-size: 1rem; }
.dv-own .dv-ticks { gap: 9px; margin-top: 20px; }
/* The shared film's caption is slate-500, 4.2:1 on mist; slate-600 clears AA. */
.dv .pf--light .pf-note { color: #475569; }
/* The pains' closing line types in with a clip, not split letters */
.dv-pains__line { clip-path: inset(0 0 0 0); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1023px) {
    .dv-sweep { height: 220svh; }
    .dv-sweep__copy { left: var(--dv-gutter); right: var(--dv-gutter); width: auto; top: 18px; bottom: auto; margin: 0; }
    .dv .dv-sweep__h1 { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 2.6rem); }
    .dv-sweep__copy--a .dv-proof { display: none; }
    .dv-sweep__copy--a .dv-lede { margin-top: 14px; }
    .dv-sweep__copy--a .dv-actions { margin-top: 18px; }
    .dv-sweep__frame { left: var(--dv-gutter); right: var(--dv-gutter); width: auto; top: auto; bottom: 64px; margin: 0; }
    .dv-frag { left: var(--mx); top: var(--my); }
    .dv-frag--desk { display: none; }
    .dv-frag__card { font-size: .875rem; }
    .dv-frag--sheet { width: 236px; } .dv-frag--chat { width: 214px; } .dv-frag--mail { width: 240px; }
    .dv-frag--note { width: 140px; font-size: 1rem; padding: 16px; }
    .dv-sheet { font-size: .68rem; }
    html.dv-reduced .dv-sweep__inner, html.dv-static .dv-sweep__inner, html:not(.dv-js) .dv-sweep__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "frame" "b"; }
    .dv-job__track { height: auto; }
    .dv-job__stage { position: relative; top: 0; height: auto; padding-bottom: clamp(72px, 9vw, 136px); }
    .dv-job__grid { grid-template-columns: minmax(0, 1fr); }
    .dv-job__device { display: none; }
    .dv-job__steps { gap: 26px; }
    .dv-job__step { opacity: 1; }
    .dv-job__shot { display: block; position: relative; margin-top: 12px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--dv-line); background: #f4f6fa; }
    .dv-job__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
    .dv-night__track { height: auto; }
    .dv-night__stage { position: relative; top: 0; height: auto; padding-block: clamp(72px, 9vw, 136px); }
    .dv-night__grid, .dv-night__morning { grid-template-columns: minmax(0, 1fr); }
    .dv-map__head, .dv-pick__head, .dv-map__grid, .dv-pick__grid { grid-template-columns: minmax(0, 1fr); }
    .dv-map__board { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 8px; }
    .dv-map__svg, .dv-map__core { display: none; }
    .dv-map__node { position: static; transform: none !important; min-height: 44px; }
    .dv-pick__pane { display: none; }
    .dv-pick__item { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-areas: "num name" "num type" "thumb thumb"; }
    .dv-pick__type { text-align: left; }
    .dv-pick__thumb { grid-area: thumb; display: block; margin-top: 12px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--dv-line); }
    .dv-pick__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
    .dv-hero1__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "tool" "extra"; row-gap: 30px; }
    .dv-fan { display: none; }
    .dv-test { min-height: 0; box-shadow: 7px 7px 0 var(--dv-ink); }
    .dv-away { margin-top: 6px; }
    .dv-stairs { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-left: 26px; }
    .dv .dv-stairs__title { grid-column: 1; margin-left: -26px; }
    .dv-step-card, .dv-step-card--1, .dv-step-card--2, .dv-step-card--3 { grid-column: 1; grid-row: auto; margin-top: 0; }
    .dv-strip__head, .dv-price__grid, .dv-own__grid, .dv-faq__grid { grid-template-columns: minmax(0, 1fr); }
    .dv-faq__intro { position: static; }
    .dv-faq__mark { display: none; }
    .dv-busters__grid { grid-template-columns: minmax(0, 1fr); }
    .dv-flip, .dv-flip--1, .dv-flip--2, .dv-flip--3, .dv-flip--4, .dv-flip--5 { grid-column: auto; min-height: 220px; }
    .dv-strip__viewport { overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: auto; }
    .dv-strip__viewport::-webkit-scrollbar { display: none; }
    .dv-democard { scroll-snap-align: start; width: min(82vw, 400px); }
    .dv-final__screen { width: 120%; padding-bottom: 75%; right: -40%; top: auto; bottom: -10%; }
}
@media (max-width: 1023px) {
    .dv-hero3__grid, .dv-cost__grid, .dv-wall__head, .dv-wall__detail { grid-template-columns: minmax(0, 1fr); }
    .dv-hero3__grid { grid-template-areas: "intro" "screen" "tools"; }
    .dv-hero3__tools .dv-chips { display: flex; }
    .dv-rep__app { grid-template-columns: 1fr; min-height: 0; }
    .dv-rep__side { padding: 10px 12px; }
    .dv-rep__brand { margin: 0; }
    .dv-rep .dv-rep__nav { display: none; }
    .dv-rep__kpi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "move" "spark"; }
    .dv-rep__kpi span, .dv-rep__kpi small { white-space: normal; }
    .dv-rep__kpi svg { height: 26px; margin: 8px 0 0; }
    .dv-rep__row { grid-template-columns: minmax(0, 1fr); }
    .dv-rep__attn { display: none; }
    .dv-wall__stage { height: auto; perspective: none; overflow-x: auto; scroll-snap-type: x mandatory; cursor: auto; touch-action: auto; scrollbar-width: none; }
    .dv-wall__stage::-webkit-scrollbar { display: none; }
    .dv-wall__ring { position: static; display: flex; gap: 14px; width: max-content; height: auto; transform: none !important; padding: 6px var(--dv-gutter) 18px; }
    .dv-wall__card { position: static; flex: none; width: min(78vw, 340px); transform: none !important; scroll-snap-align: center; }
    .dv-wall__parts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
    /* On a phone the screen is a short scroll above the controls: the figures
       become rows and the revenue chart steps out. */
    .dv-rep__kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .dv-rep__kpi { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "move value"; align-items: center; column-gap: 14px; padding: 10px 14px; }
    .dv-rep__kpi b { margin: 0; font-size: 24px; }
    .dv-rep__kpi svg, .dv-rep__chart { display: none; }
    .dv-paytoggle { grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
    .dv-paytoggle__btn { border-right: 0; border-bottom: 2px solid var(--dv-ink); }
    .dv-paytoggle__btn:nth-child(odd) { border-right: 2px solid var(--dv-ink); }
    .dv-paytoggle__btn:nth-last-child(-n+2) { border-bottom: 0; }
    .dv-res__top { grid-template-columns: 1fr; justify-items: start; }
    .dv-pillar { grid-template-columns: 7.5rem 1fr 2.4rem; }
    .dv-test__body { padding: 22px 18px 14px; }
    .dv-test__foot { padding: 0 18px 16px; }
    .dv-strip__btns { display: none; }
    .dv-receipt { padding: 26px 20px 20px; }
    .dv-receipt__line { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dv *, .dv *::before, .dv *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* The test and the prototype request on tablets and phones: one column, the
   running score above the questions, compact. */
@media (max-width: 1023px) {
    .dv-wtest__head, .dv-proto__head, .dv-wtest__grid, .dv-proto__grid, .dv-res__cols { grid-template-columns: minmax(0, 1fr); }
    .dv-score { position: relative; top: 0; order: -1; box-shadow: 7px 7px 0 var(--dv-stamp); }
    .dv-score__pillars { display: none; }
    .dv-proto__preview { position: relative; top: 0; }
    .dv-mini__app { min-height: 0; }
}
@media (max-width: 599px) {
    .dv-test--wide .dv-test__body { padding: 22px 18px 16px; min-height: 0; }
    .dv-answers--grid, .dv-tstep__sliders, .dv-res--wide .dv-res__ctas, .dv-pfield--row { grid-template-columns: minmax(0, 1fr); }
    .dv-answers--grid .dv-answer { min-height: 0; }
    .dv-score { padding: 16px 16px 18px; }
    .dv-score__top { grid-template-columns: 110px minmax(0, 1fr); }
    .dv-gauge--live { width: 110px; }
    .dv-gauge--live .dv-gauge__num { font-size: 1.7rem; }
    .dv-proto__main { box-shadow: 7px 7px 0 var(--dv-ink); }
    .dv-proto__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dv-proto__navbtn { flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; font-size: .78rem; text-align: center; }
    .dv-pstep { padding: 0 18px; }
    .dv-proto__error { margin: 0 18px 18px; }
    .dv-pstep__foot { flex-wrap: wrap; }
    .dv-pstep__small { text-align: left; }
    .dv-mini__app { grid-template-columns: minmax(0, 1fr); }
    .dv-mini__nav { display: flex; flex-wrap: wrap; }
}
/* One line per area in the preview, so it stays inside the screen however many screens are ticked */
.dv-mini__list li { padding: 7px 10px; }
.dv-mini__list b { display: flex; justify-content: space-between; gap: 8px; }
.dv-mini__list span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) {
    /* the section heading already names the test: keep the question near the score */
    .dv-test--wide .dv-test__head { display: none; }
}
/* Before the first answer the empty score strip ripples, inviting a start */
.dv-score:not(.is-started) .dv-score__pips rect { animation: dv-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes dv-wave { 0%, 60%, 100% { fill: rgba(255,255,255,.12); } 30% { fill: rgba(157,183,234,.7); } }
/* The preview's example systems, shown until the visitor starts their own */
.dv-mini.is-example .dv-mini__list li, .dv-mini.is-example .dv-mini__nav li:not(.is-on) { opacity: .92; }
.dv-proto__example { margin: 10px 0 0; font-size: .95rem; color: var(--dv-muted); }
.dv-proto__example[hidden] { display: none; }

/* =================================================================
   Site skin (Lee, 2026-10-02): the main site's look on these pages.
   Inter throughout, pill buttons (above), and the site's slightly
   rounded cards and boxes with soft shadows instead of square corners
   and hard offset shadows. Kept last so it wins over the rules above.
   ================================================================= */
.dv-test, .dv-proto__main { border: 1px solid var(--dv-card-line); border-radius: var(--dv-r); box-shadow: var(--dv-shadow); }
.dv-test__head, .dv-proto__nav { border-radius: calc(var(--dv-r) - 1px) calc(var(--dv-r) - 1px) 0 0; overflow: hidden; }
.dv-score, .dv-proto__done { border-radius: var(--dv-r); box-shadow: 0 30px 60px -30px rgba(20,42,80,.55); }
.dv-step-card { border: 1px solid var(--dv-card-line); border-radius: var(--dv-r); box-shadow: var(--dv-shadow); }
.dv-step-card__num { border-radius: 12px; }
.dv-chip { border-width: 1px; border-color: #cbd5e1; border-radius: 9999px; }
.dv-chip:hover { border-color: var(--dv-brand); background: #eef1f8; }
.dv-chip.is-picked, .dv-chip[aria-pressed="true"], .dv-chip[aria-checked="true"] { background: var(--dv-brand); border-color: var(--dv-brand); color: #fff; }
.dv-answer { border-width: 1px; border-color: #cbd5e1; border-radius: var(--dv-r-sm); }
.dv-answer:hover { border-color: var(--dv-brand); background: #eef1f8; }
.dv-answer.is-picked { background: var(--dv-brand); border-color: var(--dv-brand); }
.dv-answer__key { border-width: 1.5px; border-radius: 8px; }
.dv-pinput, .dv-tune__input { border: 1px solid #cbd5e1; border-radius: 10px; }
.dv-pinput:focus, .dv-tune__input:focus { border-color: #4a6eaa; box-shadow: 0 0 0 3px rgba(74,110,170,.22); }
select.dv-pinput { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23475569' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
.dv-pchip span { border-width: 1px; border-color: #cbd5e1; border-radius: 9999px; }
.dv-pchip:hover span { border-color: var(--dv-brand); }
.dv-pchip input:checked + span { background: var(--dv-brand); border-color: var(--dv-brand); }
.dv-pchip--check span::before { border-radius: 4px; border-width: 1.5px; }
.dv-pchip--check input:checked + span::before { background: #fff; border-color: #fff; box-shadow: inset 0 0 0 3px var(--dv-brand); }
.dv-pchip input:focus-visible + span { outline-color: #4a6eaa; }
.dv-pfile { border-width: 1.5px; border-radius: var(--dv-r-sm); }
.dv-pfile:focus-within { border-color: #4a6eaa; box-shadow: 0 0 0 3px rgba(74,110,170,.22); }
.dv-pfile__btn { border-radius: 9999px; background: var(--dv-brand); }
.dv-proto__error, .dv-proto__test, .dv-res__relies { border-radius: var(--dv-r-sm); }
.dv-res__cost { border-radius: 14px; }
.dv-fix { border-width: 1px; border-color: var(--dv-card-line); border-radius: var(--dv-r-sm); }
.dv-fix::before { border-radius: 8px; }
.dv-mini { border-radius: 14px; }
.dv-mini__logo { border-radius: 8px; }
.dv-mini__count { border-radius: 10px; }
.dv-mini__list li { border-radius: 8px; }
.dv-mini__nav li { border-radius: 6px; }
.dv-democard, .dv-pick__frame, .dv-sweep__frame, .dv-final__screen, .dv-fan__inner, .dv-rep, .dv-wall__card { border-radius: 14px; overflow: hidden; }
.dv-democard__parts li, .dv-pick__parts li, .dv-map__feeds li { border-radius: 9999px; }
.dv-pick__item.is-on { border-radius: var(--dv-r-sm); }
.dv-pick__item::before { border-radius: 6px 0 0 6px; }
.dv-flip__front, .dv-flip__back { border-radius: 24px; }
.dv-qa__icon { border-radius: 9999px; border-width: 1.5px; }
.dv-board { border-radius: var(--dv-r); }
.dv-flap { border-radius: 3px; }
.dv-brief, .dv-map__panel, .dv-ledger, .dv-tune { border-radius: var(--dv-r); }
.dv-tune { border: 1px solid var(--dv-card-line); box-shadow: var(--dv-shadow); }
.dv-map__node, .dv-map__core { border-radius: 9999px; }
.dv-swatch { border-radius: 10px; }
.dv-pains__score { border-radius: var(--dv-r-sm); }
.dv-frag__card:not(.dv-frag--sms) { border-radius: 6px; }
.dv-paytoggle { border-width: 1.5px; border-color: var(--dv-brand); border-radius: 9999px; overflow: hidden; }
.dv-paytoggle__btn { border-right-color: var(--dv-brand); color: var(--dv-brand); }
.dv-paytoggle__btn.is-on { background: var(--dv-brand); }
.dv-range::-webkit-slider-runnable-track { border-radius: 9999px; }
.dv-range::-moz-range-track { border-radius: 9999px; }
.dv-range::-webkit-slider-thumb { border-radius: 50%; background: var(--dv-brand); box-shadow: 0 0 0 1px rgba(15,23,42,.25), 0 2px 6px rgba(15,23,42,.25); }
.dv-range::-moz-range-thumb { border-radius: 50%; background: var(--dv-brand); box-shadow: 0 0 0 1px rgba(15,23,42,.25), 0 2px 6px rgba(15,23,42,.25); }
.dv-cost .dv-range::-webkit-slider-thumb { background: #fff; }
.dv-cost .dv-range::-moz-range-thumb { background: #fff; }
.dv-pillar__track, .dv-pillar__fill, .dv-test__bar span { border-radius: 9999px; }
.dv-gauge__track, .dv-gauge__fill { stroke-linecap: round; }
@media (max-width: 599px) {
    .dv-paytoggle { border-radius: var(--dv-r-sm); }
    .dv-paytoggle__btn { border-color: var(--dv-brand); }
}

/* The demo picker shows the top of each screen, still (Lee: panning showed
   the middle of a page, which looked odd). */
.dv-pick__screen img { animation: none; object-position: 50% 0; }

/* ---------- V2 hero: the sweep ---------- */
.dv .dv-sweep__h1 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.5rem); }
.dv-sweep__ctas { margin-top: 26px; }
@media (max-width: 1023px) {
    .dv .dv-sweep__h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.5rem); }
}

/* ---------- One job: the stage in bold beside its time ---------- */
.dv-job__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.dv-job__label { font-weight: 700; font-size: clamp(1rem, .95rem + .2vw, 1.1rem); color: var(--dv-heading); }

/* ---------- Finder: type what the business does ---------- */
.dv-find { position: relative; }
.dv-find__input { padding-left: 46px; min-height: 54px; font-size: 1.05rem; }
.dv-find__icon { position: absolute; left: 16px; top: 27px; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: #64748b; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.dv-find__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--dv-card-line); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(15,23,42,.3); max-height: min(340px, 52vh); overflow-y: auto; }
.dv-find__list[hidden] { display: none; }
.dv-find__opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.dv-find__opt b { font-weight: 600; color: var(--dv-heading); }
.dv-find__opt span { flex: none; font-size: .875rem; color: var(--dv-muted); text-align: right; }
.dv-find__opt:hover, .dv-find__opt.is-active { background: #eef1f8; }
.dv-find__note { padding: 8px 12px 6px; font-size: .875rem; font-weight: 600; color: var(--dv-muted); }
.dv-find__or { margin: 18px 0 10px; font-size: .95rem; font-weight: 600; color: var(--dv-muted); }
.dv-chips--fam { gap: 8px; }
.dv-chips--fam .dv-chip { font-size: .92rem; padding: 10px 15px; }
label.dv-tstep__q { display: block; }

/* ---------- The prototype request: title and form left, the preview right ---------- */
.dv-proto { padding-block: clamp(44px, 4.5vw, 72px); }
.dv-proto__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title side" "form side"; gap: 22px clamp(24px, 3vw, 44px); margin-top: 0; }
.dv-proto__title { grid-area: title; align-self: end; }
.dv-proto__side { grid-area: side; position: sticky; top: calc(var(--dv-head, 80px) + 20px); }
.dv-proto__side[hidden] { display: none; }
.dv-proto__form, .dv-proto__done { grid-area: form; min-width: 0; }
.dv-proto__done { margin-top: 0; }
.dv .dv-proto__lede { margin: 0 0 20px; font-size: 1.08rem; }
.dv-proto__main { padding-bottom: 20px; }
.dv-proto__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 20px; }
.dv-proto__navbtn { min-height: 52px; padding: 8px 12px; font-size: .9rem; gap: 8px; }
.dv-proto__navbtn span { width: 24px; height: 24px; border-width: 1.5px; border-radius: 9999px; font-size: .8rem; }
.dv-proto__navbtn.is-on { background: #fff; color: var(--dv-heading); }
.dv-proto__navbtn.is-on span { background: var(--dv-brand); border-color: var(--dv-brand); color: #fff; }
.dv-proto__navbtn.is-done span { background: #4a6eaa; border-color: #4a6eaa; }
.dv .dv-pstep__title { margin-bottom: 14px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.dv-pstep__lede { margin-bottom: 16px; font-size: .98rem; }
.dv-pfield { margin-bottom: 16px; }
.dv-pfield__label { margin-bottom: 7px; }
.dv-pstep__foot { margin-top: 4px; }
.dv-pcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.dv-pchips--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dv-pchips--grid .dv-pchip { display: flex; }
.dv-pchips--grid .dv-pchip span { width: 100%; border-radius: var(--dv-r-sm); padding: 8px 12px; font-size: .92rem; }
/* Step 2: the areas of the business as tabs, their screens beside them */
.dv-pfeat { display: grid; grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr); gap: 18px; align-items: start; }
.dv-pfeat__tabs { display: grid; gap: 4px; }
.dv-pfeat__tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.25; color: var(--dv-text); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.dv-pfeat__tab:hover { background: #f1f5f9; }
.dv-pfeat__tab.is-on { background: var(--dv-brand); color: #fff; }
.dv-pfeat__tab b { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 9999px; background: #e2e8f0; color: var(--dv-heading); font-size: .8rem; text-align: center; }
.dv-pfeat__tab b:empty { display: none; }
.dv-pfeat__tab.is-on b { background: rgba(255,255,255,.22); color: #fff; }
.dv-pfeat__line { margin: 0 0 12px; font-size: .95rem; color: var(--dv-muted); }
.dv-pfeat__nojs { display: none; }
html:not(.dv-js) .dv-pfeat, html.dv-static .dv-pfeat { display: block; }
html:not(.dv-js) .dv-pfeat__tabs, html.dv-static .dv-pfeat__tabs { display: none; }
html:not(.dv-js) .dv-pfeat__pane[hidden], html.dv-static .dv-pfeat__pane[hidden] { display: block; }
html:not(.dv-js) .dv-pfeat__pane + .dv-pfeat__pane, html.dv-static .dv-pfeat__pane + .dv-pfeat__pane { margin-top: 20px; }
html:not(.dv-js) .dv-pfeat__nojs, html.dv-static .dv-pfeat__nojs { display: inline; color: var(--dv-heading); }
@media (max-width: 1023px) {
    .dv-proto__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
    .dv-proto__side { display: contents; }
    .dv-proto__side[hidden] { display: none; }
    .dv-proto__title { order: 1; }
    .dv .dv-proto__lede { order: 2; margin: 0; }
    .dv-proto__form, .dv-proto__done { order: 3; }
    .dv-proto__preview-head { order: 4; margin-top: 12px; }
    .dv-mini { order: 5; }
    .dv-proto__example { order: 6; }
    .dv-proto__test { order: 7; }
}
@media (max-width: 767px) {
    .dv-pfeat { grid-template-columns: minmax(0, 1fr); }
    .dv-pfeat__tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .dv-pfeat__tabs::-webkit-scrollbar { display: none; }
    .dv-pfeat__tab { flex: none; background: #f1f5f9; }
    .dv-pcols, .dv-pchips--grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
    .dv-proto__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dv-proto__navbtn { font-size: .72rem; padding: 8px 2px; }
}

/* ---------- Software it connects to: two belts ---------- */
.dv-integr { margin-top: clamp(32px, 4vw, 52px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }
.dv-integr__copy { margin: 0 0 22px; font-size: clamp(1.02rem, .98rem + .2vw, 1.15rem); color: var(--dv-on-ink); }
.dv-integr__copy b { color: #fff; }
.dv-integr__belts { display: grid; gap: 12px; margin-inline: calc(var(--dv-gutter) * -1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.dv-integr__set { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0 12px 0 0; }
.dv-integr__belt .dv-marquee__track { animation-duration: 64s; }
.dv-integr__belt.dv-marquee--rev .dv-marquee__track { animation-duration: 74s; }
.dv-integr__pill { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 9999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.dv-integr__pill img { display: block; width: 22px; height: 22px; filter: invert(1); }
.dv-integr__plug { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
    .dv-integr__belts { margin-inline: 0; -webkit-mask-image: none; mask-image: none; }
    .dv-integr__set { flex-wrap: wrap; padding: 0; }
    .dv-integr__set[aria-hidden="true"] { display: none; }
}

/* ---------- Five things: the heading on one line, the answers fitting their cards ---------- */
.dv-flip--1, .dv-flip--2 { grid-column: span 6; }
.dv-flip--3, .dv-flip--4, .dv-flip--5 { grid-column: span 4; }
.dv-flip__lead { font-size: clamp(1.1rem, .95rem + .45vw, 1.35rem); }
.dv-flip__a { font-size: 1rem; line-height: 1.5; }
.dv-flip__face { padding: 26px 28px 24px; }
@media (min-width: 1024px) {
    .dv .dv-busters__title { white-space: nowrap; font-size: min(3rem, 3.25vw); }
}
@media (max-width: 1023px) {
    .dv-flip--1, .dv-flip--2, .dv-flip--3, .dv-flip--4, .dv-flip--5 { grid-column: auto; }
}

/* Each step of the request fits one laptop screen beside the preview: the
   step tabs name the step, so its own title is kept for screen readers only,
   and the extra height of the preview column goes to the form's row. */
.dv-proto__grid { grid-template-rows: auto 1fr; }
.dv-proto__title { align-self: start; }
html.dv-js:not(.dv-static) .dv .dv-pstep__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dv-pchips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dv-pfeat { grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); }
.dv-pfeat__tabs { gap: 2px; }
.dv-mini__app { min-height: 300px; max-height: 420px; overflow: hidden; }
.dv-mini__main { overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
@media (max-width: 1023px) {
    .dv-mini__app { max-height: none; }
    .dv-mini__main { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px) {
    .dv-pchips--3 { grid-template-columns: minmax(0, 1fr); }
}
/* Headings the test moves focus to for screen readers draw no box */
.dv-tstep__q:focus, .dv-res__band:focus, .dv-pstep__title:focus { outline: none; }

/* Phones: the request is one column, so the named areas step aside (a named
   area that the grid no longer has makes implicit tracks). */
@media (max-width: 1023px) {
    .dv-proto__title, .dv-proto__side, .dv-proto__form, .dv-proto__done { grid-area: auto; }
}
/* Phones: the hero copy is longer now, so the type tightens and the scraps
   start lower, clear of the buttons (v2.js measures from the scraps' box). */
@media (max-width: 1023px) {
    .dv .dv-sweep__h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.3rem); }
    .dv-sweep__copy--a .dv-lede { font-size: 1rem; line-height: 1.55; }
    .dv-sweep__copy--a .dv-actions { gap: 10px; }
    .dv-sweep__copy--a .dv-btn { padding: calc(.8rem - 2px) 1.35rem; font-size: .95rem; }
}
@media (max-width: 1023px) {
    .dv-frags { top: 6%; }
    .dv .dv-sweep__copy--b .dv-h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
    .dv-sweep__copy--b .dv-lede { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
    .dv-sweep__copy--b .dv-actions { margin-top: 16px; gap: 8px; }
    .dv-sweep__copy--b .dv-btn { padding: calc(.7rem - 2px) 1.2rem; font-size: .92rem; }
}

/* QA round, 2026-10-02 */
html.dv-js:not(.dv-static) .dv-pstep__title { display: none; }
.dv-pstep:focus { outline: none; }
.dv-chips--fam .dv-chip { min-height: 44px; }
/* Inter sets wider than the receipt's old face: long values wrap inside the slip */
.dv-receipt__value { flex: 0 1 auto; min-width: 0; }
.dv-receipt__thanks { text-wrap: balance; }
/* The big question mark sits under the FAQ's buttons, never over them */
.dv-faq__intro > div { position: relative; z-index: 1; }
.dv-faq__mark { position: relative; z-index: 0; pointer-events: none; }
.dv-receipt__dots { flex-basis: 4px; min-width: 4px; }

/* Round 3 (Lee, 2026-10-02) */
/* Slider labels break the same way whatever the number: the figure keeps a
   fixed width, wide enough for "200 hours". */
.dv-field__top > span { min-width: 0; }
.dv-field__top output { flex: none; min-width: 5.6em; text-align: right; }
@media (max-width: 1199px) { .dv-tstep__sliders { grid-template-columns: minmax(0, 1fr); } }
/* The receipt is wide enough that no price breaks onto a second line; on a
   phone a long price moves under its label as one piece instead. */
@media (min-width: 1024px) { .dv-price__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); } }
.dv-receipt { width: min(100%, 470px); }
.dv-receipt__value { white-space: nowrap; max-width: none; }
@media (max-width: 599px) {
    .dv-receipt__line { flex-wrap: wrap; row-gap: 2px; }
    .dv-receipt__value { margin-left: auto; }
}
/* V2's section bar sits under the header on desktop (subnav.php); the hero
   starts below it rather than under it */
@media (min-width: 1024px) { .dv-v2 .dv-sweep { margin-top: 48px; } }
@media (min-width: 1024px) { html.dv-js.dv-v2 { --dv-head: 128px; } }

/* Round 4 (Lee, 2026-10-02) */
/* "FREE" in the prototype heading: capitals in the brand magenta-to-indigo,
   the same treatment as the site's "Try us before you buy from us!" line.
   Solid magenta where background-clip: text is not supported. */
.dv-free { color: var(--dv-stamp); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .dv-free { background: linear-gradient(90deg, #d6157d 0%, #7c3aed 55%, #4338ca 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
}
/* The no-obligation promise under the send button stands out */
.dv-promise { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--dv-r-sm); background: #ecfdf3; border: 1px solid #a7f3c8; color: #14532d; font-size: 1rem; line-height: 1.45; }
.dv-promise svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 9999px; background: #16a34a; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dv-promise b { color: #14532d; font-weight: 700; }
/* "One system, every department, complete clarity." on two lines, not three */
@media (min-width: 1024px) { .dv-map__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* After sending, the thank-you takes the whole row the preview shared */
.dv-proto__done { grid-column: 1 / -1; }

/* The page film, under the hero (Lee, 2026-10-02) */
.dv-film { padding-block: clamp(56px, 6vw, 96px); }
.dv-film__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.dv-film__copy .dv-lede { margin-top: 18px; }
@media (max-width: 1023px) { .dv-film__grid { grid-template-columns: minmax(0, 1fr); } }

/* "Open This Prototype!" label trailing the pointer over the demo list */
.dv-tip { position: fixed; left: 0; top: 0; z-index: 35; pointer-events: none; padding: 9px 16px; border-radius: 9999px; background: linear-gradient(90deg, #d6157d, #7c3aed); color: #fff; font: 700 .9rem/1.2 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 14px 28px -12px rgba(124,58,237,.6); visibility: hidden; }
.dv-tip::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #9a2bb6; transform: rotate(45deg); border-radius: 2px; }
.dv-tip span { position: relative; z-index: 1; }