/* Dig Virtual — index.html editorial redesign + horizontal storytelling engine.
   Loaded ONLY by index.html, so every rule here is intentionally scoped to
   `body.dv-editorial-home` (or IDs that only exist on this page) and must
   never leak into the shared header/footer partials used by every other
   page. Nothing in js/site-chrome.js, css/design-system.css, js/reveal.js
   or js/parallax.js is modified — reveal.js keeps working unchanged (its
   IntersectionObserver only cares about viewport intersection, which still
   fires correctly whether a panel enters view via vertical or horizontal
   motion), and parallax.js is simply not opted into anywhere on this page
   any more (no data-dv-parallax / data-dv-tilt-scene attributes below). */

:root {
    --dv-ink: #151515;
    --dv-paper: #FAFAF8;
    --dv-coral: #FF5E7E;
    --dv-orange: #FF9147;
    --dv-turquoise: #20C9C5;
    --dv-mint: #8DE3A5;
    --dv-lime: #D8ED38;
    --dv-yellow: #F3E62C;
    --dv-header-h: 0px; /* top header removed — see index-sidebar.css/js */
    --dv-panel-count: 11;
    --dv-rail-w: 4.5rem;
}

/* ============================================================
   Page base
   ============================================================ */
body.dv-editorial-home {
    background: var(--dv-paper);
    color: var(--dv-ink);
}

body.dv-editorial-home h1,
body.dv-editorial-home h2,
body.dv-editorial-home h3 {
    letter-spacing: -0.02em;
}

/* ============================================================
   The fetched header (originally injected into #site-header) is no
   longer shown as a top bar at all — index-sidebar.css hides it and
   relocates its two still-needed pieces (avatar/notifications and the
   guest login link) elsewhere on the page. See index-sidebar.css/js.
   ============================================================ */

/* ============================================================
   Panel scaffolding — DEFAULT (base) mode: a genuine native
   horizontal-swipe carousel. This used to be a plain vertical
   stack that only became horizontal for desktop or (wrongly)
   `(display-mode: standalone)`; that never worked for a real
   swipe gesture even when it matched, because the desktop engine
   maps *vertical* scroll distance to a horizontal transform —
   there's nothing there for a horizontal touch-drag to grab. This
   base mode instead makes #dvHOuter itself a real overflow-x
   scroll container with scroll-snap, so it responds to an actual
   horizontal swipe on any touch device (phone or tablet, Safari
   tab or installed PWA, iOS or Android) with zero JS involved.
   The desktop engine below (mouse/trackpad, wide screens) replaces
   these rules inside its own media query — see below.
   ============================================================ */
#dvHOuter {
    position: relative;
    height: 100dvh;
    margin-left: var(--dv-rail-w);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* No touch-action here (and none on .dv-panel below) — an explicit
       pan-x/pan-y pairing is exactly the kind of ancestor/descendant
       touch-action combination iOS Safari is known to mishandle (it can
       end up disallowing both axes rather than splitting them cleanly
       between the outer x-scroller and the inner y-scroller). Leaving
       touch-action at its default `auto` on both lets WebKit's own
       nested-scroll-container gesture recognition — which already knows
       how to route a horizontal drag to the nearest horizontally
       scrollable ancestor and a vertical drag to the nearest vertically
       scrollable one — pick the axis per gesture natively. */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#dvHOuter::-webkit-scrollbar {
    display: none;
}
#dvHSticky {
    /* Just a passthrough box here — #dvHOuter itself is the real
       scroll viewport in this mode, so nothing needs to be pinned. */
    height: 100%;
}
#dvHTrack {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    height: 100%;
}
.dv-panel {
    position: relative;
    flex: 0 0 calc(100dvw - var(--dv-rail-w));
    width: calc(100dvw - var(--dv-rail-w));
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 4.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-panel-inner {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
}
.dv-panel-light { background: var(--dv-paper); color: var(--dv-ink); }
.dv-panel-dark { background: var(--dv-ink); color: #fff; }

/* Panel 1 hero — same soft blue/mint radial-gradient background as Panel
   8 (which itself matches the platform's own listing-details.html page),
   for a consistent bookend between the first and last panels. Light
   background, so this panel uses the same dark-ink text as every other
   light panel — no colour overrides needed here any more. */
.dv-panel-hero-gradient {
    background:
        radial-gradient(1100px circle at 6% -8%, rgba(0,110,195,0.32), transparent 52%),
        radial-gradient(950px circle at 102% -4%, rgba(63,196,140,0.30), transparent 50%),
        radial-gradient(800px circle at 10% 62%, rgba(63,196,140,0.24), transparent 48%),
        radial-gradient(1000px circle at 96% 92%, rgba(0,110,195,0.26), transparent 50%),
        radial-gradient(650px circle at 55% 28%, rgba(63,196,140,0.16), transparent 45%),
        linear-gradient(180deg, #eef6fd 0%, #eefbf3 100%);
    color: var(--dv-ink);
}

/* On narrow phone screens the circles above (sized in fixed px for
   desktop) no longer fit inside the viewport the way they do on a
   laptop — they overlap each other far more within the small width,
   stacking the semi-transparent colour layers and reading as visibly
   darker/muddier than the same panel on desktop. Sizing the circles
   in vw instead keeps their coverage proportional to the viewport, so
   the panel looks the same shade of light blue/mint on phones as it
   does on a laptop. Scoped to <=767px only, so laptop/tablet — which
   already looks right — is untouched. */
@media (max-width: 767px) {
    .dv-panel-hero-gradient {
        background:
            radial-gradient(76vw circle at 6% -8%, rgba(0,110,195,0.32), transparent 52%),
            radial-gradient(66vw circle at 102% -4%, rgba(63,196,140,0.30), transparent 50%),
            radial-gradient(56vw circle at 10% 62%, rgba(63,196,140,0.24), transparent 48%),
            radial-gradient(69vw circle at 96% 92%, rgba(0,110,195,0.26), transparent 50%),
            radial-gradient(45vw circle at 55% 28%, rgba(63,196,140,0.16), transparent 45%),
            linear-gradient(180deg, #eef6fd 0%, #eefbf3 100%);
    }
}

.dv-panel-index {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: currentColor;
    opacity: 0.35;
}

/* Dig Virtual brand mark used on the final panel, replacing its index
   label — same corner position as .dv-panel-index. */
.dv-panel-brand-logo {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    height: 1.75rem;
    width: auto;
}

.dv-h-snap-mark {
    display: none;
}

/* ============================================================
   Desktop storytelling engine — mouse/trackpad pointer only. Gated
   on (pointer: fine) and (hover: hover) rather than display-mode,
   so it's purely about input capability: a real desktop (including
   one running this site as an installed PWA) gets the wheel-driven
   scroll-jack illusion; anything touch-driven (phone, tablet,
   iPad, or a touch-screen laptop) always gets the native swipe
   carousel above instead, regardless of install state or viewport
   width. Everything in this block overrides the base rules above.
   ============================================================ */
@media (min-width: 1024px) and (pointer: fine) and (hover: hover) and (prefers-reduced-motion: no-preference) {
    #dvHOuter {
        height: calc(var(--dv-panel-count) * 100vh);
        margin-left: 0;
        overflow: visible;
        overscroll-behavior-x: auto;
        scroll-snap-type: none;
    }
    #dvHSticky {
        position: sticky;
        top: var(--dv-header-h);
        height: calc(100vh - var(--dv-header-h));
        overflow: hidden;
    }
    #dvHTrack {
        width: calc(var(--dv-panel-count) * 100vw);
        will-change: transform;
    }
    .dv-panel {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100%;
        overflow-y: visible;
        scroll-snap-align: none;
        padding: 3rem 3rem 3rem calc(var(--dv-rail-w) + 3rem);
    }
    .dv-panel-index {
        font-size: 0.875rem;
        top: 2rem;
        left: calc(var(--dv-rail-w) + 2rem);
    }
    .dv-panel-brand-logo {
        top: 2rem;
        left: calc(var(--dv-rail-w) + 2rem);
        height: 2rem;
    }

    /* Native vertical scroll still drives everything (no wheel
       hijacking), so give it discrete resting points per panel. These
       markers are plain siblings of the sticky viewport, positioned at
       each 100vh offset within the (6 * 100vh) tall #dvHOuter spacer —
       NOT inside the sticky/track/panel stack, which stays pinned at a
       constant on-screen position and so can't carry real scroll-offset
       snap points itself. */
    html {
        scroll-snap-type: y proximity;
    }
    .dv-h-snap-mark {
        display: block;
        position: absolute;
        left: 0;
        width: 1px;
        height: 100vh;
        pointer-events: none;
        scroll-snap-align: start;
    }

}

/* ============================================================
   Hero — editorial type + palette-driven graphic
   (static/CSS-animated only; no pointer-tilt, no scroll-parallax)
   ============================================================ */
.dv-hero-badge-solid {
    background: #0D9488;
}
.dv-gradient-text {
    /* Dualtone: dv-blue (the platform's own shared brand blue, #005393 —
       matches the "01" step badge) -> teal. */
    background: linear-gradient(90deg, #005393, #0D9488);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Scroll/swipe hint — right edge of Panel 1, vertically centred, hinting
   toward Panel 2. Decorative only (aria-hidden, no pointer events), so it
   never competes with real interactive content. */
.dv-hero-scroll-hint {
    position: absolute;
    top: 50%;
    right: clamp(1.25rem, 4vw, 3rem);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--dv-ink);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
}
.dv-hero-scroll-hint::after {
    content: "→";
    font-size: 1.1rem;
    line-height: 1;
}

/* Below the desktop 2-column hero (lg), the panel is a single stacked
   column and the vertically-centred position above overlaps the hero
   copy. Move it down into the empty bottom-right corner instead, where
   there's nothing else on the page — mobile browser and installed PWA
   both hit this same breakpoint, so both get the same corrected spot. */
@media (max-width: 1023px) {
    .dv-hero-scroll-hint {
        top: auto;
        bottom: 1.5rem;
        right: 1.25rem;
        transform: none;
    }
}

.dv-hero-visual {
    position: relative;
    height: 26rem;
}
.dv-hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(50px);
    pointer-events: none;
}
.dv-hero-card {
    position: absolute;
    /* Plain white card — Panel 1's own background is now the same pale
       blue/mint gradient as Panel 8, light enough that a solid white
       card with dark ink text reads cleanly on top of it (no need to
       mirror the panel's background here the way the old dark hero
       gradient required). Pinned explicitly (not inherited) so it
       stays correct regardless of the panel's own ambient colour. */
    background: #fff;
    color: var(--dv-ink);
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -18px rgba(21, 21, 21, 0.25);
    padding: 1.1rem;
    width: 12.5rem;
}
.dv-hero-card-a { top: 0.5rem; left: 1rem; animation: dv-editorial-float-a 7s ease-in-out infinite; }
.dv-hero-card-b { top: 10rem; right: 0.5rem; animation: dv-editorial-float-b 8.5s ease-in-out infinite; }
.dv-hero-card-c { bottom: 0.5rem; left: 3.5rem; animation: dv-editorial-float-c 6.5s ease-in-out infinite; }

@keyframes dv-editorial-float-a {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-14px) rotate(-1deg); }
}
@keyframes dv-editorial-float-b {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(12px) rotate(4deg); }
}
@keyframes dv-editorial-float-c {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .dv-hero-card-a, .dv-hero-card-b, .dv-hero-card-c {
        animation: none;
    }
}

/* ============================================================
   Panels 2..7 — template preview showcase
   ============================================================
   Each panel presents one customsite template as a framed live
   mockup (real dummy business copy, that template's own palette
   and typeface) so a seller can see what their branded site would
   look like before picking it. Text stays var(--dv-ink) throughout
   — the animated backgrounds below are all light/mid-toned, same
   as the reference layout's soft coloured panels. */
.dv-panel-showcase {
    color: var(--dv-ink);
}

.dv-tpl-layout {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.dv-tpl-frame-row {
    /* Grid, not flex: a flex row's aspect-ratio child derives its
       flex-basis from a percentage width, which needs the row's own
       width resolved first — after a client-side navigation (e.g. the
       logout redirect) that first layout pass can land before web
       fonts/ancestor transforms settle, leaving the aspect-ratio box
       computed against a stale near-zero width until something forces
       a full reflow (a hard reload does; scrolling the transform-driven
       track does not). Grid resolves the column tracks deterministically
       before children's intrinsic sizing runs, so this doesn't happen. */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 1.5rem;
}
.dv-tpl-frame {
    position: relative;
    width: 100%;
    max-width: 46rem;
    min-height: 14rem;
    aspect-ratio: 4 / 3;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(21, 21, 21, 0.35);
}
.dv-tpl-num {
    /* Must be a sibling of .dv-tpl-frame (not a child of it) — the frame
       has overflow:hidden to clip its own <img> to its rounded corners,
       which would also clip this number since it deliberately pokes
       above the frame's top edge (negative top). Positioned instead
       relative to .dv-tpl-frame-row (position:relative, no overflow
       clipping), which it's excluded from the grid layout of since
       absolutely-positioned items don't consume a grid track. */
    position: absolute;
    top: -1.9rem;
    left: -0.2rem;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1;
    color: var(--dv-ink);
    z-index: 3;
}
.dv-tpl-side-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(21, 21, 21, 0.55);
    white-space: nowrap;
    align-self: center;
}
.dv-tpl-caption {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    max-width: 40rem;
    line-height: 1.35;
}

.dv-tpl-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ---- the mockup itself (a miniature real-looking homepage) ---- */
.dv-tpl-mock {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem;
    overflow: hidden;
}
.dv-tpl-mock-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: auto;
}
.dv-tpl-mock-nav-pill {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 9999px;
    padding: 0.4rem 0.7rem;
    width: fit-content;
}
.dv-tpl-mock-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.dv-tpl-mock-line {
    height: 0.3rem;
    border-radius: 9999px;
}
.dv-tpl-mock-ring {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    border: 1.5px solid;
    margin: 0 auto;
}
.dv-tpl-mock-hero {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: auto 0;
}
.dv-tpl-mock-hero h4 {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}
.dv-tpl-mock-hero p {
    font-size: 0.72rem;
    margin: 0;
    max-width: 15rem;
}
.dv-tpl-mock-btn {
    display: inline-flex;
    align-self: flex-start;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    margin-top: 0.35rem;
}
.dv-tpl-mock-btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.6rem;
}
.dv-tpl-mock-btn-ghost {
    background: transparent !important;
    border: 1.3px solid;
}
.dv-tpl-mock-rule {
    width: 2.5rem;
    height: 2px;
}
.dv-tpl-mock-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    border: 1.3px solid;
}
.dv-tpl-mock-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid;
    border-radius: 0.75rem;
    padding: 0.5rem 0.6rem;
    margin-top: 0.75rem;
}
.dv-tpl-mock-card span {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.4rem;
    flex-shrink: 0;
}
.dv-tpl-mock-card i {
    height: 0.28rem;
    border-radius: 9999px;
    width: 35%;
    display: block;
}
.dv-tpl-mock-swatch {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    height: 55%;
    border-top-left-radius: 0.9rem;
}
.dv-tpl-mock-chip {
    align-self: flex-start;
    margin-top: 0.6rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid;
}
.dv-tpl-mock-blob {
    position: absolute;
    width: 9rem;
    height: 9rem;
    border-radius: 9999px;
    top: -2rem;
    right: -2rem;
    filter: blur(4px);
}
.dv-tpl-mock-dark { color: #E2E8F0; }
.dv-tpl-mock-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(59,130,246,0.14) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(59,130,246,0.14) 0 1px, transparent 1px 28px);
}
.dv-tpl-mock-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}
.dv-tpl-mock-split-a {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem;
}
.dv-tpl-mock-split-b {
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .dv-tpl-frame-row { grid-template-columns: 1fr; gap: 0.5rem; }
    .dv-tpl-side-label {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

/* ---- panel backgrounds: soft muted tone that drifts continually
   between two close shades of the same hue (2.6-3.4s, alternating).
   Each panel keeps its own single colour family throughout — only
   the tone shifts, never the hue. ---- */
.dv-tpl-bg-1 { animation: dvTplBg1 3s ease-in-out infinite alternate; }
.dv-tpl-bg-2 { animation: dvTplBg2 3.2s ease-in-out infinite alternate; }
.dv-tpl-bg-3 { animation: dvTplBg3 2.8s ease-in-out infinite alternate; }
.dv-tpl-bg-4 { animation: dvTplBg4 3.4s ease-in-out infinite alternate; }
.dv-tpl-bg-5 { animation: dvTplBg5 3s ease-in-out infinite alternate; }
.dv-tpl-bg-6 { animation: dvTplBg6 3.1s ease-in-out infinite alternate; }
.dv-tpl-bg-7 { animation: dvTplBg7 3.3s ease-in-out infinite alternate; }
.dv-tpl-bg-8 { animation: dvTplBg8 2.9s ease-in-out infinite alternate; }
.dv-tpl-bg-9 { animation: dvTplBg9 3.2s ease-in-out infinite alternate; }

@keyframes dvTplBg1 { 0% { background-color: #C9C9C6; } 100% { background-color: #BFBFBB; } }
@keyframes dvTplBg2 { 0% { background-color: #D8B9B0; } 100% { background-color: #CDA79C; } }
@keyframes dvTplBg3 { 0% { background-color: #9AA3C9; } 100% { background-color: #8991B8; } }
@keyframes dvTplBg4 { 0% { background-color: #E3B98D; } 100% { background-color: #D9A876; } }
@keyframes dvTplBg5 { 0% { background-color: #B9ACA3; } 100% { background-color: #AC9D93; } }
@keyframes dvTplBg6 { 0% { background-color: #C7B78F; } 100% { background-color: #BCA97D; } }
@keyframes dvTplBg7 { 0% { background-color: #9FB9C9; } 100% { background-color: #8DAABD; } }
@keyframes dvTplBg8 { 0% { background-color: #B3CDB9; } 100% { background-color: #A2C1A9; } }
@keyframes dvTplBg9 { 0% { background-color: #D3C8BC; } 100% { background-color: #C7BAAC; } }

@media (prefers-reduced-motion: reduce) {
    .dv-tpl-bg-1, .dv-tpl-bg-2, .dv-tpl-bg-3, .dv-tpl-bg-4, .dv-tpl-bg-5, .dv-tpl-bg-6, .dv-tpl-bg-7, .dv-tpl-bg-8, .dv-tpl-bg-9 {
        animation: none;
    }
    .dv-tpl-bg-1 { background-color: #C9C9C6; }
    .dv-tpl-bg-2 { background-color: #D8B9B0; }
    .dv-tpl-bg-3 { background-color: #9AA3C9; }
    .dv-tpl-bg-4 { background-color: #E3B98D; }
    .dv-tpl-bg-5 { background-color: #B9ACA3; }
    .dv-tpl-bg-6 { background-color: #C7B78F; }
    .dv-tpl-bg-7 { background-color: #9FB9C9; }
    .dv-tpl-bg-8 { background-color: #B3CDB9; }
    .dv-tpl-bg-9 { background-color: #D3C8BC; }
}

/* ============================================================
   Panel 9 — "Create Your Website in 3 Steps" final CTA. Uses the
   same soft blue/mint radial-gradient background as the platform's
   own listing-details.html page (its exact body{} gradient values),
   so this closing panel reads as "you're back on Dig Virtual
   proper" rather than another dark editorial panel. Each step card
   keeps its own accent colour from the homepage palette (turquoise
   / coral / lime) so the three steps stay visually distinct.
   ============================================================ */
.dv-panel-final {
    background:
        radial-gradient(1100px circle at 6% -8%, rgba(0,110,195,0.32), transparent 52%),
        radial-gradient(950px circle at 102% -4%, rgba(63,196,140,0.30), transparent 50%),
        radial-gradient(800px circle at 10% 62%, rgba(63,196,140,0.24), transparent 48%),
        radial-gradient(1000px circle at 96% 92%, rgba(0,110,195,0.26), transparent 50%),
        radial-gradient(650px circle at 55% 28%, rgba(63,196,140,0.16), transparent 45%),
        linear-gradient(180deg, #eef6fd 0%, #eefbf3 100%);
}
.dv-panel-final .dv-panel-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.25rem;
}

.dv-final-eyebrow {
    display: block;
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 4.2vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--dv-ink);
    max-width: 42rem;
}

.dv-final-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 100%;
    max-width: 62rem;
}
@media (min-width: 800px) {
    .dv-final-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dv-final-step {
    position: relative;
    text-align: center;
    padding: 0 0.5rem;
}
/* Numbered-badge row with a dashed connector running from the centre of
   this step's circle to the centre of the next one, matching the
   "1 - - - 2 - - - 3" step-tracker layout. */
.dv-final-step-badge {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.dv-final-step-badge::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    border-top: 2px dashed rgba(21, 21, 21, 0.25);
    transform: translateY(-50%);
    z-index: 0;
}
.dv-final-step:last-child .dv-final-step-badge::after {
    display: none;
}
.dv-final-step-num {
    /* Colour (dv-blue) and font (font-heading) are applied as Tailwind
       utility classes in the markup instead of hardcoded here, both
       sourced from site-chrome.js's shared Tailwind config — so this
       number badge stays in sync with the rest of the platform's
       dv-blue/font-heading branding rather than the editorial palette
       used elsewhere on this page. */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(21, 21, 21, 0.18);
}
.dv-final-step h3 {
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    letter-spacing: -0.01em;
    margin: 0 0 0.55rem;
    color: var(--dv-ink);
}
.dv-final-step p {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(21, 21, 21, 0.65);
    margin: 0;
}
.dv-final-step p strong {
    color: var(--dv-ink);
}

.dv-final-flow {
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 2.8vw, 1.85rem);
    letter-spacing: -0.01em;
    margin: 0;
}
/* "Choose → Create →" — a three-colour gradient spanning both words and
   both arrows as one run (same turquoise/coral/lime accents used on the
   three step cards above), so it reads as one tricolour phrase rather
   than three separately-clipped fragments. */
.dv-final-flow-tricolor {
    color: #000;
}
.dv-final-flow-solid {
    color: #000;
}

.dv-final-footer {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(21, 21, 21, 0.45);
    margin: 0;
}