:root{--ink:#302b43;--purple:#8170ac;--light:#eee9f6;--muted:#746b82;--line:#e6e0ed}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:#fafaf7;color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.65}
a{color:inherit}
button{font:inherit;cursor:pointer}
button,a,video{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
[hidden]{display:none!important}
.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.skip{position:absolute;left:20px;top:-90px;padding:10px 16px;background:white;z-index:10;border-radius:8px}
.skip:focus{top:10px}
.site-header{border-bottom:1px solid var(--line);background:#fff}
.top{min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.top nav{display:flex;align-items:center;gap:28px}
.top nav a{font-size:13px;font-weight:600;text-decoration:none}
.top nav a[aria-current]{color:var(--purple)}
.top nav .nav-demo{padding:11px 16px;border:1px solid var(--line);border-radius:9px;background:#faf8fc}
.nav-demo span{margin-left:12px}
.intro{padding-top:40px;padding-bottom:30px}
.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:var(--purple);margin:0 0 15px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(40px,4.5vw,58px);line-height:1.12;letter-spacing:-2px;font-weight:650;margin-bottom:20px;max-width:1050px}
h1 em{font-style:normal;color:var(--purple);font-weight:550}
.lead{max-width:650px;font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:28px}
.theme-jumps{display:flex;flex-wrap:wrap;gap:9px}
.theme-jumps a{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;font-size:11px;font-weight:600;transition:background .18s,border-color .18s}
.theme-jumps a:hover{background:var(--light);border-color:#cfc1df}
.theme-jumps span{font-size:9px;color:var(--purple);font-variant-numeric:tabular-nums}
.video-library{padding-bottom:56px}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.video-card{min-width:0;border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden;scroll-margin-top:25px;box-shadow:0 6px 24px #302b4305}
.video-info{padding:24px 25px 20px;min-height:204px}
.video-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:11px}
.theme-label{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;color:var(--purple);letter-spacing:.45px}
.video-number{font-size:9px;border:1px solid #e4ddec;border-radius:5px;padding:2px 5px;background:#faf8fc}
.duration{font-size:11px;font-weight:650;color:#736783;background:#f0ebf6;padding:3px 8px;border-radius:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.video-info h2{font-size:23px;line-height:1.3;letter-spacing:-.6px;font-weight:650;margin-bottom:9px}
.video-info>p{font-size:13px;line-height:1.7;color:var(--muted);margin-bottom:0;max-width:470px}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--light);isolation:isolate}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--light)}
.play-overlay{position:absolute;inset:auto auto 58px 20px;display:flex;align-items:center;justify-content:center;gap:9px;padding:7px 17px 7px 7px;border:1px solid #ffffff35;border-radius:999px;background:#302b43f2;color:#fff;box-shadow:0 4px 18px #302b432b}
.play-circle{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffffff16;transition:background .18s,transform .18s}
.play-circle svg{width:28px;height:28px;margin-left:3px}
.play-overlay:hover .play-circle{background:#8170ac;transform:scale(1.05)}
.play-label{font-size:12px;font-weight:650;letter-spacing:.1px}
.video-footer{padding:16px 25px 18px;border-top:1px solid #f0ebf6}
.video-footer a{font-size:12px;font-weight:650;text-decoration:none;color:#78628f}
.video-footer a span{margin-left:8px}
.video-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.video-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:26px;background:#eee9f6;color:var(--ink);font-size:13px;z-index:2}
.video-error p{margin:0;max-width:310px}
.video-error a{font-size:12px;text-underline-offset:3px}
.retry-video{border:1px solid #d4c6e2;border-radius:8px;padding:9px 13px;background:#fff;color:#655174;font-size:12px;font-weight:650}
.has-error video{visibility:hidden}
.page-message{padding:25px;border:1px solid var(--line);border-radius:12px;background:#fff}
.next-step{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 32px;margin-bottom:64px;background:#eee9f6;border:1px solid #e0d7eb;border-radius:16px}
.next-step .eyebrow{margin-bottom:7px}
.next-step h2{font-size:26px;line-height:1.3;letter-spacing:-.7px;margin-bottom:8px}
.next-step p:last-child{font-size:13px;color:var(--muted);margin:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:17px;padding:12px 17px;border-radius:9px;background:var(--ink);color:#fff;text-decoration:none;font-size:12px;font-weight:650;white-space:nowrap}
.button:hover{background:#4e3e62}
footer{border-top:1px solid var(--line);padding:27px 0;background:#fff;color:var(--muted);font-size:11px}
.footer-inner{display:flex;justify-content:space-between;gap:24px}
.footer-inner p{margin:0}
.footer-inner a{text-decoration:none}
@media(max-width:850px){.top{gap:18px;flex-wrap:wrap;padding-block:12px}.top nav{gap:19px}.video-grid{gap:20px}.video-info{padding:21px;min-height:204px}.video-info h2{font-size:21px}.video-footer{padding-inline:21px}.next-step{padding:25px;gap:22px}.next-step h2{font-size:23px}}
@media(max-width:650px){.wrap{width:calc(100% - 34px)}.top{justify-content:center;gap:6px;padding-top:10px;padding-bottom:15px}.top nav{width:100%;justify-content:center;gap:24px}.top nav a{font-size:12px}.top nav .nav-demo{padding:8px 11px}.nav-demo span{margin-left:5px}.intro{padding-top:36px;padding-bottom:27px}h1{font-size:41px;letter-spacing:-1.7px}.lead{font-size:14px;margin-bottom:23px}.theme-jumps{gap:7px}.theme-jumps a{padding:8px 10px;font-size:10px}.theme-jumps span{font-size:8px}.video-grid{grid-template-columns:1fr;gap:22px}.video-info{min-height:0;padding:21px 22px 19px}.video-info h2{font-size:23px}.video-info>p{font-size:13px}.video-meta{margin-bottom:12px}.play-circle{width:40px;height:40px}.play-overlay{gap:7px}.video-library{padding-bottom:35px}.next-step{display:block;padding:23px;margin-bottom:40px}.next-step h2{font-size:25px}.next-step .button{margin-top:19px}.footer-inner{display:block}.footer-inner a{display:inline-block;margin-top:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Keep both the example and protected cards useful and balanced. */
.video-card { display:flex; flex-direction:column; }
.video-info { min-height:184px; }
.video-footer { margin-top:auto; }
.video-sample-note { padding:22px 24px; background:#f2f5e9; }
.video-sample-note strong { display:block; font-size:17px; line-height:1.5; margin-top:6px; }
.video-sample-note p { font-size:14px; line-height:1.65; color:#566146; margin:7px 0 0; }
.sample-badge { font-size:10px; font-weight:750; letter-spacing:1px; color:#566146; }
.video-meta .theme-label { font-size:12px; letter-spacing:0; }
.video-footer a { font-size:14px; display:inline-flex; align-items:center; min-height:30px; }
.theme-jumps a { min-height:44px; font-size:12px; }
.theme-jumps a:target, .video-card:target { border-color:#a591bf; }
.theme-jumps a:focus-visible { outline-offset:3px; }
.video-card { scroll-margin-top:112px; }
.video-info>p { font-size:14px; }
.footer-inner { flex-wrap:wrap; }
@media(max-width:650px) { .video-info { min-height:0; } .video-sample-note { padding:21px 22px; } }
.eyebrow,.theme-label{color:#665086}