/* Navigation, type scale, screenshot stage, and footer follow the Cuebots product site. */
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-light-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-medium-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-semibold-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cue Sans"; src: url("fonts/cue-sans-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --footer-bg: var(--bg);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --link: #0066cc;
  --nav-bg: rgb(245 245 247 / 82%);
  --nav-height: 52px;
  --max: 1200px;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-brand: "Cue Sans", var(--font-display);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #25252b;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --line: #424245;
  --link: #2997ff;
  --nav-bg: rgb(37 37 43 / 84%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #25252b;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --line: #424245;
    --link: #2997ff;
    --nav-bg: rgb(37 37 43 / 84%);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 17px; font-weight: 400; line-height: 1.4705882353; letter-spacing: normal; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { font-family: var(--font-brand); font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible { outline: 3px solid #80bdff; outline-offset: 5px; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 10px 18px; background: var(--bg); color: var(--text); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.nav { position: sticky; top: 0; z-index: 10; height: var(--nav-height); border-bottom: 1px solid transparent; color: white; transition: background-color .2s, color .2s; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--max); height: 100%; margin: auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-brand); font-size: 21px; font-weight: 600; line-height: 1.1904761905; letter-spacing: .011em; }
.brand img { border-radius: 23%; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 980px; background: white; color: #314cb4; font-size: 17px; font-weight: 400; line-height: 1.1764805882; transition: background-color .2s; }
.button:hover { background: #edf1ff; }
.button-small { padding: 4px 12px; font-size: 12px; line-height: 1.3333733333; }
.nav.floating { background: var(--nav-bg); border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); color: var(--text); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.nav.floating .button { background: #4165db; color: white; }
.hero-area { --stage-gutter: max(48px, env(safe-area-inset-left), env(safe-area-inset-right)); --stage-bottom: 96px; --window-width: min(1200px, 100vw - 2 * var(--stage-gutter)); position: relative; isolation: isolate; }
.hero-backdrop { position: absolute; z-index: -1; inset: calc(-1 * var(--nav-height)) 0 calc(var(--stage-bottom) + var(--window-width) * 1840 / 2880 / 2); background: #172984; background-image: linear-gradient(rgb(11 22 73 / 35%), rgb(11 22 73 / 35%)), url("assets/hero-background.webp"); background-position: center top; background-size: cover; background-repeat: no-repeat; }
.hero { max-width: 980px; margin: auto; padding: 72px max(24px, env(safe-area-inset-right)) 56px max(24px, env(safe-area-inset-left)); text-align: center; color: white; }
h1 { margin: 0; font-size: 80px; line-height: 1.05; letter-spacing: normal; }
.lede { max-width: 700px; margin: 32px auto 36px; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.381002381; letter-spacing: .011em; color: rgb(255 255 255 / 86%); }
.fineprint { margin: 18px 0 0; color: rgb(255 255 255 / 86%); font-size: 12px; line-height: 1.3333733333; }
.stage { position: relative; padding: 24px var(--stage-gutter) var(--stage-bottom); }
.window { display: block; max-width: 1200px; margin: auto; }
.window img { width: 100%; height: auto; }
.window picture { display: block; overflow: hidden; border-radius: 12px; }
.compatibility-section { max-width: 900px; margin: 0 auto; padding: 0 24px 96px; text-align: center; }
.compatibility-logo { width: 72px; height: 72px; margin: 0 auto 20px; }
.compatibility-section h2, .feature-introduction h2 { margin: 0; font-size: 64px; line-height: 1.0625; }
.compatibility-section > p, .feature-introduction > p { max-width: 760px; margin: 24px auto 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.381002381; letter-spacing: .011em; color: var(--muted); }
.feature-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; }
.feature-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 80px; min-width: 0; }
.feature-copy { min-width: 0; max-width: 420px; }
.feature-detail h2 { margin: 0; font-size: 48px; line-height: 1.0834933333; }
.feature-copy p { margin: 24px 0 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.381002381; letter-spacing: .011em; color: var(--muted); }
.panel-shot { display: block; min-width: 0; width: 360px; max-width: 100%; margin: 0 auto; }
.panel-shot picture, .panel-shot img { display: block; width: 100%; height: auto; }
.feature-detail-reversed .feature-copy { order: 2; }
.feature-detail-reversed .panel-shot { order: 1; width: 410px; }
.feature-detail-reversed .feature-copy { justify-self: end; }
.visual-search-section { padding: 0 max(24px, env(safe-area-inset-left)) 96px; background: var(--footer-bg); }
.feature-introduction { max-width: 900px; margin: 0 auto 48px; text-align: center; }
.feature-introduction strong { font-weight: 600; color: var(--text); }
.similar-example { max-width: 1200px; margin: 0 auto; }
.demo-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.demo-preview { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: white; cursor: pointer; }
.demo-preview picture, .demo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; background: rgb(19 37 61 / 90%); box-shadow: 0 8px 32px rgb(0 0 0 / 20%); transform: translate(-50%, -50%); transition: background-color .2s; pointer-events: none; }
.demo-play svg { width: 36%; height: 36%; fill: currentColor; }
.demo-preview:hover .demo-play { background: #1971c2; }
.demo-preview:focus-visible, .demo-video:focus-visible { outline: 3px solid #80bdff; outline-offset: -6px; }
.demo-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bg); }
.demo-status { position: absolute; z-index: 2; bottom: 20px; left: 50%; max-width: calc(100% - 32px); margin: 0; padding: 8px 16px; border-radius: 8px; background: var(--bg); color: var(--text); text-align: center; transform: translateX(-50%); }
.demo-player [hidden] { display: none; }
.site-footer { background: var(--footer-bg); border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.footer-main { max-width: var(--max); margin: auto; padding: 28px max(24px, env(safe-area-inset-right)) 28px max(24px, env(safe-area-inset-left)); }
.footer-about { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.footer-about .brand { font-size: 17px; line-height: 1.2353641176; letter-spacing: normal; }
.theme-switch { display: inline-flex; align-items: center; flex-shrink: 0; width: 130px; height: 24px; margin: 0; padding: 1px; border: 1px solid #0071e3; border-radius: 999px; }
.theme-switch label { position: relative; display: inline-flex; flex: 1; justify-content: center; align-items: center; min-width: 0; height: 20px; border-radius: 999px; color: var(--link); font-size: 12px; line-height: 1; cursor: pointer; }
.theme-switch input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.theme-switch label:hover { background: rgb(0 113 227 / 12%); }
.theme-switch label:has(input:checked) { background: #0071e3; color: white; }
.theme-switch label:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
@media (max-width: 1068px) { h1 { font-size: 64px; line-height: 1.0625; } .compatibility-section h2, .feature-introduction h2 { font-size: 48px; line-height: 1.0834933333; } .feature-detail h2 { font-size: 40px; line-height: 1.1; } .feature-detail { gap: 40px; } }
@media (max-width: 734px) {
  .nav-inner { justify-content: space-between; gap: 16px; }
  .hero-area { --stage-gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); --stage-bottom: 56px; }
  .hero { padding-top: 48px; padding-bottom: 40px; }
  h1 { font-size: 48px; line-height: 1.0834933333; }
  .lede { margin-top: 24px; margin-bottom: 28px; font-size: 19px; line-height: 1.4211026316; letter-spacing: .012em; }
  .hero-backdrop { background-position: 62% top; }
  .compatibility-section { padding-top: 0; padding-bottom: 64px; }
  .compatibility-logo { width: 56px; height: 56px; margin-bottom: 16px; }
  .compatibility-section h2, .feature-introduction h2 { font-size: 40px; line-height: 1.1; }
  .compatibility-section > p, .feature-introduction > p { font-size: 19px; line-height: 1.4211026316; letter-spacing: .012em; }
  .feature-gallery { gap: 56px; padding-bottom: 56px; }
  .feature-detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feature-copy, .feature-detail-reversed .feature-copy { max-width: 420px; margin: 0 auto; text-align: center; justify-self: center; order: 0; }
  .feature-detail h2 { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .feature-copy p { font-size: 19px; line-height: 1.4211026316; letter-spacing: .012em; margin-top: 20px; }
  .panel-shot { width: 316px; }
  .feature-detail-reversed .panel-shot { width: 368px; order: 1; }
  .visual-search-section { padding-top: 0; padding-bottom: 56px; }
  .feature-introduction { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }