/*
 * Solution template walkthroughs (template-parts/solution-template/): ID Pass and
 * WatchEye Quick ID, ported from the use-case demos (assets/css/use-case-sections.css)
 * with st- names, plus the v3 hero, API and review walkthroughs.
 */

/* Stepper screens fade between steps. */
.st-step-screen { transition: opacity 0.3s ease; }


/* ID Pass demo: HTML recreation of the client flow (colours sampled from ID Pass). */
.st-idp-bar { background: #4e80ee; }
.st-idp-card { border: 1.5px solid #4e80ee; border-radius: 4px; background: #fff; }
.st-idp-h { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: #3b6fe0; }
.st-idp-p { font-size: 9.5px; line-height: 1.45; color: #394150; }
.st-idp-btn { display: flex; height: 30px; align-items: center; justify-content: center; border-radius: 4px; background: #3662e3; font-size: 11px; font-weight: 600; color: #fff; }
.st-idp-frame span { position: absolute; width: 18px; height: 18px; border-color: #fff; border-radius: 3px; animation: st-idp-frame 6s infinite; }

/* Document capture, 6s loop: card settles into the frame, frame turns green, scan, flash, captured. */
.st-idp-licence { transform: translate(-50%, -50%); animation: st-idp-licence 6s cubic-bezier(.3,.7,.3,1) infinite; }
.st-idp-scan, .st-idp-flash, .st-idp-done, .st-idp-s2 { opacity: 0; }
.st-idp-scan { animation: st-idp-scan 6s linear infinite; }
.st-idp-flash { animation: st-idp-flash 6s infinite; }
.st-idp-done { animation: st-idp-done 6s infinite; }
.st-idp-s1 { animation: st-idp-s1 6s infinite; }
.st-idp-s2 { animation: st-idp-s2 6s infinite; }
@keyframes st-idp-licence {
	0%, 4% { transform: translate(-36%, -30%) rotate(-9deg) scale(.86); }
	36%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
}
@keyframes st-idp-frame { 0%, 38% { border-color: #fff; } 42%, 100% { border-color: #7ee08a; } }
@keyframes st-idp-scan {
	0%, 42% { opacity: 0; transform: translateY(0); }
	44% { opacity: 1; transform: translateY(0); }
	60% { opacity: 1; transform: translateY(112px); }
	62%, 100% { opacity: 0; transform: translateY(112px); }
}
@keyframes st-idp-flash { 0%, 62% { opacity: 0; } 64% { opacity: .8; } 72%, 100% { opacity: 0; } }
@keyframes st-idp-done { 0%, 66% { opacity: 0; transform: translate(-50%, 6px); } 72%, 94% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes st-idp-s1 { 0%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes st-idp-s2 { 0%, 66% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* Liveness, 8s loop: ring fills while prompts change and the head turns, then verified. */
.st-idp-ring { animation: st-idp-ring 8s linear infinite; }
.st-idp-face { animation: st-idp-face 8s ease-in-out infinite; }
.st-idp-ok { opacity: 0; animation: st-idp-ok 8s infinite; }
.st-idp-pr { opacity: 0; animation: st-idp-pr 8s infinite backwards; }
@keyframes st-idp-ring {
	0% { stroke-dashoffset: 440; stroke: #4e80ee; }
	78% { stroke-dashoffset: 0; stroke: #4e80ee; }
	80%, 100% { stroke-dashoffset: 0; stroke: #5ec269; }
}
@keyframes st-idp-face {
	0%, 20% { transform: translateX(-50%) scaleX(1); }
	28%, 36% { transform: translateX(calc(-50% - 9px)) scaleX(.94); }
	46%, 54% { transform: translateX(calc(-50% + 9px)) scaleX(.94); }
	62%, 100% { transform: translateX(-50%) scaleX(1); }
}
@keyframes st-idp-ok { 0%, 79% { opacity: 0; transform: scale(.6); } 83%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes st-idp-pr { 0% { opacity: 0; } 2%, 17% { opacity: 1; } 19%, 100% { opacity: 0; } }

/* Reduced motion: show the finished state of each screen, no movement. */
@media (prefers-reduced-motion: reduce) {
	.st-idp *, .st-idp *::before { animation: none !important; }
	.st-idp-licence { transform: translate(-50%, -50%); }
	.st-idp-frame span { border-color: #7ee08a; }
	.st-idp-done, .st-idp-s2, .st-idp-ok, .st-idp-pr-last { opacity: 1; }
	.st-idp-done { transform: translate(-50%, 0); }
	.st-idp-s1 { opacity: 0; }
	.st-idp-ring { stroke-dashoffset: 0; stroke: #5ec269; }
}

/* WatchEye Quick ID demo: simplified HTML mockups of the Quick ID screens (colours sampled from WatchEye). */
.st-step-screen.opacity-0 { pointer-events: none; }
.st-qid-win { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 30px -18px rgba(15, 23, 42, .3); }
.st-qid-bar { display: flex; min-height: 42px; flex-wrap: wrap; align-items: center; gap: 4px 14px; background: #581f5d; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #fff; }
.st-qid-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.st-qid-btn { border: 1px solid #581f5d; border-radius: 6px; background: #fff; padding: 4px 9px; font-size: 11.5px; font-weight: 600; color: #581f5d; }
.st-qid-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 10px; border-bottom: 1px solid #fff; padding: 8px 12px; color: #334155; }
.st-qid-row:last-child { border-bottom: 0; }
@media (min-width: 640px) { .st-qid-row { grid-template-columns: 6.75rem minmax(0, .9fr) minmax(0, 1.3fr); } }
.st-qid-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #581f5d; }
.st-qid-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 13px; }
.st-qid-val { margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #0f172a; }
.st-qid-sub { margin-top: 3px; font-size: 12px; line-height: 1.4; color: #64748b; }
.st-qid-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: #475569; }
.st-qid-input { display: flex; height: 32px; align-items: center; overflow: hidden; border: 1px solid #d6d3db; border-radius: 6px; padding: 0 10px; font-size: 13px; font-weight: 500; color: #0f172a; white-space: nowrap; }
.st-qid-t { display: inline-block; clip-path: inset(0 100% 0 0); }

/* List, 4s loop: the Run DVS check button pulses. */
.st-qid-cta { animation: st-qid-cta 4s ease-in-out infinite; }
@keyframes st-qid-cta {
	0%, 30% { background: #fff; color: #581f5d; box-shadow: 0 0 0 0 rgba(88, 31, 93, .3); }
	45%, 80% { background: #581f5d; color: #fff; box-shadow: 0 0 0 5px rgba(88, 31, 93, .15); }
	100% { background: #fff; color: #581f5d; box-shadow: 0 0 0 0 rgba(88, 31, 93, 0); }
}

/* Details, 8s loop: fields fill in turn, consent is ticked, then the check runs. */
.st-qid-t1 { animation: st-qid-t1 8s infinite; }
.st-qid-t2 { animation: st-qid-t2 8s infinite; }
.st-qid-t3 { animation: st-qid-t3 8s infinite; }
.st-qid-t4 { animation: st-qid-t4 8s infinite; }
.st-qid-t5 { animation: st-qid-t5 8s infinite; }
.st-qid-t6 { animation: st-qid-t6 8s infinite; }
.st-qid-tick { opacity: 0; animation: st-qid-tick 8s infinite; }
.st-qid-run { animation: st-qid-run 8s infinite; }
.st-qid-run1 { animation: st-qid-run1 8s infinite; }
@keyframes st-qid-t1 { 0%, 3% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(4); } 9%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes st-qid-t2 { 0%, 11% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(7); } 19%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes st-qid-t3 { 0%, 21% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(10); } 31%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes st-qid-t4 { 0%, 33% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(3); } 37%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes st-qid-t5 { 0%, 39% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(9); } 49%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes st-qid-t6 { 0%, 51% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(8); } 60%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes st-qid-tick { 0%, 63% { opacity: 0; transform: scale(.4); } 66%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes st-qid-run { 0%, 72% { transform: scale(1); box-shadow: none; } 74% { transform: scale(.95); } 76%, 97% { transform: scale(1); box-shadow: 0 0 0 4px rgba(88, 31, 93, .18); } 100% { box-shadow: none; } }
.st-qid-run { position: relative; }
.st-qid-run2 { display: flex; position: absolute; inset: 0; justify-content: center; opacity: 0; animation: st-qid-run2 8s infinite; }
@keyframes st-qid-run1 { 0%, 75% { opacity: 1; } 77%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes st-qid-run2 { 0%, 75% { opacity: 0; } 77%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* Result, 16s loop: a short DVS wait, the verified result, then Download certificate opens the certificate. */
.st-qid-wait { animation: st-qid-wait 16s infinite; }
.st-qid-result { animation: st-qid-result 16s infinite; }
.st-qid-dl { animation: st-qid-dl 16s infinite; }
.st-qid-cert { opacity: 0; visibility: hidden; animation: st-qid-cert 16s infinite; }
.st-qid-cert > div { animation: st-qid-cert-doc 16s infinite; }
.st-qid-spin { animation: st-qid-spin .8s linear infinite; }
@keyframes st-qid-wait { 0%, 9% { opacity: 1; visibility: visible; } 13%, 100% { opacity: 0; visibility: hidden; } }
@keyframes st-qid-result { 0%, 9% { opacity: 0; transform: translateY(6px); } 14%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes st-qid-dl { 0%, 34% { background: #fff; color: #581f5d; transform: scale(1); } 37% { background: #581f5d; color: #fff; transform: scale(.95); } 40%, 47% { background: #581f5d; color: #fff; transform: scale(1); } 52%, 100% { background: #fff; color: #581f5d; } }
@keyframes st-qid-cert { 0%, 43% { opacity: 0; visibility: hidden; } 48%, 95% { opacity: 1; visibility: visible; } 99%, 100% { opacity: 0; visibility: hidden; } }
@keyframes st-qid-cert-doc { 0%, 43% { transform: translateY(24px) scale(.92); } 53%, 100% { transform: translateY(0) scale(1); } }
@keyframes st-qid-spin { to { transform: rotate(360deg); } }

/* Reduced motion: finished state of each screen. */
@media (prefers-reduced-motion: reduce) {
	.st-qid * { animation: none !important; }
	.st-qid-t { clip-path: none; }
	.st-qid-tick, .st-qid-result { opacity: 1; }
	.st-qid-run2, .st-qid-wait, .st-qid-cert { opacity: 0; visibility: hidden; }
}

/* Shared WatchEye window (hero, review). */
.st-we-win{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e5e7eb;border-radius:14px;background:#fff;font-family:Manrope,sans-serif;color:#1f2937}
.st-we-bar{display:flex;min-height:42px;align-items:center;gap:14px;background:#581f5d;padding:8px 16px;font-size:13px;font-weight:600;color:#fff}
.st-we-bar .sl{opacity:.6}
.st-we-logo{display:block;height:15px;width:auto}

/* Hero: WatchEye result in a monitor, the certificate and the ID Pass phone. */
.st-hw{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0}
.st-hw figcaption{font-size:14px;line-height:1.5;color:#475569}
.st-hw-stage{position:relative;padding:0 0 4px}
.st-hw-monitor{position:relative;margin:0 16% 0 11%;border-radius:16px;background:#0f172a;padding:10px 10px 12px;box-shadow:0 2px 6px rgba(15,23,42,.08),0 34px 60px -28px rgba(15,23,42,.45)}
.st-hw-screen{position:relative;aspect-ratio:720/486;overflow:hidden;border-radius:6px;background:#f6f7f9}
.st-hw-screen.is-sized{aspect-ratio:auto}
.st-hw-inner,.st-hw-pinner{position:absolute;left:0;top:0;transform-origin:0 0}
.st-hw-inner{width:720px;height:486px;padding:14px}
.st-hw-win{height:100%;box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 30px -18px rgba(15,23,42,.3)}
.st-hw-body{position:relative;flex:1;padding:10px 16px 12px}
.st-hw-crumb{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid #e5e7eb;font-size:15px;font-weight:500;color:#581f5d}
.st-hw-crumb i{font-style:normal;color:#94a3b8}
.st-hw-crumb .help{border-radius:999px;background:#7ba7ee;padding:2px 10px;font-size:10.5px;font-weight:700;color:#fff}
.st-hw-res{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.st-hw-acts{display:flex;justify-content:flex-end;gap:6px;border:1px solid #e5e7eb;border-radius:6px;padding:6px}
.st-hw-acts span{border:1px solid #581f5d;border-radius:4px;padding:3px 9px;font-size:10.5px;font-weight:600;color:#581f5d}
.st-hw-acts .off{border-color:#d1d5db;color:#9ca3af}
.st-hw-banner{border-radius:6px;background:#e2f1e6;padding:9px 12px;color:#166534;font-size:11px}
.st-hw-banner>b{display:block;font-size:13px;font-weight:600}
.st-hw-banner>span{display:block;margin-top:2px}
.st-hw-banner .s{font-weight:700}
.st-hw-card{overflow:hidden;border:1px solid #e5e7eb;border-radius:6px}
.st-hw-card .h{background:#f3eaf4;padding:6px 10px;font-size:11.5px;font-weight:600;color:#3b2140}
.st-hw-card .g{display:grid;gap:8px 12px;padding:8px 10px}
.st-hw-card .l{display:block;font-size:10.5px;font-weight:700;color:#3b2140}
.st-hw-card .v{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:11.5px;color:#1f2937}
.st-hw-card .v.ok{color:#15803d}
.st-hw-wait{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;font-size:13px;font-weight:500;color:#475569;opacity:0;visibility:hidden}
.st-hw-wait span{width:28px;height:28px;border:3px solid #e9dcea;border-top-color:#581f5d;border-radius:50%;animation:st-spin .8s linear infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
.st-hw-cert{position:absolute;left:0;bottom:0;z-index:2;display:block;width:15%;min-width:64px;height:auto;border-radius:3px;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.1),0 24px 44px -16px rgba(15,23,42,.45)}
.st-hw-phone{position:absolute;right:0;bottom:0;width:18%;min-width:88px;aspect-ratio:244/500;border:5px solid #0f172a;border-radius:24px;background:#0f172a;box-shadow:0 24px 48px -18px rgba(15,23,42,.55)}
.st-hw-pscreen{position:relative;height:100%;overflow:hidden;border-radius:19px;background:#fff}
.st-hw-pscreen.is-sized{height:auto}
.st-hw-pinner{width:234px;height:490px}
.st-hw-pbar{display:flex;height:62px;align-items:flex-end;justify-content:space-between;padding:0 14px 10px;color:#fff;font-size:11px;font-weight:700}
.st-hw-pbar .r{display:flex;flex-direction:column;text-align:right;line-height:1.15}
.st-hw-pbar small{font-size:7.5px;font-weight:400;opacity:.9}
.st-hw-pbar b{font-size:9px}
.st-hw-pbody{padding:10px 12px}
.st-hw-pcard{display:flex;flex-direction:column;gap:6px;padding:16px 14px;text-align:center}
.st-hw-pcard .ic{display:flex;justify-content:center;padding-bottom:6px;color:#5ec269}
/*
 * Hero sequence, run by solution-template.js (.is-live): the Quick ID list, the
 * details typed in, the DVS wait and result, the certificate; then the phone
 * plays the ID Pass capture (document, liveness, complete). The screens are
 * cloned from the walkthroughs further down the page. Without the script, or
 * with reduced motion, the hero shows the finished result and completion screen.
 */
.st-hw-scr{position:absolute;inset:0;z-index:3;padding:14px;background:#f6f7f9;transition:opacity .35s,visibility .35s}
.st-hw-scr.is-off{opacity:0;visibility:hidden}
/* Until the script has cloned the screens: nothing on the monitor or phone yet. */
.st-hw.is-pre .st-hw-inner>*,.st-hw.is-pre .st-hw-pinner>*{visibility:hidden}
.st-hw-scr>.st-qid-win{height:100%;background:#fff}
.st-hw-pinner .st-step-screen{transition:opacity .35s}
.st-hw.is-live .st-hw-banner,.st-hw.is-live .st-hw-card{opacity:0}
.st-hw.is-result .st-hw-wait{animation:st-hw-wait 1.4s ease both}
.st-hw.is-result .st-hw-banner,.st-hw.is-result .st-hw-card{animation:st-hw-in .45s ease both}
.st-hw.is-result .st-hw-banner{animation-delay:1.3s}
.st-hw.is-result .st-hw-card:nth-child(3){animation-delay:1.5s}
.st-hw.is-result .st-hw-card:nth-child(4){animation-delay:1.62s}
.st-hw.is-result .st-hw-card:nth-child(5){animation-delay:1.74s}
.st-hw-cert{transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.st-hw.is-live:not(.has-cert) .st-hw-cert{opacity:0;transform:translate(40px,-30px) scale(.9) rotate(3deg)}
@keyframes st-hw-wait{0%{opacity:0;visibility:visible}12%,80%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes st-hw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* API walkthrough (dark path card). */
.st-api{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0}
.st-api-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-radius:10px;background:#111a2e;padding:4px}
.st-api-tabs button{position:relative;display:flex;min-height:64px;align-items:center;justify-content:center;overflow:hidden;border:0;border-radius:8px;padding:24px 6px 8px;text-align:center;font:600 12.5px/1.2 Manrope,sans-serif;cursor:pointer;background:transparent;color:#94a3b8}
.st-api-tabs button>span{position:absolute;right:0;top:0;border-bottom-left-radius:8px;padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#1e293b;color:#94a3b8}
.st-api-tabs button[aria-selected="true"]{background:#1e293b;color:#fff}
.st-api-tabs button[aria-selected="true"]>span{background:#13ec80;color:#06281a}
.st-api-tabs button:focus-visible{outline:2px solid #13ec80;outline-offset:2px}
.st-api-panel{position:relative;overflow:hidden;border:1px solid #1e293b;border-radius:12px;background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(19,236,128,.1),rgba(19,236,128,0) 70%),#060b16}
.st-api-grid{display:grid;min-height:340px;padding:22px}
.st-api-scr{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:18px}
.st-api-scr.col{flex-direction:column;align-items:stretch;justify-content:center;gap:16px}
.st-api-scr.wrap{flex-wrap:wrap}
.st-api-card{width:100%;border-radius:12px;background:#fff;color:#0f172a;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);padding:16px 18px;font-family:Manrope,sans-serif}
.st-api-card.flush{padding:0;overflow:hidden}
.st-api-cardh{padding:9px 14px;background:#f1f5f9;font-size:11.5px;font-weight:700;color:#475569}
.st-api-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #f1f5f9;font-size:13px}
.st-api-row .k,.st-api-checks .k{color:#64748b}
.st-api-checks{padding:10px 0 2px;border-top:1px solid #f1f5f9;font-size:13px}
.st-api-checks>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.st-api-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#f1f5f9;padding:2px 9px;font-size:11.5px;font-weight:600;color:#0f172a;white-space:nowrap}
.st-api-pill.ok{background:#ecfdf5;color:#065f46}
.st-api-pill.blue{background:#eff6ff;color:#1d4ed8}
.st-api-stack{display:flex;width:100%;flex-direction:column;gap:10px}
.st-api-agree{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;font-weight:600}
.st-api-agree>span{display:flex;width:16px;height:16px;align-items:center;justify-content:center;border-radius:4px;background:#047857;color:#fff}
.st-api-dark{border:1px solid #1e293b;border-radius:12px;background:#0b1220;padding:12px 14px;color:#e2e8f0}
.st-api-k{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6ee7b7}
.st-api-kept{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;font-size:12px;line-height:1.35}
.st-api-kept small{display:block;color:#94a3b8;font-size:12px}
.st-api-flow{display:flex;align-items:stretch}
.st-api-flow>i{flex:none;align-self:center;width:18px;height:2px;background:#13ec80}
.st-api-node{flex:1 1 0;min-width:0;border-radius:10px;padding:10px 12px;background:#fff;color:#0f172a;box-shadow:0 12px 28px -16px rgba(0,0,0,.6)}
.st-api-node b{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
.st-api-node span{display:block;margin-top:2px;font-size:11px;line-height:1.35;opacity:.75}
.st-api-out{display:flex;align-items:center;gap:10px;margin-top:10px;border-radius:8px;background:#e2f1e6;padding:10px 12px}
.st-api-out b{display:block;font-size:14px;font-weight:600;color:#166534}
.st-api-out small{display:block;font-size:12px;color:#166534}
.st-api-out svg{flex:none}
.st-api-cert{width:150px;flex:none;overflow:hidden;border-radius:4px;background:#fff;box-shadow:0 22px 44px -16px rgba(0,0,0,.7)}
.st-api-cert img{display:block;width:100%;height:auto}
.st-api-cap{min-height:66px;font-size:14px;line-height:1.55;color:#cbd5e1}
.st-api-note{font-size:12px;line-height:1.5;color:#94a3b8}
/* Items rise in when their step opens. */
.st-step-screen.is-on .st-api-it{animation:st-hw-in .4s ease both}
.st-step-screen.is-on .st-api-it:nth-child(2){animation-delay:.08s}
.st-step-screen.is-on .st-api-it:nth-child(3){animation-delay:.16s}
.st-step-screen.is-on .st-api-it:nth-child(4){animation-delay:.24s}
.st-step-screen.is-on .st-api-it:nth-child(5){animation-delay:.32s}
@media (max-width:639.98px){
  .st-api-tabs button{min-height:58px;font-size:11.5px;padding-left:3px;padding-right:3px}
  .st-api-flow{flex-direction:column;gap:6px}
  .st-api-flow>i{width:2px;height:12px}
  .st-api-kept{grid-template-columns:minmax(0,1fr)}
}

/* Review walkthrough (failed ID Pass, compare, correct). */
.st-rev{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0}
.st-rev-panel{display:flex;flex-direction:column;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;padding:14px}
.st-rev-list{padding:14px;font-size:12px;line-height:1.35}
.st-rev-row{display:grid;grid-template-columns:6.5rem minmax(0,.8fr) minmax(0,1.3fr);gap:10px;padding:8px 12px;background:#e3f4e8;border-top:1px solid #fff;color:#334155}
.st-rev-row.head{border-radius:6px 6px 0 0;border-top:0;background:#ece3ed;font-weight:600;color:#1e293b}
.st-rev-row:last-child{border-radius:0 0 6px 6px}
.st-rev-row .id{color:#2f6fd0}
.st-rev-row.bad{background:#fbe2e4}
.st-rev-row.bad .id{color:#b4436c}
.st-rev-hl{box-shadow:inset 0 0 0 2px rgba(180,67,108,.5)}
.st-rev-body{display:flex;flex-direction:column;gap:10px;padding:14px}
.st-rev-banner{display:flex;align-items:center;gap:10px;border-radius:8px;padding:10px 14px}
.st-rev-banner svg{flex:none}
.st-rev-banner b{display:block;font-size:14px;font-weight:600}
.st-rev-banner small{display:block;font-size:12px}
.st-rev-banner.bad{background:#fbe2e4;color:#9f1239}
.st-rev-banner.ok{background:#e2f1e6;color:#166534}
.st-rev-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.st-rev-checks>div{border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}
.st-rev-checks small{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#581f5d}
.st-rev-checks b{display:block;margin-top:2px;font-size:13px;font-weight:600}
.st-rev-checks .ok{color:#15803d}
.st-rev-checks .rev{color:#b45309}
.st-rev-mm{border-radius:8px;background:#fffbeb;padding:10px 12px;box-shadow:inset 0 0 0 2px #fcd34d}
.st-rev-mm .k,.st-rev-note .k{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.st-rev-mm .k{color:#92400e}
.st-rev-mm>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px;font-size:13px}
.st-rev-mm small{display:block;font-size:11px;color:#78716c}
.st-rev-mm b{font-weight:600}
.st-rev-fix{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.st-rev-fix .f{display:flex;flex:1 1 180px;flex-direction:column;gap:3px;font-size:11px;font-weight:600;color:#475569}
.st-rev-fix .in{display:flex;height:32px;align-items:center;overflow:hidden;border:1px solid #d6d3db;border-radius:6px;padding:0 10px;font-size:13px;font-weight:500;color:#0f172a;white-space:nowrap}
.st-rev-fix .btn{display:inline-flex;height:32px;align-items:center;border-radius:6px;background:#581f5d;padding:0 12px;font-size:12px;font-weight:600;color:#fff}
.st-rev-note{border-radius:8px;border:1px solid #0f172a;padding:10px 12px;font-size:12.5px;line-height:1.45;color:#0f172a}
/* When a step opens: the failed row pulses, the mismatch and the corrected result rise in. */
.st-step-screen.is-on .st-rev-hl{animation:st-rev-hl 1.6s ease .3s 2}
.st-step-screen.is-on .st-rev-pop{animation:st-hw-in .45s ease .35s both}
.st-step-screen.is-on .st-rev-type{display:inline-block;animation:st-rev-type .9s steps(4) .2s both}
.st-step-screen.is-on .st-rev-pop2{animation:st-hw-in .45s ease 1.3s both}
.st-step-screen.is-on .st-rev-pop3{animation:st-hw-in .45s ease 1.7s both}
@keyframes st-rev-hl{50%{box-shadow:inset 0 0 0 2px rgba(180,67,108,.5),0 0 0 4px rgba(180,67,108,.18)}}
@keyframes st-rev-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .st-step-screen.is-on .st-api-it,.st-step-screen.is-on .st-rev-hl,.st-step-screen.is-on .st-rev-pop,.st-step-screen.is-on .st-rev-type,.st-step-screen.is-on .st-rev-pop2,.st-step-screen.is-on .st-rev-pop3{animation:none}
}

/* WatchEye licence check (Sample check walkthrough, licence-check hero). Drawn at 720×540. */
.st-dvc{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0}
.st-dvc-panel{border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;padding:14px}
.st-dvc-screen{position:relative;aspect-ratio:720/540;overflow:hidden;border-radius:12px;background:#f6f7f9;box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 30px -18px rgba(15,23,42,.3)}
.st-dvc-screen.is-sized{aspect-ratio:auto}
.st-dvc-inner{position:absolute;left:0;top:0;width:720px;height:540px;transform-origin:0 0;font-family:Manrope,sans-serif;color:#1f2937}
.st-dvc-scr{position:absolute;inset:0;display:flex;flex-direction:column;background:#f3f4f6}
.st-dvc-scr.dark{background:#3f3f46}
.st-dvc-top{display:flex;height:40px;flex:none;align-items:center;justify-content:space-between;background:#581f5d;padding:0 16px;color:#fff;font-size:11px;font-weight:600}
.st-dvc-body{display:flex;flex:1;min-height:0}
.st-dvc-side{width:118px;flex:none;background:#6a3570;padding:10px 0;font-size:10.5px;color:#f3e8f5}
.st-dvc-side span{display:block;padding:7px 14px}
.st-dvc-side span:nth-child(n+5){opacity:.85}
.st-dvc-side .on{margin:0 8px;border-radius:6px;background:#8a4a90;padding:7px 6px;font-weight:700;color:#fff}
.st-dvc-pane{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px;margin:10px 10px 10px 0;border:1px solid #e5e7eb;background:#fff;padding:12px 14px}
.st-dvc-crumb{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid #e5e7eb;font-size:14px;font-weight:500;color:#581f5d}
.st-dvc-crumb i{font-style:normal;color:#94a3b8}
.st-dvc-crumb .help{border-radius:999px;background:#7ba7ee;padding:2px 10px;font-size:10px;font-weight:700;color:#fff}
.st-dvc-box,.st-dvc-card{overflow:hidden;border:1px solid #e5e7eb;border-radius:6px}
.st-dvc-box .h,.st-dvc-card .h{background:#f3eaf4;padding:5px 10px;font-size:11px;font-weight:600;color:#3b2140}
.st-dvc-box .b{padding:8px 10px}
.st-dvc-box p{margin:0 0 6px;font-size:10px;line-height:1.4;color:#374151}
.st-dvc-box p.sm{margin:0;font-size:9.5px}
.st-dvc-box .lab{display:block;font-size:10.5px;font-weight:700;color:#3b2140}
.st-dvc-box .sel{display:flex;width:60%;height:28px;margin-top:3px;align-items:center;justify-content:space-between;border:1px solid #d1d5db;border-radius:4px;padding:0 8px;font-size:11.5px}
.st-dvc-box i,.st-dvc-f i{font-style:normal;color:#6b7280}
.st-dvc-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px}
.st-dvc-f{display:flex;flex-direction:column;gap:2px;font-size:10.5px;font-weight:700;color:#3b2140}
.st-dvc-f .in{display:flex;height:26px;align-items:center;justify-content:space-between;overflow:hidden;border:1px solid #d1d5db;border-radius:4px;padding:0 8px;font-size:11.5px;font-weight:500;color:#111827;white-space:nowrap}
.st-dvc-t{display:inline-block}
.st-dvc-accept{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10.5px;font-weight:600;color:#111827}
.st-dvc-accept .cb{position:relative;width:14px;height:14px;border:1px solid #9ca3af;border-radius:3px;background:#fff}
.st-dvc-tick{position:absolute;inset:-1px;display:flex;align-items:center;justify-content:center;border-radius:3px;background:#3b7fd9;color:#fff}
.st-dvc-acts{display:flex;gap:8px;border:1px solid #e5e7eb;border-radius:6px;padding:8px}
.st-dvc-acts .cancel{display:inline-flex;height:28px;align-items:center;border:1px solid #d1d5db;border-radius:4px;padding:0 12px;font-size:11px;font-weight:600;color:#374151}
.st-dvc-run{position:relative;display:inline-flex;height:28px;min-width:118px;align-items:center;justify-content:center;border-radius:4px;background:#3b7fd9;padding:0 12px;font-size:11px;font-weight:700;color:#fff}
.st-dvc-run2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;border-radius:4px;background:#3b7fd9}
.st-dvc-run2 i{width:10px;height:10px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:st-spin .8s linear infinite}
.st-dvc-res{display:flex;flex-direction:column;gap:8px}
.st-dvc-acts2{display:flex;justify-content:flex-end;gap:6px;border:1px solid #e5e7eb;border-radius:6px;padding:6px}
.st-dvc-acts2 span{border:1px solid #581f5d;border-radius:4px;padding:3px 9px;font-size:10px;font-weight:600;color:#581f5d;background:#fff}
.st-dvc-acts2 .off{border-color:#d1d5db;color:#9ca3af}
.st-dvc-banner{border-radius:6px;background:#e2f1e6;padding:8px 12px;color:#166534;font-size:10px}
.st-dvc-banner>b{display:block;font-size:13px;font-weight:600}
.st-dvc-banner>span{display:block;margin-top:1px}
.st-dvc-banner .s{font-size:10.5px;font-weight:700}
.st-dvc-card .g{display:grid;gap:6px 10px;padding:7px 10px;font-size:10.5px}
.st-dvc-card.sm .g{font-size:10px;line-height:1.4}
.st-dvc-card .l{display:block;font-weight:700;color:#3b2140}
.st-dvc-card .v{display:block;margin-top:2px}
.st-dvc-card .v i{display:block;font-style:italic;color:#6b7280}
.st-dvc-card .ok .v{display:flex;align-items:center;gap:4px;color:#15803d}
.st-dvc-card .w2{grid-column:span 2}
.st-dvc-wait{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;font-size:13px;font-weight:500;color:#475569;opacity:0;visibility:hidden}
.st-dvc-wait span{width:28px;height:28px;border:3px solid #e9dcea;border-top-color:#581f5d;border-radius:50%;animation:st-spin .8s linear infinite}
.st-dvc-viewer{display:flex;flex:1;flex-direction:column;min-height:0}
.st-dvc-viewer .bar{display:flex;height:36px;flex:none;align-items:center;justify-content:space-between;background:#27272a;padding:0 14px;font-size:11px;font-weight:600;color:#e4e4e7}
.st-dvc-viewer .bar .r{display:flex;gap:10px;color:#a1a1aa}
.st-dvc-viewer .pg{position:relative;flex:1;overflow:hidden;display:flex;justify-content:center;padding-top:14px}
.st-dvc-viewer .pg img{display:block;height:470px;width:auto;max-width:none;flex:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
/* While a screen is open: the details type in, consent is ticked and the check runs; the response waits on the DVS, then fills in. */
.is-on .st-dvc-t1{animation:st-dvc-type .35s steps(4) .4s both}
.is-on .st-dvc-t2{animation:st-dvc-type .5s steps(7) 1s both}
.is-on .st-dvc-t3{animation:st-dvc-type .6s steps(10) 1.7s both}
.is-on .st-dvc-t4{animation:st-dvc-type .25s steps(3) 2.5s both}
.is-on .st-dvc-t5{animation:st-dvc-type .55s steps(9) 2.9s both}
.is-on .st-dvc-t6{animation:st-dvc-type .5s steps(8) 3.6s both}
.is-on .st-dvc-tick{animation:st-dvc-pop .25s ease 4.3s both}
.is-on .st-dvc-run{animation:st-dvc-press .3s ease 4.9s}
.is-on .st-dvc-run2{animation:st-dvc-show .2s ease 5.1s both}
.is-on .st-dvc-wait{animation:st-hw-wait 1.4s ease both}
.is-on .st-dvc-banner,.is-on .st-dvc-card{animation:st-hw-in .45s ease 1.3s both}
.is-on .st-dvc-card:nth-child(4){animation-delay:1.45s}
.is-on .st-dvc-card:nth-child(5){animation-delay:1.6s}
.is-on .st-dvc-card:nth-child(6){animation-delay:1.75s}
.is-on .st-dvc-viewer .pg img{animation:st-hw-in .5s ease .2s both}
@keyframes st-dvc-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes st-dvc-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes st-dvc-press{50%{transform:scale(.95)}}
@keyframes st-dvc-show{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .is-on .st-dvc-t,.is-on .st-dvc-tick,.is-on .st-dvc-run,.is-on .st-dvc-run2,.is-on .st-dvc-wait,.is-on .st-dvc-banner,.is-on .st-dvc-card,.is-on .st-dvc-viewer .pg img{animation:none}
}

/* Licence-check hero: a 720×540 monitor and a larger certificate. */
.st-hw.is-dvs .st-hw-monitor{margin:0 22% 0 9%}
.st-hw.is-dvs .st-hw-screen{aspect-ratio:720/540}
.st-hw.is-dvs .st-hw-screen.is-sized{aspect-ratio:auto}
.st-hw.is-dvs .st-hw-inner{height:540px;padding:0}
.st-hw.is-dvs .st-hw-scr{padding:0;background:#f3f4f6}
.st-hw.is-dvs .st-hw-cert{width:17%;min-width:76px}

/* Sample outcomes (Responses). */
.st-rev-banner.rev{background:#fef3c7;color:#92400e}
.st-out-cmp>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:13px}
.st-out-cmp small{display:block;font-size:11px;color:#64748b}
.st-out-cmp b{font-weight:600}
.st-out-review{border-radius:8px;background:#fffbeb;padding:10px 12px;box-shadow:inset 0 0 0 2px #fcd34d;font-size:12.5px;line-height:1.5;color:#78350f}
.st-out-review .k{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#92400e}