:root {
  color-scheme:dark;
  --space:#1a1b38;
  --navy:#1a1b38;
  --purple:#8f84ff;
  --red:#be1621;
  --green:#2ca878;
  --orange:#ef7f18;
  --cream:#fffce4;
  --bg:var(--space);
  --ink:#fff;
  --ink-soft:#d2d2e4;
  --ink-faint:#aaaac5;
  --panel:#242648;
  --panel-border:rgba(255,255,255,.12);
  --hl:var(--purple);
  --link:#b3abff;
  --green-text:#70d5aa;
  --purple-text:#b3abff;
  --table-head:rgba(143,132,255,.09);
  --code-bg:#111225;
  --code-border:rgba(255,255,255,.16);
  --code-ink:#e8e6ff;
}
.surface { --bg:#20213f; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:110px; }
body {
  margin:0; background:var(--space); color:var(--ink);
  font-family:'Poppins','Segoe UI',Avenir,Helvetica,Arial,sans-serif;
  font-weight:400; font-size:16px; -webkit-font-smoothing:antialiased; line-height:1.65;
}
strong { font-weight:600; }
.wrap { max-width:1230px; margin:0 auto; padding:0 24px; }
section { padding:64px 0; background:var(--bg); color:var(--ink); }

h1,h2,h3 { line-height:1.18; text-wrap:balance; margin:0 0 .5em; font-weight:600; }
h1 { font-size:clamp(2.2rem,4vw,3.125rem); line-height:1.1; letter-spacing:-.035em; }
h2 { font-size:clamp(1.5rem,3vw,1.875rem); letter-spacing:-.025em; }
h3 { font-size:1.2rem; }
h1 strong, h2 strong, h3 strong { color:var(--hl); font-weight:inherit; }
p { margin:0 0 1em; }
.lede { font-size:1.13rem; color:var(--ink-soft); max-width:44em; line-height:1.7; }
.eyebrow {
  display:inline-block; font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hl); margin-bottom:12px;
}
.muted { color:var(--ink-soft); }
.small { font-size:.88rem; color:var(--ink-faint); }
.sectionhead { max-width:46em; margin-bottom:36px; }

/* Compact navigation and controls shared with the XO design language. */
.top { position:sticky; top:0; z-index:10; background:rgba(26,27,56,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--panel-border); }
.top .wrap { display:flex; align-items:center; gap:16px; min-height:76px; padding-top:12px; padding-bottom:12px; }
.logo { display:inline-flex; align-items:center; line-height:1; text-decoration:none; }
.logo img { height:28px; width:auto; display:block; }
.logo-sep { width:1px; height:22px; background:var(--panel-border); }
.logo-product { font-weight:600; letter-spacing:.08em; font-size:.95rem; color:var(--ink); text-decoration:none; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:24px; }
.top nav a { color:var(--ink-soft); text-decoration:none; font-size:.875rem; }
.top nav a:hover { color:#fff; }
.top nav a.btn { color:#121329; padding:9px 16px; min-height:40px; font-size:.875rem; }
.badge { display:inline-flex; align-items:center; gap:8px; color:var(--cream); border:1px solid var(--panel-border); border-radius:999px; padding:5px 12px; font-size:.75rem; font-weight:500; margin-bottom:24px; }
.badge .dot { width:6px; height:6px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; min-height:48px; border:1px solid transparent; border-radius:10px; font-weight:500; font-size:.875rem; text-decoration:none; text-align:center; transition:background .18s, border-color .18s; }
a { color:var(--link); }
a:focus-visible, video:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
.btn-primary { background:var(--purple); color:#121329; box-shadow:0 8px 22px -10px var(--purple); }
.btn-primary:hover { background:#a69dff; }
.btn-ghost { background:var(--panel); border-color:rgba(255,255,255,.2); color:var(--ink); }
.btn-ghost:hover { background:#30325a; border-color:var(--purple); }
.hero { position:relative; isolation:isolate; overflow:hidden; padding:48px 0 56px; background:#17182f; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('./assets/stars.svg') repeat top center / 1440px 900px,radial-gradient(ellipse at 15% 15%,rgba(143,132,255,.18),transparent 48%),radial-gradient(ellipse at 90% 60%,rgba(91,79,214,.2),transparent 55%); }
.hero::after { content:""; position:absolute; inset:auto -8% -40px; height:440px; z-index:-1; pointer-events:none; background:url('./assets/vates-waves.svg') no-repeat center / 100% 100%; opacity:.55; }
.hero .wrap { position:relative; }
.hero .lede { font-size:1rem; line-height:1.7; margin-top:0; }
.hero-note { margin:18px 0 0; font-size:.75rem; color:var(--ink-faint); }
.hero-points { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.hero-points span { border:1px solid var(--panel-border); border-radius:7px; padding:6px 10px; color:var(--cream); font-size:.75rem; }
.teaser { margin:0; min-width:0; border:1px solid rgba(143,132,255,.3); border-radius:16px; background:#15162e; box-shadow:0 28px 80px -25px rgba(0,0,0,.5); overflow:hidden; scroll-margin-top:20px; }
.teaser-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; font-size:.75rem; color:var(--ink-faint); }
.teaser-heading strong { color:var(--ink); font-size:.875rem; }
.teaser video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; background:#111225; }
.teaser figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding:14px 20px; font-size:.75rem; color:var(--ink-faint); }
.teaser figcaption strong { color:var(--ink-soft); font-weight:500; }
.teaser figcaption a { display:inline-block; margin-top:6px; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:20; background:var(--purple); color:var(--navy); padding:12px; border-radius:8px; }
.skip-link:focus { top:12px; }

/* cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px) { .cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .cards { grid-template-columns:minmax(0,1fr); } }
.card {
  background:var(--panel); border:1px solid var(--panel-border); border-radius:1rem;
  padding:26px;
}
.card h3 { margin-bottom:8px; }
.card p { margin:0; font-size:.92rem; color:var(--ink-soft); }

/* two-col */
.cols > * { min-width:0; }
.cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; }
@media (max-width:820px) { .cols { grid-template-columns:minmax(0,1fr); } }

/* numbered promise cards */
.promises { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
@media (max-width:760px) { .promises { grid-template-columns:minmax(0,1fr); } }
.promise {
  background:var(--panel); border:1px solid var(--panel-border); border-radius:1rem;
  padding:26px;
}
.promise .num {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--purple); color:var(--navy);
  font-weight:600; font-size:1.05rem; margin-bottom:14px;
}
.promise h3 { font-size:1.15rem; }
.promise p { color:var(--ink-soft); font-size:.92rem; margin:0; }

/* tables */
.tablewrap { overflow-x:auto; border:1px solid var(--panel-border); border-radius:1rem; background:var(--panel); }
table { border-collapse:collapse; width:100%; font-size:.9rem; min-width:640px; }
th, td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--panel-border); vertical-align:top; }
tr:last-child td { border-bottom:none; }
th {
  background:var(--table-head); font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--purple-text);
}
td { font-weight:400; }
td.result { color:var(--green-text); font-weight:600; font-variant-numeric:tabular-nums; }
td.lead-col, th.lead-col { font-weight:600; }
.compare td:first-child { font-weight:600; }
.compare .win { color:var(--green-text); font-weight:600; }

/* lists */
ul.checks { list-style:none; padding:0; margin:0 0 1em; }
ul.checks li { padding-left:30px; position:relative; margin-bottom:10px; }
ul.checks li::before {
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--green-text); font-weight:700;
}
ul.dashes { list-style:none; padding:0; margin:0; }
ul.dashes li { padding-left:22px; position:relative; margin-bottom:8px; color:var(--ink-soft); font-size:.95rem; }
ul.dashes li::before { content:"–"; position:absolute; left:0; color:var(--hl); font-weight:700; }

/* code */
pre {
  background:var(--code-bg); color:var(--code-ink); border:1px solid var(--code-border);
  border-radius:1rem; padding:20px 24px; overflow-x:auto; font-size:.88rem; line-height:1.7; margin:0;
}
code { font-family:ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace; }
p code, li code, td code {
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:5px; padding:1px 6px; font-size:.85em; color:var(--purple-text); font-weight:400;
}
pre .c { color:#8d8cab; }
pre .cmd { color:#fff; font-weight:600; }
pre .dim { color:#8d8cab; }
pre .g { color:#56c288; }
pre .a { color:#e0a94a; }
pre .r { color:#ef6a5f; }
pre .g b, pre .a b, pre .r b { font-weight:700; }
/* terminal frame: a title bar with traffic-light dots; the code scrolls under it */
pre.term { position:relative; padding:0; overflow:hidden; }
pre.term::before {
  content:attr(data-title);
  position:absolute; top:0; left:0; right:0; height:2.3rem; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:#171834; border-bottom:1px solid rgba(255,255,255,.07);
  font-family:ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
  font-size:.72rem; color:#8d8cab; letter-spacing:.01em;
}
pre.term::after {
  content:""; position:absolute; top:.86rem; left:1rem; z-index:2;
  width:10px; height:10px; border-radius:50%;
  background:#ec6a5e; box-shadow:17px 0 0 #f4bf4f, 34px 0 0 #61c554;
}
pre.term code { display:block; overflow-x:auto; padding:3.15rem 24px 20px; }

/* links + footer */
a.doc { color:var(--link); text-decoration:none; font-weight:600; }
a.doc:hover { text-decoration:underline; }
footer { background:var(--space); color:rgba(255,255,255,.7); padding:42px 0; font-size:.88rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; align-items:center; }
footer a { color:var(--purple); text-decoration:none; }
footer a:hover { text-decoration:underline; }

@media (prefers-reduced-motion: reduce) { .btn { transition:none; } }


/* hero grid + diagram */
.hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:36px 56px; align-items:center; }
.hero-wide .cinema { grid-column:1 / -1; width:100%; max-width:1080px; margin:0 auto; }
.hero-wide h1 { margin-bottom:0; }
.hero-summary .btns { margin-top:22px; }
.hero-summary .hero-points { margin-top:18px; }
@media (max-width:860px) { .hero-grid { grid-template-columns:minmax(0,1fr); } }
.diagram { width:100%; max-width:360px; height:auto; display:block; margin:12px auto 0; }

/* stat tiles */
.stats-section { padding-top:32px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:760px) { .stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .stats { grid-template-columns:minmax(0,1fr); } }
.stat {
  background:var(--panel); border:1px solid var(--panel-border); border-radius:1rem;
  padding:24px 22px 20px; border-top:2px solid rgba(143,132,255,.5);
}
.stat b {
  display:block; font-size:2.1rem; font-weight:600; line-height:1.1;
  color:var(--ink); font-variant-numeric:tabular-nums; margin-bottom:6px;
}
.stat.green b { color:var(--green-text); }
.stat.purple b { color:var(--purple-text); }
.stat span { font-size:.9rem; color:var(--ink-soft); display:block; }

/* Keep the full navigation available on small screens. */
@media (max-width:900px) {
  .top .wrap { flex-wrap:wrap; gap:10px 16px; }
  .top nav { width:100%; margin:0; justify-content:space-between; gap:12px; }
  .top nav a { font-size:.75rem; }
  .top nav a.btn { font-size:.75rem; padding:8px 12px; }
  .hero { padding-top:48px; }
}
@media (max-width:560px) {
  .wrap { padding-left:20px; padding-right:20px; }
  section { padding:56px 0; }
  .hero-grid { gap:32px; }
  .badge { font-size:.7rem; }
  .btns .btn { flex:1 1 auto; }
  .teaser-heading, .teaser figcaption { padding:12px 14px; }
  .top nav { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; }
  .top nav .btn { grid-column:1 / -1; }
  html { scroll-padding-top:190px; }
}

.teaser-player { position:relative; }
.video-start { position:absolute; inset:0; display:grid; place-items:center; width:100%; border:0; background:rgba(17,18,37,.12); cursor:pointer; color:#121329; }
.video-start[hidden] { display:none; }
.video-start span { display:grid; place-items:center; width:68px; height:68px; padding-left:4px; border-radius:50%; background:var(--purple); box-shadow:0 4px 32px rgba(0,0,0,.5); font-size:24px; }
.video-start:hover span { background:#b3abff; }
.video-start:focus-visible { outline:3px solid var(--purple); outline-offset:-4px; }

/* Keep the explanation and its status example together, without stacked section padding. */
.overview-explainer { padding-bottom:28px; }
.status-section { padding-top:28px; }
.status-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:center; }
.status-copy, .status-terminal { min-width:0; }
.status-copy p { font-size:.95rem; }
.surface { background-image:url('./assets/stars.svg'); background-size:1440px 900px; }
@media (max-width:860px) {
  .hero-wide { gap:28px; }
  .status-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (max-width:560px) {
  .hero { padding-top:32px; }
  .hero::after { height:220px; }
  .overview-explainer { padding-bottom:20px; }
  .status-section { padding-top:20px; }
  .video-start span { width:56px; height:56px; font-size:20px; }
}