/* ==========================================================================
   Solution page v3 (gsl_v3_* layouts, inc/solution-v3.php)
   Ported from the "Identity Verification v3" design. Plain CSS scoped to .sv3
   (no Tailwind dependency). The illustration partials in
   template-parts/solution-v3/ keep the design's inline styles; everything
   editable is styled here.
   ========================================================================== */
.sv3 {
  --sv3-ink: #0f172a; --sv3-body: #334155; --sv3-muted: #475569; --sv3-faint: #64748b;
  --sv3-line: #e2e8f0; --sv3-line-soft: #f1f5f9; --sv3-soft: #f8fafc;
  --sv3-green: #047857; --sv3-green-deep: #065f46; --sv3-p: #13ec80; --sv3-p-hover: #2cf08f; --sv3-deep: #06281a;
  --sv3-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sv3-rail: 300px;
  font-family: Manrope, sans-serif; color: var(--sv3-ink); -webkit-font-smoothing: antialiased;
}
.sv3, .sv3 *, .sv3 *::before, .sv3 *::after { box-sizing: border-box; }
/* The theme title-cases every heading (base.css); this copy is written in sentences. */
.sv3 h1, .sv3 h2, .sv3 h3 { margin: 0; font-family: inherit; color: inherit; text-transform: none; }
/* single-class specificity, so the component rules below can set their own margins */
.sv3 :where(p, figure, dl, dd) { margin: 0; }
.sv3 :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.sv3 img { max-width: 100%; }
.sv3 .sv3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv3 .sv3-i { width: 16px; height: 16px; flex: none; stroke-width: 2; }
@keyframes gdspin { to { transform: rotate(360deg); } }
@keyframes gdHeroIn { to { opacity: 1; } }

/* ---------- Section shell ---------- */
.sv3-sec { padding: 88px 0; background: #fff; scroll-margin-top: 112px; }
.sv3-bg-grey { background: var(--sv3-soft); border-top: 1px solid var(--sv3-line); border-bottom: 1px solid var(--sv3-line); }
.sv3-bg-dark { background: var(--sv3-deep); color: #ecfdf5; }
.sv3-bg-grey + .sv3-bg-grey:not(.sv3-join) { border-top: 0; }
/* "Continue the previous section": the two read as one band, 44px apart. */
.sv3-sec:has(+ .sv3-join) { padding-bottom: 0; border-bottom: 0; }
.sv3-sec.sv3-join { padding-top: 44px; border-top: 0; }
.sv3-wrap { max-width: 1520px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 44px; }
@media (min-width: 1280px) {
  /* room for the "On this page" rail beside every v3 section below it */
  .sv3-nav ~ .sv3-sec .sv3-wrap { padding-left: var(--sv3-rail); }
}

/* ---------- Type ---------- */
.sv3-eyebrow { font-family: var(--sv3-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--sv3-green); }
.sv3 .sv3-h1 { font-size: clamp(40px, 4.8vw, 62px); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; color: var(--sv3-ink); }
.sv3 .sv3-h2 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; color: var(--sv3-ink); }
.sv3 .sv3-h3 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--sv3-ink); }
.sv3 .sv3-h3--sm { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.sv3 .sv3-h3--md { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.sv3 .sv3-h3--lg { font-size: 24px; font-weight: 600; line-height: 1.2; }
.sv3 .sv3-h3--xl { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.sv3-grad { background: linear-gradient(90deg, #0fb265 0%, #13ec80 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; }
.sv3-nowrap { white-space: nowrap; }
.sv3-lead { font-size: 18px; line-height: 1.65; color: var(--sv3-body); text-wrap: pretty; }
.sv3-body { font-size: 16px; line-height: 1.65; color: var(--sv3-body); }
.sv3-body--muted { font-size: 15.5px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-body--sm { font-size: 14px; color: var(--sv3-muted); }
.sv3-note { font-size: 14px; line-height: 1.55; color: var(--sv3-muted); }
.sv3-small { font-size: 12px; line-height: 1.5; color: var(--sv3-faint); }
.sv3-kicker { font-family: var(--sv3-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--sv3-muted); }
.sv3-mono-label { font-family: var(--sv3-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--sv3-faint); }
.sv3-mono-label--lg { font-size: 12px; letter-spacing: .04em; color: var(--sv3-muted); padding: 0 4px; }
.sv3 .sv3-note a, .sv3 .sv3-group-note a, .sv3 .sv3-prose a, .sv3 .sv3-lead a { font-weight: 600; color: var(--sv3-green); text-decoration: underline; }
.sv3-prose { font-size: 16px; line-height: 1.65; color: var(--sv3-body); }
.sv3-prose > * { margin: 0; max-width: 880px; }
.sv3-prose > * + * { margin-top: 14px; }

.sv3-bg-dark .sv3-eyebrow { color: #6ee7b7; }
.sv3-bg-dark .sv3-h2, .sv3-bg-dark .sv3-h3 { color: #fff; }
.sv3-bg-dark .sv3-lead { color: #d1fae5; }

/* ---------- Section header ---------- */
.sv3-head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.sv3-head--narrow { max-width: 420px; }
.sv3-head--narrow .sv3-lead { font-size: 16px; }
.sv3-head--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px 64px; align-items: end; max-width: none; }
.sv3-head-title { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Buttons and links ---------- */
.sv3 .sv3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 8px; background: var(--sv3-p); color: var(--sv3-deep); font-weight: 700; text-decoration: none; box-shadow: 0 0 15px rgba(19,236,128,.25); transition: background .2s; }
.sv3 .sv3-btn:hover { background: var(--sv3-p-hover); color: var(--sv3-deep); }
.sv3 .sv3-btn--ghost { padding: 0 22px; border: 1px solid var(--sv3-line); background: #fff; color: var(--sv3-green-deep); font-weight: 600; box-shadow: none; }
.sv3 .sv3-btn--ghost:hover { background: #fff; border-color: #cbd5e1; color: var(--sv3-green-deep); }
.sv3 .sv3-btn--block { min-height: 44px; padding: 0 18px; font-size: 15px; }
.sv3 .sv3-btn--push { margin-top: auto; align-self: flex-start; }
.sv3 .sv3-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: flex-start; font-weight: 600; color: var(--sv3-green); text-decoration: none; }
.sv3 .sv3-more:hover { text-decoration: underline; }
.sv3 .sv3-more--rule { align-self: stretch; padding-top: 6px; border-top: 1px solid var(--sv3-line); font-size: 15px; }
.sv3-bg-dark .sv3-more, .sv3-apicard .sv3-more { color: #6ee7b7; }
.sv3-bg-dark .sv3-more:hover, .sv3-apicard .sv3-more:hover { color: #a7f3d0; }
.sv3-ticks { display: flex; flex-direction: column; gap: 10px; }
.sv3-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--sv3-body); }
.sv3-ticks .sv3-i { width: 20px; height: 20px; margin-top: 2px; color: var(--sv3-green); stroke-width: 2.4; }
.sv3-ticks--dark { gap: 12px; }
.sv3-ticks--dark li { font-size: 15px; color: #e2e8f0; }
.sv3-ticks--dark .sv3-i { width: 18px; height: 18px; color: var(--sv3-p); stroke-width: 2.5; }

/* ---------- Grids and cards ---------- */
.sv3-grid { display: grid; gap: 20px; }
.sv3-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sv3-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.sv3-grid--380 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; }
.sv3-grid--460 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 24px; align-items: stretch; }
.sv3-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; padding: 28px; }
.sv3-card.is-dashed { border: 1px dashed #cbd5e1; }
.sv3-card--path { gap: 20px; }
.sv3-card--access { gap: 12px; padding: 24px; }
.sv3-question { padding: 12px 14px; border-radius: 10px; background: var(--sv3-line-soft); font-size: 15px; line-height: 1.5; color: var(--sv3-ink); }
.sv3-question span { display: block; font-size: 12px; font-weight: 600; color: var(--sv3-muted); }
.sv3-groups { display: flex; flex-direction: column; gap: 8px; }
.sv3-group { display: flex; flex-direction: column; gap: 8px; }
.sv3-group.has-rule { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--sv3-line); }
.sv3-group-title { font-size: 14px; font-weight: 600; color: var(--sv3-ink); }
.sv3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv3-chips li { border-radius: 6px; background: var(--sv3-line-soft); padding: 3px 9px; font-size: 13px; font-weight: 500; color: var(--sv3-body); }
.sv3-group-note { font-size: 13px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-chips + .sv3-group-note { margin-top: 2px; }

/* steps */
.sv3-step { position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; padding: 48px 24px 24px; }
.sv3-corner { position: absolute; right: 0; top: 0; border-bottom-left-radius: 12px; background: var(--sv3-p); padding: 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sv3-deep); }
.sv3-output { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sv3-line-soft); font-size: 14px; line-height: 1.5; color: var(--sv3-body); }
.sv3-output span { display: block; font-family: var(--sv3-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv3-muted); }

/* access */
.sv3-appicon { display: flex; width: 56px; height: 56px; margin-bottom: 6px; align-items: center; justify-content: center; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.sv3-appicon img { display: block; width: 34px; height: 34px; }
.sv3-card--access .sv3-body--muted { font-size: 15px; }
/* Access cards share rows (gsl_v3_access prints the same rows in each), so facts and links line up */
@supports (grid-template-rows: subgrid) {
  .sv3-card--access { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 6); row-gap: 12px; align-content: start; }
  .sv3-card--access .sv3-more--rule { align-self: end; }
}
.sv3-fact { padding-top: 14px; border-top: 1px solid var(--sv3-line); }
.sv3-body--muted + .sv3-fact, .sv3-h3 + .sv3-fact { margin-top: 8px; }
.sv3-fact dt { font-family: var(--sv3-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sv3-muted); }
.sv3-fact dd { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--sv3-ink); }

/* ---------- Hero ---------- */
.sv3-hero { background-color: #fff; background-image: radial-gradient(ellipse 55% 130% at 0% 0%, rgba(19,236,128,.22) 0%, rgba(19,236,128,.18) 30%, rgba(19,236,128,.10) 60%, rgba(19,236,128,0) 100%); border-bottom: 1px solid var(--sv3-line); padding: 88px 0 80px; }
/* Stacked (tall, narrow) the ellipse above stretches into a green band down
   the left edge. Use the corner mesh of the other solution heroes instead
   (.solutions .pt-hero-mesh in assets/solutions.css). */
@media (max-width: 1023px) {
  .sv3-hero { background-image: radial-gradient(circle at top left, rgba(19,236,128,.16), transparent 48%), radial-gradient(circle at 12% 8%, rgba(4,120,87,.08), transparent 40%); }
}
.sv3-hero-grid { max-width: 1520px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: center; }
.sv3-hero-grid.no-visual { grid-template-columns: 1fr; }
@media (min-width: 1280px) {
  .sv3-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* bio / nz visuals: the copy gets a fixed 620px (its longer H1s need ~606px to sit on 3 lines, not 5)
     and the visual takes the rest, so no dead space opens up between them on wide screens */
  .sv3-hero-grid:has(.sv3-hero-stage--bio) { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
}
.sv3-hero-copy { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.sv3-crumbs { font-size: 14px; color: var(--sv3-faint); }
.sv3-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv3 .sv3-crumbs a { color: var(--sv3-faint); text-decoration: none; }
.sv3 .sv3-crumbs a:hover { color: var(--sv3-ink); }
.sv3-crumbs [aria-current] { color: var(--sv3-body); }
.sv3-badge { align-self: flex-start; border: 1px solid #a7f3d0; background: #ecfdf5; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sv3-green-deep); }
.sv3-hero-intro { max-width: 580px; font-size: 19px; line-height: 1.6; color: var(--sv3-muted); text-wrap: pretty; }
.sv3-ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.sv3-hero-fig { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sv3-hero-caption { font-size: 14px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-hero-image img { display: block; width: 100%; height: auto; border-radius: 16px; }
.sv3-hero-stage { position: relative; padding: 0 0 4px; }
/* No-JS fallback: the pieces fade in on their own; solution-v3.js takes over. */
.sv3-hero-stage [data-hc="monitor"], .sv3-hero-stage [data-hc="phone"], .sv3-hero-stage [data-hc="cert"] { opacity: 0; animation: gdHeroIn .4s ease 2.5s forwards; }
.sv3-hero-monitor { position: relative; margin: 0 16% 0 11%; }
.sv3-hero-bezel { 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); }
.sv3-hero-viewport { position: relative; aspect-ratio: 720 / 486; overflow: hidden; border-radius: 6px; background: #f6f7f9; }
.sv3-hero-inner { position: absolute; left: 0; top: 0; width: 720px; height: 486px; transform-origin: 0 0; }
.sv3-hero-qid { display: grid; height: 100%; padding: 14px; }
.sv3 .sv3-hero-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); }
.sv3-hero-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); }
.sv3-hero-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 19px; background: #fff; }
.sv3-hero-phone-inner { position: absolute; left: 0; top: 0; width: 234px; height: 490px; transform-origin: 0 0; }
.sv3-hero-idp { position: relative; width: 100%; height: 100%; }

/* ---------- Trust ---------- */
.sv3-trust { border-bottom: 1px solid var(--sv3-line); background: #fff; padding: 28px 0; }
.sv3-trust-row { max-width: 1520px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 24px 48px; }
.sv3-trust-group { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sv3-trust-group ul { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.sv3-trust-group img { display: block; width: auto; }
@media (min-width: 1280px) { .sv3-trust-certs { padding-left: 48px; border-left: 1px solid var(--sv3-line); } }
.sv3-cert-badge { display: flex; align-items: center; gap: 8px; }
.sv3-cert-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #d1fae5; }
.sv3 .sv3-cert-icon .material-symbols-outlined { font-size: 20px; line-height: 1; color: var(--sv3-green); }
.sv3-cert-text { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--sv3-ink); }
.sv3-cert-text span { font-weight: 500; color: var(--sv3-muted); }

/* ---------- On this page ---------- */
.sv3-toc { border-bottom: 1px solid var(--sv3-line); background: #fff; padding: 16px 24px; }
.sv3-toc details { max-width: 1472px; margin: 0 auto; border: 1px solid var(--sv3-line); border-radius: 10px; }
.sv3-toc summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.sv3-toc summary::-webkit-details-marker { display: none; }
.sv3-toc summary .sv3-i { width: 18px; height: 18px; color: var(--sv3-faint); transition: transform .2s; }
.sv3-toc details[open] summary .sv3-i { transform: rotate(180deg); }
.sv3-toc ul { padding: 4px 8px 12px; border-top: 1px solid var(--sv3-line-soft); }
.sv3 .sv3-toc a { display: flex; min-height: 44px; align-items: center; padding: 0 8px; font-size: 15px; color: var(--sv3-body); text-decoration: none; }
.sv3-rail { display: none; }
@media (min-width: 1280px) {
  .sv3-nav { position: relative; height: 0; z-index: 10; }
  .sv3-toc { display: none; }
  .sv3-rail { display: block; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
  .sv3-rail-track { display: flow-root; max-width: 1520px; width: 100%; height: 100%; margin: 0 auto; padding: 0 24px; } /* flow-root: keeps the card margin inside, so the track ends with the page */
  .sv3-rail-card { pointer-events: auto; position: sticky; top: 112px; margin-top: 80px; width: 248px; display: flex; flex-direction: column; gap: 20px; border-radius: 12px; background: #fff; padding: 16px; box-shadow: 0 4px 20px -2px rgba(0,0,0,.05), 0 0 0 1px var(--sv3-line); }
}
.sv3-rail-title { font-size: 13px; font-weight: 600; color: var(--sv3-muted); }
.sv3-rail-card ul { display: flex; flex-direction: column; border-left: 1px solid var(--sv3-line); }
.sv3 .sv3-rail-card ul a { margin-left: -1px; display: flex; min-height: 36px; align-items: center; border-left: 3px solid transparent; padding-left: 13px; font-size: 14px; color: var(--sv3-body); text-decoration: none; transition: color .15s, border-color .15s; }
.sv3 .sv3-rail-card ul a:hover { color: var(--sv3-ink); }
.sv3 .sv3-rail-card ul a[aria-current] { font-weight: 600; color: var(--sv3-ink); border-left-color: var(--sv3-p); }

/* ---------- Steppers ---------- */
.sv3-stepper { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.sv3-tabs { display: grid; gap: 4px; border-radius: 10px; background: var(--sv3-line-soft); padding: 4px; }
.sv3 .sv3-tab { position: relative; display: flex; min-height: 68px; align-items: center; justify-content: center; overflow: hidden; border: 0; border-radius: 8px; padding: 24px 6px 8px; text-align: center; font: 600 13px/1.2 Manrope, sans-serif; cursor: pointer; background: transparent; color: var(--sv3-muted); text-transform: none; letter-spacing: 0; transition: background .2s, color .2s, box-shadow .2s; }
.sv3 .sv3-tab[aria-selected="true"] { background: #fff; color: var(--sv3-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06); }
.sv3 .sv3-tab:focus-visible { outline: 2px solid var(--sv3-green); outline-offset: 2px; }
.sv3-tab-badge { position: absolute; right: 0; top: 0; border-bottom-left-radius: 8px; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--sv3-line); color: var(--sv3-muted); transition: background .2s, color .2s; }
.sv3-tab[aria-selected="true"] .sv3-tab-badge { background: var(--sv3-p); color: var(--sv3-deep); }
.sv3-stepper.is-dark .sv3-tabs { background: #111a2e; }
.sv3-stepper.is-dark .sv3-tab { min-height: 64px; font-size: 12.5px; color: #94a3b8; }
.sv3-stepper.is-dark .sv3-tab[aria-selected="true"] { background: #1e293b; color: #fff; box-shadow: none; }
.sv3-stepper.is-dark .sv3-tab-badge { background: #1e293b; color: #94a3b8; }
.sv3-stepper.is-dark .sv3-tab[aria-selected="true"] .sv3-tab-badge { background: var(--sv3-p); color: var(--sv3-deep); }
.sv3-caption { min-height: 66px; font-size: 14px; line-height: 1.55; color: var(--sv3-muted); }
.sv3-stepper.is-dark .sv3-caption { color: #cbd5e1; }
.sv3-stepper.is-dark .sv3-small { color: #94a3b8; }
.sv3-panel { position: relative; border: 1px solid var(--sv3-line); border-radius: 12px; }
.sv3-panel--idp { display: flex; align-items: center; justify-content: center; min-height: 548px; flex: 1; overflow: hidden; background: var(--sv3-line-soft); }
.sv3-panel--qid, .sv3-panel--rev { display: flex; flex-direction: column; background: var(--sv3-soft); padding: 14px; }
.sv3-panel--qid { flex: 1; }
.sv3-panel--qid .sv3-screens { display: grid; flex: 1; }
.sv3-panel--rev .sv3-screens { display: grid; }
.sv3-panel--api { border-color: #1e293b; background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(19,236,128,.10), rgba(19,236,128,0) 70%), #060b16; overflow: hidden; }
.sv3-panel--api .sv3-screens { display: grid; min-height: 340px; padding: 22px; }
.sv3-phone { position: relative; width: 244px; height: 500px; border: 7px solid #0f172a; border-radius: 36px; background: #0f172a; box-shadow: 0 30px 60px -30px rgba(15,23,42,.55); }
.sv3-phone-notch { position: absolute; left: 83px; top: 6px; z-index: 20; width: 64px; height: 14px; border-radius: 999px; background: #0f172a; }
.sv3-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 29px; background: #fff; }
/* the illustration markup is mock UI: keep theme link/heading rules out of it */
.sv3-screens p, .sv3-phone-screen p, .sv3-hero-inner p, .sv3-hero-idp p { font-family: Manrope, sans-serif; }

/* ---------- Callout / API / links ---------- */
.sv3-callout { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; padding: 28px 32px; }
.sv3-apicard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 36px 48px; align-items: center; border-radius: 20px; background: #0b1220; padding: clamp(24px, 4vw, 44px); color: #e2e8f0; }
.sv3-apicard.no-demo { grid-template-columns: 1fr; }
.sv3-apicard-copy { display: flex; flex-direction: column; gap: 18px; }
.sv3-apicard .sv3-kicker { color: #6ee7b7; }
.sv3 .sv3-apicard .sv3-h3 { color: #fff; }
.sv3-apicard .sv3-body { color: #cbd5e1; }
.sv3-links { display: flex; flex-direction: column; gap: 24px; }
.sv3-links-head { gap: 12px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sv3-links-head .sv3-body--muted { max-width: 520px; font-size: 16px; }
.sv3-linkchips { display: flex; flex-wrap: wrap; gap: 10px; }
.sv3 .sv3-linkchips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border: 1px solid var(--sv3-line); border-radius: 8px; background: #fff; padding: 0 14px; font-family: var(--sv3-mono); font-size: 12.5px; color: var(--sv3-body); text-decoration: none; transition: border-color .15s, color .15s; }
.sv3 .sv3-linkchips a:hover { border-color: var(--sv3-green); color: var(--sv3-ink); }
.sv3-linkchips b { font-weight: 700; color: var(--sv3-green-deep); }

/* ---------- Results ---------- */
.sv3-results { display: flex; flex-direction: column; gap: 24px; }
.sv3-results-panels { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
.sv3-results-panel { display: flex; min-width: 0; flex-direction: column; gap: 14px; border-radius: 20px; background: var(--sv3-line-soft); padding: 16px; }
.sv3-results-panel--shot { flex: 2 1 480px; }
.sv3-results-panel--cert { flex: 1 1 260px; }
.sv3-results-shot { position: relative; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.3); }
.sv3-results-shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* the region a note describes: outlined (pulsing, as on the licence-scan card) while its note is highlighted */
.sv3-rbox { position: absolute; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.sv3-rbox.is-on { opacity: 1; background: rgba(19,236,128,.14); box-shadow: 0 0 0 2px #10b981; animation: gdBox 2.6s ease-in-out infinite; }
.sv3-results-cert img { transition: box-shadow .3s; }
.sv3-results-cert.is-on img { box-shadow: 0 0 0 3px #10b981, 0 0 18px rgba(19,236,128,.45), 0 22px 44px -14px rgba(15,23,42,.35); }
.sv3-marker { transition: background .25s, color .25s, box-shadow .25s, transform .25s; }
.sv3-marker.is-on { z-index: 1; background: var(--sv3-p); color: var(--sv3-deep); box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(19,236,128,.35); transform: scale(1.15); }
.sv3-marker { position: absolute; display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv3-ink); font-size: 12px; font-weight: 700; color: #fff; box-shadow: 0 0 0 2px #fff; }
.sv3-results-cert { display: flex; flex: 1; align-items: center; justify-content: center; padding: 8px 16px 16px; }
.sv3-results-cert img { display: block; width: 100%; max-width: 240px; height: auto; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 22px 44px -14px rgba(15,23,42,.35); }
.sv3-results-notes { display: flex; flex-direction: column; gap: 20px; }
.sv3-results-notes ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 32px; }
.sv3 .sv3-rnote { display: grid; grid-template-columns: 28px 1fr; gap: 10px; width: calc(100% + 16px); min-height: 0; margin: -8px; padding: 8px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; text-align: left; font: inherit; font-size: 15px; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--sv3-body); cursor: pointer; transition: background .25s; }
.sv3 .sv3-rnote:hover, .sv3 .sv3-rnote[aria-current] { background: #eef2f6; }
.sv3 .sv3-rnote:focus-visible { outline: 2px solid var(--sv3-green); outline-offset: 2px; }
.sv3-rnote .sv3-num { transition: background .25s, color .25s, box-shadow .25s; }
.sv3-rnote[aria-current] .sv3-num { background: var(--sv3-p); color: var(--sv3-deep); box-shadow: 0 0 0 4px rgba(19,236,128,.28); }
.sv3-num { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv3-ink); font-size: 12px; color: #fff; }
.sv3-results-notes strong { font-weight: 600; color: var(--sv3-ink); }

/* ---------- Follow-up ---------- */
.sv3-followup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 36px 48px; align-items: start; }
.sv3-followup.has-rule { border-top: 1px solid var(--sv3-line); padding-top: 48px; }
.sv3-followup-copy { display: flex; flex-direction: column; gap: 18px; }
.sv3-followup-copy .sv3-prose > * + * { margin-top: 18px; }
.sv3-labels { display: flex; flex-direction: column; gap: 10px; border-radius: 12px; background: var(--sv3-soft); padding: 16px 18px; }
.sv3-labels > span { font-size: 13px; font-weight: 600; color: var(--sv3-muted); }
.sv3-labels ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sv3-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.sv3-pill--green { background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--sv3-green-deep); }
.sv3-pill--amber { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.sv3-pill--outline { background: #fff; border: 1px solid var(--sv3-ink); color: var(--sv3-ink); }

/* ---------- Table ---------- */
.sv3-table { overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; }
.sv3-tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 6px 24px; padding: 18px 24px; border-bottom: 1px solid var(--sv3-line-soft); font-size: 15px; line-height: 1.55; color: var(--sv3-body); }
.sv3-tr:last-of-type { border-bottom: 0; }
.sv3-tr b { font-weight: 600; color: var(--sv3-ink); }
.sv3-th { gap: 4px 24px; padding: 14px 24px; background: var(--sv3-soft); border-bottom: 1px solid var(--sv3-line); font-size: 13px; font-weight: 600; color: var(--sv3-muted); }
.sv3-table-foot { padding: 14px 24px; border-top: 1px solid var(--sv3-line); font-size: 13px; line-height: 1.5; color: var(--sv3-muted); }

/* ---------- Getting started ---------- */
.sv3-startcard { display: flex; flex-direction: column; gap: 20px; border-radius: 16px; padding: 32px; }
.sv3-startcard--outline { border: 1px solid #14532d; }
.sv3-startcard--fill { background: #0b3a26; }
.sv3-checklist { display: flex; flex-direction: column; gap: 14px; }
.sv3-checklist li { display: flex; gap: 12px; font-size: 16px; line-height: 1.55; color: #d1fae5; }
.sv3-box { flex: none; width: 18px; height: 18px; margin-top: 3px; border: 2px solid #6ee7b7; border-radius: 4px; }
.sv3-startcard--fill .sv3-ticks { gap: 14px; }
.sv3-startcard--fill .sv3-ticks li { font-size: 16px; line-height: 1.55; color: #ecfdf5; }
.sv3-startcard--fill .sv3-ticks .sv3-i { width: 20px; height: 20px; }
.sv3-startcard .sv3-more { font-size: 15px; }

/* ---------- FAQ ---------- */
.sv3-wrap.sv3-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px 64px; align-items: start; }
.sv3-faq { display: flex; min-width: 0; flex-direction: column; border-top: 1px solid var(--sv3-line); }
.sv3-faq details { border-bottom: 1px solid var(--sv3-line); }
.sv3-faq summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 18px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; color: var(--sv3-ink); }
.sv3-faq summary::-webkit-details-marker { display: none; }
.sv3-faq summary .sv3-i { width: 20px; height: 20px; color: var(--sv3-faint); transition: transform .2s; }
.sv3-faq details[open] summary .sv3-i { transform: rotate(180deg); }
.sv3-faq .sv3-prose { padding: 0 48px 24px 0; line-height: 1.7; }

/* ---------- Request a demo ---------- */
.sv3-sec.sv3-bg-deep { background: radial-gradient(ellipse 60% 90% at 0% 0%, rgba(15,94,56,.85) 0%, rgba(15,94,56,0) 70%), radial-gradient(ellipse 55% 80% at 100% 100%, rgba(10,110,70,.7) 0%, rgba(10,110,70,0) 70%), #05271a; color: #ecfdf5; padding: 96px 0 64px; }
.sv3-bg-deep .sv3-wrap { gap: 56px; }
.sv3-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 72px; align-items: center; }
.sv3-demo.no-form { grid-template-columns: 1fr; }
.sv3-demo-copy { display: flex; flex-direction: column; gap: 20px; }
.sv3-demo-eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--sv3-p); }
.sv3 .sv3-bg-deep .sv3-h2, .sv3-bg-deep .sv3-h2 { font-size: clamp(30px, 2.9vw, 40px); color: #fff; }
.sv3-bg-deep .sv3-lead { max-width: 580px; color: #d1fae5; }
.sv3-demo-ticks { margin-top: 6px; display: flex; flex-direction: column; gap: 14px; }
.sv3-demo-ticks li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; line-height: 1.45; color: #fff; }
.sv3-demo-ticks .sv3-i { width: 22px; height: 22px; color: var(--sv3-p); }
.sv3-demo-phone { margin-top: 6px; font-size: 14px; color: #a7f3d0; }
.sv3 .sv3-demo-phone a { font-weight: 700; color: #fff; text-decoration: underline; }
.sv3-formcard { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.6); border-radius: 22px; background: #fff; color: var(--sv3-ink); box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
.sv3-formcard-head { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 22px; background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 70%); border-bottom: 1px solid var(--sv3-line); }
.sv3-formcard-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; border: 1px solid #a7f3d0; border-radius: 999px; background: #fff; padding: 5px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sv3-green-deep); }
.sv3-formcard-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--sv3-p); }
.sv3-formcard-title { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.sv3-form { padding: 24px 28px 28px; }
.sv3-form-fine { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--sv3-faint); }
.sv3-demo-trust { display: flex; flex-wrap: wrap; gap: 16px 36px; padding-top: 24px; border-top: 1px solid rgba(167,243,208,.2); }
.sv3-demo-trust li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: #ecfdf5; }
.sv3 .sv3-demo-trust .material-symbols-outlined { font-size: 20px; line-height: 1; color: var(--sv3-p); }
.sv3-related { display: flex; flex-direction: column; gap: 14px; }
.sv3-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 32px; }
.sv3-related li { display: flex; flex-direction: column; gap: 4px; }
.sv3 .sv3-related a, .sv3-related-title { display: inline-flex; min-height: 36px; align-items: center; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; }
.sv3 .sv3-related a:hover { color: #a7f3d0; text-decoration: underline; }
.sv3-related li > span:not(.sv3-related-title) { font-size: 14px; line-height: 1.5; color: #a7f3d0; }

/* Gravity Forms inside the demo card. The theme's gform_submit_button filter
   (inc/pxs.php) turns the submit into <button class="btn">, so target the
   element; the doubled class beats Gravity's theme.min.css without !important. */
.sv3-form.sv3-form .gform_wrapper, .sv3-form.sv3-form .gform_wrapper form { margin: 0; }
.sv3-form.sv3-form .gform_wrapper .gform_required_legend,
.sv3-form.sv3-form .gform_wrapper .gform_heading { display: none; }
.sv3-form.sv3-form .gform_wrapper .gform_fields { row-gap: 16px; column-gap: 16px; }
.sv3-form.sv3-form .gform_wrapper .gfield { margin: 0; padding: 0; }
.sv3-form.sv3-form .gform_wrapper .gform_fields > .gfield--type-hidden,
.sv3-form.sv3-form .gform_wrapper .gform_fields > .gform_hidden,
.sv3-form.sv3-form .gform_wrapper .gform_fields > .gfield--type-honeypot,
.sv3-form.sv3-form .gform_wrapper .gform_fields > .gform_validation_container { display: none; }
.sv3-form.sv3-form .gform_wrapper .ginput_complex { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.sv3-form.sv3-form .gform_wrapper .ginput_complex > span { flex: 1 1 0; min-width: 0; margin: 0; padding: 0 !important; }
.sv3-form.sv3-form .gform_wrapper .gform-field-label--type-sub { font-size: 12px; font-weight: 500; color: var(--sv3-faint); margin: 6px 0 0; }
.sv3-form.sv3-form .gform_wrapper .gfield_label,
.sv3-form.sv3-form .gform_wrapper legend.gfield_label,
.sv3-form.sv3-form .gform_wrapper .gform-field-label:not(.gform-field-label--type-sub) { display: block; margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--sv3-body); }
.sv3-form.sv3-form .gform_wrapper .gfield_required { font-style: italic; font-weight: 500; color: #16a34a; }
.sv3-form.sv3-form .gform_wrapper input[type="text"],
.sv3-form.sv3-form .gform_wrapper input[type="email"],
.sv3-form.sv3-form .gform_wrapper input[type="tel"],
.sv3-form.sv3-form .gform_wrapper input[type="url"],
.sv3-form.sv3-form .gform_wrapper input[type="number"],
.sv3-form.sv3-form .gform_wrapper select,
.sv3-form.sv3-form .gform_wrapper textarea { display: block; width: 100%; max-width: 100%; min-height: 46px; border: 1px solid var(--sv3-line); border-radius: 10px; background: var(--sv3-soft); padding: 0 14px; font: 400 15px Manrope, sans-serif; color: var(--sv3-ink); }
.sv3-form.sv3-form .gform_wrapper textarea { min-height: 104px; padding: 12px 14px; resize: vertical; }
.sv3-form.sv3-form .gform_wrapper input:focus,
.sv3-form.sv3-form .gform_wrapper select:focus,
.sv3-form.sv3-form .gform_wrapper textarea:focus { border-color: var(--sv3-p); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(19,236,128,.2); }
.sv3-form.sv3-form .gform_wrapper .gfield--type-consent label,
.sv3-form.sv3-form .gform_wrapper .gchoice label { font-size: 13.5px; color: var(--sv3-muted); }
.sv3-form.sv3-form .gform_wrapper input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sv3-green); }
.sv3-form.sv3-form .gform_wrapper .gform_footer { display: block; width: 100%; margin: 20px 0 0; padding: 0; }
.sv3-form.sv3-form .gform_wrapper .gform_footer button,
.sv3-form.sv3-form .gform_wrapper .gform_footer .btn,
.sv3-form.sv3-form .gform_wrapper .gform_footer input[type="submit"] { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--sv3-p); font: 700 16px Manrope, sans-serif; color: var(--sv3-deep); text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(19,236,128,.55); transition: background .2s; }
.sv3-form.sv3-form .gform_wrapper .gform_footer button:hover,
.sv3-form.sv3-form .gform_wrapper .gform_footer .btn:hover,
.sv3-form.sv3-form .gform_wrapper .gform_footer input[type="submit"]:hover { background: var(--sv3-p-hover); color: var(--sv3-deep); }
.sv3-form.sv3-form .gform_wrapper .gfield_description { margin-top: 6px; padding: 0; font-size: 12.5px; line-height: 1.5; color: var(--sv3-faint); }
.sv3-form.sv3-form .gform_wrapper .gform_validation_errors { margin: 0 0 16px; border-radius: 10px; padding: 12px 14px; font-size: 13px; box-shadow: none; }
.sv3-form.sv3-form .gform_wrapper .gform_confirmation_message { font-size: 16px; line-height: 1.6; color: var(--sv3-body); }

/* ==========================================================================
   Biometrics and liveness v2 additions
   ========================================================================== */
@keyframes gdScan { 0% { top: 6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 92%; opacity: 0; } }
@keyframes gdDash { to { stroke-dashoffset: -24; } }
@keyframes gdBox { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(16,185,129,.25); background: rgba(19,236,128,.06); } 50% { box-shadow: 0 0 0 2px #10b981; background: rgba(19,236,128,.22); } }
@keyframes gdPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes gdRing { 0% { box-shadow: inset 0 0 0 0 rgba(19,236,128,0); } 40% { box-shadow: inset 0 0 0 3px rgba(19,236,128,.7); } 100% { box-shadow: inset 0 0 0 0 rgba(19,236,128,0); } }
@keyframes gdFlash { 0%, 82% { opacity: 0; } 86% { opacity: .85; } 100% { opacity: 0; } }
.sv3 .sv3-a-scan { animation: gdScan 2.6s cubic-bezier(.45,0,.55,1) infinite; }
.sv3 .sv3-a-dash { animation: gdDash 1s linear infinite; }
.sv3 .sv3-a-box { animation: gdBox 2.6s ease-in-out infinite; }
.sv3 .sv3-a-box2 { animation: gdBox 2.6s ease-in-out 1.3s infinite; }
.sv3 .sv3-a-pop { animation: gdPop .5s cubic-bezier(.2,.8,.2,1) .9s both; }
.sv3 .sv3-a-pop0 { animation: gdPop .5s cubic-bezier(.2,.8,.2,1) .15s both; }
.sv3 .sv3-a-flash { animation: gdFlash 2.6s ease-out 1 both; }
.sv3-fit-inner p, .sv3-journey-stage p, .sv3-capvis p, .sv3-step-visual p { font-family: Manrope, sans-serif; }
.sv3 .sv3-h3--sub { font-size: clamp(22px, 2.2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.sv3-wrap--tight { gap: 36px; }
.sv3-wrap--sub { gap: 20px; }
.sv3-pill--red { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }

/* hero: "bio" visual (WatchEye create + result, ID Pass phone) */
.sv3-hero-stage--bio .sv3-hero-monitor { margin: 0 19% 0 0; }
/* With the mock certificate (hero "Mock certificate: Show"), leave its corner clear as the WatchEye stage does. */
.sv3-hero-stage--bio.has-cert .sv3-hero-monitor { margin-left: 11%; }
.sv3-hero-stage--bio .sv3-hero-viewport { aspect-ratio: 720 / 540; }
.sv3-hero-stage--bio .sv3-hero-inner { height: 540px; font-family: Manrope, sans-serif; color: #1f2937; }
.sv3-hero-mon { position: relative; width: 100%; height: 100%; }
.sv3-hero-stage--bio .sv3-hero-phone { bottom: -12px; width: 26%; min-width: 104px; border-radius: 26px; }
.sv3-hero-stage--bio .sv3-hero-phone-screen { border-radius: 21px; }

/* step cards with illustrations: rows line up across cards */
.sv3-steps--rich { grid-auto-rows: auto; }
@supports (grid-template-rows: subgrid) {
  .sv3-steps--rich .sv3-step { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 14px; }
}
.sv3-step-visual { height: 168px; margin: -20px -8px 4px; border-radius: 10px; background: var(--sv3-line-soft); display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.sv3-step-visual--video { padding: 0; }
.sv3-step-visual--none { visibility: hidden; }
.sv3-step-visual--nz-sources { flex-direction: column; gap: 10px; }
.sv3-steplist { display: flex; flex-direction: column; gap: 8px; align-self: start; border-radius: 10px; background: var(--sv3-soft); padding: 12px 14px; }
.sv3-steplist-title { font-size: 12px; font-weight: 600; color: var(--sv3-muted); }
.sv3-steplist-note { font-size: 13px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-ticks--sm { gap: 6px; }
.sv3-ticks--sm li { gap: 8px; font-size: 14px; line-height: 1.45; }
.sv3-ticks--sm .sv3-i { width: 16px; height: 16px; }
.sv3-outcomes { display: flex; flex-direction: column; gap: 8px; }
.sv3-outcomes li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.45; color: var(--sv3-body); }
.sv3-outcomes .sv3-pill { flex: none; padding: 1px 8px; font-size: 12px; }
.sv3-steps--rich .sv3-output { border-top-color: var(--sv3-line); }

/* check cards with illustrations ("Capabilities") */
.sv3-grid.sv3-checks--visual { grid-auto-rows: auto; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc(33.333% - 10.667px), min(100%, calc((872px - 100%) * 9999)))), 1fr)); }
/* no container-type here: it implies layout containment, and a contained element cannot be a subgrid */
.sv3-checks--visual .sv3-card { gap: 14px; padding: 24px; }
@supports (grid-template-rows: subgrid) {
  .sv3-checks--visual .sv3-card { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 7); row-gap: 14px; }
}
.sv3 .sv3-checks--visual .sv3-h3 { font-size: clamp(19px, 1.6vw, 22px); text-wrap: balance; }
.sv3-checks--visual .sv3-body { font-size: 15.5px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-extra { display: flex; flex-direction: column; gap: 16px; }
.sv3-checks--visual .sv3-output { margin-top: 0; border-top-color: var(--sv3-line); }
.sv3-capvis { position: relative; height: 168px; margin: -8px -8px 4px; border-radius: 10px; background: var(--sv3-line-soft); display: flex; align-items: center; justify-content: center; }
.sv3-capvis--facematch { gap: 10px; }
.sv3-capvis--document { background: #1f2633; overflow: hidden; }
.sv3-capvis--none { visibility: hidden; }
.sv3-capvis--datamatch { padding: 12px; }
.sv3-capvis--nz-licence { background: #1f2633; overflow: hidden; }
.sv3-capvis--nz-passport { gap: 18px; padding: 16px; overflow: hidden; }
.sv3-capvis--nz-facematch { gap: 10px; }
.sv3 .sv3-jump { display: block; padding-top: 12px; border-top: 1px solid var(--sv3-line-soft); font-family: var(--sv3-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv3-green); text-decoration: none; }
.sv3 .sv3-jump:hover { text-decoration: underline; }
.sv3-jump .sv3-i { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -3px; }

/* walkthrough (full-width stepper) */
.sv3-walkthrough { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; padding: 24px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.sv3-panel--bio { background: var(--sv3-soft); padding: 14px; }
.sv3-fit { position: relative; overflow: hidden; }
.sv3-fit--bio { aspect-ratio: 720 / 540; border-radius: 12px; background: #f6f7f9; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.3); }
.sv3-fit-inner { position: absolute; left: 0; top: 0; width: 720px; height: 540px; transform-origin: 0 0; font-family: Manrope, sans-serif; color: #1f2937; }
.sv3-stepper--bio .sv3-caption { min-height: 48px; }

/* path cards: roomy (facts, dark) */
.sv3-grid--460:has(.is-roomy) { grid-auto-rows: auto; }
.sv3-card--path.is-roomy { border-radius: 20px; padding: clamp(24px, 3vw, 36px); }
@supports (grid-template-rows: subgrid) {
  .sv3-card--path.is-roomy { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 20px; align-content: start; }
}
.sv3-card--path.is-roomy .sv3-more { margin-top: 0; align-self: end; }
.sv3-card--path.is-dark { border: 0; background: #0b1220; color: #e2e8f0; }
.sv3-card--path.is-dark .sv3-kicker { color: #6ee7b7; }
.sv3 .sv3-card--path.is-dark .sv3-h3 { color: #fff; }
.sv3-card--path.is-dark .sv3-body { color: #cbd5e1; }
.sv3 .sv3-card--path.is-dark .sv3-more { color: #6ee7b7; }
.sv3 .sv3-card--path.is-dark .sv3-more:hover { color: #a7f3d0; }
.sv3-facts { display: flex; flex-direction: column; border-top: 1px solid var(--sv3-line); }
.sv3-facts > div { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--sv3-line-soft); }
.sv3-facts > div:last-child { border-bottom: 0; }
.sv3-facts dt { font-size: 14px; font-weight: 600; color: var(--sv3-ink); }
.sv3-facts dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sv3-muted); }
.sv3-panel--nzapi, .sv3-panel--idpapi { border-color: #1e293b; background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(19,236,128,.10), rgba(19,236,128,0) 70%), #060b16; overflow: hidden; }
.sv3-panel--nzapi .sv3-screens, .sv3-panel--idpapi .sv3-screens { display: grid; min-height: 300px; padding: 22px; }

/* customer journey */
.sv3-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 48px; align-items: start; }
.sv3-journey-fig { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Sticky only beside the steps. Stacked (narrow), a sticky figure sits over
   the step list as it scrolls past. Two columns need about 1000px. */
@media (min-width: 1000px) { .sv3-journey-fig { position: sticky; top: 112px; } }
.sv3-journey-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 548px; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; }
.sv3-jscreen[hidden] { display: none !important; }
.sv3-journey-copy { display: flex; flex-direction: column; gap: 20px; }
.sv3-journey-steps { display: flex; flex-direction: column; gap: 20px; }
.sv3 .sv3-journey-step { display: flex; gap: 16px; width: calc(100% + 16px); min-height: 0; margin: -8px; padding: 8px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; text-align: left; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; cursor: pointer; transition: background .25s; }
.sv3 .sv3-journey-step:hover, .sv3 .sv3-journey-step[aria-current] { background: #eef2f6; }
.sv3 .sv3-journey-step:focus-visible { outline: 2px solid var(--sv3-green); outline-offset: 2px; }
.sv3-journey-num { display: flex; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv3-p); font-size: 14px; font-weight: 800; color: var(--sv3-deep); transition: box-shadow .25s; }
.sv3-journey-step[aria-current] .sv3-journey-num { box-shadow: 0 0 0 4px rgba(19,236,128,.28); }
.sv3-journey-label { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--sv3-ink); }
.sv3-journey-desc { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-journey-aside { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; padding: 20px 22px; }
.sv3-journey-copy > .sv3-more { margin-top: 0; }

/* OCR capture. The markup prints the finished state; solution-v3.js arms it
   (.is-armed) and plays the extraction once in view. */
.sv3-ocr { display: flex; flex-direction: column; gap: 14px; }
.sv3-ocr-frame { border-radius: 20px; background: var(--sv3-line-soft); padding: 16px; }
.sv3-ocr-stage { position: relative; height: var(--ocr-h, 452px); display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 20px; }
.sv3-ocr-doc, .sv3-ocr-form { overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; }
.sv3-ocr-form { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.3); }
.sv3-ocr-bar { display: flex; height: 52px; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--sv3-line); }
.sv3-ocr-bar .sv3-mono-label--lg { padding: 0; }
.sv3-ocr-chip { border-radius: 999px; background: var(--sv3-line-soft); padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--sv3-muted); }
.sv3-ocr-docbody { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.sv3-ocr-img { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(15,23,42,.45); }
.sv3-ocr-img img { display: block; width: 100%; height: auto; }
.sv3-ocr-box { position: absolute; border-radius: 4px; background: rgba(19,236,128,.12); box-shadow: 0 0 0 1px rgba(16,185,129,.5); transition: background .25s, box-shadow .25s; }
.sv3-ocr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--sv3-muted); }
.sv3-ocr-foot > span:first-child { display: flex; align-items: center; gap: 6px; }
.sv3-ocr-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ec269; }
.sv3-ocr-formbar { display: flex; height: 52px; align-items: center; justify-content: space-between; padding: 0 24px; background: #4e80ee; color: #fff; }
.sv3 .sv3-ocr-formbar img { display: block; height: 16px; width: auto; filter: brightness(0) invert(1); }
.sv3-ocr-formbar > span { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.sv3-ocr-formbar > span span:first-child { font-size: 10px; opacity: .9; }
.sv3-ocr-formbar > span span:last-child { font-size: 12px; font-weight: 700; }
.sv3-ocr-formbody { padding: 24px; }
.sv3-ocr-formhead { height: 58px; }
.sv3-ocr-formhead > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv3-ocr-title { font-size: 17px; font-weight: 700; color: #3b6fe0; }
.sv3-ocr-status { border: 1px solid #a7f3d0; border-radius: 999px; background: #ecfdf5; padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--sv3-green-deep); transition: background .3s, color .3s, border-color .3s; }
.sv3-ocr-status.is-idle { border-color: var(--sv3-line); background: var(--sv3-line-soft); color: var(--sv3-muted); }
.sv3-ocr-status.is-busy { border-color: #c9d6ea; background: #eef3fb; color: #2a55c4; }
.sv3-ocr-sub { display: block; margin-top: 4px; font-size: 13px; color: #394150; }
.sv3-ocr-fields { display: flex; flex-direction: column; gap: 8px; }
.sv3-ocr-row { display: grid; height: 44px; grid-template-columns: 116px minmax(0, 1fr); align-items: center; }
.sv3-ocr-row > span { font-size: 13px; font-weight: 600; color: #394150; }
.sv3-ocr-input { height: 44px; overflow: hidden; border: 1px solid #a7f3d0; border-radius: 4px; background: #f7fefa; padding: 0 12px; line-height: 42px; font-size: 16px; font-weight: 600; color: var(--sv3-ink); white-space: nowrap; transition: border-color .3s, box-shadow .3s, background .3s; }
.sv3-ocr-input span { transition: opacity .25s; }
.sv3-ocr-input .is-mono { font-family: var(--sv3-mono); font-size: 15px; }
.sv3-ocr-cta { display: flex; justify-content: flex-end; margin-top: 26px; }
.sv3-ocr-cta span { display: inline-flex; height: 40px; align-items: center; border-radius: 4px; background: #3662e3; padding: 0 22px; font-size: 14px; font-weight: 600; color: #fff; transition: background .3s, color .3s; }
.sv3-ocr-scan { position: absolute; z-index: 1; height: 2px; background: #7ee08a; box-shadow: 0 0 10px 2px rgba(126,224,138,.7); pointer-events: none; opacity: 0; }
.sv3-ocr-fly { position: absolute; z-index: 2; height: 24px; padding: 0 8px; border: 1.5px solid #10b981; border-radius: 6px; background: #fff; box-shadow: 0 8px 18px -8px rgba(15,23,42,.35); line-height: 21px; font-size: 16px; font-weight: 700; color: var(--sv3-ink); white-space: nowrap; pointer-events: none; opacity: 0; }
.sv3-ocr-fly.is-mono { font-family: var(--sv3-mono); font-size: 15px; }
.sv3-ocr-stage.is-armed .sv3-ocr-box { background: transparent; box-shadow: none; }
.sv3-ocr-stage.is-armed .sv3-ocr-box.is-active { background: rgba(19,236,128,.28); box-shadow: 0 0 0 2px #10b981; }
.sv3-ocr-stage.is-armed .sv3-ocr-box.is-filled { background: rgba(19,236,128,.12); box-shadow: 0 0 0 1px rgba(16,185,129,.5); }
.sv3-ocr-stage.is-armed .sv3-ocr-input { border-color: #c9d6ea; background: #fff; }
.sv3-ocr-stage.is-armed .sv3-ocr-input span { opacity: 0; }
.sv3-ocr-stage.is-armed .sv3-ocr-input.is-filled { border-color: #a7f3d0; background: #f7fefa; }
.sv3-ocr-stage.is-armed .sv3-ocr-input.is-filled span { opacity: 1; }
.sv3-ocr-stage.is-armed .sv3-ocr-input.is-landing { border-color: #10b981; background: #f0fdf4; box-shadow: 0 0 0 4px rgba(19,236,128,.25); }
.sv3-ocr-stage.is-armed .sv3-ocr-cta span { background: var(--sv3-line); color: var(--sv3-faint); }
.sv3-ocr-stage.is-armed.is-done .sv3-ocr-cta span { background: #3662e3; color: #fff; }
.sv3-ocr-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sv3-ocr-under figcaption { max-width: 760px; }
.sv3 .sv3-ocr-replay { min-height: 44px; padding: 0 18px; font-size: 14px; cursor: pointer; }
/* setupOcr() shows the finished form instead of animating here, and with
   reduced motion, so Replay would do nothing. */
@media (prefers-reduced-motion: reduce) { .sv3 .sv3-ocr-replay { display: none; } }
@media (max-width: 900px) {
  .sv3-ocr-stage { display: flex; flex-direction: column; height: auto; gap: 16px; }
  .sv3-ocr-scan, .sv3-ocr-fly, .sv3 .sv3-ocr-replay { display: none; }
}

/* face verification */
.sv3-facematch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(440px, calc((1060px - 100%) * 9999))), 1fr)); gap: 40px 56px; align-items: center; }
.sv3-prose--lead { font-size: 18px; line-height: 1.65; color: var(--sv3-body); text-wrap: pretty; }
.sv3-prose.sv3-prose--lead > * + * { margin-top: 20px; }
.sv3-facematch-fig { display: flex; flex-direction: column; gap: 20px; min-width: 0; width: 100%; max-width: 640px; justify-self: start; border: 1px solid var(--sv3-line); border-radius: 20px; background: #fff; padding: clamp(20px, 2.4vw, 28px); }
.sv3-facematch-fig figcaption { padding-top: 14px; border-top: 1px solid var(--sv3-line-soft); font-size: 13px; line-height: 1.5; color: var(--sv3-muted); }
/* Phones: the probe / connector / ID photo row (inline-styled, bio-facematch.php)
   cannot fit side by side, and wrapping left the connector pointing sideways at
   nothing. Stack the three and run the dashed line down from probe to ID photo. */
@media (max-width: 560px) {
  .sv3-fmx { flex-direction: column; align-items: center !important; flex-wrap: nowrap !important; gap: 4px !important; }
  .sv3-fmx-link { width: auto !important; margin: 6px 0 16px !important; }
  .sv3-fmx-link svg { transform: rotate(90deg); margin: 24px 0; } /* 64x16 box turned upright: reserve the 64px height */
}

/* icon / image cards + note boxes */
.sv3-icards { display: grid; grid-auto-rows: auto; gap: 16px; }
.sv3-icards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc(25% - 12px), min(calc(50% - 8px), calc((1100px - 100%) * 9999)))), 1fr)); }
.sv3-icards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.sv3-icards--2 .sv3-icard-img { height: 220px; }
.sv3 .sv3-icards--2 .sv3-icard-img img { max-height: 185px; }
.sv3-icards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sv3-icard { display: flex; flex-direction: column; gap: 12px; align-content: start; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; padding: 24px; }
@supports (grid-template-rows: subgrid) {
  .sv3-icard { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 4); row-gap: 12px; }
}
.sv3-icard--image { padding: 18px; row-gap: 10px; gap: 10px; }
.sv3 .sv3-icard-icon { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: #ecfdf5; font-size: 24px; color: var(--sv3-green); }
.sv3-icard-img { display: flex; height: 180px; overflow: hidden; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(180deg, #f1f5f9, #e8edf3); }
.sv3 .sv3-icard-img img { display: block; width: auto; height: auto; max-width: 84%; max-height: 150px; filter: drop-shadow(0 1px 1px rgba(15,23,42,.12)) drop-shadow(0 8px 14px rgba(15,23,42,.22)); }
.sv3 .sv3-icard-title { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.sv3 .sv3-icard--image .sv3-icard-title { margin-top: 4px; font-size: 17px; font-weight: 700; }
.sv3-icard-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.sv3-icard-chips li { border-radius: 999px; background: #ecfdf5; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--sv3-green-deep); }
.sv3-icard-chips li.is-muted { background: var(--sv3-line-soft); color: var(--sv3-body); }
.sv3-icard-body { font-size: 15px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-icard-foot { padding-top: 12px; border-top: 1px solid var(--sv3-line-soft); font-size: 13.5px; line-height: 1.5; color: var(--sv3-body); }
.sv3-icard--image .sv3-icard-foot { padding-top: 0; border-top: 0; font-size: 13px; color: var(--sv3-muted); }
.sv3-icard-foot b, .sv3-notes b { font-weight: 600; color: var(--sv3-ink); }
.sv3-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.sv3-notes p { border: 1px solid var(--sv3-line); border-radius: 12px; background: var(--sv3-soft); padding: 16px 18px; font-size: 14.5px; line-height: 1.6; color: var(--sv3-body); }
.sv3-bg-grey .sv3-notes p { background: #fff; }
.sv3 .sv3-notes a { font-weight: 600; color: var(--sv3-green); }

/* liveness score box */
.sv3-score { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px 56px; align-items: center; border: 1px solid var(--sv3-line); border-radius: 20px; background: #fff; padding: clamp(24px, 3.4vw, 40px); }
.sv3-score-copy { display: flex; flex-direction: column; gap: 14px; }
.sv3-score-fig { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sv3-score-fig figcaption { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--sv3-line-soft); font-size: 13px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-scale { display: flex; flex-direction: column; gap: 12px; }
.sv3-scale-top { position: relative; height: 20px; }
.sv3-scale-top span { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--sv3-ink); }
.sv3-scale-bar { position: relative; height: 14px; border-radius: 999px; background: var(--sv3-line); }
.sv3-scale-bar [data-sc="seg"] { position: absolute; top: 0; bottom: 0; transform-origin: 0 50%; }
.sv3-scale-bar .is-low { border-radius: 999px 0 0 999px; background: #fda4af; }
.sv3-scale-bar .is-mid { background: #86efac; }
.sv3-scale-bar .is-high { background: #16a34a; }
.sv3-scale-cut { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--sv3-ink); transform-origin: 50% 100%; }
.sv3-scale-labels { position: relative; height: 40px; margin-top: 4px; font-size: 12.5px; line-height: 1.35; }
.sv3-scale-labels > span { position: absolute; top: 0; font-weight: 600; color: #166534; }
.sv3-scale-labels > span.is-low { color: #9f1239; }
.sv3-scale-labels > span span { font-weight: 500; color: var(--sv3-muted); }

/* two lists beside the copy (establishes / doesn't establish) */
.sv3-yesno { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px 28px; }
.sv3-yesno-col { display: flex; flex-direction: column; gap: 12px; }
.sv3-yesno-title { font-family: var(--sv3-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--sv3-green); }
.sv3-yesno-col--no .sv3-yesno-title { color: #9f1239; }
.sv3-yesno ul { display: flex; flex-direction: column; gap: 10px; }
.sv3-yesno li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--sv3-body); }
.sv3-yesno .sv3-i { width: 20px; height: 20px; margin-top: 1px; stroke-width: 2.4; color: var(--sv3-green); }
.sv3-yesno-col--no .sv3-i { color: #e11d48; }

/* Getting started: two or three cards share a row, then wrap */
.sv3-startcards { display: flex; flex-wrap: wrap; gap: 24px; }
.sv3-startcards > .sv3-startcard { flex: 1 1 380px; min-width: min(100%, 380px); }
.sv3-startcard--fill .sv3-ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc(50% - 16px))), 1fr)); gap: 14px 32px; }

@media (prefers-reduced-motion: reduce) {
  .sv3 .sv3-a-flash, .sv3 .sv3-a-scan { display: none !important; }
  .sv3 .sv3-rbox.is-on, .sv3 .sv3-a-pop, .sv3 .sv3-a-pop0, .sv3 .sv3-a-dash, .sv3 .sv3-a-box, .sv3 .sv3-a-box2 { animation: none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .sv3-sec { padding: 64px 0; }
  .sv3-hero { padding: 56px 0 56px; }
  .sv3-card, .sv3-callout { padding: 22px; }
  .sv3-startcard { padding: 24px; }
  .sv3-faq .sv3-prose { padding-right: 0; }
  .sv3-form { padding: 20px; }
  .sv3-formcard-head { padding: 22px 20px 18px; }
  .sv3 .sv3-tab { min-height: 60px; padding: 22px 4px 6px; font-size: 12px; }
  .sv3-tab-badge { padding: 2px 6px; font-size: 9px; }
  .sv3-stepper.is-dark .sv3-tab { font-size: 11px; padding: 22px 2px 6px; overflow-wrap: anywhere; }
  .sv3-panel--idp { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv3-hero-stage [data-hc="monitor"], .sv3-hero-stage [data-hc="phone"], .sv3-hero-stage [data-hc="cert"] { animation: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   KYC due diligence (S05 design): gsl_v3_overview / routes / split /
   evidence, the hero's "kyc" visual and the CSS-animated walkthroughs
   (gd_sv3_demo_figure). The mock screens in template-parts/solution-v3/kyc-*
   keep the design's inline styles and its animation classes, prefixed sk-.
   solution-v3.js shows one step's [data-screen] blocks at a time; showing a
   block again restarts its animations.
   ========================================================================== */
/* Caspar screens (kyc-caspar.php, the overview card) use Nunito; latin subset, variable 400-800 */
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 800; font-display: swap; src: url(nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.sv3 .sk-scr { display: contents; }
.sv3 .sk-scr[hidden] { display: none; }
@keyframes skRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes skFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes skSlide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes skType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes skOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes skRing { 0% { box-shadow: 0 0 0 0 rgba(217,119,6,0); } 50% { box-shadow: 0 0 0 6px rgba(217,119,6,.35); } 100% { box-shadow: 0 0 0 2px #d97706; } }
@keyframes skPress { 0%, 100% { transform: scale(1); } 50% { transform: scale(.93); } }
@keyframes skProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes skSpin { to { transform: rotate(360deg); } }
@keyframes skScan { 0% { top: 8%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 90%; opacity: 0; } }
@keyframes skDraw { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }
@keyframes skWin { 0% { opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes skPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes skPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes skToGreen { from { stroke: #4e80ee; } to { stroke: #5ec269; } }
@keyframes skDashFlow { to { stroke-dashoffset: -48; } }
@keyframes skOval { 0% { opacity: 0; transform: scale(1.12); } 6% { opacity: 1; transform: scale(1); } 11% { transform: translateX(0); } 22% { transform: translateX(-7px); } 33% { transform: translateX(0); } 44% { transform: translateX(0); } 52% { transform: translateX(7px); } 61% { transform: translateX(0); } 66% { transform: scale(1.04); } 70% { transform: scale(1); } 74% { transform: scale(1.04); } 78% { transform: scale(1); } 96% { opacity: 1; stroke: #7ee08a; } 100% { opacity: 0; stroke: #7ee08a; } }
@keyframes skLic { from { transform: translate(-26px,-18px) rotate(-9deg) scale(.86); } to { transform: none; } }
@keyframes skCorner { from { border-color: #fff; } to { border-color: #7ee08a; } }
@keyframes skScanDown { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(112px); } 100% { opacity: 0; transform: translateY(112px); } }
@keyframes skFlash { 0% { opacity: .8; } 100% { opacity: 0; } }
@keyframes skTog { from { background: #d1d5db; } to { background: #581f5d; } }
@keyframes skKnob { from { transform: translateX(0); } to { transform: translateX(14px); } }
@keyframes skSheet { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes skHlRow { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(88,31,93,0); } 50% { box-shadow: inset 0 0 0 2px rgba(88,31,93,.45); } }
@keyframes skHlReq { 0%, 100% { background: transparent; } 50% { background: #dbe9fd; } }
@keyframes skPick { from { background: transparent; color: #1f2937; } to { background: #1e8fff; color: #fff; } }
@keyframes skRdScroll { 0%, 30% { transform: translateY(0); } 60%, 100% { transform: translateY(-250px); } }
@keyframes skQScroll { 0%, 40% { transform: translateY(0); } 75%, 100% { transform: translateY(calc(-100% + 362px)); } }
.sv3 .sk-rv { animation: skRise .5s cubic-bezier(.2,.8,.2,1) both; }
.sv3 .sk-fd { animation: skFade .45s ease both; }
.sv3 .sk-sl { animation: skSlide .5s cubic-bezier(.2,.8,.2,1) both; }
.sv3 .sk-ty { display: inline-block; animation: skType .8s steps(12,end) both; }
.sv3 .sk-out { animation: skOut .25s ease both; }
.sv3 .sk-ring { animation: skRing .9s ease both; }
.sv3 .sk-press { animation: skPress .35s ease both; }
.sv3 .sk-spin { animation: skSpin .8s linear infinite; }
.sv3 .sk-scan { animation: skScan 2.2s cubic-bezier(.45,0,.55,1) infinite; }
.sv3 .sk-draw { animation: skDraw 2.6s cubic-bezier(.4,0,.2,1) .4s both; }
.sv3 .sk-prog { animation-name: skProg; animation-timing-function: linear; animation-fill-mode: both; }
.sv3 .sk-win { opacity: 0; animation-name: skWin; animation-timing-function: linear; animation-fill-mode: none; }
.sv3 .sk-pop { animation: skPop .5s cubic-bezier(.2,.8,.2,1) both; }
.sv3 .sk-pulse { animation: skPulse .4s ease 2; }
.sv3 .sk-lring { animation: skDraw 8s linear both, skToGreen .2s ease 8.9s both; }
.sv3 .sk-oval { transform-box: fill-box; transform-origin: 50% 50%; animation: skOval 9s ease-in-out both, skDashFlow 8s linear both; }
.sv3 .sk-lic { animation: skLic 1.2s cubic-bezier(.2,.8,.2,1) both; }
.sv3 .sk-corner { animation: skCorner .25s ease 1.2s both; }
.sv3 .sk-scandown { animation: skScanDown 1s linear 1.45s forwards; }
.sv3 .sk-flash { animation: skFlash .4s ease-out 2.45s forwards; }
.sv3 .sk-tog { animation: skTog .25s ease both; }
.sv3 .sk-knob { animation: skKnob .25s ease both; }
.sv3 .sk-sheet { animation: skSheet .6s cubic-bezier(.3,.7,.3,1) both; }
.sv3 .sk-hlrow { animation: skHlRow 1.6s ease-in-out 2; }
.sv3 .sk-hlreq { animation: skHlReq 1s ease-in-out 2; }
.sv3 .sk-pick { animation: skPick .2s ease both; }
.sv3 .sk-rdscroll { animation: skRdScroll 7s ease-in-out .6s both; }
.sv3 .sk-qscroll { animation: skQScroll 8s ease-in-out .4s both; }

/* ---------- Walkthrough figure ---------- */
.sv3-walk { gap: 12px; }
.sv3 .sv3-walk .sv3-tab { min-height: 64px; padding: 22px 6px 8px; font-size: 12.5px; }
.sv3-tab-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sv3-p); transform-origin: 0 50%; }
.sv3 .sv3-walk .sv3-tab.is-done { color: var(--sv3-body); }
.sv3-walk .sv3-tab.is-done .sv3-tab-badge { background: var(--sv3-p); color: var(--sv3-deep); }
.sv3-walk-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sv3-walk-foot .sv3-caption { flex: 1 1 300px; min-height: 44px; }
.sv3 .sv3-replay { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 1px solid var(--sv3-line); border-radius: 8px; background: #fff; padding: 0 14px; font: 600 14px Manrope, sans-serif; color: var(--sv3-green-deep); cursor: pointer; text-transform: none; letter-spacing: 0; }
.sv3 .sv3-replay:hover { border-color: #cbd5e1; }
.sv3 .sv3-replay .material-symbols-outlined { font-size: 18px; }
.sv3-walk-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sv3 .sv3-zoom-btn svg { width: 16px; height: 16px; flex: none; }
/* Expand: the walkthrough in a dialog (solution-v3.js openZoom); phones pan it at natural size */
dialog.sv3-zoom { width: min(1080px, calc(100vw - 32px)); max-width: none; height: calc(100vh - 32px); height: calc(100dvh - 32px); max-height: none; margin: 16px auto; padding: 0; border: 0; border-radius: 14px; background: #0f172a; color: var(--sv3-body); overflow: hidden; font-family: inherit; }
dialog.sv3-zoom::backdrop { background: rgba(15, 23, 42, .72); }
dialog.sv3-zoom[open] { display: flex; flex-direction: column; }
.sv3-zoom-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 18px; }
.sv3-zoom-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #cbd5e1; }
.sv3 .sv3-zoom-close { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: #fff; color: #0f172a; font: 800 14px Manrope, sans-serif; cursor: pointer; }
.sv3-zoom-close:focus-visible { outline: 2px solid var(--sv3-p); outline-offset: 2px; }
.sv3-zoom-body { flex: 1; overflow: auto; background: #fff; padding: 20px; -webkit-overflow-scrolling: touch; }
.sv3-zoom-body .sv3-walk { min-width: 760px; }
/* Inside the dialog the Expand button reads Close (solution-v3.js openZoom) */
html.sv3-zoom-open { overflow: hidden; }
/* ID Pass walkthrough: phone beside WatchEye from 900px */
.sk-idp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) { .sk-idp-grid { grid-template-columns: 250px minmax(0, 1fr); } }

/* ---------- Switch (one of two walkthroughs) ---------- */
.sv3-switchbox { display: flex; flex-direction: column; gap: 12px; min-width: 0; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); scroll-margin-top: 112px; }
.sv3-switchbox--card { padding: 24px; }
.sv3-switchbox--fig { padding: 20px; }
.sv3-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sv3-switchbox--fig .sv3-switch { justify-content: flex-start; }
.sv3-switch-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; border-radius: 10px; background: var(--sv3-line-soft); padding: 4px; }
.sv3 .sv3-switch-btns button { min-height: 44px; border: 0; border-radius: 8px; padding: 0 16px; background: transparent; font: 600 14px Manrope, sans-serif; color: var(--sv3-muted); cursor: pointer; text-transform: none; letter-spacing: 0; transition: background .2s, color .2s, box-shadow .2s; }
.sv3 .sv3-switch-btns button[aria-pressed="true"] { background: #fff; color: var(--sv3-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06); }
.sv3-switch-note { font-size: 13px; color: var(--sv3-faint); }
.sv3-switch-pane[hidden] { display: none; }

/* ---------- Hero: "kyc" visual ---------- */
.sv3-hero-stage--kyc .sv3-kyc-monitor { margin: 0 19% 0 0; }
.sv3-hero-stage--kyc.has-cert .sv3-kyc-monitor { margin-left: 11%; }

/* ---------- Overview ---------- */
.sv3-ovcards { grid-auto-rows: auto; }
.sv3 .sv3-ovcard { gap: 14px; padding: 24px; }
.sv3 .sv3-ovcard-title { font-size: 21px; }
.sv3-ovcard .sv3-body--muted { font-size: 15.5px; }
.sv3 .sv3-ovcard-out { margin: auto 0 0; min-height: 76px; border-top-color: var(--sv3-line); }
.sv3 .sv3-ovcard-jump { display: block; padding-top: 12px; border-top: 1px solid var(--sv3-line-soft); font-family: var(--sv3-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv3-green); text-decoration: none; }
.sv3 .sv3-ovcard-jump:hover { text-decoration: underline; }
.sv3 .sv3-ovcard-jump .material-symbols-outlined, .sv3 .sv3-routecard-go .material-symbols-outlined { margin-left: 6px; font-size: 16px; vertical-align: -3px; }
.sv3-ovsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.sv3-ovstep { position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; padding: 36px 22px 20px; }
.sv3-ovstep b { font-size: 17px; font-weight: 700; color: var(--sv3-ink); }
.sv3-ovstep > span:last-child { font-size: 15px; line-height: 1.55; color: var(--sv3-muted); }
.sv3 .sv3-ovnote { max-width: 860px; font-size: 15px; }

/* ---------- Routes ---------- */
.sv3-routecards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sv3 .sv3-routecard { gap: 12px; padding: 24px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.sv3 .sv3-routecard-title { font-weight: 700; text-wrap: balance; }
.sv3 .sv3-routecard-body { font-size: 15.5px; }
.sv3 .sv3-routecard-fact { margin: auto 0 0; min-height: 64px; border-top-color: var(--sv3-line); }
.sv3 .sv3-routecard-go { display: inline-flex; align-items: center; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--sv3-line-soft); background: none; padding: 10px 0 0; font: 600 12px var(--sv3-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--sv3-green); text-align: left; cursor: pointer; }
.sv3 .sv3-routecard-go:hover { text-decoration: underline; }
.sv3-routecard-foot { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--sv3-line-soft); padding-top: 10px; font-size: 13px; line-height: 1.5; color: var(--sv3-faint); }
@media (min-width: 900px) {
  .sv3-routecards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv3 .sv3-routecard-body { min-height: 11.2em; }
}
@media (min-width: 1080px) { .sv3 .sv3-routecard-body { min-height: 9.6em; } }
@media (min-width: 1440px) { .sv3 .sv3-routecard-body { min-height: 8em; } }
.sv3-links ~ .sv3-more { margin-top: -24px; }

/* ---------- Split: copy beside a walkthrough ---------- */
.sv3-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 48px; align-items: start; }
.sv3-split-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (min-width: 1080px) {
  .sv3-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sv3-switchbox--fig.is-sticky { position: sticky; top: 112px; }
}
.sv3-points { display: flex; flex-direction: column; gap: 28px; }
.sv3-points--icons { gap: 22px; }
.sv3-point { display: flex; gap: 14px; }
.sv3-point-text { display: flex; flex-direction: column; gap: 8px; }
.sv3-points--icons .sv3-point-text { gap: 3px; }
.sv3 .sv3-point-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--sv3-ink); }
.sv3 .sv3-points--icons .sv3-point-title { font-size: 17px; }
.sv3-point-body { font-size: 16px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-points--icons .sv3-point-body { font-size: 15.5px; }
.sv3-point-kicker { font-family: var(--sv3-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sv3-muted); }
.sv3-point-icon { display: flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: var(--sv3-soft); box-shadow: inset 0 0 0 1px var(--sv3-line); }
.sv3 .sv3-point-icon .material-symbols-outlined { font-size: 21px; color: #581f5d; }
.sv3 .sv3-point-icon.is-amber .material-symbols-outlined { color: #b45309; }
.sv3 .sv3-point-icon.is-green .material-symbols-outlined { color: var(--sv3-green); }
.sv3-split-note { padding-top: 16px; border-top: 1px solid var(--sv3-line); font-size: 15px; line-height: 1.6; color: var(--sv3-muted); }
.sv3 .sv3-split-note a { font-weight: 600; color: var(--sv3-green); }
.sv3-split-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: -12px; }
.sv3 .sv3-split-links .sv3-more { margin-top: 0; }

/* ---------- Evidence review ---------- */
.sv3-evgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 48px; align-items: start; }
@media (min-width: 1080px) {
  .sv3-evgrid { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
  .sv3-evfig { position: sticky; top: 112px; }
}
.sv3-evfig { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sv3-evshot { border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; padding: 12px; }
.sv3 .sv3-evfig .sv3-small { font-size: 13px; }
.sv3-evside { display: flex; flex-direction: column; gap: 20px; }
.sv3-evnotes { display: flex; flex-direction: column; gap: 20px; }
.sv3 .sv3-evnote { display: flex; gap: 16px; width: calc(100% + 16px); margin: -8px; border: 0; border-radius: 10px; padding: 8px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; text-transform: none; letter-spacing: 0; transition: background .25s; }
.sv3 .sv3-evnote[aria-pressed="true"] { background: #eef2f6; }
.sv3-evnum { display: flex; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv3-p); font-size: 14px; font-weight: 800; color: var(--sv3-deep); transition: box-shadow .25s; }
.sv3-evnote[aria-pressed="true"] .sv3-evnum { box-shadow: 0 0 0 4px rgba(19,236,128,.35); }
.sv3-evnote-title { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--sv3-ink); }
.sv3-evnote-text { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-evnext { display: flex; gap: 12px; border: 1px solid #a7f3d0; border-radius: 12px; background: #ecfdf5; padding: 16px; font-size: 15px; line-height: 1.55; color: var(--sv3-body); }
.sv3-evnext b { color: var(--sv3-green-deep); }
.sv3 .sv3-evnext .material-symbols-outlined { flex: none; font-size: 22px; color: var(--sv3-green); }
.sv3-evlist { display: flex; flex-direction: column; gap: 16px; }
.sv3-evitems { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .sv3-evitems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .sv3-evitems { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv3-evitems li { display: flex; gap: 12px; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; padding: 18px; }
.sv3-evitems li > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.sv3-evitems b { font-size: 16px; color: var(--sv3-ink); }
.sv3-evitems li > span:last-child > span { font-size: 14.5px; line-height: 1.55; color: var(--sv3-muted); }
.sv3-evbox { flex: none; width: 18px; height: 18px; margin-top: 3px; border: 2px solid var(--sv3-green); border-radius: 4px; }

/* ---------- Access: note under the cards ---------- */
.sv3 .sv3-access-note { margin-top: -20px; }

@media (prefers-reduced-motion: reduce) {
  .sv3 .sk-rv, .sv3 .sk-fd, .sv3 .sk-sl, .sv3 .sk-ty, .sv3 .sk-ring, .sv3 .sk-press, .sv3 .sk-draw, .sv3 .sk-pop, .sv3 .sk-pulse, .sv3 .sk-lring, .sv3 .sk-oval, .sv3 .sk-lic, .sv3 .sk-corner, .sv3 .sk-tog, .sv3 .sk-knob, .sv3 .sk-sheet, .sv3 .sk-hlrow, .sv3 .sk-hlreq, .sv3 .sk-pick, .sv3 .sk-spin { animation: none !important; }
  .sv3 .sk-rdscroll, .sv3 .sk-qscroll { animation: none !important; }
  .sv3 .sk-rdscroll { overflow: visible; }
  .sv3 .sk-out, .sv3 .sk-prog, .sv3 .sk-scan, .sv3 .sk-win, .sv3 .sk-scandown, .sv3 .sk-flash { display: none !important; }
  .sv3 .sv3-evnote, .sv3 [data-ev-pane] { transition: none !important; }
}

/* Getting started: heading block beside the cards (KYC design) */
.sv3-start-head { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 800px) {
  .sv3-wrap.sv3-start-beside { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; }
  .sv3-start-beside > .sv3-start-head { flex: 1 1 340px; }
  .sv3-start-beside > .sv3-startcards { flex: 1 1 420px; }
}

/* ==========================================================================
   Watchlist screening (S06 design)
   ========================================================================== */
.sv3-lead2 { font-size: 15.5px; line-height: 1.6; color: var(--sv3-muted); text-wrap: pretty; }
.sv3 .sv3-lead2 a { font-weight: 600; color: var(--sv3-green); text-decoration: underline; }
@keyframes skTick { from { background: #fff; } to { background: #581f5d; } }
@keyframes skPulseDot { 0% { box-shadow: 0 0 0 0 rgba(19,236,128,.6); } 100% { box-shadow: 0 0 0 14px rgba(19,236,128,0); } }
.sv3 .sk-tick { animation: skTick .2s ease both; }
.sv3 .sk-pdot { animation: skPulseDot 1.6s ease-out infinite; }
.sv3-scroll { scrollbar-width: thin; scrollbar-color: #0fb265 #ecfdf5; }
.sv3-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.sv3-scroll::-webkit-scrollbar-track { background: #ecfdf5; border-radius: 8px; }
.sv3-scroll::-webkit-scrollbar-thumb { background: #0fb265; border-radius: 8px; border: 2px solid #ecfdf5; }

/* Hero: one WatchEye screen in a dark bezel */
.sv3-hero-stage--wl { padding: 0; }

/* Split points: numbered cards, or a tick list */
.sv3-npoints { display: flex; flex-direction: column; gap: 16px; }
.sv3-npoint { position: relative; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; padding: 20px 22px 20px 64px; }
.sv3-npoint-num { position: absolute; left: 18px; top: 18px; display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv3-p); font-size: 14px; font-weight: 800; color: var(--sv3-deep); }
.sv3-npoint .sv3-point-body { font-size: 15.5px; }
/* Linked to a walkthrough: the card for the step on screen lights up; the whole card is its button */
.sv3-npoints--linked .sv3-npoint { transition: border-color .25s, box-shadow .25s, background-color .25s; }
.sv3-npoints--linked .sv3-npoint:hover { border-color: #a7f3d0; }
.sv3-npoints--linked .sv3-npoint.is-active { border-color: var(--sv3-p); background: #f6fef9; box-shadow: 0 0 0 1px var(--sv3-p), 0 8px 20px -14px rgba(6,40,26,.35); }
.sv3-npoints--linked .sv3-npoint-num { transition: box-shadow .25s; }
.sv3-npoints--linked .sv3-npoint.is-active .sv3-npoint-num { box-shadow: 0 0 0 4px rgba(19,236,128,.3); }
.sv3 .sv3-npoint-go { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; border-radius: 12px; padding: 0; background: transparent; cursor: pointer; }
.sv3 .sv3-npoint-go:focus-visible { outline: 2px solid var(--sv3-green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sv3-npoints--linked .sv3-npoint, .sv3-npoints--linked .sv3-npoint-num { transition: none; } }
.sv3 .sv3-split-ticks { gap: 12px; }

/* Evidence (screening result): boxed notes, headed paragraphs, amber note */
.sv3-evnotes--box { gap: 0; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; }
.sv3-evnotes--box li + li { border-top: 1px solid var(--sv3-line); }
.sv3 .sv3-evnotes--box .sv3-evnote { width: 100%; margin: 0; border-radius: 0; padding: 16px 18px; }
.sv3-evnotes--box .sv3-evnote-title { font-size: 16.5px; }
.sv3-evnotes--box .sv3-evnote-text { margin-top: 4px; font-size: 14.5px; }
.sv3-evrow { display: flex; flex-direction: column; gap: 24px; }
.sv3-evparas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px 32px; }
.sv3 .sv3-evpara-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--sv3-ink); }
.sv3-evparas p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--sv3-muted); }
.sv3-evnext--info { border-color: #fde68a; background: #fffbeb; }
.sv3 .sv3-evnext--info .material-symbols-outlined { color: #b45309; }
.sv3-evnext--info b { color: var(--sv3-ink); }

/* Access: button beside the note */
.sv3-access-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.sv3-access-foot .sv3-note { flex: 1 1 320px; }

/* Getting started: titled checklist items in two columns */
.sv3-checklist--titled { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px 28px; }
.sv3-checklist--titled li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.sv3-checklist--titled b { font-weight: 700; color: #fff; }

/* Review context: small cards beside a WatchEye Event */
.sv3-ctxcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.sv3-ctxcards li { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; padding: 18px; }
.sv3 .sv3-ctxcards .material-symbols-outlined { font-size: 24px; color: var(--sv3-green); }
.sv3 .sv3-ctxcard-title { margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--sv3-ink); }
.sv3-ctxcards p { font-size: 14px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-ctxfig { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sv3 .sv3-ctxfig .sv3-small { font-size: 13px; }
@media (min-width: 1080px) { .sv3-ctxfig { position: sticky; top: 112px; } }

/* Icon cards: link under a rule */
.sv3-icard .sv3-more--rule { padding-top: 12px; }

/* ---------- Coverage map ---------- */
.sv3-cov { display: flex; flex-direction: column; gap: 16px; }
.sv3-cov-card { container-type: inline-size; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--sv3-line); border-radius: 16px; background: #fff; padding: 20px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.sv3-cov-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.sv3-cov-top > p { font-size: 15px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-cov-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv3-cov-cats { display: flex; flex-wrap: wrap; gap: 4px; border-radius: 10px; background: #f1f5f9; padding: 4px; }
.sv3 .sv3-cov-cats button { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 0 14px; background: transparent; font: 600 13.5px Manrope, sans-serif; color: var(--sv3-muted); cursor: pointer; text-transform: none; letter-spacing: 0; }
.sv3 .sv3-cov-cats button[aria-pressed="true"] { background: #fff; color: var(--sv3-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06); }
.sv3-cov-cats button span { border-radius: 999px; padding: 1px 7px; background: var(--sv3-line); font-size: 11px; font-weight: 700; color: var(--sv3-muted); }
.sv3-cov-cats button[aria-pressed="true"] span { background: var(--sv3-p); color: var(--sv3-deep); }
.sv3 .sv3-cov-btn { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; border: 1px solid var(--sv3-line); border-radius: 8px; background: #fff; padding: 0 14px; font: 600 14px Manrope, sans-serif; color: var(--sv3-green-deep); cursor: pointer; text-transform: none; letter-spacing: 0; }
.sv3 .sv3-cov-btn:hover { border-color: #cbd5e1; }
.sv3 .sv3-cov-btn .material-symbols-outlined { font-size: 18px; }
.sv3-cov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.sv3-cov-mapbox { min-width: 0; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: #f8fafc; }
.sv3-cov-map { position: relative; line-height: 0; }
.sv3 .sv3-cov-map img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 437.7; user-select: none; }
.sv3-cov-marks { position: absolute; inset: 0; }
.sv3 .sv3-cov-mk { position: absolute; z-index: 1; display: flex; min-width: 32px; min-height: 32px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; padding: 0; background: transparent; font-family: Manrope, sans-serif; line-height: 1; cursor: pointer; transform: translate(-50%, -50%); }
.sv3 .sv3-cov-mk[hidden] { display: none; }
.sv3-cov-mk.is-big { z-index: 2; }
.sv3-cov-mk[aria-pressed="true"], .sv3-cov-mk.is-hover { z-index: 3; }
.sv3-cov-dot { display: flex; width: 13px; height: 13px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv3-green); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sv3-green); font-size: 9.5px; font-weight: 800; color: #fff; transition: transform .15s; }
.sv3-cov-mk.is-mid .sv3-cov-dot { width: 17px; height: 17px; }
.sv3-cov-mk.is-big .sv3-cov-dot { width: 22px; height: 22px; }
.sv3-cov-mk.is-global .sv3-cov-dot { background: #fff; color: var(--sv3-green); box-shadow: 0 0 0 2px var(--sv3-green); }
.sv3-cov-mk.is-hover .sv3-cov-dot { background: var(--sv3-green-deep); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sv3-green-deep); transform: scale(1.1); }
.sv3-cov-mk[aria-pressed="true"] .sv3-cov-dot { background: var(--sv3-p); color: var(--sv3-deep); box-shadow: 0 0 0 2px var(--sv3-deep); transform: scale(1.15); animation: skPulseDot 1.6s ease-out infinite; }
.sv3-cov-lab { display: none; white-space: nowrap; border-radius: 999px; padding: 2px 7px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px var(--sv3-line); font-size: 11px; font-weight: 700; color: var(--sv3-ink); }
.sv3-cov-mk.is-big .sv3-cov-lab, .sv3-cov-mk.is-hover .sv3-cov-lab, .sv3-cov-mk[aria-pressed="true"] .sv3-cov-lab { display: block; }
.sv3-cov-mk.is-hover .sv3-cov-lab { background: var(--sv3-green-deep); box-shadow: none; color: #fff; }
.sv3-cov-mk[aria-pressed="true"] .sv3-cov-lab { background: var(--sv3-deep); box-shadow: none; color: #fff; }
.sv3-cov-mk:focus-visible { outline: 2px solid var(--sv3-green); outline-offset: 2px; border-radius: 8px; }
.sv3-cov-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid var(--sv3-line); background: #fff; padding: 10px 14px; font-size: 12px; line-height: 1.4; color: var(--sv3-body); }
.sv3-cov-legend span { display: flex; align-items: center; gap: 6px; }
.sv3-cov-legend i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.sv3-cov-legend .is-src { background: var(--sv3-green); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sv3-green); }
.sv3-cov-legend .is-sel { background: var(--sv3-p); box-shadow: 0 0 0 2px var(--sv3-deep); }
.sv3-cov-legend .is-none { border-radius: 3px; background: #d9e2ec; }
.sv3-cov-panelwrap { position: relative; min-width: 0; min-height: 560px; }
@container (min-width: 900px) {
  .sv3-cov-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .sv3-cov-panelwrap { align-self: stretch; min-height: 0; }
}
@container (min-width: 1200px) { .sv3-cov-grid { grid-template-columns: minmax(0, 1fr) 400px; } }
.sv3-cov-panel { position: absolute; inset: 0; display: flex; min-width: 0; flex-direction: column; gap: 10px; overflow: hidden; border: 1px solid var(--sv3-line); border-radius: 12px; background: #f8fafc; padding: 16px; }
.sv3-cov-dd { position: relative; }
.sv3-cov-dd label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sv3-muted); }
.sv3-cov-ddbox { position: relative; }
.sv3 .sv3-cov-ddbox input { display: block; width: 100%; height: 44px; border: 1px solid var(--sv3-line); border-radius: 10px; background: #fff; padding: 0 44px 0 12px; font: 500 15px Manrope, sans-serif; color: var(--sv3-ink); }
.sv3 .sv3-cov-ddbox input[aria-expanded="true"] { border-color: var(--sv3-p); }
.sv3 .sv3-cov-ddbox button { position: absolute; right: 4px; top: 4px; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #ecfdf5; padding: 0; color: var(--sv3-green); cursor: pointer; }
.sv3 .sv3-cov-ddbox button .material-symbols-outlined { font-size: 20px; }
.sv3-cov-ddlist { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; max-height: 280px; overflow: auto; margin-top: 6px; border: 1px solid #a7f3d0; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 18px 40px -16px rgba(6,40,26,.35); }
.sv3 .sv3-cov-ddlist[hidden] { display: none; }
.sv3 .sv3-cov-opt { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 8px; padding: 0 10px; background: transparent; text-align: left; font: 500 14.5px Manrope, sans-serif; color: var(--sv3-ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.sv3 .sv3-cov-opt:hover, .sv3 .sv3-cov-opt.is-active { background: #ecfdf5; }
.sv3 .sv3-cov-opt[aria-selected="true"] { background: var(--sv3-deep); color: #fff; }
.sv3-cov-optn { border-radius: 999px; padding: 1px 8px; background: #ecfdf5; font-size: 11px; font-weight: 700; color: var(--sv3-green-deep); }
.sv3-cov-opt[aria-selected="true"] .sv3-cov-optn { background: var(--sv3-p); color: var(--sv3-deep); }
.sv3-cov-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-top: 1px solid var(--sv3-line); padding-top: 8px; }
.sv3-cov-phead > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.sv3-cov-kicker { display: block; min-height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--sv3-mono); font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; color: var(--sv3-muted); }
.sv3-cov-title { display: block; min-height: 2.5em; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--sv3-ink); }
.sv3 .sv3-cov-clear { display: inline-flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--sv3-line); border-radius: 8px; background: #fff; padding: 0; color: var(--sv3-body); cursor: pointer; }
.sv3 .sv3-cov-clear[hidden] { display: none; }
.sv3 .sv3-cov-clear .material-symbols-outlined { font-size: 20px; }
.sv3-cov-text { font-size: 13px; line-height: 1.5; color: var(--sv3-muted); }
.sv3-cov-body { flex: 1; min-height: 0; overflow: auto; padding-right: 6px; }
.sv3-cov-srcs { display: flex; flex-direction: column; gap: 6px; }
.sv3 .sv3-cov-src { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--sv3-line); border-radius: 8px; background: #fff; padding: 5px 10px; text-align: left; font-family: Manrope, sans-serif; cursor: pointer; text-transform: none; letter-spacing: 0; }
.sv3 .sv3-cov-src:hover { border-color: #a7f3d0; }
.sv3-cov-src > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.sv3-cov-src-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--sv3-ink); }
.sv3-cov-src-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; line-height: 1.3; color: var(--sv3-faint); }
.sv3 .sv3-cov-src .material-symbols-outlined { flex: none; font-size: 18px; color: var(--sv3-green); }
.sv3-cov-wait { padding: 10px; font-size: 14px; color: var(--sv3-faint); }
.sv3-cov-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; border-top: 1px solid var(--sv3-line); padding-top: 12px; }
.sv3-cov-dl > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.sv3-cov-dl dt { font-family: var(--sv3-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sv3-muted); }
.sv3-cov-dl dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--sv3-ink); }
.sv3 .sv3-cov-dl + .sv3-cov-btn { margin-top: 12px; }
.sv3-cov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.sv3-cov-cards li { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--sv3-line); border-radius: 12px; background: #fff; padding: 20px; }
.sv3-cov-count { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sv3-line-soft); font-family: var(--sv3-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv3-muted); }
.sv3 .sv3-cov-cards .sv3-cov-btn { align-self: flex-start; }
.sv3 .sv3-cov-cards .sv3-cov-btn[aria-pressed="true"] { border-color: var(--sv3-p); }
.sv3-cov-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; border-top: 1px solid var(--sv3-line); padding-top: 14px; font-size: 13px; line-height: 1.55; color: var(--sv3-faint); }
.sv3-cov-foot p:first-child { flex: 1 1 420px; }
.sv3 .sv3-cov-foot a { font-weight: 600; color: var(--sv3-green); text-decoration: underline; }
/* Expanded in the dialog: wider than the walkthrough dialog, the card fills it and
   the source panel runs the full height beside the map (stacked below it under 900px) */
.sv3-zoom-body .sv3-cov-card { min-width: 760px; box-shadow: none; }
dialog.sv3-zoom.sv3-zoom--map { width: min(1440px, calc(100vw - 32px)); }
.sv3-zoom--map .sv3-zoom-body { display: flex; flex-direction: column; }
.sv3-zoom--map .sv3-cov-card { flex: 1 0 auto; }
@container (min-width: 900px) {
  .sv3-zoom--map .sv3-cov-grid { flex: 1; grid-template-rows: minmax(0, 1fr); }
  .sv3-zoom--map .sv3-cov-panelwrap { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv3 .sk-tick, .sv3 .sk-pdot, .sv3-cov-mk[aria-pressed="true"] .sv3-cov-dot { animation: none !important; }
  .sv3-cov-dot { transition: none; }
}