/* ===========================================================================
   MADDS — DATA ANALYTICS & VISUALIZATION ("dav-") · page stylesheet
   Visual language: "the gallery" — hand-built SVG charts hung like framed
   exhibits: gallery-wall hero, staggered chart wall, guided-tour callouts,
   desk nameplates, an open dashboard autopsy, an outcome bar wall.
   Page theming only re-sets variables (--acc-* / --ds-* / --tx* / --hair);
   the shared ds- base classes are not redefined here.

   Retinted to the HOME PAGE theme (style.css / hero-lens.css / about-glass.css):
     field   = the home hero gradient   #0a0b2e -> #4a128c -> #7b2ff7
     type    = Afacad · white #fff / dim rgba(247,242,253,.72)
     cards   = OPAQUE — the reference page's solids (dataintegration.css):
               dark band cards  #1b0f45 -> #10122f · light band cards #ffffff
     accents = the home brand strip     magenta #B51BB5 · gold #F0A400
   =========================================================================== */

/* ---- HOME FIELD: navy -> deep purple -> violet, white type, brand accents ---- */
body {
    --acc-1: #B51BB5;            /* home brand: magenta */
    --acc-2: #F0A400;            /* home brand: gold    */
    --ds-field: linear-gradient(135deg, #0a0b2e 0%, #4a128c 55%, #7b2ff7 100%);   /* the home hero field */
    --ds-wash: rgba(181, 27, 181, .30);
    --ds-wash-2: rgba(67, 210, 224, .18);
    --ds-orb-a: rgba(181, 27, 181, .55);
    --ds-orb-b: rgba(67, 210, 224, .42);
    --ds-ink: rgba(255, 255, 255, .26);      /* pattern dots  */
    --ds-ink-2: rgba(255, 255, 255, .12);    /* hatch + rings */
    --ds-ink-3: rgba(255, 255, 255, .09);    /* grid          */
    --tx: #ffffff;
    --tx-dim: rgba(247, 242, 253, .72);
    --hair: rgba(255, 255, 255, .18);
    --dav-mat: #1b0f45;                  /* opaque — the reference page's dark card  */
    --dav-mat-2: #10122f;                /* opaque — its deeper tone (chart wells)   */
    --dav-shadow: rgba(0, 0, 0, .32);
    --dav-shadow-deep: rgba(0, 0, 0, .5);
    --dav-ink: rgba(255, 255, 255, .85);     /* chart marks, reversed for the dark field */
}

/* ================================================================
   1 · HERO — THE GALLERY WALL
   ================================================================ */
/* top padding clears the sticky glass navbar (--hdr-full, measured by header-glass.js)
   so the breadcrumb + headline never slide under it */
.dav-hero{
    position: relative;
    padding: calc(var(--hdr-full, 108px) + clamp(1.75rem, 4vh, 3.25rem)) 0 clamp(4.5rem, 9vw, 7.5rem);
    background: var(--hl-field);      /* opaque home field, like the reference page's bands */
}

/* the brand strip closing the hero (reference: .dx-gstrip) */
.dav-hero::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--hl-strip); }

.dav-hero__inner{ display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: clamp(2.25rem, 5vw, 4.5rem); }

.dav-hero__copy { min-width: 0; }

.dav-hero__cta{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.35rem; }

.dav-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
}

.dav-hero__tags li {
    font-size: .84rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .45em 1em;
    border: 1px solid var(--hair);
    border-radius: 100px;
    color: var(--tx-dim);
    background: var(--dav-mat);   /* opaque */
}

/* ---- the hanging gallery ---- */
.dav-gallery {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(.9rem, 1.8vw, 1.6rem);
    padding-top: 3.4rem;
}

.dav-gallery__rail {
    position: absolute;
    top: 1.15rem;
    left: 4%;
    right: 4%;
    height: 5px;
    border-radius: 4px;
    background: var(--hl-strip);   /* opaque, the reference page's line treatment */
}

.dav-frame {
    position: relative;
    margin: 0;
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: 6px;
    padding: .85rem .85rem 0;
    box-shadow: 0 22px 44px -18px var(--dav-shadow-deep), 0 4px 12px -6px var(--dav-shadow);
}

.dav-frame::after {
    content: "";
    position: absolute;
    inset: .32rem;
    border: 1px solid var(--hair);
    border-radius: 4px;
    pointer-events: none;
}

.dav-frame__wire {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 2.35rem;
    background: var(--dav-ink);
    opacity: .55;
    transform-origin: bottom center;
    transform: rotate(8deg);
}

.dav-frame--line { transform: rotate(-1.6deg); }
.dav-frame--bar { margin-top: 1.7rem; transform: rotate(.8deg); }
.dav-frame--donut { margin-top: .55rem; transform: rotate(2deg); }
.dav-frame--bar .dav-frame__wire { transform: rotate(-6deg); height: 2.95rem; }
.dav-frame--donut .dav-frame__wire { transform: rotate(3deg); height: 2.6rem; }

.dav-frame__mat{ position: relative; background: var(--dav-mat-2); border-radius: 4px; padding: .45rem; }

.dav-frame__plate {
    display: flex;
    align-items: baseline;
    gap: .55em;
    padding: .55rem .35rem .7rem;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.dav-frame__plate b { font-weight: 600; color: var(--acc-1); }

/* ---- living charts ---- */
.dav-art { width: 100%; height: auto; }
.dav-art__grid line { stroke: var(--dav-ink); stroke-opacity: .12; stroke-width: 1; }
.dav-art__area, .dav-tour__area, .dav-board__area { stroke: none; }

.dav-art__line {
    fill: none;
    stroke: var(--acc-1);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 420;
    animation: dav-draw 6.5s var(--ease-io) infinite;
}

.dav-art__dot{ fill: var(--acc-2); transform-box: fill-box; transform-origin: center; animation: dav-pulse 2.4s var(--ease-io) infinite; }

.dav-art__bar {
    fill: var(--dav-ink);
    fill-opacity: .82;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: dav-breathe 3.8s var(--ease-io) infinite alternate;
    animation-delay: calc(var(--i, 0) * -.55s);
}

.dav-art__bar--acc { fill: var(--acc-1); fill-opacity: 1; }

.dav-art__ring{ transform-box: fill-box; transform-origin: center; animation: dav-spin 34s linear infinite; }

.dav-art__seg {
    fill: none;
    stroke-width: 17;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(-90deg);
}

.dav-art__seg--a { stroke: var(--acc-1); stroke-dasharray: 52 48; }
.dav-art__seg--b { stroke: var(--acc-2); stroke-dasharray: 30 70; stroke-dashoffset: -52; }
.dav-art__seg--c { stroke: var(--dav-ink); stroke-opacity: .55; stroke-dasharray: 18 82; stroke-dashoffset: -82; }

@keyframes dav-draw {
    0% { stroke-dashoffset: 420; }
    38%, 86% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -420; }
}

@keyframes dav-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.45); opacity: .65; }
}

@keyframes dav-breathe {
    from { transform: scaleY(.74); }
    to { transform: scaleY(1); }
}

@keyframes dav-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   2 · THE CHART WALL

   SECTION BANDS — the reference page's "home rhythm"
   (dataintegration.css .dx-light / .dx-gstrip / .dx-stack article):
   opaque light bands with white cards, alternating with opaque dark
   bands, every light band opening on the 4px brand strip. Nothing
   here is translucent: every band and every card paints a solid.
   ================================================================ */
.dav-wall-sec, .dav-tour-sec, .dav-roles, .dav-autopsy-sec, .dav-outcomes {
    position: relative;
    padding: clamp(4.5rem, 10vw, 8.5rem) 0;      /* the shared .ds-sec rhythm */
}

/* ---- dark bands: the opaque home field ---- */
.dav-tour-sec, .dav-autopsy-sec, .ds-cta { background: var(--hl-field); }

/* ---- light bands: opaque paper + brand strip + ink type ---- */
.dav-wall-sec, .dav-roles, .dav-outcomes {
    background: var(--paper);
    color: var(--tx-ink);
    --acc-1: var(--magenta);
    --acc-2: var(--violet-2);
    --tx: var(--tx-ink);
    --tx-dim: var(--tx-ink-dim);
    --hair: var(--hair-ink);
    --dav-mat: #ffffff;
    --dav-mat-2: #f6f0fd;
    --dav-ink: #1b0c3f;
    --dav-shadow: rgba(74, 18, 140, .14);
    --dav-shadow-deep: rgba(74, 18, 140, .18);
}

.dav-wall-sec::before, .dav-roles::before, .dav-outcomes::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--hl-strip);
}

.dav-wall-sec .ds-h2, .dav-roles .ds-h2, .dav-outcomes .ds-h2 { color: var(--tx-ink); }
.dav-wall-sec .ds-label, .dav-roles .ds-label, .dav-outcomes .ds-label { color: var(--magenta); }
.dav-wall-sec .ds-h2 em, .dav-roles .ds-h2 em, .dav-outcomes .ds-h2 em {
    background: var(--hl-strip);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- dark-band cards: the reference page's opaque panel gradient ---- */
.dav-tour-sec .dav-tour__stage, .dav-tour-sec .dav-note__card,
.dav-autopsy-sec .dav-board, .dav-autopsy-sec .dav-finding {
    background: linear-gradient(150deg, #1b0f45, #10122f);
}

.dav-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.6vw, 2.35rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dav-frame--tile{ transform: translateY(var(--lift, 0)); padding: .75rem .75rem 0; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }

.dav-frame--tile:hover,
.dav-frame--tile:focus-within{ transform: translateY(calc(var(--lift, 0) - 8px)) scale(1.035); box-shadow: 0 34px 60px -20px var(--dav-shadow-deep); outline: none; }

.dav-frame__q {
    position: relative;
    margin: 0 .3rem .85rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--hair);
    font-size: .92rem;
    line-height: 1.45;
    color: var(--acc-1);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.dav-frame--tile:hover .dav-frame__q,
.dav-frame--tile:focus-within .dav-frame__q{ opacity: 1; transform: none; }

.dav-wall__foot{ margin-top: clamp(1.75rem, 3.5vw, 2.75rem); font-size: 1.02rem; color: var(--tx-dim); }

/* ---- mini charts ---- */
.dav-mc { width: 100%; height: auto; }
.dav-mc__grid, .dav-mc__grid line, .dav-mc__heat rect { stroke: var(--dav-ink); stroke-opacity: .12; stroke-width: 1; }
.dav-mc__line { fill: none; stroke: var(--acc-1); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dav-mc__dot { fill: var(--acc-2); }
.dav-mc__bar { fill: var(--dav-ink); fill-opacity: .8; }
.dav-mc__bar--acc { fill: var(--acc-1); fill-opacity: 1; }
.dav-mc__bar--up { fill: var(--acc-1); fill-opacity: .55; }
.dav-mc__bar--down { fill: var(--acc-2); fill-opacity: .9; }
.dav-mc__trend { stroke: var(--acc-2); stroke-width: 2; stroke-dasharray: 5 5; }
.dav-mc__cloud circle { fill: var(--acc-1); fill-opacity: .62; }
.dav-mc__cell { fill: var(--acc-1); fill-opacity: .10; }
.dav-mc__cell--2 { fill-opacity: .30; }
.dav-mc__cell--3 { fill-opacity: .55; }
.dav-mc__cell--4 { fill-opacity: .85; }

.dav-mc__ring{ transform-box: fill-box; transform-origin: center; animation: dav-spin 42s linear infinite reverse; }

.dav-mc__seg {
    fill: none;
    stroke-width: 11;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(-90deg);
}

.dav-mc__seg--a { stroke: var(--acc-1); stroke-dasharray: 48 52; }
.dav-mc__seg--b { stroke: var(--acc-2); stroke-dasharray: 32 68; stroke-dashoffset: -48; }
.dav-mc__seg--c { stroke: var(--dav-ink); stroke-opacity: .55; stroke-dasharray: 20 80; stroke-dashoffset: -80; }

/* ================================================================
   3 · THE GUIDED TOUR
   ================================================================ */
.dav-tour__stage {
    position: relative;
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: var(--r-lg);
    padding: clamp(1.1rem, 2.5vw, 2.15rem);
    box-shadow: 0 30px 70px -30px var(--dav-shadow-deep);
}

.dav-tour__chart { width: 100%; height: auto; }
.dav-tour__grid line { stroke: var(--dav-ink); stroke-opacity: .12; stroke-width: 1; }
.dav-tour__goal { stroke: var(--acc-2); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.dav-tour__plan { stroke: var(--dav-ink); stroke-opacity: .5; stroke-width: 2; stroke-dasharray: 9 8; }
.dav-tour__mark { stroke: var(--acc-1); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 6 7; }
.dav-tour__pins circle { fill: var(--dav-mat); stroke: var(--acc-1); stroke-width: 3.5; }

.dav-tour__line {
    fill: none;
    stroke: var(--acc-1);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dav-tour__axis text{ fill: var(--tx-dim); font-size: 17px; font-family: "Afacad", sans-serif; text-anchor: end; }

.dav-tour__axis text[x="80"], .dav-tour__axis text[x="228"], .dav-tour__axis text[x="376"],
.dav-tour__axis text[x="524"], .dav-tour__axis text[x="672"], .dav-tour__axis text[x="820"]{ text-anchor: middle; }

.dav-tour__goal-tag{ fill: var(--acc-2); font-size: 17px; letter-spacing: .18em; font-family: "Afacad", sans-serif; }

.dav-notes { list-style: none; margin: 0; padding: 0; }

.dav-note {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    z-index: 3;
}

.dav-note--1 { z-index: 3; }
.dav-note--2 { z-index: 4; }
.dav-note--3 { z-index: 5; }
.dav-note--4 { z-index: 6; }

.dav-note__pin {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--acc-1);
    color: #fff;
    font-weight: 600;
    font-size: 1.02rem;
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--acc-1) 60%, transparent);
}

.dav-note__card {
    position: absolute;
    top: 2.65rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(15.5rem, 24vw);
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    padding: .85rem 1.05rem;
    box-shadow: 0 20px 38px -16px var(--dav-shadow-deep);
}

.dav-note__card h3{ margin: 0 0 .3rem; font-size: 1.02rem; letter-spacing: .02em; color: var(--acc-1); }

.dav-note__card p{ font-size: .92rem; line-height: 1.5; color: var(--tx-dim); }

.dav-note--up .dav-note__card { top: auto; bottom: 2.75rem; }
.dav-note--right .dav-note__card { left: 1.75rem; transform: none; }
.dav-note--left .dav-note__card { left: auto; right: 1.75rem; transform: none; }

.dav-tour__stage--armed .dav-note{ opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); transform: translate(-50%, -42%); }

.dav-tour__stage--armed .dav-note.dav-note--on{ opacity: 1; transform: translate(-50%, -50%); }

.dav-tour__foot{ margin-top: 1.75rem; font-size: 1.02rem; color: var(--tx-dim); }

/* ================================================================
   4 · ROLE NAMEPLATES
   ================================================================ */
.dav-plates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.35rem, 2.8vw, 2.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dav-nameplate {
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: 0 26px 52px -24px var(--dav-shadow-deep);
    overflow: hidden;
}

.dav-nameplate__plaque {
    position: relative;
    background: linear-gradient(115deg, var(--acc-1), #AC20BC 55%, var(--acc-2));   /* home violet mid-stop */
    color: #fff;
    padding: 1.65rem 1.35rem 1.15rem;
    clip-path: polygon(0 0, 100% 1.45rem, 100% 100%, 0 100%);
}

.dav-nameplate__role{ font-size: 1.42rem; font-weight: 600; letter-spacing: .015em; text-shadow: 0 1px 0 rgba(27, 12, 63, .28); }

.dav-nameplate__sub {
    margin-top: .15rem;
    font-size: .8rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .85;
}

.dav-nameplate__rivet {
    position: absolute;
    top: 1.05rem;
    left: 1.15rem;
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    background: #ffffff;   /* opaque */
    box-shadow: inset 0 1px 2px rgba(27, 12, 63, .4);
}

.dav-nameplate__rivet--r { left: auto; right: 1.15rem; top: .78rem; }
.dav-nameplate__body { padding: 1.35rem 1.35rem 1.55rem; }

.dav-nameplate__ttl {
    margin: 0 0 .55rem;
    font-size: .78rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--acc-2);
}

.dav-nameplate__txt { font-size: 1.02rem; line-height: 1.58; color: var(--tx-dim); }

.dav-nameplate__gets {
    margin: 1.05rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .55rem;
}

.dav-nameplate__gets li {
    position: relative;
    padding-left: 1.35rem;
    font-size: .97rem;
    line-height: 1.5;
    color: var(--tx-dim);
}

.dav-nameplate__gets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .52em;
    width: .55rem;
    height: .55rem;
    border-radius: 2px;
    background: var(--acc-1);
    transform: rotate(45deg);
}

.dav-nameplate__metric {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hair);
}

.dav-nameplate__metric b{ font-size: 1.95rem; font-weight: 600; letter-spacing: -.02em; color: var(--acc-1); }

.dav-nameplate__metric span{ font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-dim); }

/* ================================================================
   5 · DASHBOARD AUTOPSY
   ================================================================ */
.dav-autopsy{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }

.dav-board {
    position: relative;
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem 1.35rem;
    box-shadow: 0 30px 64px -28px var(--dav-shadow-deep);
}

.dav-board__chrome {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .95rem;
    border-bottom: 1px solid var(--hair);
    font-size: .88rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.dav-board__chrome i{ width: .65rem; height: .65rem; border-radius: 50%; background: var(--hair); }

.dav-board__chrome i:first-child { background: var(--acc-2); }
.dav-board__chrome span { margin-left: .55rem; }

.dav-board__kpis{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: 1.05rem 0; }

.dav-kpi {
    display: grid;
    gap: .18rem;
    background: var(--dav-mat-2);
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    padding: .75rem .85rem;
}

.dav-kpi span{ font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-dim); }

.dav-kpi b { font-size: 1.32rem; font-weight: 600; letter-spacing: -.01em; }
.dav-kpi i { font-style: normal; font-size: .82rem; }
.dav-kpi__up { color: var(--acc-1); }
.dav-kpi__down { color: var(--acc-2); }

.dav-board__chart { width: 100%; height: auto; }
.dav-board__grid line { stroke: var(--dav-ink); stroke-opacity: .12; stroke-width: 1; }
.dav-board__area { fill: var(--acc-1); fill-opacity: .12; }
.dav-board__line { fill: none; stroke: var(--acc-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dav-board__plan { stroke: var(--acc-2); stroke-width: 2; stroke-dasharray: 8 7; }

.dav-board__side {
    display: grid;
    gap: .55rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

.dav-board__side li {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr) 2.2rem;
    align-items: center;
    gap: .75rem;
    font-size: .88rem;
    color: var(--tx-dim);
}

.dav-board__side i {
    display: block;
    height: .55rem;
    width: var(--w, 50%);
    border-radius: 100px;
    background: linear-gradient(90deg, var(--acc-1), color-mix(in srgb, var(--acc-1) 45%, var(--acc-2)));
}

.dav-board__side b { text-align: right; color: var(--tx); font-weight: 600; }

.dav-board__rows {
    display: grid;
    gap: .5rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

.dav-board__rows li {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    padding: .62rem .85rem;
    background: var(--dav-mat-2);   /* opaque */
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    font-size: .92rem;
    color: var(--tx-dim);
}

.dav-board__rows b { color: var(--tx); font-weight: 600; }
.dav-board__rows i { font-style: normal; margin-left: auto; font-weight: 600; }
.dav-row__up { color: var(--acc-1); }
.dav-row__down { color: var(--acc-2); }

.dav-hot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    border: 2px solid var(--acc-1);
    background: var(--dav-mat);
    color: var(--acc-1);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .35s ease, color .35s ease, transform .35s var(--ease);
}

.dav-hot::after {
    content: "";
    position: absolute;
    inset: -.45rem;
    border-radius: 50%;
    border: 1px solid var(--acc-1);
    opacity: .5;
    animation: dav-ping 2.6s var(--ease-io) infinite;
}

.dav-hot:hover,
.dav-hot:focus-visible{ transform: translate(-50%, -50%) scale(1.12); outline: none; }

.dav-hot.dav-sel{ background: var(--acc-1); color: #fff; box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--acc-1) 60%, transparent); }

.dav-hot.dav-sel::after { animation: none; opacity: 0; }

@keyframes dav-ping {
    0% { transform: scale(.85); opacity: .6; }
    70%, 100% { transform: scale(1.5); opacity: 0; }
}

.dav-findings {
    display: grid;
    gap: 1.05rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dav-finding {
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-left: 4px solid transparent;
    border-radius: var(--r-sm);
    padding: 1.05rem 1.25rem;
    transition: border-color .35s ease, transform .35s var(--ease);
}

.dav-finding.dav-sel{ border-left-color: var(--acc-1); transform: translateX(6px); }

.dav-finding__btn {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.dav-finding__no { font-size: .82rem; letter-spacing: .22em; color: var(--acc-2); }
.dav-finding__ttl { font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; color: var(--tx); }
.dav-finding__txt { margin-top: .55rem; font-size: .98rem; line-height: 1.58; color: var(--tx-dim); }

/* ================================================================
   6 · OUTCOME BARS
   ================================================================ */
.dav-bars {
    display: grid;
    gap: clamp(1.55rem, 3vw, 2.35rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dav-bar { position: relative; }

.dav-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: .75rem;
}

.dav-bar__label { font-size: clamp(1.08rem, 1.6vw, 1.32rem); color: var(--tx); }

.dav-bar__val {
    font-size: clamp(1.85rem, 3.4vw, 2.65rem);
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--acc-1);
    white-space: nowrap;
}

.dav-bar__track{ height: 1.05rem; border-radius: 100px; background: color-mix(in srgb, var(--dav-ink) 12%, var(--dav-mat)); overflow: hidden; }

.dav-bar__fill {
    display: block;
    height: 100%;
    width: var(--w, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--acc-1), color-mix(in srgb, var(--acc-1) 35%, var(--acc-2)));
    transform-origin: left center;
}

.dav-bars--armed .dav-bar__fill { transform: scaleX(0); }

.dav-bars--armed.dav-bars--go .dav-bar__fill{ transform: scaleX(1); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 160ms); }

.dav-bar__note{ margin-top: .65rem; font-size: .96rem; color: var(--tx-dim); max-width: 58ch; }

.dav-outcomes__foot{ margin-top: clamp(1.9rem, 3.5vw, 2.85rem); font-size: 1.02rem; color: var(--tx-dim); }

/* ================================================================
   CTA BAND DECORATION + RELATED SUITE LINKS
   ================================================================ */
.dav-tag {
    position: relative;
    margin-bottom: 2.25rem;
    padding: .95rem 1.65rem .95rem 2.35rem;
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: 4px 12px 12px 4px;
    transform: rotate(-1.4deg);
    box-shadow: 0 18px 34px -16px var(--dav-shadow-deep);
}

.dav-tag__hole {
    position: absolute;
    left: .85rem;
    top: 50%;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    border: 1px solid var(--hair);
    background: #0a0b2e;   /* opaque */
    transform: translateY(-50%);
}

.dav-tag__txt {
    font-size: .82rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    line-height: 1.75;
    color: var(--tx-dim);
}

.dav-tag__txt i { font-style: normal; color: var(--acc-1); letter-spacing: .1em; }

.dav-related {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.75rem;
    margin-top: 2.75rem;
    padding-top: 1.85rem;
    border-top: 1px solid var(--hair);
    width: min(100%, 980px);
    font-size: .93rem;
}

.dav-related__tag {
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .75rem;
    color: var(--acc-2);
    align-self: center;
}

.dav-related a{ color: var(--tx-dim); border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; }

.dav-related a:hover{ color: var(--acc-1); border-bottom-color: var(--acc-1); }

/* ================================================================
   UI REWORK — new styles + structural representation for EVERY
   section (hero, chart wall, guided tour, nameplates, autopsy,
   outcomes, CTA). Content and markup are untouched: everything
   below is presentation only — grid flow, order, shape, decoration.
   ================================================================ */

/* ---- section head: filled number chip + rule + pull-quote lead ---- */
.dav-wall-sec .ds-head--split, .dav-tour-sec .ds-head--split, .dav-roles .ds-head--split,
.dav-autopsy-sec .ds-head--split, .dav-outcomes .ds-head--split {
    align-items: start;
    gap: clamp(1.75rem, 4vw, 4.5rem);
    padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: clamp(2.75rem, 5.5vw, 4.75rem);
    border-bottom: 1px solid var(--hair);
}

.dav-wall-sec .ds-label, .dav-tour-sec .ds-label, .dav-roles .ds-label,
.dav-autopsy-sec .ds-label, .dav-outcomes .ds-label {
    background: var(--acc-1);
    color: #fff;
    border-radius: 100px;
    padding: .42em 1.15em .42em .55em;
    letter-spacing: .2em;
}

.dav-wall-sec .ds-label i, .dav-tour-sec .ds-label i, .dav-roles .ds-label i,
.dav-autopsy-sec .ds-label i, .dav-outcomes .ds-label i {
    border: 0;
    background: #ffffff;
    color: var(--acc-1);
}

.dav-wall-sec .ds-head--split .ds-lead, .dav-tour-sec .ds-head--split .ds-lead,
.dav-roles .ds-head--split .ds-lead, .dav-autopsy-sec .ds-head--split .ds-lead,
.dav-outcomes .ds-head--split .ds-lead {
    border-left: 3px solid var(--acc-1);
    padding: .35rem 0 .35rem 1.45rem;
    align-self: end;
    max-width: 46ch;
}

/* ---- HERO: copy rail + spec strip + bento gallery (no hanging wires) ---- */
.dav-hero__inner { align-items: stretch; }
.dav-hero__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

.dav-hero__tags {
    gap: 0;
    margin-top: 2.25rem;
    padding: .95rem 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    width: 100%;
}

.dav-hero__tags li {
    border: 0;
    background: none;
    border-radius: 0;
    padding: 0 1.35rem;
    position: relative;
    letter-spacing: .18em;
}

.dav-hero__tags li:first-child { padding-left: 0; }
.dav-hero__tags li + li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    translate: 0 -50%;
    width: 1px; height: 1.15em;
    background: var(--hair);
}

.dav-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    padding-top: 0;
    align-items: stretch;
}

.dav-gallery__rail, .dav-frame__wire { display: none; }
.dav-frame { display: flex; flex-direction: column; border-radius: var(--r-md); padding: .95rem .95rem 0; }
.dav-frame__mat { flex: 1; display: grid; align-items: center; }
.dav-frame--line { grid-row: 1 / span 2; transform: none; margin: 0; }
.dav-frame--bar, .dav-frame--donut { transform: none; margin: 0; }

/* ---- CHART WALL: bento grid, permanent questions, no stagger ---- */
.dav-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.65rem);
    grid-auto-flow: dense;
}

.dav-wall > li:nth-child(1), .dav-wall > li:nth-child(5) { grid-column: span 2; }
.dav-wall > li { transform: none; }
.dav-frame--tile { padding: .95rem .95rem 0; border-radius: var(--r-md); display: flex; flex-direction: column; }
.dav-frame--tile:hover, .dav-frame--tile:focus-within { transform: translateY(-6px) scale(1.015); }
.dav-frame__q { opacity: 1; transform: none; }
.dav-wall__foot { border-top: 1px solid var(--hair); padding-top: 1.5rem; }

/* ---- GUIDED TOUR: chart + side stepper instead of floating pins ---- */
.dav-tour__stage {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    align-items: center;
}

.dav-notes { position: static; display: grid; gap: 1rem; }
.dav-note {
    position: static;
    transform: none;
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: .95rem;
    align-items: start;
}
.dav-note__card { position: static; transform: none; width: auto; }
.dav-tour__stage--armed .dav-note { opacity: 0; transform: none; }
.dav-tour__stage--armed .dav-note.dav-note--on { opacity: 1; transform: none; }
.dav-tour__foot { border-top: 1px solid var(--hair); padding-top: 1.5rem; }

/* ---- NAMEPLATES: full-width rows, plaque as a side band, alternating ---- */
.dav-plates { grid-template-columns: 1fr; gap: 1.5rem; }
.dav-nameplate {
    display: grid;
    grid-template-columns: minmax(190px, .3fr) minmax(0, 1fr);
    border-radius: var(--r-md);
}
.dav-nameplate__plaque {
    clip-path: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.85rem 1.65rem;
}
.dav-nameplate__body { padding: 1.85rem 1.85rem; }
.dav-nameplate:nth-child(even) .dav-nameplate__plaque { order: 2; }
.dav-nameplate__gets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.5rem; }

/* ---- AUTOPSY: findings stepper left, dashboard right ---- */
.dav-autopsy { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.dav-findings { order: -1; gap: 1.15rem; position: relative; padding-left: .25rem; }
.dav-findings::before {
    content: "";
    position: absolute;
    left: 1.45rem; top: 1.25rem; bottom: 1.25rem;
    width: 2px;
    background: var(--hl-strip);
}
.dav-finding {
    position: relative;
    border-left: 0;
    padding: 1.15rem 1.25rem 1.15rem 3.35rem;
    border-radius: var(--r-md);
}
.dav-finding::before {
    content: "";
    position: absolute;
    left: .82rem; top: 1.55rem;
    width: 1.28rem; height: 1.28rem;
    border-radius: 50%;
    background: var(--acc-1);
    border: 3px solid var(--dav-mat-2);
}
.dav-finding.dav-sel { border-left-color: transparent; transform: translateX(6px); }
.dav-finding__no { display: block; margin-bottom: .15rem; }
.dav-board__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- OUTCOMES: 2-column stat cards with oversized values ---- */
.dav-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}
.dav-bar {
    padding: 1.45rem 1.65rem 1.65rem;
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    box-shadow: 0 22px 46px -22px var(--dav-shadow-deep);
}
.dav-bar__head { flex-direction: column; align-items: flex-start; gap: .1rem; margin-bottom: .95rem; }
.dav-bar__val { font-size: clamp(2.45rem, 5vw, 3.5rem); line-height: 1; }
.dav-outcomes__foot { border-top: 1px solid var(--hair); padding-top: 1.5rem; }

/* ---- CTA: meta items as cards, tag as a ribbon ---- */
.ds-cta__meta { gap: 1rem; border-top: 0; padding-top: 0; }
.ds-cta__meta li {
    background: var(--dav-mat);
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    padding: 1.15rem 1.45rem;
    min-width: 15rem;
}
.dav-tag { border-radius: var(--r-md); transform: rotate(-1deg); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
    .dav-hero__inner { grid-template-columns: 1fr; }
    .dav-gallery { max-width: 46rem; margin-inline: auto; }
    .dav-autopsy { grid-template-columns: 1fr; }
    .dav-note__card { width: min(14.5rem, 30vw); }
}

@media (max-width: 860px) {
    .dav-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dav-frame--tile { transform: none; }
    .dav-frame--tile:hover,
    .dav-frame--tile:focus-within { transform: translateY(-6px) scale(1.02); }
    .dav-plates { grid-template-columns: 1fr; }
    .dav-notes { position: static; display: grid; gap: 1.15rem; margin-top: 1.65rem; }
    .dav-note {
        position: static;
        transform: none;
        display: grid;
        grid-template-columns: 2.15rem minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }
    .dav-tour__stage--armed .dav-note,
    .dav-tour__stage--armed .dav-note.dav-note--on { transform: none; }
    .dav-note__card { position: static; transform: none; width: auto; }
    .dav-board__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .dav-gallery { gap: .55rem; padding-top: 2.6rem; }
    .dav-frame { padding: .5rem .5rem 0; }
    .dav-frame__plate { font-size: .62rem; letter-spacing: .1em; }
    .dav-wall { grid-template-columns: 1fr; }
    .dav-hero__cta .ds-btn { width: 100%; justify-content: center; }
    .dav-bar__head { flex-direction: column; gap: .2rem; }
    .dav-hot { width: 2rem; height: 2rem; font-size: .88rem; }
    .dav-tag { padding-right: 1.15rem; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .dav-art__line, .dav-art__dot, .dav-art__bar, .dav-art__ring,
    .dav-mc__ring, .dav-hot::after {
        animation: none !important;
    }
    .dav-frame--tile, .dav-frame--tile:hover, .dav-frame--tile:focus-within,
    .dav-finding.dav-sel {
        transition: none;
    }
    .dav-bars--armed .dav-bar__fill,
    .dav-bars--armed.dav-bars--go .dav-bar__fill {
        transform: none;
        transition: none;
    }
    .dav-tour__stage--armed .dav-note {
        opacity: 1;
        transform: translate(-50%, -50%);
        transition: none;
    }
}

/* ================================================================
   UI REWORK — small screens
   ================================================================ */
@media (max-width: 860px) {
    .dav-wall > li:nth-child(1), .dav-wall > li:nth-child(5) { grid-column: span 2; }
    .dav-tour__stage { grid-template-columns: 1fr; }
    .dav-nameplate { grid-template-columns: 1fr; }
    .dav-nameplate:nth-child(even) .dav-nameplate__plaque { order: 0; }
    .dav-autopsy { grid-template-columns: 1fr; }
    .dav-findings { order: 0; }
    .dav-bars { grid-template-columns: 1fr; }
    .dav-hero__tags { gap: .65rem; }
    .dav-hero__tags li { padding: 0 .85rem; }
}

@media (max-width: 560px) {
    .dav-wall > li:nth-child(1), .dav-wall > li:nth-child(5) { grid-column: span 1; }
    .dav-gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
    .dav-frame--line { grid-row: auto; }
    .dav-nameplate__gets { grid-template-columns: 1fr; }
    .dav-hero__tags { flex-direction: column; align-items: flex-start; gap: .55rem; }
    .dav-hero__tags li { padding: 0; }
    .dav-hero__tags li + li::before { display: none; }
    .ds-cta__meta li { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dav-tour__stage--armed .dav-note,
    .dav-tour__stage--armed .dav-note.dav-note--on { opacity: 1; transform: none; }
}
/* ===========================================================================
   2026 VIEWPORT STORY REWORK
   Chart Wall = question-first decision studio
   Guided Tour = narrated chart player
   =========================================================================== */
.dav-wall-sec,
.dav-tour-sec {
    --dav-violet: #7B2FF7;
    --dav-magenta: #B51BB5;
    --dav-cyan: #43D2E0;
    --dav-navy: #111338;
}

.dav-vh-section {
    position: relative;
    height: 100svh;
    min-height: 720px;
    padding: clamp(2.25rem, 4.2vh, 4rem) 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
}

.dav-vh-shell {
    width: min(92vw, 1660px);
    height: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(1.25rem, 2.5vh, 2.25rem);
}

.dav-vh-head {
    margin: 0;
    align-items: end;
}

.dav-vh-head .ds-h2 {
    max-width: 17ch;
    font-size: clamp(2.4rem, 4.2vw, 4.65rem);
    line-height: .98;
}

.dav-vh-head .ds-h2 em {
    font-style: normal;
    background: linear-gradient(92deg, var(--dav-violet), var(--dav-magenta) 48%, var(--dav-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dav-vh-head .ds-lead {
    max-width: 42rem;
    margin-bottom: .25rem;
}

/* ------------------------------- chart wall / decision studio */
.dav-wall-sec {
    background:
      radial-gradient(circle at 88% 14%, rgba(123,47,247,.09), transparent 29%),
      radial-gradient(circle at 8% 92%, rgba(67,210,224,.08), transparent 25%),
      #f8f6fc;
    color: #17133f;
}

.dav-wall-sec .ds-label,
.dav-wall-sec .ds-h2 { color: #17133f; }
.dav-wall-sec .ds-lead { color: #625b7d; }
.dav-wall-sec .ds-label i {
    color: var(--dav-magenta);
    border-color: rgba(181,27,181,.26);
    background: rgba(181,27,181,.07);
}

.dav-switch {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    gap: clamp(1rem, 1.7vw, 1.75rem);
    padding: .75rem;
    border: 1px solid rgba(35, 24, 75, .09);
    border-radius: 28px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 30px 80px rgba(44, 26, 86, .10);
    backdrop-filter: blur(18px);
}

.dav-switch__rail {
    min-height: 0;
    padding: clamp(1rem, 1.8vw, 1.45rem);
    border-radius: 22px;
    background: #15143a;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.dav-switch__rail-head {
    padding: .25rem .35rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.11);
}
.dav-switch__eyebrow {
    display: block;
    margin-bottom: .4rem;
    color: var(--dav-cyan);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.dav-switch__rail-head strong { font-size: 1.05rem; font-weight: 600; }

.dav-qlist {
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
    min-height: 0;
    display: grid;
    align-content: stretch;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: .3rem;
}
.dav-qlist li { min-height: 0; }
.dav-q {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: .56rem .65rem;
    color: rgba(255,255,255,.74);
    background: transparent;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}
.dav-q::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dav-violet), var(--dav-cyan));
}
.dav-switch--cycling .dav-q.is-on::after { animation: davQuestionTimer 2s linear forwards; }
@keyframes davQuestionTimer { from { width: 0; } to { width: 100%; } }
.dav-q:hover,
.dav-q:focus-visible { color: #fff; background: rgba(255,255,255,.055); outline: none; }
.dav-q.is-on {
    color: #fff;
    border-color: rgba(139,92,246,.35);
    background: linear-gradient(100deg, rgba(123,47,247,.20), rgba(67,210,224,.055));
    transform: translateX(3px);
}
.dav-q__mark {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--dav-cyan);
    background: rgba(67,210,224,.09);
    font-size: 1rem;
}
.dav-q.is-on .dav-q__mark { color: #fff; background: var(--dav-violet); }
.dav-q b { display: block; font-size: .93rem; line-height: 1.1; }
.dav-q small { display: block; margin-top: .2rem; color: rgba(255,255,255,.46); font-size: .72rem; line-height: 1.2; }
.dav-q em { font-style: normal; color: rgba(255,255,255,.38); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.dav-q.is-on em { color: var(--dav-cyan); }

.dav-spotlight {
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(37, 25, 76, .10);
    border-radius: 22px;
    background: #fff;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.dav-spotlight__topbar {
    min-height: 48px;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #ece8f4;
    color: #746d8d;
    font-size: .79rem;
}
.dav-spotlight__status { display: inline-flex; align-items: center; gap: .55rem; color: #322b56; font-weight: 700; }
.dav-spotlight__status i { width: .52rem; height: .52rem; border-radius: 50%; background: var(--dav-cyan); box-shadow: 0 0 0 5px rgba(67,210,224,.11); }
.dav-spotlight__hint { letter-spacing: .03em; }

.dav-spotlight__panel {
    grid-area: 2 / 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(245px, 30%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.992);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.75,.2,1), visibility 0s linear .55s;
}
.dav-spotlight__panel.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.dav-spotlight__chart {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 1.5vw, 1.35rem);
    background:
      linear-gradient(rgba(64,47,108,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(64,47,108,.045) 1px, transparent 1px),
      #fbfaff;
    background-size: 34px 34px;
}
.dav-spotlight__chart svg { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.dav-spotlight__story {
    padding: clamp(1.25rem, 2.1vw, 2rem);
    border-left: 1px solid #ece8f4;
    background: linear-gradient(180deg, #fff, #faf8ff);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dav-spotlight__story > span {
    color: var(--dav-magenta);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.dav-spotlight__story h3 { margin: .55rem 0 .75rem; color: #17133f; font-size: clamp(1.35rem, 2vw, 2.15rem); line-height: 1.05; }
.dav-spotlight__story p { margin: 0; color: #68617f; font-size: clamp(.88rem, 1vw, 1.02rem); line-height: 1.55; }
.dav-spotlight__rule { margin-top: auto; padding-top: 1rem; border-top: 1px solid #ece8f4; }
.dav-spotlight__rule b { display: block; margin-bottom: .3rem; color: #251d52; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.dav-spotlight__rule span { color: #7d7594; font-size: .8rem; line-height: 1.4; }

/* chart primitives */
.dav-viz-grid line { stroke: #ddd7e8; stroke-width: 1.5; }
.dav-viz-area { fill: rgba(123,47,247,.10); }
.dav-viz-line { fill: none; stroke: var(--dav-magenta); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.dav-viz-points circle { fill: #fff; stroke: var(--dav-violet); stroke-width: 4; }
.dav-viz-label rect { fill: #17133f; }
.dav-viz-label text { fill: #fff; text-anchor: middle; font: 700 14px "Afacad", sans-serif; }
.dav-viz-bars rect { fill: #42375e; }
.dav-viz-bars rect.is-accent { fill: var(--dav-violet); }
.dav-viz-donut circle { fill: none; stroke-width: 42; }
.dav-viz-donut .seg-base { stroke: #ece8f5; }
.dav-viz-donut .seg-a { stroke: var(--dav-violet); stroke-dasharray: 42 58; }
.dav-viz-donut .seg-b { stroke: var(--dav-magenta); stroke-dasharray: 28 72; stroke-dashoffset: -42; }
.dav-viz-donut .seg-c { stroke: #5f5776; stroke-dasharray: 19 81; stroke-dashoffset: -70; }
.dav-viz-big { fill: #17133f; text-anchor: middle; font: 800 38px "Afacad", sans-serif; }
.dav-viz-sub { fill: #77708c; text-anchor: middle; font: 600 15px "Afacad", sans-serif; }
.dav-viz-legend text { fill: #5e5776; font: 600 14px "Afacad", sans-serif; }
.dav-viz-legend circle:nth-of-type(1) { fill: var(--dav-violet); }.dav-viz-legend circle:nth-of-type(2) { fill: var(--dav-magenta); }.dav-viz-legend circle:nth-of-type(3) { fill: #5f5776; }.dav-viz-legend circle:nth-of-type(4) { fill: #c8c2d7; }
.dav-viz-axis, .dav-viz-bridges line { stroke: #d8d1e5; stroke-width: 2; }
.dav-viz-water rect { fill: #4c4264; }.dav-viz-water .is-up { fill: var(--dav-violet); }.dav-viz-water .is-down { fill: #a9a2b8; }.dav-viz-water .is-total { fill: var(--dav-magenta); }
.dav-viz-trend { stroke: var(--dav-magenta); stroke-width: 4; stroke-linecap: round; }
.dav-viz-cloud circle { fill: var(--dav-violet); opacity: .72; }
.dav-viz-heat rect { fill: #eeeaf5; }.dav-viz-heat .l2 { fill: #d7c6fa; }.dav-viz-heat .l3 { fill: #a47af2; }.dav-viz-heat .l4 { fill: var(--dav-violet); }

/* ------------------------------- guided tour / story player */
.dav-tour-sec {
    background:
      radial-gradient(circle at 75% 15%, rgba(123,47,247,.24), transparent 30%),
      radial-gradient(circle at 18% 88%, rgba(67,210,224,.12), transparent 30%),
      #0d0f30;
    color: #fff;
}
.dav-tour-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.dav-tour-sec .ds-label,
.dav-tour-sec .ds-h2 { color: #fff; }
.dav-tour-sec .ds-lead { color: rgba(243,241,252,.68); }
.dav-tour-sec .ds-label i { color: var(--dav-cyan); border-color: rgba(67,210,224,.28); background: rgba(67,210,224,.08); }

.dav-tour__stage.dav-reel {
    min-height: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(20,21,61,.94);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 35px 90px rgba(0,0,0,.26);
}
.dav-tour__stage.dav-reel:focus-visible { outline: 2px solid var(--dav-cyan); outline-offset: 4px; }
.dav-reel__toolbar {
    min-height: 58px;
    padding: .75rem 1rem .75rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.025);
}
.dav-reel__status { display: flex; align-items: center; gap: 1rem; }
.dav-reel__status b { font-size: 1.05rem; letter-spacing: .06em; color: #fff; }.dav-reel__status small { color: rgba(255,255,255,.38); font-weight: 500; }
.dav-reel__live { display: inline-flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.62); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dav-reel__live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--dav-cyan); box-shadow: 0 0 0 5px rgba(67,210,224,.10); }
.dav-reel--playing .dav-reel__live i { animation: davLivePulse 1.4s ease-in-out infinite; }
@keyframes davLivePulse { 50% { box-shadow: 0 0 0 9px rgba(67,210,224,0); } }
.dav-reel__controls { display: flex; align-items: center; gap: .5rem; }
.dav-reel__controls button {
    height: 36px;
    min-width: 36px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.055);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.dav-reel__controls button:hover,
.dav-reel__controls button:focus-visible { background: rgba(123,47,247,.18); border-color: rgba(139,92,246,.55); outline: none; transform: translateY(-1px); }
.dav-reel__controls .dav-reel__play { min-width: 112px; padding: 0 .9rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: var(--dav-violet); border-color: var(--dav-violet); font-weight: 700; }
.dav-reel__play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.dav-reel__play.is-playing .dav-reel__play-icon { width: 8px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }

.dav-reel__body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(280px, .58fr);
}
.dav-reel__visual {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: clamp(1rem, 1.8vw, 1.5rem);
    border-right: 1px solid rgba(255,255,255,.09);
    background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.dav-reel__chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 .3rem .25rem; }
.dav-reel__chart-head span { font-size: .95rem; font-weight: 700; color: #fff; }.dav-reel__chart-head small { color: rgba(255,255,255,.40); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.dav-reel__visual svg { width: 100%; height: 100%; min-height: 0; }
.dav-reel__grid line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.dav-reel__axes text { fill: rgba(255,255,255,.34); font: 500 14px "Afacad", sans-serif; text-anchor: end; }.dav-reel__axes text[x="80"],.dav-reel__axes text[x="228"],.dav-reel__axes text[x="376"],.dav-reel__axes text[x="524"],.dav-reel__axes text[x="672"],.dav-reel__axes text[x="820"] { text-anchor: middle; }
.dav-reel__goal { stroke: var(--dav-cyan); stroke-width: 1.6; stroke-dasharray: 4 9; opacity: .72; }.dav-reel__goal-label { fill: var(--dav-cyan); font: 700 12px "Afacad", sans-serif; letter-spacing: .18em; }
.dav-reel__line { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dav-reel__progress { fill: none; stroke: var(--dav-violet); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.dav-reel__area { opacity: .26; }.dav-reel__area--active { opacity: .95; }
.dav-reel__head circle:first-child { fill: rgba(123,47,247,.28); stroke: #9a75ff; stroke-width: 2; }.dav-reel__head-core { fill: #fff; }

.dav-reel__timeline { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; padding-top: .7rem; }
.dav-reel__timeline::before { content: ""; position: absolute; top: 1rem; left: 12.5%; right: 12.5%; height: 1px; background: rgba(255,255,255,.12); }
.dav-reel__pin {
    position: relative;
    z-index: 1;
    border: 0;
    background: none;
    color: rgba(255,255,255,.42);
    display: grid;
    justify-items: center;
    gap: .38rem;
    cursor: pointer;
    font: 600 .72rem "Afacad", sans-serif;
}
.dav-reel__pin i { width: .68rem; height: .68rem; border-radius: 50%; background: #34355d; border: 2px solid #5b5c7e; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.dav-reel__pin.is-reached { color: rgba(255,255,255,.82); }.dav-reel__pin.is-reached i { background: var(--dav-violet); border-color: #aa8bff; box-shadow: 0 0 0 5px rgba(123,47,247,.10); }

.dav-reel__chapters { list-style: none; margin: 0; padding: clamp(.75rem, 1.4vw, 1.15rem); min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0,1fr)); gap: .45rem; }
.dav-reel__chapter { min-height: 0; }
.dav-reel__chapter button {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 2.25rem minmax(0,1fr);
    gap: .75rem;
    align-items: center;
    padding: .8rem;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 14px;
    color: rgba(255,255,255,.55);
    background: transparent;
    cursor: pointer;
    transition: background .35s ease, border-color .35s ease, transform .35s ease, color .35s ease;
}
.dav-reel__chapter button:hover,
.dav-reel__chapter button:focus-visible { outline: none; color: rgba(255,255,255,.85); background: rgba(255,255,255,.035); }
.dav-reel__chapter.is-active button { color: #fff; background: linear-gradient(110deg, rgba(123,47,247,.18), rgba(67,210,224,.045)); border-color: rgba(139,92,246,.34); transform: translateX(-4px); }
.dav-reel__chapter.is-done button { color: rgba(255,255,255,.48); }
.dav-reel__chapter-no { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.48); font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.dav-reel__chapter.is-active .dav-reel__chapter-no { color: #fff; background: var(--dav-violet); }
.dav-reel__chapter small { display: block; margin-bottom: .18rem; color: var(--dav-cyan); font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dav-reel__chapter b { display: block; font-size: .98rem; line-height: 1.1; }.dav-reel__chapter em { display: block; margin-top: .24rem; color: rgba(255,255,255,.43); font-size: .74rem; font-style: normal; line-height: 1.35; }
.dav-reel__chapter.is-active em { color: rgba(255,255,255,.68); }
.dav-reel__principle { margin: 0; min-height: 46px; padding: .75rem 1.2rem; display: flex; align-items: center; gap: .7rem; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.53); font-size: .78rem; }
.dav-reel__principle span { flex: 0 0 auto; color: var(--dav-cyan); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* compact desktop / laptop heights */
@media (max-height: 820px) and (min-width: 861px) {
    .dav-vh-section { min-height: 640px; padding: 1.5rem 0; }
    .dav-vh-shell { gap: 1rem; }
    .dav-vh-head .ds-h2 { font-size: clamp(2.15rem, 3.4vw, 3.65rem); }
    .dav-vh-head .ds-lead { font-size: .92rem; line-height: 1.45; }
    .dav-switch__rail { padding: .85rem; }
    .dav-q { padding: .4rem .5rem; }
    .dav-q small { display: none; }
    .dav-spotlight__story { padding: 1.1rem; }
    .dav-spotlight__story p { font-size: .86rem; }
    .dav-reel__toolbar { min-height: 48px; padding-block: .45rem; }
    .dav-reel__visual { padding: .75rem 1rem; }
    .dav-reel__chapters { padding: .65rem; gap: .3rem; }
    .dav-reel__chapter button { padding: .55rem .65rem; }
    .dav-reel__chapter em { font-size: .69rem; }
}

/* tablet / phone — still one viewport, but interaction rails become horizontal */
@media (max-width: 860px) {
    .dav-vh-section { height: 100svh; min-height: 700px; padding: 1.35rem 0; }
    .dav-vh-shell { width: min(94vw, 760px); gap: 1rem; }
    .dav-vh-head { grid-template-columns: 1fr; gap: .55rem; }
    .dav-vh-head .ds-h2 { font-size: clamp(2rem, 8vw, 3.2rem); max-width: none; }
    .dav-vh-head .ds-lead { font-size: .88rem; line-height: 1.42; max-width: 60ch; }
    .dav-switch { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); padding: .55rem; }
    .dav-switch__rail { padding: .55rem; display: block; }
    .dav-switch__rail-head { display: none; }
    .dav-qlist { display: flex; overflow-x: auto; gap: .4rem; margin: 0; scrollbar-width: none; scroll-snap-type: x proximity; }
    .dav-qlist::-webkit-scrollbar { display: none; }
    .dav-qlist li { flex: 0 0 auto; }
    .dav-q { height: 48px; grid-template-columns: 1.8rem auto auto; min-width: 160px; scroll-snap-align: center; padding: .4rem .55rem; }
    .dav-q small { display: none; }
    .dav-q__mark { width: 1.8rem; height: 1.8rem; }
    .dav-spotlight__panel { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
    .dav-spotlight__story { padding: .9rem 1rem; border-left: 0; border-top: 1px solid #ece8f4; }
    .dav-spotlight__story h3 { margin: .25rem 0 .35rem; font-size: 1.25rem; }
    .dav-spotlight__story p { font-size: .8rem; line-height: 1.38; }
    .dav-spotlight__rule { display: none; }
    .dav-spotlight__topbar { min-height: 40px; padding: .5rem .7rem; }

    .dav-reel__body { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
    .dav-reel__visual { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); padding: .65rem .8rem; }
    .dav-reel__chapters { display: flex; overflow-x: auto; grid-template-rows: none; padding: .55rem; scrollbar-width: none; }
    .dav-reel__chapters::-webkit-scrollbar { display: none; }
    .dav-reel__chapter { flex: 0 0 min(78vw, 340px); }
    .dav-reel__chapter button { min-height: 84px; }
    .dav-reel__chapter.is-active button { transform: none; }
    .dav-reel__chapter em { font-size: .7rem; }
    .dav-reel__principle { min-height: 40px; padding: .55rem .8rem; font-size: .7rem; }
}

@media (max-width: 560px) {
    .dav-vh-section { min-height: 680px; }
    .dav-vh-head .ds-label { margin-bottom: .35rem; }
    .dav-vh-head .ds-h2 { font-size: clamp(1.85rem, 9vw, 2.65rem); }
    .dav-vh-head .ds-lead { display: none; }
    .dav-switch { border-radius: 20px; }
    .dav-switch__rail, .dav-spotlight { border-radius: 16px; }
    .dav-spotlight__hint { display: none; }
    .dav-spotlight__chart { padding: .35rem; background-size: 26px 26px; }
    .dav-spotlight__story > span { font-size: .62rem; }
    .dav-spotlight__story h3 { font-size: 1.15rem; }
    .dav-reel { border-radius: 18px !important; }
    .dav-reel__toolbar { padding: .45rem .55rem; min-height: 46px; }
    .dav-reel__live { font-size: .62rem; }.dav-reel__status { gap: .55rem; }.dav-reel__status b { font-size: .86rem; }
    .dav-reel__controls .dav-reel__play { min-width: 78px; padding-inline: .55rem; }.dav-reel__play-label { font-size: 0; }.dav-reel__play-label::after { content: "Play"; font-size: .72rem; }
    .dav-reel__play.is-playing .dav-reel__play-label::after { content: "Pause"; }
    .dav-reel__chart-head { padding-bottom: 0; }.dav-reel__chart-head span { font-size: .78rem; }.dav-reel__chart-head small { font-size: .62rem; }
    .dav-reel__timeline { padding-top: .3rem; }.dav-reel__timeline::before { top: .62rem; }.dav-reel__pin span { font-size: .62rem; }
    .dav-reel__pin i { width: .55rem; height: .55rem; }
    .dav-reel__principle span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dav-switch--cycling .dav-q.is-on::after,
    .dav-reel--playing .dav-reel__live i { animation: none; }
    .dav-q,
    .dav-spotlight__panel,
    .dav-reel__chapter button,
    .dav-reel__controls button { transition: none; }
}

/* ========================================================================
   VIEWPORT STORY — precision layout pass
   Keeps the Chart Wall and Guided Tour visually full-screen on desktop,
   while preventing inherited section spacing, text zoom, or short screens
   from forcing controls and content to overlap.
   ======================================================================== */
.dav-wall-sec .dav-vh-head,
.dav-tour-sec .dav-vh-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 5rem);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.dav-wall-sec .dav-vh-head > div,
.dav-tour-sec .dav-vh-head > div,
.dav-wall-sec .dav-vh-head .ds-lead,
.dav-tour-sec .dav-vh-head .ds-lead {
    min-width: 0;
}

.dav-wall-sec .dav-vh-head .ds-label,
.dav-tour-sec .dav-vh-head .ds-label {
    width: max-content;
    max-width: 100%;
    margin: 0 0 .8rem;
}

.dav-wall-sec .dav-vh-head .ds-h2,
.dav-tour-sec .dav-vh-head .ds-h2 {
    margin: 0;
    max-width: 15ch;
    text-wrap: balance;
}

.dav-wall-sec .dav-vh-head .ds-lead,
.dav-tour-sec .dav-vh-head .ds-lead {
    align-self: end;
    margin: 0 0 .25rem !important;
    padding: .15rem 0 .15rem 1.35rem !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 2px solid currentColor !important;
    max-width: 48ch;
}

.dav-vh-section {
    height: 100svh;
    min-height: 700px;
    padding: clamp(1.4rem, 2.9vh, 2.6rem) 0;
}

.dav-vh-shell {
    width: min(90vw, 1540px);
    max-width: none;
    height: 100%;
    min-height: 0;
    grid-template-rows: max-content minmax(0, 1fr);
    gap: clamp(1rem, 2.2vh, 1.7rem);
}

/* Chart Wall ------------------------------------------------------------ */
.dav-switch {
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: clamp(.85rem, 1.35vw, 1.35rem);
    padding: clamp(.55rem, .85vw, .8rem);
}

.dav-switch__rail,
.dav-spotlight {
    height: 100%;
    min-height: 0;
}

.dav-switch__rail {
    padding: clamp(.75rem, 1.2vw, 1.15rem);
}

.dav-switch__rail-head {
    flex: 0 0 auto;
    padding: .2rem .25rem .8rem;
}

.dav-qlist {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: clamp(.2rem, .55vh, .36rem);
}

.dav-q {
    min-height: 0;
    padding: clamp(.34rem, .62vh, .55rem) .58rem;
}

.dav-q b,
.dav-q small,
.dav-q em {
    overflow-wrap: anywhere;
}

.dav-spotlight {
    grid-template-rows: 48px minmax(0, 1fr);
}

.dav-spotlight__panel {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 31%);
    overflow: hidden;
}

.dav-spotlight__chart,
.dav-spotlight__story {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dav-spotlight__chart {
    padding: clamp(.6rem, 1.15vw, 1.1rem);
}

.dav-spotlight__chart svg {
    width: min(100%, 920px);
    height: min(100%, 470px);
    margin: auto;
    object-fit: contain;
    overflow: visible;
}

.dav-spotlight__story {
    justify-content: flex-start;
    padding: clamp(1rem, 1.75vw, 1.65rem);
}

.dav-spotlight__story h3 {
    margin: .45rem 0 .65rem;
    font-size: clamp(1.25rem, 1.75vw, 1.95rem);
}

.dav-spotlight__story p {
    font-size: clamp(.84rem, .9vw, .98rem);
}

.dav-spotlight__rule {
    margin-top: auto;
}

/* Guided Tour ----------------------------------------------------------- */
.dav-tour__stage.dav-reel {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: 56px minmax(0, 1fr) 44px;
}

.dav-reel__toolbar {
    min-height: 0;
    height: 56px;
    padding: .55rem .9rem .55rem 1.05rem;
}

.dav-reel__body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
}

.dav-reel__visual {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: 28px minmax(0, 1fr) 52px;
    padding: clamp(.7rem, 1.2vw, 1.1rem);
}

.dav-reel__chart-head {
    min-width: 0;
    padding: 0 .2rem .2rem;
}

.dav-reel__chart-head span,
.dav-reel__chart-head small {
    min-width: 0;
    white-space: nowrap;
}

.dav-reel__visual svg {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dav-reel__timeline {
    min-height: 0;
    align-self: end;
    padding-top: .45rem;
}

.dav-reel__timeline::before {
    top: .78rem;
}

.dav-reel__chapters {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(.25rem, .55vh, .4rem);
    padding: clamp(.55rem, 1vw, .9rem);
}

.dav-reel__chapter,
.dav-reel__chapter button {
    min-height: 0;
}

.dav-reel__chapter button {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .65rem;
    padding: clamp(.48rem, .75vh, .7rem);
}

.dav-reel__chapter-no {
    width: 2rem;
    height: 2rem;
}

.dav-reel__chapter b,
.dav-reel__chapter em,
.dav-reel__chapter small {
    overflow-wrap: anywhere;
}

.dav-reel__chapter b {
    font-size: clamp(.88rem, .92vw, .98rem);
}

.dav-reel__chapter em {
    font-size: clamp(.67rem, .72vw, .74rem);
    line-height: 1.25;
}

.dav-reel__principle {
    min-height: 0;
    height: 44px;
    padding: .55rem 1rem;
    overflow: hidden;
}

/* Common laptop range: reduce heading footprint before shrinking the stage. */
@media (max-width: 1280px) and (min-width: 861px) {
    .dav-vh-shell { width: 92vw; }
    .dav-wall-sec .dav-vh-head,
    .dav-tour-sec .dav-vh-head {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr);
        gap: 2rem;
    }
    .dav-vh-head .ds-h2 { font-size: clamp(2.2rem, 3.8vw, 3.55rem); }
    .dav-switch { grid-template-columns: minmax(205px, 235px) minmax(0, 1fr); }
    .dav-q { grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: .5rem; }
    .dav-q__mark { width: 1.8rem; height: 1.8rem; }
    .dav-reel__body { grid-template-columns: minmax(0, 1.4fr) minmax(245px, .6fr); }
}

/* Short desktop windows must still fit cleanly inside one viewport. */
@media (max-height: 820px) and (min-width: 861px) {
    .dav-vh-section {
        min-height: 620px;
        padding: .9rem 0;
    }
    .dav-vh-shell { gap: .7rem; }
    .dav-wall-sec .dav-vh-head .ds-label,
    .dav-tour-sec .dav-vh-head .ds-label { margin-bottom: .45rem; }
    .dav-vh-head .ds-h2 { font-size: clamp(1.95rem, 3.15vw, 3rem); }
    .dav-vh-head .ds-lead { font-size: .82rem !important; line-height: 1.35 !important; }
    .dav-switch__rail-head { padding-bottom: .5rem; }
    .dav-switch__eyebrow { margin-bottom: .18rem; font-size: .64rem; }
    .dav-switch__rail-head strong { font-size: .88rem; }
    .dav-q { padding-block: .2rem; }
    .dav-q b { font-size: .82rem; }
    .dav-q small { display: none; }
    .dav-q em { font-size: .6rem; }
    .dav-spotlight { grid-template-rows: 42px minmax(0,1fr); }
    .dav-spotlight__topbar { min-height: 42px; padding: .45rem .8rem; }
    .dav-spotlight__story { padding: .85rem 1rem; }
    .dav-spotlight__story h3 { font-size: 1.25rem; }
    .dav-spotlight__story p { font-size: .8rem; line-height: 1.35; }
    .dav-spotlight__rule { padding-top: .55rem; }
    .dav-spotlight__rule span { font-size: .7rem; }
    .dav-tour__stage.dav-reel { grid-template-rows: 48px minmax(0,1fr) 38px; }
    .dav-reel__toolbar { height: 48px; padding-block: .35rem; }
    .dav-reel__visual { grid-template-rows: 24px minmax(0,1fr) 44px; padding: .55rem .75rem; }
    .dav-reel__chapter button { padding: .38rem .48rem; }
    .dav-reel__chapter em { font-size: .64rem; }
    .dav-reel__principle { height: 38px; padding-block: .35rem; }
}

/* Tablet / mobile: preserve a viewport-sized presentation, but allow the
   section to grow if text size or device chrome makes one viewport too tight. */
@media (max-width: 860px) {
    .dav-vh-section {
        height: auto;
        min-height: 100svh;
        padding: clamp(1.15rem, 3vw, 1.65rem) 0;
        overflow: visible;
    }
    .dav-vh-shell {
        width: min(92vw, 720px);
        height: auto;
        min-height: calc(100svh - 2.3rem);
        grid-template-rows: auto minmax(520px, 1fr);
        gap: .9rem;
    }
    .dav-wall-sec .dav-vh-head,
    .dav-tour-sec .dav-vh-head {
        grid-template-columns: 1fr;
        gap: .55rem;
    }
    .dav-wall-sec .dav-vh-head .ds-lead,
    .dav-tour-sec .dav-vh-head .ds-lead {
        padding-left: .9rem !important;
        max-width: 62ch;
    }
    .dav-switch,
    .dav-tour__stage.dav-reel {
        min-height: 520px;
        height: 100%;
    }
    .dav-switch {
        grid-template-columns: 1fr;
        grid-template-rows: 58px minmax(0, 1fr);
        padding: .5rem;
    }
    .dav-switch__rail { padding: .35rem; overflow: hidden; }
    .dav-qlist { height: 100%; align-items: stretch; }
    .dav-q { height: 46px; min-width: 152px; }
    .dav-spotlight__panel { grid-template-columns: 1fr; grid-template-rows: minmax(250px,1fr) auto; }
    .dav-spotlight__story { max-height: 170px; overflow-y: auto; }
    .dav-tour__stage.dav-reel { grid-template-rows: 52px minmax(0,1fr) auto; }
    .dav-reel__body { grid-template-columns: 1fr; grid-template-rows: minmax(300px,1fr) auto; overflow: visible; }
    .dav-reel__visual { min-height: 300px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
    .dav-reel__chapters { height: auto; display: flex; overflow-x: auto; overflow-y: hidden; padding: .5rem; }
    .dav-reel__chapter { flex: 0 0 min(76vw, 320px); }
    .dav-reel__chapter button { min-height: 82px; }
    .dav-reel__principle { height: auto; min-height: 40px; }
}

@media (max-width: 560px) {
    .dav-vh-shell {
        width: 92vw;
        grid-template-rows: auto minmax(500px, 1fr);
    }
    .dav-vh-head .ds-h2 { font-size: clamp(1.75rem, 8.8vw, 2.45rem); }
    .dav-wall-sec .dav-vh-head .ds-lead,
    .dav-tour-sec .dav-vh-head .ds-lead { display: none; }
    .dav-switch,
    .dav-tour__stage.dav-reel { min-height: 500px; }
    .dav-spotlight__panel { grid-template-rows: minmax(235px,1fr) auto; }
    .dav-spotlight__story { max-height: 150px; padding: .7rem .8rem; }
    .dav-reel__body { grid-template-rows: minmax(285px,1fr) auto; }
    .dav-reel__visual { min-height: 285px; padding: .55rem .65rem; }
    .dav-reel__toolbar { padding-inline: .55rem; }
    .dav-reel__status small { display: none; }
    .dav-reel__principle { padding-inline: .7rem; }
}

@media (min-width: 861px) and (max-height: 620px) {
    .dav-vh-section {
        height: auto;
        min-height: 620px;
        overflow: visible;
    }
}

/* ========================================================================
   GUIDED TOUR — definitive grid reset
   The legacy .dav-tour__stage rule above defines a two-column grid. The
   story-player is a completely different component, so reset every inherited
   grid-axis property here and pin each direct child to an explicit row.
   ======================================================================== */
.dav-tour__stage.dav-reel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 56px minmax(0, 1fr) 44px !important;
    grid-template-areas:
        "toolbar"
        "body"
        "principle" !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    min-width: 0;
    min-height: 0;
}

.dav-tour__stage.dav-reel > .dav-reel__toolbar {
    grid-area: toolbar;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.dav-tour__stage.dav-reel > .dav-reel__body {
    grid-area: body;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    align-self: stretch;
    justify-self: stretch;
}

.dav-tour__stage.dav-reel > .dav-reel__principle {
    grid-area: principle;
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Keep the chart and chapter rail in their own columns. Neither is allowed to
   participate in the parent player's row placement. */
.dav-reel__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: hidden;
}

.dav-reel__visual,
.dav-reel__chapters {
    position: relative;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}

.dav-reel__visual {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px minmax(0, 1fr) 54px !important;
    overflow: hidden;
}

.dav-reel__visual > svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
}

.dav-reel__chapters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 860px) {
    .dav-tour__stage.dav-reel {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 52px minmax(0, 1fr) 42px !important;
    }

    .dav-reel__body {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(300px, 1fr) auto !important;
        overflow: hidden;
    }

    .dav-reel__visual {
        grid-template-rows: 28px minmax(0, 1fr) 50px !important;
        min-height: 300px;
    }

    .dav-reel__chapters {
        display: flex !important;
        overflow-x: auto;
        overflow-y: hidden;
        min-height: 94px;
    }
}

/* ================================================================
   AUTOPLAY + AUTOPSY FOCUS REFINEMENT · 2026-10-23
   ================================================================ */
.dav-finding {
    cursor: pointer;
}

.dav-finding:hover {
    border-color: color-mix(in srgb, var(--acc-1) 32%, var(--hair));
}

.dav-finding.dav-sel {
    background: color-mix(in srgb, var(--acc-1) 7%, var(--dav-mat));
}

.dav-board {
    scroll-margin-top: 7rem;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}

.dav-board.dav-board--focus {
    border-color: color-mix(in srgb, var(--acc-1) 55%, var(--hair));
    box-shadow: 0 26px 58px -34px color-mix(in srgb, var(--acc-1) 45%, transparent);
}

.dav-hot.dav-target {
    z-index: 8;
    animation: dav-target-focus .9s var(--ease-io) both;
}

.dav-hot.dav-target::after {
    animation: dav-target-ring .9s var(--ease-io) both;
    opacity: 1;
}

@keyframes dav-target-focus {
    0% { transform: translate(-50%, -50%) scale(1); }
    38% { transform: translate(-50%, -50%) scale(1.32); }
    100% { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes dav-target-ring {
    0% { transform: scale(.8); opacity: .9; }
    100% { transform: scale(2.05); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dav-hot.dav-target,
    .dav-hot.dav-target::after {
        animation: none;
    }
}