/* Click-to-play workflow videos (biomarker pages, DiaSurv melanoma). Same play affordance as the testimonial cards. */
.pv-root{position:relative;background:var(--paper,#f5f5f3);padding:clamp(28px,4vw,56px) 0}
/* DiaSurv's section has no side padding of its own; the biomarker sections already do. */
.dss-section .pv-root{padding-inline:clamp(24px,5vw,82px)}
.pv-frame{position:relative;margin:0 auto;max-width:1180px;border:1px solid rgba(32,32,34,.12);background:#f5f5f3;overflow:hidden}
.pv-video{display:block;width:100%;height:auto;aspect-ratio:var(--pv-ratio,1280/690)}
.pv-start{position:absolute;inset:0;width:100%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;color:#fff;font:inherit;text-align:left}
.pv-start[hidden]{display:none}
.pv-start .pv-cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border-radius:999px;background:var(--indigo,#302e82);box-shadow:0 10px 30px rgba(30,28,98,.25);white-space:nowrap;transition:background .3s;font-size:var(--ty-tag,.72rem);font-weight:var(--ty-tag-weight,800);letter-spacing:var(--ty-tag-track,.14em);text-transform:uppercase}
.pv-start i{width:46px;height:46px;border:1px solid rgba(255,255,255,.85);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.9rem;transition:background .3s,color .3s,transform .3s}
.pv-start:hover i,.pv-start:focus-visible i{background:#fff;color:var(--indigo,#302e82);transform:scale(1.06)}
.pv-start:focus-visible{outline:2px solid var(--pink,#ed3b82);outline-offset:-4px}
.pv-bar{display:flex;align-items:center;gap:14px;max-width:1180px;margin:12px auto 0;color:var(--text-muted,#5e5e5e);font-size:.8rem;font-variant-numeric:tabular-nums}
.pv-bar[hidden]{display:none}
.pv-toggle{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid rgba(32,32,34,.25);background:#fff;color:var(--indigo,#302e82);display:grid;place-items:center;cursor:pointer;font-size:.8rem;padding:0}
.pv-toggle:hover,.pv-toggle:focus-visible{border-color:var(--indigo,#302e82)}
.pv-toggle:focus-visible,.pv-track:focus-visible{outline:2px solid var(--pink,#ed3b82);outline-offset:2px}
.pv-track{position:relative;flex:1;height:24px;cursor:pointer;touch-action:none}
.pv-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(32,32,34,.15)}
.pv-fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:var(--pink,#ed3b82)}
.pv-knob{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--pink,#ed3b82);left:0}
.pv-time{flex:0 0 auto;min-width:6.5em;text-align:right}
@media(max-width:760px){.pv-root{padding-block:24px}.pv-start .pv-cue{gap:10px;padding:6px 18px 6px 6px}.pv-frame{max-width:430px}.pv-bar{max-width:430px}.pv-start i{width:42px;height:42px}}
/* Chapters: the "how it works" steps sit beside the video and follow it (Apple/Linear-style product tour). */
.pv-tour{display:grid;grid-template-columns:minmax(260px,.4fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.pv-tour .pv-root{padding:0;background:transparent}
.pv-tour .pv-frame,.pv-tour .pv-bar{max-width:none}
.pv-tour .pv-steps{border-top:0}
.pv-tour .assay{display:block;min-height:0;padding:20px 0 22px;border-bottom:0;border-top:1px solid var(--line,rgba(32,32,34,.14));position:relative;cursor:pointer}
.pv-tour .assay:last-child{border-bottom:1px solid var(--line,rgba(32,32,34,.14))}
.pv-tour .assay:hover{padding-left:0;background:none}
/* Only the current step is emphasised; the others dim their title and text (colour, not opacity, so the pink labels stay crisp). */
.pv-tour .assay h3,.pv-tour .assay p{transition:color .35s}
.pv-tour:not(.is-idle) .assay:not(.is-active) h3{color:rgba(32,32,34,.42)}
.pv-tour:not(.is-idle) .assay:not(.is-active) p{color:rgba(32,32,34,.38)}
.pv-tour:not(.is-idle) .assay:not(.is-active):hover h3{color:rgba(32,32,34,.7)}
.pv-tour .assay::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:calc(var(--p,0) * 100%);background:var(--pink,#ed3b82)}
.pv-tour .assay small{display:block;margin:0 0 10px}
.pv-tour .assay h3{font-size:var(--ty-h4);font-weight:500;line-height:var(--ty-h4-lh);letter-spacing:var(--ty-h4-ls);margin:0 0 8px}
.pv-tour .assay p{font-size:.95rem;line-height:1.5}
.pv-tour .assay:focus-visible{outline:2px solid var(--pink,#ed3b82);outline-offset:4px}
.dss-section .pv-tour{padding:clamp(28px,4vw,56px) clamp(24px,5vw,82px)}
@media(max-width:900px){.pv-tour{grid-template-columns:1fr;gap:20px}.pv-tour .pv-steps{order:2}.pv-tour .assay{padding:16px 0 18px}}
@media(max-width:760px){.dss-section .pv-tour{padding:24px}}
/* Before playing: a light veil turns the poster into a calm preview, so the play button never competes with the frame's details. */
.pv-start{background:rgba(245,245,243,.62);transition:background .3s}
.pv-start:hover,.pv-start:focus-visible{background:rgba(245,245,243,.45)}
/* Portrait (phone) cut: never wider than a phone or taller than most of the screen, centred. */
@media(max-width:760px){.pv-frame,.pv-tour .pv-frame{width:min(100%,420px,calc(75svh * 860 / 1520));margin-inline:auto}.pv-bar,.pv-tour .pv-bar{width:min(100%,420px);margin-inline:auto}}
/* DiaSurv melanoma: the section title sits in its own section just above the video; collapse the doubled spacing so the gap matches the biomarker pages. */
.editorial:has(+ .dss-section .pv-tour){padding-bottom:0}
.dss-section .pv-tour{padding-top:0}

/* Chapter marker: empty = to come, half = playing, full = done */
.pv-tour .assay[data-at],.pv-tour .assay[data-at]:hover{padding-left:38px}
.pv-tour .assay .dd-sign{position:absolute;left:0;top:16px}
.pv-tour:not(.is-idle) .assay.is-active .dd-sign .l,.pv-tour:not(.is-idle) .assay.is-done .dd-sign .l{fill:var(--indigo,#302e82)}
.pv-tour:not(.is-idle) .assay.is-done .dd-sign .r{fill:var(--pink,#ed3b82)}
@media(max-width:900px){.pv-tour .assay .dd-sign{top:12px}}