.svi-products { --serif: "Manrope", Arial, sans-serif; }
.svi-products :focus-visible { outline: 3px solid #176ed3; outline-offset: 3px; }
.svi-products button, .svi-button { cursor: pointer; }
.svi-products button:disabled { cursor: not-allowed; opacity: .55; }
.svi-products .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.svi-products h1, .svi-products h2, .svi-products h3, .svi-products p, .svi-products figure { margin: 0; }
.svi-products h1 { font: 700 clamp(2rem,3.4vw,3rem)/1.15 var(--sans); letter-spacing: -.045em; }
.svi-products h1 { color: var(--ink); }
.svi-products h2 { font: 700 clamp(1.5rem,2.4vw,2rem)/1.2 var(--sans); letter-spacing: -.035em; }
.svi-products h3 { font: 700 1.08rem/1.3 var(--sans); }
.svi-products .eyebrow { color: var(--muted); margin-bottom: .65rem; font: 600 .85rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.svi-products .svi-caption, .svi-products figcaption, .svi-products .field-help { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.svi-product-nav { border-bottom: 1px solid var(--line); background: white; }
.svi-product-nav>.wrap { display: flex; justify-content: space-between; align-items: center; min-height: 54px; gap: 1rem; }
.svi-family { font-size: .875rem; font-weight: 700; }
.svi-product-nav nav { display: flex; gap: 1.5rem; font-size: .875rem; }
.svi-product-nav nav a { padding-block: 1rem; }
.svi-product-nav a[aria-current] { color: var(--teal); box-shadow: inset 0 -3px var(--acid); font-weight: 700; }
.svi-product-hero { padding-block: 2rem; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.4fr); gap: 2rem; align-items: center; }
.svi-intro .dek { font-size: 1.06rem; line-height: 1.65; margin: 1.25rem 0; max-width: 32rem; }
.svi-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.25rem 0 1rem; }
.svi-button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: .7rem 1rem; background: white; border: 1px solid #b7c9db; border-radius: 8px; font-weight: 700; font-size: .875rem; line-height: 1.4; }
.svi-button.primary { background: #176ed3; color: white; border-color: #176ed3; }
.svi-button:hover { border-color: var(--teal); box-shadow: 0 3px 12px #07182a12; }
.svi-shot { border: 1px solid #bbcddb; border-radius: 10px; overflow: hidden; background: #fff; }
.svi-shot img { display: block; width: 100%; height: auto; }
.hero-shot { box-shadow: none; }
.svi-shot figcaption { padding: .6rem .85rem; border-top: 1px solid var(--line); background: #fff; }
.svi-shot figcaption span { float: right; font-size: .75rem; }
.svi-section-nav { display: flex; flex-wrap: wrap; column-gap: 1.6rem; border-block: 1px solid var(--line); padding-block: .8rem; font-size: .875rem; font-weight: 600; }
.svi-section-nav a:hover { color: var(--teal); }
.svi-section { padding-block: 2rem; scroll-margin-top: 6rem; }
.svi-section-heading { display: flex; gap: 2rem; justify-content: space-between; align-items: end; margin-bottom: 1.5rem; }
.svi-section-heading>p { max-width: 24rem; font-size: .95rem; color: var(--muted); }
.svi-workflow { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.svi-workflow article>p { color: var(--muted); margin: .7rem 0 1rem; font-size: .94rem; min-height: 7.5rem; }
.svi-workflow-text article>p { min-height: 0; margin-bottom: 1.4rem; }
.svi-desktop .review-shot, .svi-wide-shot { max-width: none; }
.svi-products .svi-shot-note { margin-top: .75rem; }
.svi-inspect-section { border-top: 1px solid var(--line); }
.svi-native-comparison { border-block: 1px solid var(--line); }
.svi-appearance { border: 0; margin: 0; padding: 0; min-width: 0; }
.svi-appearance legend { padding: 0; margin-bottom: .55rem; color: var(--muted); font-size: .875rem; font-weight: 600; }
.svi-appearance-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svi-appearance>label { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem .9rem; border: 1px solid #a8bdd1; border-radius: 6px; margin: 0 .3rem .3rem 0; background: #fff; color: var(--ink); font-size: .875rem; font-weight: 700; cursor: pointer; }
.svi-appearance-radio:checked+label { background: #0b1f33; border-color: #0b1f33; color: #fff; }
.svi-appearance-radio:focus-visible+label { outline: 3px solid var(--teal); outline-offset: 3px; }
.svi-inspect-views { margin-top: .75rem; }
#inspect-night:checked~.svi-inspect-views .svi-inspect-day, #inspect-day:checked~.svi-inspect-views .svi-inspect-night { display: none; }
.svi-step { display: flex; align-items: center; gap: .75rem; }
.svi-step>span { font: 600 .95rem var(--sans); color: var(--muted); }
.svi-band { background: #eef4f9; color: var(--ink); padding-block: 2rem; scroll-margin-top: 6rem; }
.svi-band .eyebrow { color: var(--muted); }
.svi-band .svi-section-heading>p, .svi-band article p { color: #40566b; }
.svi-detections { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem 2rem; }
.svi-detections article { border-top: 1px solid var(--line); padding-top: 1rem; }
.svi-detections p { margin-top: .55rem; font-size: .94rem; }
.review-shot { max-width: 1080px; margin-inline: auto !important; }
.svi-review-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 1.5rem; }
.svi-review-notes p { color: var(--muted); font-size: .94rem; }
.svi-review-notes strong { display: block; color: var(--ink); margin-bottom: .35rem; }
.svi-table-scroll, .event-table-wrap { overflow-x: auto; }
.svi-comparison { width: 100%; border-collapse: collapse; background: white; font-size: .94rem; }
.svi-comparison caption { text-align: left; font-size: .875rem; color: var(--muted); margin-bottom: .5rem; }
.svi-comparison th, .svi-comparison td { border: 1px solid var(--line); padding: .9rem 1rem; vertical-align: top; text-align: left; }
.svi-comparison thead th { background: #0b1f33; color: white; font-size: 1.05rem; }
.svi-comparison thead small { display: block; font-size: .875rem; font-weight: 400; color: #cad8e6; margin-top: .2rem; }
.svi-comparison tbody th { width: 23%; background: #eff5fb; font-weight: 600; }
.svi-comparison td { width: 38.5%; }
.svi-files-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; border-top: 1px solid var(--line); }
.svi-files-grid p { margin-top: 1rem; color: var(--muted); }
.svi-limit { border-left: 3px solid #2db4e8; background: #e9f2fa; border-radius: 0 10px 10px 0; padding: 1.4rem; }
.svi-limit ul { padding-left: 1.15rem; margin-bottom: 0; }
.svi-limit li { padding-bottom: .55rem; font-size: .94rem; }
.svi-get-started { background: #0b1f33; color: white; padding-block: 2.5rem; }
.svi-get-started>.wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: center; }
.svi-get-started .eyebrow { color: #6bd5ff; }
.svi-get-started p:not(.eyebrow) { color: #cad8e6; font-size: .95rem; margin-top: 1rem; }
.svi-downloads { display: flex; flex-direction: column; gap: .8rem; font-size: .875rem; }
.svi-downloads a:not(.svi-button) { text-decoration: underline; text-underline-offset: 3px; }
.svi-online-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.7rem 1rem; }
.svi-online-heading h1 { font-size: clamp(2rem,3.5vw,3rem); }
.svi-online-heading p:not(.eyebrow) { max-width: 50rem; font-size: .95rem; color: var(--muted); margin-top: .65rem; }
.svi-browser-note { display: flex; gap: 1rem; align-items: center; padding: .75rem 1rem; border: 1px solid #b8d5e8; border-radius: 8px; background: #eaf6fc; font-size: .875rem; }
.svi-browser-note a, .svi-limit a:not(.svi-button) { text-decoration: underline; }
.svi-capability { display: inline-block; font-size: .75rem; font-weight: 700; color: #0c5879; background: #d2edf9; padding: .25rem .5rem; border-radius: 4px; white-space: nowrap; }
.svi-app-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; padding-block: 1rem; align-items: start; }
.svi-source-panel, .svi-online .settings-panel { border: 1px solid var(--line); background: white; border-radius: 10px; padding: 1.15rem; min-width: 0; }
.svi-online .panel-heading { margin-bottom: .9rem; }
.svi-online .panel-heading h2, .svi-online .settings-panel h2 { font-size: 1.35rem; }
.svi-online .settings-panel .field-label { font-size: .875rem; margin-top: .65rem; }
.svi-online .settings-panel>fieldset { min-width: 0; padding: 0; margin: .75rem 0; border: 0; }
.svi-online .detector-list { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; margin: .75rem 0; }
.svi-online .detector-list label { font-size: .875rem; min-width: 0; }
.svi-online .advanced-settings { margin-top: .5rem; }
.svi-online .advanced-settings summary { font-size: .875rem; }
.svi-online .settings-panel .primary-action { margin-top: .75rem; min-height: 42px; }
.svi-online .video-drop.svi-compact-drop { padding: .9rem; min-height: auto; margin: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border: 1px dashed #90b7d4; }
.svi-compact-drop strong { font-size: .95rem; }
.svi-compact-drop small { font-size: .875rem; }
.svi-compact-drop:focus-within { outline: 3px solid #176ed3; outline-offset: 3px; }
.svi-online input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--teal); }
.svi-source-toolbar { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; font-size: .875rem; }
.svi-source-toolbar label { display: flex; gap: .45rem; align-items: center; }
.svi-source-toolbar button { margin-left: auto; font-size: .875rem; background: transparent; border: 1px solid var(--line); border-radius: 5px; padding: .3rem .55rem; }
.svi-source-panel #source-notice { margin-block: .6rem; }
.svi-source-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.svi-source-table th { text-align: left; color: var(--muted); font-weight: 600; background: #f4f7fb; }
.svi-source-table td, .svi-source-table th { padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.svi-source-table td:nth-child(2) { overflow-wrap: anywhere; }
.svi-source-table .svi-source-name { color: #135dab; background: none; border: 0; padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; font-weight: 600; }
.svi-source-table small { display: block; color: var(--muted); font-size: .75rem; }
.svi-source-table tr.is-active { background: #eaf6fc; box-shadow: inset 3px 0 #176ed3; }
.svi-status { display: inline-block; padding: .2rem .45rem; font-size: .75rem; background: #eaf0f5; border-radius: 4px; white-space: nowrap; }
.svi-status.complete { background: #dbf1e8; color: #175d46; }
.svi-status.warning { background: #fff0cc; color: #765214; }
.svi-status.failed { background: #fde7e5; color: #9c302b; }
.svi-status.inspecting { background: #dff2fc; color: #105785; }
.svi-empty { padding: 1.5rem .5rem; color: var(--muted); font-size: .94rem; }
.svi-online .run-strip { padding: 1rem 0; background: #0b1f33; color: #fff; }
.svi-online .run-strip .eyebrow { color: #6bd5ff; }
.svi-online #batch-progress { font-size: .875rem; margin-bottom: .5rem; }
.svi-review-workspace { padding-block: 1.5rem 2rem; scroll-margin-top: 5rem; }
.svi-online .results-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.svi-online .result-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.svi-online .result-actions button { font-size: .875rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: white; }
.svi-review-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1rem; align-items: start; }
.svi-online .workspace-panel, .svi-online .timeline-panel { min-width: 0; border: 1px solid var(--line); background: white; border-radius: 8px; padding: .85rem; }
.svi-online .video-stage { margin-top: 0; border: 0; background: #07182a; border-radius: 6px; }
.svi-online .video-stage video { width: 100%; aspect-ratio: 16/9; object-fit: contain; max-height: 430px; }
.svi-online .video-stage video[aria-busy="true"] { visibility: hidden; }
.svi-online .area-tools { border: 0; margin-top: .7rem; padding: 0; }
.svi-online .area-instructions span { font-size: .875rem; }
.svi-online .area-buttons button { font-size: .875rem; padding: .4rem .65rem; }
.svi-online .area-summary { font-size: .8rem; }
.svi-online #timeline-chart { width: 100%; height: 250px; margin-top: .5rem; cursor: crosshair; }
.svi-online .legend { font-size: .875rem; }
.svi-online .motion-key { background: #176ed3; }
.svi-online .dark-key { background: #be7421; }
.svi-review-tabs { display: flex; gap: .25rem; margin-top: 1rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.svi-review-tabs button { background: transparent; border: 0; padding: .8rem 1.1rem; color: var(--muted); font-size: .94rem; font-weight: 600; white-space: nowrap; }
.svi-review-tabs button[aria-selected="true"] { color: #135dab; background: #eaf6fc; box-shadow: inset 0 -3px #176ed3; }
.svi-review-tabs span { margin-left: .4rem; border-radius: 4px; padding: .1rem .4rem; background: #e7eef5; font-size: .75rem; }
.svi-online [role="tabpanel"] { border: 1px solid var(--line); border-top: 0; padding: 1rem; background: white; border-radius: 0 0 8px 8px; }
.svi-online .metric-grid { grid-template-columns: repeat(3,1fr); margin-top: .8rem; }
.svi-online .metric { padding: .8rem 1rem; min-height: auto; }
.svi-online .metric strong { font-size: 1.5rem; }
.svi-online .metric span { font-size: .875rem; }
.svi-summary-details { display: grid; grid-template-columns: repeat(2,1fr); gap: .3rem 1rem; }
.svi-audio-peaks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.svi-online .diagnostic { font-size: .875rem; padding: .7rem; background: #f4f7fb; margin-top: .5rem; border-radius: 5px; }
.svi-online .diagnostic strong, .svi-online .diagnostic span { display: block; }
.svi-online .diagnostic span { color: var(--muted); overflow-wrap: anywhere; }
.svi-online .verification-banner { padding: .75rem; font-size: .875rem; }
.svi-online .event-table-wrap table { width: 100%; font-size: .875rem; }
.svi-online .event-table-wrap td { overflow-wrap: anywhere; }
.svi-online .event-thumb { width: 110px; border-radius: 4px; }
.svi-online .seek-button { font-size: .875rem; }
.svi-online #review-position { width: 100%; accent-color: #176ed3; }
.svi-online #review-time { float: right; font-family: var(--mono); font-size: .875rem; }
@media (max-width: 1000px) { .svi-product-hero { grid-template-columns: 1fr 1.15fr; gap: 1.3rem; } .svi-workflow { gap: 1rem; } .svi-section-heading { align-items: start; } .svi-app-layout { grid-template-columns: 1.25fr 1fr; } .svi-review-workspace .results-heading { align-items: start; } }
@media (max-width: 760px) { .svi-product-nav>.wrap { flex-direction: column; align-items: start; gap: 0; padding-top: .7rem; } .svi-product-nav nav { width: 100%; gap: 1.5rem; } .svi-product-nav nav a { padding-block: .65rem; } .svi-product-hero, .svi-workflow, .svi-files-grid, .svi-get-started>.wrap, .svi-app-layout, .svi-review-top { grid-template-columns: 1fr; } .svi-product-hero { padding-block: 2rem; } .svi-section-heading { flex-direction: column; gap: .75rem; } .svi-section-heading>p { max-width: none; } .svi-workflow article>p { min-height: auto; } .svi-detections, .svi-review-notes { grid-template-columns: 1fr; gap: 1rem; } .svi-get-started>.wrap { gap: 1.5rem; } .svi-comparison { min-width: 600px; } .svi-section { padding-block: 2rem; } .svi-online-heading { flex-direction: column; align-items: start; gap: .7rem; } .svi-browser-note { flex-direction: column; align-items: start; gap: .5rem; } .svi-online .results-heading { flex-direction: column; } .svi-review-tabs button { padding: .8rem .65rem; } .svi-online .video-drop.svi-compact-drop { flex-direction: column; align-items: start; gap: .25rem; } .svi-summary-details { grid-template-columns: 1fr; } .svi-online .metric-grid { grid-template-columns: repeat(2,1fr); } .svi-source-toolbar { flex-wrap: wrap; gap: .65rem; } .svi-shot figcaption span { float: none; display: block; } .svi-online #timeline-chart { height: 210px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }