﻿/* DataDriven individual video tutorial pages */
.ddv-page { background:#f6f8fa; padding:65px 0 80px; color:#293d50; }
.ddv-intro { max-width:900px; margin:0 auto 34px; text-align:center; background:transparent; border:0; box-shadow:none; padding:0; }
.ddv-kicker { display:block; color:#83b526; font-size:13px; font-weight:700; letter-spacing:1.3px; }
.ddv-intro h1 { color:#293d50; font-size:clamp(30px,3.6vw,46px); font-weight:700; line-height:1.17; margin:14px 0 18px; }
.ddv-intro h1 span { color:#85b624; }
.ddv-intro p { color:#617185; font-size:17px; line-height:1.75; max-width:800px; margin:0 auto; }
.ddv-card { max-width:920px; margin:0 auto; background:#fff; border:1px solid #e1e7ed; border-radius:16px; overflow:hidden; }
.ddv-frame { border:5px solid #a0cb37; border-radius:15px; overflow:hidden; background:#000; isolation:isolate; }
.ddv-frame video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#000; border:0; border-radius:0; }
.ddv-body { padding:25px 29px 30px; color:#69798b; line-height:1.75; }
.ddv-label { display:block; color:#8dbd29; font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:10px; }
.ddv-body h2 { color:#293d50; font-size:23px; font-weight:600; margin:0 0 12px; }
.ddv-body p { font-size:15px; line-height:1.75; margin:0; }
.ddv-links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; max-width:920px; margin:32px auto 0; }
.ddv-button { display:inline-block; padding:14px 22px; border-radius:7px; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.35px; background:#a0cb37; color:#243447; transition:background .2s ease; }
.ddv-button:hover { background:#8fba29; color:#243447; }
.ddv-button-alt { background:#fff; border:1px solid #cbd5df; }
.ddv-button-alt:hover { background:#edf1f5; }
.ddv-text-link { color:#526477; font-size:14px; text-decoration:underline; text-underline-offset:3px; padding:10px; }
.ddv-text-link:hover { color:#293d50; }
.ddv-links a:focus-visible { outline:3px solid #293d50; outline-offset:3px; }
@media(max-width:767px) { .ddv-page {padding:44px 0 55px;} .ddv-intro {margin-bottom:26px;} .ddv-intro p {font-size:15px;} .ddv-body {padding:21px;} .ddv-body h2 {font-size:20px;} .ddv-links {gap:10px;} }
@media(prefers-reduced-motion:reduce) { .ddv-button {transition:none;} }
