/* Geist and Geist Mono, self-hosted (Latin + Latin Extended; variable weights in one file each). They used to come from
   fonts.googleapis.com: a second domain whose stylesheet blocked the first paint (~0.9s on mobile). Files are named by
   content hash and cached for a year; build.mjs preloads the two Latin ones on every page. */
@font-face{font-family:"Geist";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/geist-latin-ext-66a33f6a.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/geist-latin-9d846db8.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}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/geist-mono-latin-ext-fbd56f5f.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/geist-mono-latin-0e04bb6e.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}

/* Theme tokens. Dark is the default; every page's head script (stamped by tools/build.mjs) sets
   data-theme="light" on <html> when the visitor picks Light, or picks System on a light OS (see site.js).
   .skin-dark islands (the terminal) keep the dark tokens inside a light page. */
:root, :root[data-theme="light"] .skin-dark {
  --bg: #050807;
  --bg-1: #0b0b0c;
  --bg-2: #121214;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --fg-0: #fff;
  --fg: #f2f2f2;
  --fg-2: #a9a9a9;
  --fg-3: #6e6e6e;
  --accent: #13E989;
  --mint: #86FFC9;
  --mint-hi: #b8ffde;
  --mint-hi-2: #c8ffe6;
  --mint-hi-3: #b6ffe0;
  --lit: #5ef2b0;
  --cyan: #22d3ee;
  --green: #4ade80;
  --red: #f87171;
  --amber: #fbbf24;
  --grad: linear-gradient(90deg, #e6fff4 0%, #86FFC9 35%, #13E989 100%);
  --title-grad: linear-gradient(180deg, #fff 0%, #fff 55%, #d9d9d9 100%);
  --ink: 255 255 255;   /* tints and hairlines: rgb(var(--ink) / a) */
  --sh: 1;              /* shadow strength: rgb(0 0 0 / calc(a * var(--sh))) */
  --inv: #fff;          /* primary button, toast */
  --on-inv: #000;
  --nav-bg: rgb(5 8 7 / .55); /* the dark --bg (V19) at the same alpha, so the nav band matches the page */
  --panel: #080809;     /* mega menu, drawer */
  --panel-2: #0c0d0d;
  --card-a: #0d0d0e;
  --card-b: #09090a;
  --term: #060607;
  --node: #141417;
  --node-dot: #1a1a1d;
  --node-on: #0f2a1f;
  --find: #0c2419;
  --logo-c: #e6e6e6;
  --thumb: #2a2a2b;
  --thumb-2: #3a3a3b;
  /* images: --silhouette turns a logo into one ink colour; --dark-art redraws art made for a dark ground on a light one;
     --flip/--flip-blend are unset here, so art drawn on white keeps the inversion its rule gives as the fallback */
  --silhouette: brightness(0) invert(1);
  --dark-art: none;
  --flip: initial;
  --flip-blend: initial;
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #fff;
  --bg-1: #f0f2f1;
  --bg-2: #e6e9e8;
  --line: rgba(10, 12, 11, .14);
  --line-2: rgba(10, 12, 11, .22);
  --fg-0: #000;
  --fg: #0b0c0c;
  --fg-2: #474b4a;
  --fg-3: #656a69;
  --accent: #0b9e5e;
  --mint: #06764a;
  --mint-hi: #067a47;
  --mint-hi-2: #067a47;
  --mint-hi-3: #0fbf73;
  --lit: #0aa860;
  --cyan: #0891b2;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --grad: linear-gradient(90deg, #064e33 0%, #08854f 45%, #0fbf73 100%);
  --title-grad: linear-gradient(180deg, #0b0c0c 0%, #0b0c0c 55%, #3d4241 100%);
  --ink: 10 12 11;
  --sh: .24;
  --inv: #0b0c0c;
  --on-inv: #fff;
  --nav-bg: rgba(255, 255, 255, .72);
  --panel: #fff;
  --panel-2: #fff;
  --card-a: #fff;
  --card-b: #fafbfa;
  --term: #fff;
  --node: #f3f5f4;
  --node-dot: #e4e8e6;
  --node-on: #e2f8ed;
  --find: #e2f8ed;
  --logo-c: #2a2d2c;
  --thumb: #d5d8d7;
  --thumb-2: #b9bdbc;
  --silhouette: brightness(0);
  --dark-art: invert(1) hue-rotate(180deg);
  --flip: none;
  --flip-blend: normal;
  color-scheme: light;
}

/* ───── Scrollbars ───── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--thumb-2); }
::-webkit-scrollbar-corner { background: var(--bg); }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* no scroll-behavior: smooth on html: it also animated the browser restoring the scroll position on reload (the page
   glided down to where the visitor was). In-page links scroll smoothly from site.js instead. */
/* The page's own scrollbar floats over the content instead of taking width from it: a classic (always-on) scrollbar
   shrank the page by its width on the right only (Chrome ignores scrollbar-gutter: both-edges on the root), so every
   page sat a few pixels left of centre. On mouse and trackpad devices the native one is hidden and site.js draws a
   thin thumb that shows while the page scrolls or the pointer is at the right edge, and can be dragged. Touch devices
   keep their native overlay scrollbar, which never took width. Inner scrollers keep the styled scrollbars above. */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}
.page-scroll { position: fixed; z-index: 1000; top: 0; right: 0; bottom: 0; width: 14px; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.page-scroll[hidden] { display: none; }
.page-scroll.on { opacity: 1; pointer-events: auto; }
.page-scroll i { position: absolute; top: 0; right: 3px; width: 6px; min-height: 32px; border-radius: 999px; background: rgb(var(--ink) / .32); transition: width .15s, background .15s; }
.page-scroll:hover i, .page-scroll.drag i { width: 8px; background: rgb(var(--ink) / .5); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip, not hidden: hidden still lets the page be scrolled sideways */
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code, pre { font-family: var(--mono); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(174, 255, 220, .28); color: var(--fg-0); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.grad { color: var(--accent); }

/* ───── Buttons ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary { background: var(--inv); color: var(--on-inv); }
.btn-primary:hover { box-shadow: 0 10px 30px -10px rgb(var(--ink) / .45); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn-ghost { border: 1px solid var(--line-2); color: var(--fg); }
.btn-ghost:hover { background: rgb(var(--ink) / .06); border-color: rgb(var(--ink) / .26); }
/* "Sign up now": the label, then the two ways in (Google, email) as white chips; the signup page offers both */
a.btn.btn-signup { gap: 10px; padding-right: 9px; } /* beats sized variants like .hero-actions .btn */
.su-icons { display: inline-flex; gap: 4px; flex: none; }
.su-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.su-ico svg { width: 15px; height: 15px; }
.su-mail svg { fill: none; stroke: #1f2329; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-signup:not(.btn-primary) .su-ico { box-shadow: none; }
.hero-actions .btn-signup .su-ico, .nav-drawer-cta .btn-signup .su-ico { width: 28px; height: 28px; }

/* ───── Nav (markup stamped by tools/build.mjs; behaviour in site.js) ───── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: var(--nav-bg);
  border-bottom: 1px solid rgb(var(--ink) / .06);
  transition: background .25s var(--ease);
}
.nav.menu-active, .nav.drawer-open { background: var(--panel); }
.nav-inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; height: 68px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { display: block; width: auto; height: 26px; }
.nav-menu { display: flex; align-items: center; min-width: 0; }
.nav-list { list-style: none; display: flex; gap: 2px; font-size: 14px; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px;
  color: var(--fg-2); font-size: 14px; white-space: nowrap; transition: color .2s, background .2s;
}
.nav-trigger:hover, .nav-item.open > .nav-trigger { color: var(--fg); background: rgb(var(--ink) / .06); }
.nav-item.is-current > .nav-trigger { color: var(--fg); }
.nav-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .25s var(--ease), opacity .2s; }
.nav-item.open .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.nav-signin { font-size: 14px; color: var(--fg-2); padding: 0 8px; transition: color .2s; white-space: nowrap; }
.nav-signin:hover { color: var(--fg); }
.nav-toggle, .nav-drawer-cta { display: none; }

/* mega menu: a full-width panel under the bar */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / calc(.9 * var(--sh)));
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.nav-item.open > .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s; }
.mega-inner { max-width: 1440px; margin: 0 auto; padding: 36px 48px 44px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 250px)) minmax(280px, 1fr); gap: 40px; }
.mega-col { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.mega-h { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); margin-bottom: 12px; }
.mega ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mega ul a { display: block; margin: 0 -10px; padding: 6px 10px; border-radius: 8px; font-size: 14.5px; line-height: 1.4; color: var(--fg); transition: background .15s, color .15s; }
.mega ul a:hover { background: rgb(var(--ink) / .06); }
.mega ul a[aria-current="page"] { color: var(--mint); background: rgba(19,233,137,.08); }
.mega-feature {
  position: relative; align-self: start; justify-self: end; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--panel-2);
  transition: border-color .25s, transform .25s var(--ease);
}
.mega-feature:hover { border-color: rgb(var(--ink) / .2); }
.mega-feature-tag { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.mega-feature b { font-size: 17px; font-weight: 560; line-height: 1.35; letter-spacing: -0.015em; }
.mega-feature-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--mint); }
.mega-feature-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.mega-feature:hover .mega-feature-cta svg { transform: translateX(3px); }
.nav-scrim { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 1; background: rgb(0 0 0 / calc(.55 * var(--sh))); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.nav.menu-active .nav-scrim { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
/* Locking the page for the drawer.
   `overflow: hidden` on <html> alone stops the scroll but also stops `position: sticky` working:
   the nav drops back to its static place at the top of the document, so opening the menu after
   scrolling put the drawer a screenful or more above the viewport, with no way to scroll to it.
   So the nav is pinned to the viewport while the drawer is open, and the body is taken out of flow
   at an offset — which is also the only lock iOS Safari honours. site.js sets --nav-lock-y and
   restores the scroll position on close. */
html.nav-locked, html.nav-locked body { overflow: hidden; }
html.nav-locked body { position: fixed; top: calc(-1 * var(--nav-lock-y, 0px)); left: 0; right: 0; width: 100%; }
html.nav-locked .nav { position: fixed; top: 0; left: 0; right: 0; }

/* ───── Hero ───── */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 68px); min-height: calc(100svh - 68px);
  display: flex; flex-direction: column;
}
.proof-section::after, .section::after, .final::after { /* hairline divider, solid (DE-AI V25) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
}
/* the decorative blueprint grid that used to sit behind the hero (.hero-grid) is gone (DE-AI V26);
   the demo's own canvas and map grids are unaffected */

.announce {
  position: relative; z-index: 2; align-self: center; margin-top: 40px;
  display: inline-flex; align-items: center; gap: 18px; padding: 7px 16px 7px 12px;
  border-radius: 6px; border: 1px solid var(--line); background: none;
  font-size: 14px; color: var(--fg-2);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.announce::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; margin-right: -8px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.announce-short { display: none; }
.announce b { font-weight: 500; color: var(--fg); display: inline-flex; gap: 8px; white-space: nowrap; }
.announce b span { transition: transform .25s var(--ease); }
.announce:hover { border-color: var(--line-2); background: rgb(var(--ink) / .05); }
.announce:hover b span { transform: translateX(3px); }

.hero-inner {
  position: relative; z-index: 2; flex: 1;
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 48px 48px 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, calc(100% - 900px)) minmax(0, 1fr); align-items: center; gap: 40px; /* side columns never drop below ~400px; the middle yields first (the demo stage sits over it) */
}
.hero-left { min-width: 0; }
.hero-title {
  font-size: clamp(36px, 3.3vw, 48px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 400; text-wrap: balance;
  background: var(--title-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em; margin-bottom: -.06em; /* keep descenders inside the clip */
}

/* ───── Agent prompt CTA ───── */
.agent-cta { margin-top: 44px; display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.agent-tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 16px 4px 8px; margin-bottom: -4px;
  background: #19191b; border-radius: 12px 12px 0 0;
  color: #9a9a9a; font-size: 12px; font-weight: 500; letter-spacing: -0.01em;
}
.agent-tab::after { /* shoulder curving into the prompt bar */
  content: ""; position: absolute; right: -12px; bottom: 4px; width: 12px; height: 12px;
  background: radial-gradient(circle at 100% 0, transparent 11.5px, #19191b 12px);
}
.agent-icons { display: inline-flex; }
.ai {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #19191b; margin-left: -7px;
}
.ai:first-child { margin-left: 0; }
.ai svg { width: 11px; height: 11px; }
.ai-claude { background: #d97757; }
.ai-agent { background: #3b82f6; }
.ai-cursor { background: #2e2e32; }
.agent-prompt {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px 12px 16px; text-align: left;
  background: #242427; border-radius: 0 14px 14px 14px;
  font-family: var(--mono); font-size: 13px; color: #f5f5f5; letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 rgb(var(--ink) / .06);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.agent-prompt:hover {
  background: #2a2a2e; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(var(--ink) / .08), 0 0 56px -14px rgba(19,233,137,.45);
}
.agent-prompt:active { transform: translateY(0); }
.agent-caret { color: #8a8a8a; }
/* the signup prompt is long: one line that scrolls sideways (wheel, trackpad, swipe), its edges fading where more
   text runs on (main.js sets .more-l/.more-r), and the whole command in a hint on hover. A click copies all of it. */
.agent-text {
  flex: 1; min-width: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.agent-text::-webkit-scrollbar { display: none; }
.agent-text.more-l { --fl: 28px; }
.agent-text.more-r { --fr: 36px; }
@media (min-width: 1121px) { .agent-text { max-width: 262px; } } /* "Create a new Coralogix account", then it fades */
.hero-inner:has(.agent-prompt:is(:hover, :focus-visible)) { z-index: 4; } /* the hint over the hero demo (.hero-stage is z 3), only while it shows */
.agent-tip { display: none; }
@media (hover: hover) {
  .agent-tip {
    display: block; position: absolute; left: 0; top: calc(100% + 10px); z-index: 40; pointer-events: none;
    width: max-content; max-width: min(400px, calc(100vw - 32px)); padding: 12px 14px 11px; border-radius: 12px;
    background: #17191f; color: #f5f5f5; font: 13px/1.55 var(--mono); letter-spacing: -.005em; white-space: normal; overflow-wrap: anywhere; text-align: left;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 16px 40px -12px rgb(0 0 0 / .7);
    opacity: 0; transform: translateY(-4px); transition: opacity .18s var(--ease), transform .22s var(--ease);
  }
  .agent-tip::before { /* the nub, pointing at the prompt */
    content: ""; position: absolute; left: 22px; top: -5px; width: 10px; height: 10px; transform: rotate(45deg);
    background: inherit; box-shadow: -1px -1px 0 rgb(255 255 255 / .1);
  }
  .agent-prompt:is(:hover, :focus-visible) .agent-tip { opacity: 1; transform: none; transition-delay: .15s; }
  .agent-tip .at-h { display: block; margin-bottom: 6px; font: 500 12px/1 var(--mono); color: rgb(255 255 255 / .45); }
  .agent-tip .at-cmd { display: block; color: #f2f2f3; }
  .agent-tip .at-cmd b { font-weight: 400; color: var(--mint); }
  .agent-tip .at-f { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgb(255 255 255 / .08);
    font: 12px/1.3 "Geist", system-ui, sans-serif; letter-spacing: 0; color: rgb(255 255 255 / .55); }
  .agent-tip .at-f svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .final .agent-tip { top: auto; bottom: calc(100% + 10px); } /* nothing under the closing CTA to sit on */
  .final .agent-tip::before { top: auto; bottom: -5px; box-shadow: 1px 1px 0 rgb(255 255 255 / .1); }
}
.agent-copy {
  width: 16px; height: 16px; flex: none; margin-left: 8px;
  fill: none; stroke: #9a9a9a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s;
}
.agent-prompt:hover .agent-copy { stroke: var(--fg-0); }
.final .agent-cta { align-items: center; margin-top: 56px; }
.final-inner > .agent-cta { margin-left: auto; margin-right: auto; }
.final .agent-tab { align-self: flex-start; }

/* customer strip at the bottom of the fold */
.customers {
  position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.customers-track { display: contents; } /* desktop/tablet: logos are direct flex items; phones turn this into a marquee */
.customers [data-clone] { display: none; }
.clogo {
  display: inline-flex; align-items: center; gap: 10px; color: var(--logo-c); fill: currentColor;
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
  transition: color .3s var(--ease);
}
.clogo svg { height: 26px; width: auto; flex: none; }
.logo-masterclass svg { height: 30px; }
.logo-sophos svg { height: 22px; }
.logo-jfrog svg { height: 54px; }
.logo-ferrari svg { height: 26px; }
.logo-tradeweb svg { height: 28px; margin-right: -4px; }

@keyframes marquee { to { transform: translateX(-50%); } } /* track holds the logo set twice; each logo carries the gap as margin-right so -50% is exact */

@media (max-width: 1280px) { /* laptop: tighten the three-column hero before it collapses */
  .hero-inner { gap: 32px; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, calc(100% - 864px)) minmax(0, 1fr); }
  .hero-title { font-size: clamp(34px, 3.3vw, 46px); }
  .hero .agent-prompt { font-size: 12px; padding: 11px 14px; gap: 10px; }
  .hero .agent-tab { height: 32px; font-size: 11.5px; }
}
@media (max-width: 1120px) {
  .nav-inner { padding: 0 24px; }
  /* single column: headline, prompt card, then the demo card (hero-demo.js) */
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); align-content: start; text-align: center; justify-items: center; padding: 32px 16px 36px; gap: 0; }
  /* logo strip: one-row marquee with soft edges on every single-column width */
  .customers {
    display: block; max-width: none; overflow: hidden; padding: 8px 0 36px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .customers-track { display: flex; align-items: center; width: max-content; animation: marquee 32s linear infinite; }
  .customers [data-clone] { display: inline-flex; }
  .clogo { font-size: 20px; gap: 8px; margin-right: 56px; } .clogo svg { height: 20px; } .logo-sophos svg { height: 17px; }
  .logo-ferrari svg { height: 20px; } .logo-masterclass svg { height: 23px; } .logo-jfrog svg { height: 34px; } .logo-tradeweb svg { height: 22px; }
  .hero-left { display: contents; }
  .hero-title { font-size: clamp(38px, 5vw, 48px); }
  .hero .agent-cta { order: 1; margin-top: 30px; text-align: left; }
  .announce { gap: 12px; padding: 7px 14px; font-size: 13px; }
  .announce::before { display: none; }
  .announce-long { display: none; }
  .announce-short { display: inline; }
}
@media (min-width: 900px) and (max-width: 1120px) { /* small laptops / tablets in landscape: two columns, full-height fold */
  .hero { min-height: calc(100svh - 69px); }
  .hero-inner {
    flex: 1; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto auto auto; column-gap: 32px;
    align-content: center; align-items: center; justify-items: start; text-align: left; padding: 32px 48px 40px;
  }
  .hero-title { grid-column: 1; grid-row: 1; font-size: clamp(42px, 4.8vw, 50px); }
  .hero .agent-cta { grid-column: 1; grid-row: 2; margin-top: 36px; }
  .customers { padding: 0 0 40px; }
}

/* ───── Sections ───── */
.section { padding: 160px 0; position: relative; }
.section-head { max-width: 860px; margin: 0 auto 72px; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-2); margin-bottom: 22px;
}
.section-head h2, .ask h2, .final h2 {
  font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 560;
}
.section-head p { margin-top: 24px; color: var(--fg-2); font-size: 18px; line-height: 1.7; max-width: 640px; margin-left: auto; margin-right: auto; }
.lead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.lead-row .section-head { margin: 0; text-align: left; }
.link { display: inline-flex; align-items: center; color: var(--mint); font-weight: 500; font-size: 15px; transition: color .2s; }
.link:hover { color: var(--fg-0); }
.lead { margin-top: 22px; color: var(--fg-2); font-size: 18px; line-height: 1.7; max-width: 520px; }

/* spacing between metadata parts (dates, venue, read time), instead of a "·" glyph (DE-AI V22a);
   a page splits the run into elements and puts this between them */
.meta-gap { display: inline-block; margin-inline: .6em; }

/* ───── Proof ───── */
.proof-section { position: relative; padding: 64px 0; }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.proof div { padding-left: 22px; border-left: 1px solid var(--line-2); }
.proof b {
  display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.proof span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

/* ───── Cards (shared) ───── */
.card {
  position: relative; padding: 36px; border-radius: 20px;
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-a), var(--card-b)); overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(var(--ink) / .04);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--cx, 50%) var(--cy, 50%), rgba(19,233,137,.13), transparent 60%);
}
/* card hovers only where hover exists (DE-AI V11); the spotlight is the card's one hover effect */
@media (hover: hover) {
  .card:hover { border-color: rgb(var(--ink) / .2); }
  .card:hover::before { opacity: 1; }
}
.card > * { position: relative; }

/* ───── Compare ───── */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.compare .card { padding: 40px; }
.compare h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 26px; }
.card-legacy h3 { color: var(--fg-2); }
.compare ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.compare li { display: flex; gap: 14px; align-items: flex-start; color: var(--fg-2); font-size: 16px; line-height: 1.55; }
.compare li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.compare li svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-legacy li i { background: rgb(var(--ink) / .06); color: var(--fg-3); }
.card-lake {
  border-color: var(--line-2);
  background: var(--card-b);
}
@media (hover: hover) { .card-lake:hover { border-color: rgba(19,233,137,.7); } }
.card-lake li { color: var(--fg); }
.card-lake li i { background: rgba(19,233,137,.15); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(19,233,137,.3); }

/* ───── Flow (how it works) ───── */
#how::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; width: min(900px, 100%); height: 500px; margin: 0 auto;
  background: radial-gradient(closest-side, rgba(34,211,238,.07), transparent 70%); pointer-events: none;
}
.flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.5fr) 90px minmax(0, 1fr); align-items: center; gap: 0; }
.flow-col { display: flex; flex-direction: column; gap: 10px; }
.flow-label { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); margin-bottom: 8px; }
.chip {
  position: relative; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1);
  font-size: 14px; color: var(--fg-2); transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.flow-col:first-child .chip { padding-left: 34px; }
.flow-col:first-child .chip::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--c, var(--accent)); box-shadow: 0 0 10px var(--c, var(--accent));
}
.chip-agent { display: flex; gap: 10px; align-items: baseline; }
.chip-agent b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent); min-width: 34px; }

.beam { height: 2px; position: relative; background: var(--line); overflow: hidden; }
.beam span {
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent);
  animation: beam 2.2s linear infinite;
}
.beam-rev span { animation-delay: 1.1s; }
@keyframes beam { to { left: 100%; } }

.lake { display: flex; flex-direction: column; gap: 12px; }
.lake-layer { padding: 22px 24px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-1); box-shadow: inset 0 1px 0 rgb(var(--ink) / .04); }
.lake-n { font-family: var(--mono); font-size: 12.5px; color: var(--accent); margin-bottom: 8px; }
.lake-name { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.lake-desc { font-size: 14px; color: var(--fg-2); margin-top: 4px; line-height: 1.6; }
.lake-core {
  position: relative; padding: 28px 26px 24px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--card-b);
}
.lake-core .lake-n { color: var(--mint); }
.lake-core-title { font-size: 22px; font-weight: 600; letter-spacing: -0.035em; }
.lake-core-desc { font-size: 14px; color: var(--fg-2); margin-top: 6px; line-height: 1.6; }
.lake-bars { display: flex; gap: 4px; align-items: flex-end; height: 44px; margin-top: 24px; }
.lake-bars i { flex: 1; border-radius: 2px; background: linear-gradient(to top, rgba(19,233,137,.25), rgba(34,211,238,.8)); animation: eq 1.8s ease-in-out infinite; }
.lake-bars i:nth-child(odd) { animation-duration: 2.4s; }
.lake-bars i:nth-child(3n) { animation-duration: 1.4s; }
.lake-bars i:nth-child(4n) { animation-delay: -.6s; }
.lake-bars i:nth-child(5n) { animation-delay: -1.1s; }
@keyframes eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.callout {
  margin: 56px auto 0; max-width: 820px; padding: 22px 28px; border-radius: 14px; text-align: center;
  border: 1px solid var(--line); background: var(--bg-1); font-size: 16px; line-height: 1.65; color: var(--fg-2);
}
.callout b { color: var(--mint); font-weight: 600; }

/* ───── Demo ───── */
.demo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: stretch; }
.tabs { display: flex; flex-direction: column; gap: 8px; }
.tab {
  position: relative; overflow: hidden; text-align: left;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto;
  padding: 18px 20px; border-radius: 14px; border: 1px solid transparent;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-3);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.tab:hover { color: var(--fg-2); background: rgb(var(--ink) / .025); }
.tab.active { background: var(--bg-1); border-color: var(--line-2); color: var(--fg); box-shadow: inset 0 1px 0 rgb(var(--ink) / .04); }
.tab-n { grid-row: span 2; font-family: var(--mono); font-size: 12px; font-weight: 500; padding-top: 4px; color: var(--fg-3); }
.tab.active .tab-n { color: var(--accent); }
.tab small { font-size: 13.5px; margin-top: 2px; font-weight: 400; letter-spacing: 0; color: var(--fg-3); }
.tab.active small { color: var(--fg-2); }
.tab-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); }
.tab.active .tab-bar { animation: progress var(--dur, 12s) linear forwards; }
@keyframes progress { to { width: 100%; } }

.terminal {
  border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--term);
  box-shadow: inset 0 1px 0 rgb(var(--ink) / .05), 0 0 0 1px rgb(0 0 0 / calc(.6 * var(--sh)));
  display: flex; flex-direction: column; height: 520px; overflow: hidden; /* fixed: the body scrolls, the box never grows */
}

.term-body { padding: 28px 28px 32px; font-family: var(--mono); font-size: 13.5px; line-height: 1.85; flex: 1; min-height: 0; overflow: hidden; } /* not user-scrollable: page scroll passes through; follow() in main.js positions it */
.ln { white-space: pre-wrap; word-break: break-word; animation: lnIn .25s ease both; }
@keyframes lnIn { from { opacity: 0; transform: translateY(4px); } }
.ln + .ln { margin-top: 3px; }
.ln.gap { margin-top: 16px; }
.ln-user { color: var(--fg-0); }
.ln-user::before { content: "› "; color: var(--accent); }
.ln-tool { color: var(--cyan); }
.ln-tool::before { content: "⏺ "; color: var(--cyan); }
.ln-q { color: var(--fg-2); padding-left: 18px; border-left: 1px solid var(--line-2); margin-left: 5px; }
.ln-out { color: var(--fg-2); padding-left: 24px; }
.ln-agent { color: var(--fg); }
.ln-agent::before { content: "✻ "; color: var(--accent); }
.ln-add { color: var(--green); padding-left: 24px; background: rgba(74,222,128,.06); }
.ln-del { color: var(--red); padding-left: 24px; background: rgba(248,113,113,.06); }
.ln-ok { color: var(--green); }
.ln-ok::before { content: "✓ "; }
.ln-warn { color: var(--amber); }
.ln-warn::before { content: "▲ "; }
.ln-write { color: var(--accent); }
.ln-write::before { content: "↧ "; }
.hl { color: var(--fg-0); font-weight: 600; }
.caret { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--fg); animation: blink 1s steps(1) infinite; }


/* ───── Ask it anything (Olly) ───── */
.ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ask h2 { font-size: clamp(32px, 4vw, 50px); }
.signals { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; max-width: 520px; }
.signals li { font-family: var(--mono); font-size: 12px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); color: var(--fg-2); background: none; transition: color .2s, border-color .2s; }
.olly {
  border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--term); overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(var(--ink) / .05), 0 0 0 1px rgb(0 0 0 / calc(.6 * var(--sh)));
}
.term-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.term-title { font-family: var(--mono); font-size: 12px; color: var(--fg-2); font-weight: 500; }
.term-badge { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: none; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.olly-body { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 22px; }
.olly-label { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); margin-bottom: 10px; }
.olly-q { font-size: 18.5px; font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; }
.olly-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.olly-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--fg-2); line-height: 1.5; }
.olly-steps b { flex: none; min-width: 72px; text-align: center; padding: 3px 0; border-radius: 6px; background: rgb(var(--ink) / .06); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--fg-2); font-weight: 500; }
.olly-finding { padding: 18px 20px; border-radius: 12px; background: rgba(19,233,137,.08); border: 1px solid rgba(19,233,137,.3); font-size: 15px; line-height: 1.6; }
.olly-finding .olly-label { color: var(--mint); margin-bottom: 8px; }
.olly-note { font-size: 12px; color: var(--fg-3); }

/* ───── Pricing ───── */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.price { padding-top: 24px; border-top: 1px solid var(--line-2); }
.price b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price p { margin-top: 8px; color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.price-note { margin-top: 40px; font-size: 14.5px; color: var(--fg-3); }

/* ───── Final CTA ───── */
.final { position: relative; padding: 160px 0 200px; overflow: hidden; text-align: center; }
/* the blurred mint glow that used to sit under the CTA (.final-glow) is gone (DE-AI V3);
   the section's own background carries it, on both skins */
.final-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.final h2 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -0.045em; }

/* ───── Footer ───── */
.footer { position: relative; padding: 80px 0 40px; }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-tag { margin-top: 18px; font-size: 14.5px; color: var(--fg-3); max-width: 280px; line-height: 1.6; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-cols div { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.footer-cols b { font-weight: 500; margin-bottom: 6px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal-links a { color: var(--fg-3); transition: color .2s; }
.footer-legal-links a:hover { color: var(--fg); }
.footer-cols a { color: var(--fg-3); transition: color .2s; }
.footer-cols a:hover { color: var(--fg); }
.footer-legal { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; }
.footer-legal::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 8px; }
.disclaimer { font-size: 12px; line-height: 1.65; color: var(--fg-3); max-width: 1000px; }
.footer-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--fg-3); }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: none; }

/* ───── Toast ───── */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 16px; border-radius: 10px; background: var(--inv); color: var(--on-inv); font-size: 13px; font-weight: 500;
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / calc(.8 * var(--sh)));
  transition: all .3s var(--ease); pointer-events: none; z-index: 100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───── Logo menu (right-click the logo; site.js) ───── */
.logo-menu {
  position: fixed; z-index: 200; width: 264px; padding: 5px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 24px 60px -18px rgb(0 0 0 / calc(.9 * var(--sh))), 0 2px 8px rgb(0 0 0 / calc(.3 * var(--sh)));
  font-size: 13.5px; color: var(--fg);
  opacity: 0; visibility: hidden; transform: scale(.97); transform-origin: top left;
  transition: opacity .12s var(--ease), transform .14s var(--ease), visibility 0s linear .14s;
}
.logo-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .12s var(--ease), transform .14s var(--ease), visibility 0s; }
.logo-menu svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lm-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border-radius: 7px;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer;
}
.lm-item svg { color: var(--fg-2); }
.lm-item em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.lm-item:hover, .lm-item:focus-visible, .lm-chip:hover, .lm-chip:focus-visible { background: rgb(var(--ink) / .07); outline: none; }
.lm-item.done, .lm-item.done svg { color: var(--accent); }
.lm-sep { height: 1px; margin: 5px 4px; background: var(--line); }
.lm-h { padding: 6px 9px 4px; font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.lm-row { display: flex; align-items: center; gap: 10px; padding: 3px 4px 3px 9px; }
.lm-row-l { flex: 1; min-width: 0; color: var(--fg-2); }
.lm-sw { width: 15px; height: 15px; flex: none; border-radius: 4px; border: 1px solid var(--line-2); }
.lm-sw-dark { background: #050807; }
.lm-sw-light { background: #fff; }
.lm-chip {
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--fg);
}
@media (prefers-reduced-motion: reduce) { .logo-menu, .logo-menu.open { transition: none; transform: none; } }

/* ───── Reveal ───── */
/* Sections no longer fade and slide in as they scroll into view (it read as too much motion). The class stays:
   site.js still marks .reveal elements .in when they first show, and the screenshot tools force it. */

/* ───── Responsive ───── */
@media (max-width: 1120px) {
  .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 40px; }
}
@media (max-width: 960px) {
  .section-head { margin-bottom: 56px; }
  .card { padding: 28px; }
  .demo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { min-width: 150px; scroll-snap-align: start; }
  .tab small { display: none; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare .card { padding: 32px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow-col { flex-direction: row; flex-wrap: wrap; }
  .flow-label { width: 100%; }
  .beam { width: 2px; height: 48px; margin: 8px auto; }
  .beam span { left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--accent), var(--cyan), transparent); animation-name: beamV; }
  @keyframes beamV { to { top: 100%; } }
  .ask { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 120px 0; }
  .proof-section { padding: 56px 0; }
  .final { padding: 120px 0 160px; }
  .footer { padding: 64px 0 32px; }
  .footer-legal { margin-top: 48px; }
}
@media (max-width: 560px) {
  .container, .nav-inner { padding: 0 20px; }
  /* phone hero: one fold tall, with a vertical rhythm that scales with the visible height (svh) */
  .hero {
    --s1: clamp(14px, 2.6svh, 24px); /* nav → announce */
    --s2: clamp(18px, 3.2svh, 30px); /* announce → title */
    --s3: clamp(26px, 4.4svh, 40px); /* title → prompt card */
    --s4: clamp(22px, 3.8svh, 34px); /* prompt card → checklist */
    --s5: clamp(18px, 3svh, 30px);   /* logos → bottom edge */
    min-height: calc(100svh - 69px); /* nav is 68px + 1px border */
  }
  .announce { margin-top: var(--s1); }
  .hero-inner { padding: var(--s2) 20px 0; align-content: stretch; grid-template-rows: auto auto auto minmax(0, 1fr); }
  .hero-title { font-size: clamp(34px, 9.8vw, 42px); line-height: 1.08; }
  .hero .agent-cta { margin-top: var(--s3); }
  .hero .agent-prompt { font-size: 11px; gap: 10px; padding: 13px 14px; }
  /* logo strip: phone sizes; the marquee itself is set in the ≤1120 tier */
  .customers { padding: clamp(6px, 1.6svh, 16px) 0 var(--s5); }
  .customers-track { animation-duration: 28s; }
  .clogo { font-size: 18px; margin-right: 44px; } .clogo svg { height: 18px; } .logo-sophos svg { height: 15px; }
  .logo-ferrari svg { height: 18px; } .logo-masterclass svg { height: 21px; } .logo-jfrog svg { height: 30px; } .logo-tradeweb svg { height: 20px; }
  .agent-prompt { font-size: 12px; gap: 10px; padding: 12px 14px; }
  .agent-copy { margin-left: 0; }
  .section { padding: 96px 0; }
  .proof-section { padding: 48px 0; }
  .final { padding: 96px 0; }
  .final .agent-cta { display: flex; width: 100%; } /* the card spans the column like every other card, not its wrapped text */
  .proof { grid-template-columns: minmax(0, 1fr); }
  /* terminal tabs: sized to their label so the strip shows ~2.5 tabs and reads as scrollable; it bleeds to the screen edge and fades out there */
  .tabs { margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .tab { min-width: 0; flex: none; padding: 14px 18px; grid-template-columns: 26px auto; }
  .olly-body { padding: 20px; }
  .terminal { height: 480px; }
  .term-body { font-size: 12px; padding: 16px; }
  .term-badge { display: none; }
  .footer-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; } /* two even columns, so both rows line up */
}
@media (max-width: 560px) and (max-height: 620px) { /* genuinely short screens (iPhone SE class): smaller title */
  .hero-title { font-size: clamp(30px, 8.6vw, 36px); }
}
@media (min-width: 561px) and (max-width: 899px) and (max-height: 900px) { /* short tablets / unfolded phones (portrait) */
  .hero-inner { padding-bottom: 24px; }
  .customers { padding-bottom: 24px; }
}
@media (max-width: 380px) { /* narrow phones: keep the hero prompt on one line */
  .hero .agent-prompt { font-size: 10.5px; gap: 8px; padding: 12px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .customers-track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 16px; }
  .customers [data-clone] { display: none; }
}

/* ───── Hero demo: your agent ⇄ Coralogix (see hero-demo.js) ───── */
.hero-stage, .hero-aurora, .hero-spot, .hero-link { display: none; }
.hero[data-demo] :is(.hero-aurora, .hero-spot, .hero-link) { display: block; }
.hero[data-demo] .hero-stage { display: flex; }
@media (max-width: 1120px) { /* compact: the demo is a card in the hero's flow (see "Hero demo: compact" at the end) */
  .hero :is(.hero-aurora, .hero-spot, .hero-link) { display: none !important; }
}

/* one atmosphere behind headline + demo */
.hero-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-aurora i { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.hero-aurora i:nth-child(1) { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; left: 34%; top: -12%; background: radial-gradient(circle, rgba(16,185,129,.30), rgba(16,185,129,0) 62%); animation: au1 24s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 46vw; height: 46vw; max-width: 760px; max-height: 760px; right: -14%; top: 26%; background: radial-gradient(circle, rgba(56,189,248,.16), rgba(56,189,248,0) 62%); animation: au2 28s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(3) { width: 52vw; height: 52vw; max-width: 820px; max-height: 820px; left: -16%; top: 22%; background: radial-gradient(circle, rgba(99,102,241,.24), rgba(16,185,129,.06) 45%, rgba(99,102,241,0) 66%); animation: au3 30s ease-in-out infinite alternate; }
@keyframes au1 { to { transform: translate(-6%, 8%) scale(1.08); } }
@keyframes au2 { to { transform: translate(-10%, -6%) scale(.92); } }
@keyframes au3 { to { transform: translate(8%, -4%) scale(1.1); } }
.hero-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--ink) / .055), transparent 45%); }
.hero-spot.on { opacity: 1; }
.hero-link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.hero-link .hl-wire { fill: none; stroke: url(#hl-g); stroke-width: 1.25; }
.hero-link .hl-s0 { stop-color: #fff; stop-opacity: .05; }
.hero-link .hl-s1 { stop-color: #5ef2b0; stop-opacity: .55; }
.hero-link .hl-run { fill: none; stroke: var(--mint-hi-3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .14 1.2; stroke-dashoffset: .14; filter: drop-shadow(0 0 6px #13E989); }
.hero-link.run .hl-run { animation: hlRun 1.2s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes hlRun { to { stroke-dashoffset: -1.05; } }
.agent-prompt.demo-hit { animation: demoHit 1.4s cubic-bezier(.2,.7,.2,1); }
@keyframes demoHit {
  0% { box-shadow: inset 0 1px 0 rgb(var(--ink) / .06), 0 0 0 0 rgba(19,233,137,0); }
  25% { box-shadow: inset 0 0 0 1px rgba(94,242,176,.7), 0 0 70px -8px rgba(19,233,137,.6); }
  100% { box-shadow: inset 0 1px 0 rgb(var(--ink) / .06), 0 0 0 0 rgba(19,233,137,0); }
}

/* stage: fixed design size, scaled to fit */
.hero-stage { position: absolute; z-index: 3; top: 92px; bottom: 112px; left: 43%; right: max(40px, calc((100% - 1440px) / 2 + 40px)); align-items: center; justify-content: center; }
.stage-in { flex: none; display: flex; flex-direction: column; gap: 16px; transform-origin: center; font-family: "Geist", -apple-system, sans-serif; color: var(--fg-0); }
.demo-view { position: relative; flex: 1; min-height: 0; }
.glass {
  background: linear-gradient(180deg, rgb(var(--ink) / .06), rgb(var(--ink) / .02));
  border: 1px solid rgb(var(--ink) / .09); border-radius: 22px;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(var(--ink) / .07), 0 0 0 1px rgb(0 0 0 / calc(.45 * var(--sh))), 0 40px 100px -30px rgb(0 0 0 / calc(.9 * var(--sh)));
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.shimmer { background: linear-gradient(90deg, rgb(var(--ink) / .35) 30%, var(--fg-0) 50%, rgb(var(--ink) / .35) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }

/* use-case tabs: what you can ask, and which one is playing */
.uc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: none; }
.uc button { position: relative; display: flex; align-items: center; min-width: 0; padding: 13px 14px 14px; border-radius: 14px; border: 1px solid rgb(var(--ink) / .08); background: rgb(var(--ink) / .025); text-align: left; overflow: hidden; transition: background .25s, border-color .25s; }
.uc button:hover { background: rgb(var(--ink) / .05); }
.uc button[aria-selected="true"] { background: rgb(var(--ink) / .07); border-color: rgb(var(--ink) / .16); }
.uc-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: rgb(var(--ink) / .6); transition: color .25s; }
.uc-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--uc); box-shadow: 0 0 10px var(--uc); }
.uc button[aria-selected="true"] .uc-k { color: var(--fg-0); }
.uc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(var(--ink) / .06); }
.uc-bar i { display: block; height: 100%; width: 0; background: var(--uc); box-shadow: 0 0 8px var(--uc); }
.uc [data-cat="product"] { --uc: #a78bfa; }
.uc [data-cat="incident"] { --uc: #fbbf24; }
.uc [data-cat="security"] { --uc: #f87171; }

/* agent switcher in the agent window header: real marks, the active one named */
.agw-agents { gap: 4px; padding: 0 10px; }
.agw-agents button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 9px; border-radius: 10px; color: var(--fg-0); font-size: 14px; font-weight: 600; letter-spacing: -.01em; transition: background .2s; }
.agw-agents button svg { width: 20px; height: 20px; flex: none; opacity: .55; transition: opacity .2s; }
.agw-agents button span { display: none; white-space: nowrap; }
.agw-agents button:hover { background: rgb(var(--ink) / .06); }
.agw-agents button:hover svg { opacity: 1; }
.agw-agents button[aria-checked="true"] { order: -1; margin-right: auto; padding-left: 4px; }
.agw-agents button[aria-checked="true"] svg { opacity: 1; width: 22px; height: 22px; }
.agw-agents button[aria-checked="true"] span { display: inline; }
.agw-agents button[aria-checked="true"]:hover { background: none; }

/* window chrome */
.win-h { display: flex; align-items: center; gap: 10px; height: 54px; flex: none; padding: 0 20px; border-bottom: 1px solid rgb(var(--ink) / .07); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.cx-logo { height: 20px; width: auto; display: block; }

/* round trip: Coralogix is the platform in the back, the agent floats in front */
.rt2 { position: absolute; left: 0; top: 0; width: 960px; height: 640px; }
.px { position: absolute; left: 466px; top: 0; width: 494px; height: 568px; display: flex; flex-direction: column; overflow: hidden; }
.px-env { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 8px; background: rgb(var(--ink) / .06); font-family: var(--mono); font-size: 12px; font-weight: 400; color: rgb(var(--ink) / .8); }
.px-env i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.px-scale { margin-left: auto; font-size: 12px; font-weight: 400; color: rgb(var(--ink) / .45); white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-body { position: relative; flex: 1; min-height: 0; }
/* shared "lit" language: dim at rest, mint when the agent uses it */
.px-body [data-i] { color: rgb(var(--ink) / .34); transition: color .35s, background .35s, border-color .35s, box-shadow .35s; }
.px-body [data-i].on { color: var(--mint-hi); }

/* A · Stack */
.ps { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6px 0 0; }
.ps-layers { position: relative; border-top: 1px solid rgb(var(--ink) / .05); }
.ps-spine { position: absolute; left: 25px; top: 18px; bottom: 34px; width: 1px; background: linear-gradient(rgb(var(--ink) / .14), rgb(var(--ink) / .06)); }
.ps-spine i { position: absolute; left: -1px; width: 3px; height: 70px; border-radius: 3px; background: linear-gradient(transparent, var(--lit), transparent); box-shadow: 0 0 12px #13E989; opacity: 0; }
.ps-spine.down i { animation: psDown 1.5s cubic-bezier(.45,0,.4,1) both; }
.ps-spine.up i { animation: psDown .9s cubic-bezier(.45,0,.4,1) reverse both; }
@keyframes psDown { 0% { top: -40px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 30px); opacity: 0; } }
.ps-row { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 10px 18px 10px 46px; border-bottom: 1px solid rgb(var(--ink) / .05); }
.ps-row::before { content: ""; position: absolute; left: 22px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--node-dot); border: 1px solid rgb(var(--ink) / .22); transition: background .3s, border-color .3s, box-shadow .3s; }
.ps-row.on::before { background: #34d399; border-color: var(--lit); box-shadow: 0 0 10px #13E989; }
.ps-h b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: rgb(var(--ink) / .72); transition: color .3s; }
.ps-h { display: flex; align-items: baseline; gap: 8px; }
.ps-h span { font-size: 11px; color: rgb(var(--ink) / .32); }
.ps-row.on .ps-h b { color: var(--fg-0); }
.ps-c { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.ps-c [data-i] { padding: 3px 8px; border-radius: 7px; font-size: 12px; border: 1px solid transparent; }
.ps-c [data-i].on { background: rgba(19,233,137,.1); border-color: rgba(94,242,176,.35); }
.ps-status { font-size: 12.5px; color: rgb(var(--ink) / .45); padding-left: 8px; }
.ps-row.on .ps-status { color: var(--fg-0); }
.ps-find { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 8px; width: 100%; }
.ps-find:empty { display: none; }
.ps-find span { padding: 4px 9px; border-radius: 7px; background: var(--find); border: 1px solid rgba(94,242,176,.4); color: var(--mint-hi-2); font-family: var(--mono); font-size: 11.5px; animation: rise .35s both; }
.ps-prod { flex: none; border-bottom: 0; padding-bottom: 4px; }
.ps-map { position: relative; width: 460px; height: 120px; margin: 0 0 0 -30px; }
.ps-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-map path { fill: none; stroke: rgb(var(--ink) / .09); stroke-width: 1; transition: stroke .4s; }
.ps-map path.on { stroke: var(--lit); stroke-width: 1.6; filter: drop-shadow(0 0 4px #13E989); }
.ps-node { position: absolute; transform: translate(-50%, -50%); height: 22px; line-height: 20px; padding: 0 8px; border-radius: 7px; background: var(--node); border: 1px solid rgb(var(--ink) / .09); font-family: var(--mono); font-size: 10.5px; color: rgb(var(--ink) / .5); white-space: nowrap; transition: all .35s; }
.ps-node.on { color: var(--fg-0); background: var(--node-on); border-color: rgba(94,242,176,.65); box-shadow: 0 0 24px -4px rgba(19,233,137,.7); }

.rt2-link { position: absolute; left: 370px; top: 0; width: 96px; height: 568px; overflow: visible; pointer-events: none; }
.rt2-link path { fill: none; }
.rt2-link .lw { stroke: rgba(94,242,176,.62); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; animation: flowR 1.1s linear infinite; }
.rt2-link .lw-back { animation-name: flowL; }
@keyframes flowR { to { stroke-dashoffset: -8; } }
@keyframes flowL { to { stroke-dashoffset: 8; } }
.rt2-link .lp { stroke-width: 3; stroke-linecap: round; stroke-dasharray: .3 1.6; stroke-dashoffset: .3; opacity: 0; }
.rt2-link .lp-out { stroke: var(--fg-0); filter: drop-shadow(0 0 6px rgb(var(--ink) / .9)); }
.rt2-link .lp-back { stroke: var(--lit); filter: drop-shadow(0 0 8px #13E989); }
.rt2-link.go .lp-out, .rt2-link.back .lp-back { opacity: 1; animation: cxBeam .7s cubic-bezier(.5,0,.3,1) both; }
.rt2-lbl { position: absolute; left: 370px; width: 96px; top: 268px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgb(var(--ink) / .55); }
.rt2-lbl::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; animation: blink 2s infinite; }
.agw { position: absolute; left: 0; top: 0; width: 370px; height: 568px; z-index: 2; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(28,28,32,.88), rgba(14,14,16,.9)); box-shadow: inset 0 1px 0 rgb(var(--ink) / .08), 0 0 0 1px rgb(0 0 0 / calc(.6 * var(--sh))), 0 60px 120px -30px rgb(0 0 0 / calc(1 * var(--sh))); }
.agw-conv { flex: 1; min-height: 0; padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 14px; transition: opacity .2s; overflow: hidden; }
.agw-conv.out { opacity: 0; }
.agw-q { align-self: flex-end; max-width: 92%; padding: 11px 15px; border-radius: 16px 16px 5px 16px; background: rgb(var(--ink) / .09); font-size: 15.5px; line-height: 1.35; letter-spacing: -.01em; animation: rise .35s both; }
.agw-tool { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; min-width: 0; border-radius: 11px; border: 1px solid rgb(var(--ink) / .08); background: rgb(var(--ink) / .03); font-size: 13px; animation: rise .35s both; transition: border-color .4s, background .4s; }
.agw-tool img { width: 16px; height: 16px; flex: none; }
.agw-tool b { font-weight: 600; color: var(--fg-0); }
.agw-tool-s { color: rgb(var(--ink) / .6); white-space: nowrap; }
.agw-tool em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--mint); white-space: nowrap; }
.agw-tool em::after { content: "✓"; color: #34d399; font-size: 13px; }
.agw-tool.done { border-color: rgba(94,242,176,.22); background: rgba(19,233,137,.05); }
.agw-md { font-size: 14.5px; line-height: 1.62; color: rgb(var(--ink) / .84); letter-spacing: -.005em; padding: 2px 2px 0; }
.agw-md p { margin: 0 0 10px; }
.agw-md ul { margin: 0 0 10px; padding-left: 18px; }
.agw-md li { margin: 5px 0; padding-left: 2px; }
.agw-md li::marker { color: rgb(var(--ink) / .35); }
.agw-md strong { color: var(--fg-0); font-weight: 600; }
.agw-md code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: rgb(var(--ink) / .08); color: var(--mint-hi-2); }
.agw-md .w { opacity: 0; transition: opacity .3s; }
.agw-md .w.on { opacity: 1; }
.agw-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: rgb(var(--ink) / .38); font-variant-numeric: tabular-nums; animation: rise .35s both; }
.agw-comp { flex: none; margin: 0 14px 14px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 7px 0 16px; border-radius: 14px; background: rgb(0 0 0 / calc(.38 * var(--sh))); border: 1px solid rgb(var(--ink) / .09); transition: border-color .2s; }
.agw-comp:focus-within { border-color: rgba(94,242,176,.5); }
.agw-comp input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--fg-0); font: inherit; font-size: 15px; }
.agw-comp input::placeholder { color: rgb(var(--ink) / .35); }
.agw-comp button { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--inv); color: var(--on-inv); font-weight: 600; }
@keyframes cxBeam { to { stroke-dashoffset: -1.1; } }

/* ───── Hero demo: compact (≤1120px) ─────
   One card in the hero flow instead of the scaled two-window stage: short use-case tabs, the agent
   window (fixed-height conversation that follows the newest line), a CLI · MCP seam, then a slim
   Coralogix panel ("mini" in PANELS) whose services and signals light up. */
.uc-more { display: inline; }
.pn { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 11px; }
.pn-svc { display: flex; flex-wrap: wrap; gap: 5px; }
.pn-svc span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--node); border: 1px solid rgb(var(--ink) / .08); font-family: var(--mono); font-size: 10.5px; color: rgb(var(--ink) / .42); white-space: nowrap; transition: color .35s, background .35s, border-color .35s, box-shadow .35s; }
.pn-svc span i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--ink) / .28); transition: background .35s, box-shadow .35s; }
.pn-svc span.on { color: var(--fg-0); background: var(--node-on); border-color: rgba(94,242,176,.65); box-shadow: 0 0 18px -4px rgba(19,233,137,.7); }
.pn-svc span.on i { background: #34d399; box-shadow: 0 0 8px #34d399; }
.pn-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; padding-top: 11px; border-top: 1px solid rgb(var(--ink) / .06); font-size: 12px; color: rgb(var(--ink) / .5); }
.pn-st > b { font-size: 11px; font-weight: 600; color: var(--lit); margin-right: 2px; }
.pn-s { margin-right: 4px; }
.pn-sig { height: 22px; line-height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(19,233,137,.1); border: 1px solid rgba(94,242,176,.35); color: var(--mint-hi); font-size: 11px; white-space: nowrap; animation: rise .35s both; }
@keyframes seamFlow { to { background-position: 30% 8px, 70% -8px; } }
@media (max-width: 1120px) {
  .hero[data-demo] .hero-stage { display: block; position: relative; inset: auto; order: 2; width: 100%; max-width: 460px; margin-top: 32px; text-align: left; }
  .hero-stage .stage-in { gap: 10px; }
  .hero-stage .uc { gap: 6px; }
  .hero-stage .uc button { justify-content: center; padding: 10px 8px 11px; border-radius: 12px; }
  .hero-stage .uc-k { gap: 7px; font-size: 13px; }
  .hero-stage .uc-more { display: none; }
  .hero-stage .rt2 { position: static; width: auto; height: auto; display: flex; flex-direction: column; }
  .hero-stage .rt2-link { display: none; }
  .hero-stage .glass { border-radius: 18px; }
  .hero-stage .win-h { height: 48px; padding: 0 16px; }
  .hero-stage .agw { position: relative; order: 1; width: auto; height: auto; }
  .hero-stage .agw-agents { padding: 0 8px; }
  .hero-stage .agw-agents button { height: 34px; font-size: 13.5px; }
  .hero-stage .agw-conv { flex: none; height: 330px; padding: 16px 16px 10px; gap: 12px; }
  .hero-stage .agw-q { font-size: 14.5px; padding: 10px 14px; }
  .hero-stage .agw-tool { height: 36px; font-size: 12.5px; }
  .hero-stage .agw-md { font-size: 13.5px; line-height: 1.55; }
  .hero-stage .agw-md code { font-size: 11.5px; }
  .hero-stage .agw-comp { height: 46px; margin: 0 10px 10px; padding: 0 6px 0 14px; border-radius: 12px; }
  .hero-stage .agw-comp input { font-size: 16px; } /* 16px stops iOS zooming in on focus */
  .hero-stage .agw-comp button { width: 32px; height: 32px; }
  /* the CLI · MCP seam: question flows down on the left, context back up on the right */
  .hero-stage .rt2-lbl {
    position: static; order: 2; width: auto; height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 10.5px;
    background: linear-gradient(rgba(94,242,176,.62) 0 2px, transparent 2px) 30% 0 / 2px 8px repeat-y, linear-gradient(rgba(94,242,176,.62) 0 2px, transparent 2px) 70% 0 / 2px 8px repeat-y;
  }
  .hero-stage .rt2.is-live .rt2-lbl { animation: seamFlow 1.1s linear infinite; }
  .hero-stage .rt2-lbl::before { display: inline-block; margin: 0; }
  .hero-stage .px { position: relative; order: 3; left: auto; top: auto; width: auto; height: auto; }
  .hero-stage .px .cx-logo { height: 18px; }
}
@media (min-width: 900px) and (max-width: 1120px) {
  .hero[data-demo] .hero-stage { grid-column: 2; grid-row: 1 / span 3; justify-self: center; margin: 0; }
  .hero[data-demo] .hero-inner { align-items: center; padding-top: 24px; padding-bottom: 24px; }
  .hero-stage .agw-conv { height: clamp(200px, calc(100svh - 520px), 330px); } /* the card fits the fold beside the headline */
}
@media (min-width: 900px) and (max-width: 1120px) and (max-height: 860px) {
  .hero-stage .agw-comp { display: none; }
  .hero-stage .agw-conv { height: clamp(160px, calc(100svh - 540px), 330px); }
  .hero-stage .rt2-lbl { height: 28px; }
  .hero-stage .pn { padding: 10px 12px 12px; gap: 9px; }
  .hero-stage .pn-st { padding-top: 9px; }
}
@media (max-width: 560px) {
  .hero[data-demo] .hero-stage { margin-top: var(--s4); }
  .hero-stage .agw-conv { height: 300px; }
}
@media (max-width: 420px) {
  .hero-stage .px-scale { display: none; }
  .hero-stage .uc-k { font-size: 12.5px; gap: 6px; }
}

/* ───── Nav: tighter bar, then the drawer ───── */
@media (max-width: 1280px) {
  .nav-inner { gap: 20px; }
  .nav-cta .nav-signin { display: none; }
  .mega-inner { grid-template-columns: repeat(var(--cols), minmax(0, 230px)) minmax(240px, 1fr); gap: 32px; }
}
@media (min-width: 1081px) and (max-width: 1120px) { .mega-inner { padding-left: 24px; padding-right: 24px; } } /* matches the bar's padding */
@media (max-width: 1080px) {
  .nav-inner { padding: 0 24px; }
  .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: grid; place-items: center; gap: 0; width: 40px; height: 40px; margin-right: -8px; border-radius: 10px; }
  .nav-toggle span { grid-area: 1 / 1; width: 18px; height: 1.5px; border-radius: 2px; background: var(--fg); transition: transform .3s var(--ease); }
  .nav-toggle span:first-child { transform: translateY(-3.5px); }
  .nav-toggle span:last-child { transform: translateY(3.5px); }
  .nav.drawer-open .nav-toggle span:first-child { transform: rotate(45deg); }
  .nav.drawer-open .nav-toggle span:last-child { transform: rotate(-45deg); }
  /* the drawer hangs from the bar (the bar's backdrop-filter would trap position: fixed) */
  .nav-menu {
    position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 69px);
    flex-direction: column; align-items: stretch; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 24px 32px; background: var(--panel); border-top: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav.drawer-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-trigger { width: 100%; height: 56px; padding: 0; justify-content: space-between; border-radius: 0; font-size: 17px; font-weight: 500; color: var(--fg); }
  .nav-trigger:hover, .nav-item.open > .nav-trigger { background: none; }
  .nav-chev { width: 16px; height: 16px; }
  .mega { position: static; display: none; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; transition: none; }
  .nav-item.open > .mega { display: block; }
  .mega-inner { display: flex; flex-direction: column; gap: 22px; padding: 4px 0 24px; }
  .mega-col { gap: 22px; }
  .mega-h { margin-bottom: 6px; }
  .mega ul a { margin: 0; padding: 8px 0; font-size: 15.5px; color: var(--fg-2); }
  .mega ul a:hover { background: none; color: var(--fg); }
  .mega ul a[aria-current="page"] { background: none; }
  .mega-feature { justify-self: stretch; max-width: none; padding: 18px; }
  .nav-scrim { display: none; }
  .nav-drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .nav-drawer-cta .btn { height: 46px; font-size: 15px; }
  .nav-drawer-cta .nav-signin { align-self: center; padding: 10px; font-size: 15px; }
}
@media (min-width: 640px) and (max-width: 1080px) { /* tablets: two columns of links per section */
  .mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
  .mega-feature { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .nav-inner { padding: 0 20px; }
  .nav-menu { padding: 4px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .nav-menu, .nav-scrim { transition: none !important; }
}

/* ───── Skin toggle (every page; behaviour in site.js) ───── */
.skin-dark { color: var(--fg); }
:root:not([data-theme="light"]) img.on-light, :root[data-theme="light"] img.on-dark { display: none; }
/* art supplied for a dark ground (white logos, dark-skin product shots): redrawn for the light skin, hues kept */
img.dark-art { filter: var(--dark-art); }
.theme-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--fg-2); transition: color .2s, background .2s; }
.theme-btn:hover { color: var(--fg); background: rgb(var(--ink) / .06); }
.theme-i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .theme-i { grid-area: 1 / 1; display: none; }
.theme-btn:not([data-pick]) .theme-i-dark, .theme-btn[data-pick="system"] .theme-i-system,
.theme-btn[data-pick="light"] .theme-i-light, .theme-btn[data-pick="dark"] .theme-i-dark { display: block; }
.theme-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.theme-seg button { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 999px; color: var(--fg-3); transition: color .2s, background .2s; }
.theme-seg button:hover { color: var(--fg); }
.theme-seg button[aria-checked="true"] { color: var(--fg); background: rgb(var(--ink) / .09); }
.theme-seg .theme-i { width: 14px; height: 14px; }
@media (max-width: 1080px) { .nav-cta .theme-btn { margin-right: -4px; } }

/* a theme switch holds transitions off for one frame (site.js adds/removes .theme-switching), so the
   swap reads as an instant flip instead of every background and border animating at once (DE-AI V16) */
.theme-switching * { transition: none !important; }

/* ───── Light skin: touches the token swap can't express ───── */
:root[data-theme="light"] .nav { border-bottom-color: var(--line); }
/* themed pages (any data-theme): no bar border until the page scrolls */
:root[data-theme] .nav { transition: background .25s var(--ease), border-color .25s var(--ease); }
:root[data-theme] .nav:not(.is-scrolled, .menu-active, .drawer-open) { border-bottom-color: transparent; }
:root[data-theme="light"] .mega { box-shadow: 0 40px 80px -30px rgb(0 0 0 / .18); }
:root[data-theme="light"] .hero-aurora i { opacity: .7; }
:root[data-theme="light"] .glass {
  background: linear-gradient(180deg, rgb(255 255 255 / .82), rgb(255 255 255 / .66));
  border-color: rgb(var(--ink) / .1);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / .05), 0 40px 90px -30px rgb(0 0 0 / .22);
}
:root[data-theme="light"] .agw { background: linear-gradient(180deg, rgb(255 255 255 / .94), rgb(250 251 250 / .94)); }
:root[data-theme="light"] .agw-comp { background: var(--bg-1); }
:root[data-theme="light"] .hero-link .hl-s0 { stop-color: #0b9e5e; stop-opacity: .08; }
:root[data-theme="light"] .hero-link .hl-s1 { stop-color: #0b9e5e; stop-opacity: .8; }
:root[data-theme="light"] .hero-link .hl-wire { stroke-width: 1.5; }
:root[data-theme="light"] .rt2-link .lp-out { stroke: #0b0c0c; filter: none; }
:root[data-theme="light"] :is(.card-lake, .lake-core) { box-shadow: inset 0 1px 0 #fff; }
:root[data-theme="light"] .card-lake { background: var(--card-b); }
:root[data-theme="light"] .lake-core { background: var(--card-b); }
:root[data-theme="light"] .olly { box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 40px 90px -40px rgb(0 0 0 / .25); }
:root[data-theme="light"] .terminal { box-shadow: 0 40px 100px -40px rgb(0 0 0 / .45); }
:root[data-theme="light"] ::selection { background: rgba(19,233,137,.3); }
/* the "Use with agents" prompt card turns light gray */
:root[data-theme="light"] .agent-tab { background: #e4e6e5; color: #5c6160; }
:root[data-theme="light"] .agent-tab::after { background: radial-gradient(circle at 100% 0, transparent 11.5px, #e4e6e5 12px); }
:root[data-theme="light"] .ai { border-color: #e4e6e5; }
:root[data-theme="light"] .agent-prompt { background: #eceeed; color: #0b0c0c; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .04); }
:root[data-theme="light"] .agent-tip { background: #fff; color: #0b0c0c; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1), 0 16px 40px -14px rgb(0 0 0 / .3); }
:root[data-theme="light"] .agent-tip::before { box-shadow: -1px -1px 0 rgb(0 0 0 / .1); }
:root[data-theme="light"] .agent-tip .at-h { color: rgb(0 0 0 / .45); }
:root[data-theme="light"] .agent-tip .at-cmd { color: #0b0c0c; }
:root[data-theme="light"] .agent-tip .at-cmd b { color: #0a8f55; }
:root[data-theme="light"] .agent-tip .at-f { color: rgb(0 0 0 / .55); border-top-color: rgb(0 0 0 / .08); }
:root[data-theme="light"] .final .agent-tip::before { box-shadow: 1px 1px 0 rgb(0 0 0 / .1); }
:root[data-theme="light"] .agent-prompt:hover { background: #e8eae9; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .06), 0 0 56px -14px rgba(19,233,137,.45); }
:root[data-theme="light"] .agent-caret { color: #8a8f8e; }
:root[data-theme="light"] .agent-copy { stroke: #6b706f; }

/* ───── Hero demo: calm default (desktop) ─────
   The Coralogix panel rests as a summary card centred on the CLI · MCP link; "Open the telemetry lake"
   grows it in place into the full view (production map + layers), already lit for the current question. */
.hero[data-demo] .hero-aurora i { animation: none; opacity: .75; }
.hero[data-demo] .hero-stage { left: min(43%, calc((100% - 1440px) / 2 + 540px)); }
.px[data-px="stack"] { top: 158px; height: 252px; transition: top .75s cubic-bezier(.65, 0, .2, 1), height .75s cubic-bezier(.65, 0, .2, 1), box-shadow .5s; }
.px[data-px="stack"].open { top: 0; height: 568px; }
.px[data-px="stack"] .ps { opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s linear .45s; }
.px[data-px="stack"].open .ps { opacity: 1; visibility: visible; transition: opacity .55s .25s, visibility 0s; }
.px-x { display: none; margin-left: 6px; width: 28px; height: 28px; border-radius: 8px; font-size: 12px; color: rgb(var(--ink) / .55); transition: background .2s, color .2s, opacity .3s; }
.px[data-px="stack"] .px-x { display: grid; place-items: center; opacity: 0; pointer-events: none; }
.px[data-px="stack"].open .px-x { opacity: 1; pointer-events: auto; }
.px-x:hover { background: rgb(var(--ink) / .07); color: var(--fg-0); }
.pc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 18px; transition: opacity .3s; }
.px.open .pc { opacity: 0; pointer-events: none; }
.pc-st { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; color: var(--fg-0); }
.pc-st i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }
.pc.busy .pc-st i { animation: blink 1s infinite; }
.pc-sig { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-sig span { height: 28px; line-height: 26px; padding: 0 11px; border-radius: 8px; border: 1px solid rgb(var(--ink) / .08); font-size: 12.5px; color: rgb(var(--ink) / .38); transition: color .4s, background .4s, border-color .4s, box-shadow .4s; }
.pc-sig span.on { color: var(--mint-hi); background: rgba(19,233,137,.1); border-color: rgba(94,242,176,.4); box-shadow: 0 0 18px -6px rgba(19,233,137,.7); }
.pc-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; font-size: 12.5px; color: rgb(var(--ink) / .5); }
.pc-svc b { font-weight: 500; color: rgb(var(--ink) / .7); margin-right: 4px; }
.pc-svc span { font-family: var(--mono); font-size: 11.5px; padding: 2px 7px; border-radius: 6px; background: var(--node-on); border: 1px solid rgba(94,242,176,.35); color: var(--fg-0); animation: rise .35s both; }
.pc-open { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(var(--ink) / .12); background: rgb(var(--ink) / .04); color: var(--fg-0); font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; transition: background .2s, border-color .2s, box-shadow .2s; }
.pc-open:hover { background: rgb(var(--ink) / .08); border-color: rgba(94,242,176,.5); box-shadow: 0 0 30px -10px rgba(19,233,137,.7); }
.pc-open span { transition: transform .25s; }
.pc-open:hover span { transform: translate(2px, -2px); }

/* where to look: the window that's working is spotlighted and labelled */
.rt2 .agw, .rt2 .px { transition: opacity .6s, box-shadow .6s, filter .6s; }
.rt2[data-step="ask"] .px, .rt2[data-step="answer"] .px { opacity: .45; filter: saturate(.6); }
.rt2[data-step="query"] .agw { opacity: .55; filter: saturate(.6); }
.rt2[data-step="ask"] .agw, .rt2[data-step="answer"] .agw, .rt2[data-step="query"] .px { box-shadow: 0 0 0 1px rgba(94,242,176,.45), 0 0 60px -16px rgba(19,233,137,.55), 0 30px 80px -30px rgb(0 0 0 / calc(.8 * var(--sh))); }
.rt2 .px.open { opacity: 1; filter: none; }

/* the working window wears a label: ① agent, ② Coralogix, ③ agent */
/* the playing use case's chip carries a thin progress line, so the wait for the next one reads as progress */
.hero[data-demo] .uc .uc-bar { display: block; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; overflow: hidden; background: rgb(var(--ink) / .1); opacity: 0; transition: opacity .3s; }
.hero[data-demo] .uc button[aria-selected="true"] .uc-bar { opacity: 1; }
.hero[data-demo] .uc .uc-bar i { border-radius: inherit; box-shadow: 0 0 6px var(--uc); }
.wl { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 5px; border-radius: 999px; transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none;
  background: #0d2a1e; border: 1px solid rgba(94,242,176,.55); color: #d8fff0; font-size: 13px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 0 30px -8px rgba(19,233,137,.8), 0 10px 30px -10px rgba(0,0,0,.8);
  transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1); }
.wl b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #000; font-size: 11px; font-weight: 700; }
.wl-agw { left: 185px; top: 64px; }
.wl-px { left: 713px; top: 222px; transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1), top .75s cubic-bezier(.65,0,.2,1) !important; }
.hero-stage:has(.px.open) .wl-px { top: 64px; }
.hero-stage:is([data-step="ask"], [data-step="answer"]) .wl-agw, .hero-stage[data-step="query"] .wl-px { opacity: 1; transform: translate(-50%, -50%); }
:root[data-theme="light"] .wl { background: #e9fbf2; color: #064e33; border-color: rgba(11,158,94,.45); }
@media (max-width: 1120px) { .wl { display: none; } }

/* what's on the wire: the query going out, production context coming back */
.fl { position: absolute; z-index: 4; left: 418px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 500; letter-spacing: -.01em; color: #d8fff0; background: #0b1f17; border: 1px solid rgba(94,242,176,.45); box-shadow: 0 0 24px -8px rgba(19,233,137,.8), 0 8px 24px -8px rgba(0,0,0,.8);
  opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.fl b { font-weight: 600; color: #fff; }
.fl-out { top: 228px; }
.fl-back { top: 336px; }
.rt2[data-flow="out"] .fl-out, .rt2[data-flow="back"] .fl-back { opacity: 1; transform: translate(-50%, -50%); }
:root[data-theme="light"] .fl { background: #e9fbf2; color: #064e33; border-color: rgba(11,158,94,.45); }
:root[data-theme="light"] .fl b { color: #03301f; }
@media (max-width: 1120px) { .fl { display: none; } }
.fl-back { flex-direction: column; gap: 0; height: auto; padding: 5px 12px 6px; border-radius: 12px; line-height: 1.25; text-align: center; }
.fl-back small { font-size: 11px; font-weight: 400; color: rgba(216,255,240,.7); }
:root[data-theme="light"] .fl-back small { color: rgba(6,78,51,.7); }
.fl-back { left: 462px; transform: translate(-100%, -50%) scale(.92); }
.rt2[data-flow="back"] .fl-back { transform: translate(-100%, -50%); }

/* closed panel = the stack with titles only (the flow still runs down the spine); open = full detail */
.px[data-px="stack"] { top: 116px; height: 336px; }
.px[data-px="stack"] .ps { opacity: 1; visibility: visible; transition: none; }
.px[data-px="stack"] :is(.ps-map, .ps-c, .ps-find, .ps-status) { transition: max-height .75s cubic-bezier(.65,0,.2,1), opacity .5s, margin .75s cubic-bezier(.65,0,.2,1); overflow: hidden; }
.px[data-px="stack"]:not(.open) :is(.ps-map, .ps-c, .ps-find, .ps-status) { max-height: 0 !important; opacity: 0; margin-top: -7px; }
.px[data-px="stack"].open .ps-map { max-height: 130px; opacity: 1; transition-delay: .15s; }
.px[data-px="stack"].open :is(.ps-c, .ps-find, .ps-status) { max-height: 90px; opacity: 1; transition-delay: .15s; }
.px[data-px="stack"]:not(.open) .ps-row { padding-top: 13px; padding-bottom: 13px; }
.px[data-px="stack"]:not(.open) .ps-row::before { top: 18px; }
.px[data-px="stack"] .ps-row { transition: padding .75s cubic-bezier(.65,0,.2,1); }
.pc-open { position: absolute; left: 46px; bottom: 16px; z-index: 2; margin: 0; transition: opacity .3s, background .2s, border-color .2s, box-shadow .2s; }
.px.open .pc-open { opacity: 0; pointer-events: none; }
.px[data-px="stack"] { top: 104px; height: 360px; }
.px[data-px="stack"]:not(.open) .ps { padding-bottom: 58px; }
.px[data-px="stack"] .ps { transition: padding .75s cubic-bezier(.65,0,.2,1); }
.wl-px { top: 168px; }

/* Coralogix box: four layers, no production map */
.px[data-px="stack"] { top: 128px; height: 312px; }
.px[data-px="stack"].open { top: 40px; height: 488px; }
.wl-px { top: 192px; }
.hero-stage:has(.px.open) .wl-px { top: 104px; }
.ps-layers { border-top: 0; }
.ps-h b { display: inline-flex; align-items: center; gap: 8px; }
.ps-ff { font-style: normal; height: 18px; line-height: 16px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--mint-hi); background: rgba(19,233,137,.1); border: 1px solid rgba(94,242,176,.35); }
.px[data-px="stack"].open { top: 62px; height: 444px; }
.hero-stage:has(.px.open) .wl-px { top: 126px; }

/* ───── Desktop hero layout: use cases listed under the prompt; the stage is the agent + Coralogix ───── */
@media (min-width: 1121px) {
  .hero[data-demo] .hero-left > .uc { display: flex; flex-direction: column; gap: 6px; margin-top: 40px; max-width: 360px; }
  .hero[data-demo] .hero-left > .uc::before { content: "See it answer"; font-family: var(--mono); font-size: 12.5px; color: rgb(var(--ink) / .4); margin-bottom: 6px; }
  .hero[data-demo] .hero-left > .uc button { padding: 12px 14px; }
  .hero[data-demo] .wl-agw { top: 0; }
  .hero[data-demo] .wl-px { top: 128px; }
  .hero[data-demo] .hero-stage:has(.px.open) .wl-px { top: 62px; }
  .hero[data-demo] .rt2 .agw { height: 520px; top: 24px; }
}

/* ───── Closed Coralogix box: a plain definition + the facts it handed the agent ───── */
.px[data-px="stack"]:not(.open) { top: 112px; height: 344px; }
.wl-px { top: 112px !important; }
.hero-stage:has(.px.open) .wl-px { top: 62px !important; }
.px[data-px="stack"]:not(.open) .ps { opacity: 0; visibility: hidden; }
.px[data-px="stack"].open .ps { opacity: 1; visibility: visible; transition: opacity .5s .2s; }
.pv { position: absolute; inset: 0 0 60px; display: flex; flex-direction: column; gap: 12px; padding: 14px 22px 0; transition: opacity .3s; }
.px.open .pv { opacity: 0; pointer-events: none; }
.pv-def { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgb(var(--ink) / .62); }
.pc-open { left: 22px; }
.pv-ev { display: flex; flex-direction: column; gap: 8px; }
.pv-ev:empty::before { content: "Waiting for your agent's question…"; font-size: 13px; color: rgb(var(--ink) / .35); }
.pv-f { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border-radius: 11px; background: rgba(19,233,137,.06); border: 1px solid rgba(94,242,176,.22); font-size: 13.5px; line-height: 1.35; color: rgb(var(--ink) / .8); animation: rise .45s both; }
.pv-f b { color: var(--fg-0); font-weight: 600; }
.pv-f em { flex: none; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--lit); }

/* ───── Use case → agent: one colour ties the picked use case to the question it sends ───── */
.uc [data-cat], .agw[data-cat], .agw-cat[data-cat], .agw-q[data-cat] { --uc: #fbbf24; }
.uc [data-cat="product"], .agw[data-cat="product"], .agw-cat[data-cat="product"], .agw-q[data-cat="product"] { --uc: #a78bfa; }
.uc [data-cat="security"], .agw[data-cat="security"], .agw-cat[data-cat="security"], .agw-q[data-cat="security"] { --uc: #f87171; }
.uc-q, .uc-go { display: none; }
@media (min-width: 1121px) {
  .hero[data-demo] .hero-left > .uc button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; transition: background .3s, border-color .3s, box-shadow .3s; }
  .hero[data-demo] .hero-left > .uc button[aria-selected="true"] { background: color-mix(in srgb, var(--uc) 10%, transparent); border-color: color-mix(in srgb, var(--uc) 55%, transparent); box-shadow: inset 3px 0 0 var(--uc), 0 0 34px -14px var(--uc); }
  .hero[data-demo] .hero-left > .uc .uc-q { display: block; grid-column: 1; font-size: 13px; line-height: 1.35; color: rgb(var(--ink) / .72); }
  .hero[data-demo] .hero-left > .uc .uc-q:empty { display: none; }
  .hero[data-demo] .hero-left > .uc .uc-go { display: block; grid-column: 2; grid-row: 1 / span 2; font-size: 16px; color: var(--uc); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
  .hero[data-demo] .hero-left > .uc button[aria-selected="true"] .uc-go { opacity: 1; transform: none; animation: ucNudge 1.6s ease-in-out 2; }
}
@keyframes ucNudge { 50% { transform: translateX(4px); } }
/* the click lands in the agent window: a ring in the same colour */
.agw.hit { animation: agwHit 1.3s cubic-bezier(.2,.7,.2,1); }
@keyframes agwHit { 0% { box-shadow: 0 0 0 0 transparent; } 18% { box-shadow: 0 0 0 2px var(--uc), 0 0 70px -10px var(--uc); } 100% { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; } }
/* and the question arrives tagged with it */
.agw-cat { align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; margin-bottom: -6px; font-size: 11.5px; font-weight: 500; color: var(--uc); animation: rise .35s both; }
.agw-cat i { width: 6px; height: 6px; border-radius: 50%; background: var(--uc); box-shadow: 0 0 8px var(--uc); }
.agw-q[data-cat] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uc) 45%, transparent); }

/* ───── Headline subline + CTAs ───── */
.hero-powered { margin: 14px 0 0; font-size: clamp(15px, 1.2vw, 18px); font-weight: 400; letter-spacing: -.01em; color: var(--fg-2); }
.hero-powered b { font-weight: 500; color: var(--accent); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-ctas .btn { height: 44px; padding: 0 20px; font-size: 14.5px; }
.hero-try span { display: inline-block; margin-left: 4px; transition: transform .25s var(--ease); }
.hero-try:hover span { transform: translateX(3px); }
.hero-left .agent-cta { margin-top: 32px; }
@media (max-width: 1120px) { .hero-ctas { justify-content: center; } .hero-powered { text-align: center; } }

/* ───── Copying the agent prompt: a quiet, in-place confirmation ───── */
.agent-cta { position: relative; }
.agent-prompt { transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease); }
.agent-prompt.copied { box-shadow: inset 0 0 0 1px rgba(94,242,176,.45), inset 0 1px 0 rgb(var(--ink) / .06); }
.agent-prompt .agent-copy { transition: opacity .2s; }
.agent-tab .cp-label, .agent-tab .cp-next { transition: opacity .3s var(--ease), transform .35s var(--ease); }
.cp-swap { display: inline-grid; } /* both labels share one cell, so the tab keeps its size */
.cp-swap > span { grid-area: 1 / 1; white-space: nowrap; }
.agent-tab .cp-next { color: var(--mint); opacity: 0; transform: translateY(4px); }
.agent-tab.copied .cp-label { opacity: 0; transform: translateY(-4px); }
.agent-tab.copied .cp-next { opacity: 1; transform: none; }

/* ───── Book a demo (MOCKUP scheduler, see book-demo.js) ───── */
html.bd-lock { overflow: hidden; }
.bd { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.bd.on { visibility: visible; }
.bd-back { position: absolute; inset: 0; background: rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.bd.on .bd-back { opacity: 1; }
.bd-dlg { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); width: min(900px, 100%); max-height: calc(100svh - 40px); overflow: auto; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 40px 120px -30px rgb(0 0 0 / calc(.9 * var(--sh))); color: var(--fg); text-align: left;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.bd.on .bd-dlg { opacity: 1; transform: none; }
.bd-x { position: absolute; right: 14px; top: 14px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--fg-2); }
.bd-x:hover { background: rgb(var(--ink) / .07); color: var(--fg-0); }
.bd-side { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; border-right: 1px solid var(--line); }
.bd-logo { height: 24px; width: auto; align-self: flex-start; }
.bd-side h2 { margin: 8px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--fg-0); }
.bd-side p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.bd-meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--fg); }
.bd-meta li { display: flex; align-items: center; gap: 10px; }
.bd-meta svg, .bd-when svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--lit); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bd-host { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.bd-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #03301f; font-size: 13px; font-weight: 700; }
.bd-host b { display: block; font-size: 13.5px; font-weight: 600; color: var(--fg-0); }
.bd-host span { font-size: 12px; color: var(--fg-3); }
.bd-mock { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.bd-main { padding: 28px 28px 26px; min-height: 440px; }
.bd-step { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 15px; font-weight: 600; color: var(--fg-0); }
.bd-step > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #000; font-size: 12px; }
.bd-backlink { margin-right: 4px; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.bd-backlink:hover { color: var(--fg-0); }
.bd-cal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.bd-cal.has-day { grid-template-columns: minmax(0, 1fr) 190px; }
.bd-mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: var(--fg-0); }
.bd-mh button { width: 30px; height: 30px; border-radius: 8px; font-size: 18px; color: var(--fg-2); }
.bd-mh button:hover:not(:disabled) { background: rgb(var(--ink) / .07); color: var(--fg-0); }
.bd-mh button:disabled { opacity: .3; }
.bd-wd, .bd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.bd-wd span { font-size: 11px; font-weight: 600; color: var(--fg-3); padding-bottom: 4px; }
.bd-d { aspect-ratio: 1; border-radius: 50%; font-size: 13.5px; color: rgb(var(--ink) / .28); }
.bd-d.open { color: var(--fg-0); font-weight: 600; background: rgba(19,233,137,.09); }
.bd-d.open:hover { background: rgba(19,233,137,.2); }
.bd-d.sel { background: var(--accent) !important; color: #000; }
.bd-slots h3 { margin: 4px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--fg-0); }
.bd-sl { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.bd-sl button { height: 40px; border-radius: 10px; border: 1px solid rgba(94,242,176,.4); color: var(--lit); font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.bd-sl button:hover { background: rgba(19,233,137,.1); }
.bd-sl button.sel { background: var(--accent); color: #000; border-color: var(--accent); }
.bd-next { width: 100%; height: 40px; margin-top: 10px; justify-content: center; }
.bd-empty { display: grid; place-items: center; }
.bd-empty p { margin: 0; font-size: 13px; color: var(--fg-3); }
.bd-when { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 11px 13px; border-radius: 11px; background: rgba(19,233,137,.07); border: 1px solid rgba(94,242,176,.25); font-size: 14px; font-weight: 600; color: var(--fg-0); }
.bd-when span { font-weight: 400; color: var(--fg-3); font-size: 12.5px; }
.bd-form { display: flex; flex-direction: column; gap: 12px; }
.bd-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--fg); }
.bd-form label i { font-style: normal; font-weight: 400; color: var(--fg-3); }
.bd-form input, .bd-form textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgb(var(--ink) / .03); color: var(--fg-0); font: inherit; font-size: 14px; outline: 0; resize: vertical; }
.bd-form input:focus, .bd-form textarea:focus { border-color: rgba(94,242,176,.6); }
.bd-form label.err input { border-color: var(--red); }
.bd-confirm { height: 44px; margin-top: 4px; justify-content: center; }
.bd-done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 30px; }
.bd-done h3 { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--fg-0); }
.bd-done p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.bd-done .bd-when { margin: 4px 0; }
.bd-check { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #000; font-size: 24px; font-weight: 700; box-shadow: 0 0 40px -6px rgba(19,233,137,.8); animation: cpPop .5s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 760px) {
  .bd-dlg { grid-template-columns: 1fr; }
  .bd-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px; }
  .bd-host, .bd-side p { display: none; }
  .bd-main { padding: 22px; min-height: 0; }
  .bd-cal.has-day { grid-template-columns: 1fr; }
  .bd-sl { flex-direction: row; flex-wrap: wrap; max-height: none; } .bd-sl button { padding: 0 14px; }
}
.bd-month { width: 100%; max-width: 340px; }
.bd-cal:not(.has-day) { justify-items: center; }
.bd-cal:not(.has-day) .bd-slots { width: 100%; max-width: 340px; }
.bd-d { width: 100%; max-width: 42px; justify-self: center; }
.sx-pick { position: fixed; left: 50%; bottom: 18px; z-index: 100; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 999px; background: rgba(16,16,18,.92); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 12px var(--mono); box-shadow: 0 12px 40px -10px rgba(0,0,0,.7); }
.sx-pick span { padding: 0 8px 0 10px; color: #77777e; letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; }
.sx-pick button { height: 30px; padding: 0 14px; border-radius: 999px; color: #b5b5bb; }
.sx-pick button:hover { color: #fff; background: rgba(255,255,255,.07); }
.sx-pick button[aria-pressed="true"] { background: #13E989; color: #000; }
@media (max-width: 1120px) { .sx-pick { display: none; } }
/* the Coralogix node (cxv-node.js) draws into this layer */
.cxv-mount { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sx-pick.sx-left { left: 18px; transform: none; }

/* every answer ends with the action, already prepared: a fix, a pull request or a containment plan */
.agw-fix { margin: 2px 0 10px; border-radius: 11px; border: 1px solid rgb(var(--ink) / .1); background: rgb(0 0 0 / calc(.28 * var(--sh) + .02)); overflow: hidden; animation: rise .4s both; }
.agw-fix-h { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 12px; border-bottom: 1px solid rgb(var(--ink) / .06); font-size: 12px; }
.agw-fix-h b { font-weight: 600; color: var(--fg-0); white-space: nowrap; }
.agw-fix-h em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: rgb(var(--ink) / .45); }
.agw-fix-go { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--inv); color: var(--on-inv); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.agw-fix-go span { transition: transform .2s; } .agw-fix-go:hover span { transform: translateX(2px); }
.agw-fix pre { margin: 0; padding: 7px 0 8px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: rgb(var(--ink) / .82); white-space: pre-wrap; word-break: break-word; }
.agw-fix pre span { display: block; padding: 0 12px; }
.agw-fix pre .del { color: #f3a3a3; background: rgba(248,113,113,.1); }
.agw-fix pre .add { color: #8ff0c3; background: rgba(19,233,137,.1); }
.agw-fix-steps { list-style: none; margin: 0; padding: 7px 12px 9px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: rgb(var(--ink) / .85); }
.agw-fix-steps li { display: flex; align-items: center; gap: 8px; }
.agw-fix-steps i { width: 13px; height: 13px; flex: none; border-radius: 4px; border: 1px solid rgb(var(--ink) / .3); }
:root[data-theme="light"] .agw-fix pre .del { color: #b42318; } :root[data-theme="light"] .agw-fix pre .add { color: #067a47; }
.agw-md .agw-fix-steps { padding: 7px 12px 9px; margin: 0; gap: 3px; }
.agw-md .agw-fix-steps li { margin: 0; padding: 0; line-height: 1.5; }
.agw-md .agw-fix pre { margin: 0; }

/* the conversation scrolls when an answer is taller than the window (thin, quiet scrollbar) */
/* the conversation still scrolls (wheel, touch), it just draws no scrollbar */
.agw-conv { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.agw-conv::-webkit-scrollbar { display: none; }

/* the line above the customer logos: the six are examples, not the list */
.customers-label { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto 22px; padding: 0 48px; font-family: var(--mono); font-size: 12.5px; color: rgb(var(--ink) / .45); }
@media (max-width: 1120px) { .customers-label { text-align: center; padding: 0 20px; margin-bottom: 16px; } }

/* product insights: a small chart inside the answer */
.agw-chart { margin: 0 0 10px; padding: 8px 10px 6px; border-radius: 11px; border: 1px solid rgb(var(--ink) / .08); background: rgb(var(--ink) / .025); animation: rise .4s both; }
.agw-chart-h { margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; color: rgb(var(--ink) / .45); }
.agw-chart svg { display: block; width: 100%; height: auto; overflow: visible; color: rgb(var(--ink) / .16); }
.agw-chart g { transform-box: fill-box; transform-origin: bottom; animation: barUp .5s var(--d) cubic-bezier(.2,.7,.2,1) both; }
.agw-chart text { font-family: var(--mono); fill: rgb(var(--ink) / .45); }
.agw-chart .v { font-size: 9.5px; } .agw-chart .l { font-size: 9px; }
.agw-chart g.hi .v { fill: var(--fg-0); font-weight: 600; }
@keyframes barUp { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }

/* an answer's action ("Open PR", "Run containment") points back at the install prompt */
.agent-cta.nudge .agent-prompt { animation: promptNudge 1.5s cubic-bezier(.2,.7,.2,1) 2; }
@keyframes promptNudge { 0%, 100% { box-shadow: inset 0 1px 0 rgb(var(--ink) / .06), 0 0 0 0 rgba(94,242,176,0); } 30% { box-shadow: inset 0 0 0 1px rgba(94,242,176,.8), 0 0 0 5px rgba(94,242,176,.16), 0 0 44px -8px rgba(19,233,137,.7); } }
.agent-tab .cp-hint { grid-area: 1 / 1; white-space: nowrap; color: var(--mint); opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
.agent-tab.nudge .cp-label { opacity: 0; transform: translateY(-4px); }
.agent-tab.nudge .cp-hint { opacity: 1; transform: none; }
.agent-tab.nudge.copied .cp-hint { opacity: 0; } /* a copy during the nudge wins */
.agw-fix-go { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .agent-cta.nudge .agent-prompt { animation: none; box-shadow: inset 0 0 0 1px rgba(94,242,176,.8); } }

/* the logo section starts 80px below the hero content */
/* the logo section starts 80px below the demo: the stage ends 80px above it (the logo block is 143px tall)
   and the demo sits at the bottom of its box, so the gap stays exactly 80px at every width */
@media (min-width: 1121px) {
  .hero[data-demo] .hero-stage { bottom: calc(143px + 80px - 24px); align-items: flex-end; } /* the demo has 24px of empty room under the agent window */
  .hero[data-demo] .stage-in { transform-origin: 50% 100%; } /* scale toward the bottom edge, so the gap holds */
}

/* ───── Homepage rhythm: the big section gaps a quarter shorter than on inner pages ───── */
.hero[data-demo] ~ .section { padding: 120px 0; }
.hero[data-demo] ~ .final { padding: 120px 0 150px; }
@media (max-width: 960px) {
  .hero[data-demo] ~ .section { padding: 90px 0; }
  .hero[data-demo] ~ .final { padding: 90px 0 120px; }
}
@media (max-width: 560px) {
  .hero[data-demo] ~ .section, .hero[data-demo] ~ .final { padding: 72px 0; }
}

/* ───── PERF-2: the demo stage's space is reserved before first paint ─────
   The stage frame is static markup in the homepage now; it stays invisible (visibility, not display,
   so the space is kept) until hero-demo.js fills it and sets data-ready. The visitor sees the demo
   appear at the same moment as before — the page just no longer moves to make room for it. The
   min-height mirrors what hero-demo.js computes for the frame (fit(): the frame hugs the scaled
   demo, 614px tall at design width 1180, +32px above and +40px below; capped where the scale
   reaches 1). The skeleton is display:none without JS, like the JS-built stage never existed. */
.hero[data-demo] .hero-stage:not([data-ready]) { visibility: hidden; }
@media (min-width: 1121px) {
  .hero[data-layout="stack"] .stage-in { width: 1180px; height: 614px; }
  .hero[data-layout="stack"] .hero-stage { min-height: min(686px, calc((100vw - 176px) * 614 / 1180 + 72px)); }
}
@media (max-width: 560px) {
  .hero-stage { min-height: 537px; }
}

/* Homepage hero title in Title Case ("The Telemetry Lake", Chris): 3% smaller on phones so its first line
   still fits on one line at 360–430px; tablet and desktop unchanged */
@media (max-width: 560px) { .hero[data-demo] h1.hero-title { font-size: clamp(39px, 11.05vw, 54px); } }

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .mega-feature-tag,
:root[data-theme="light"] .chip-agent b,
:root[data-theme="light"] .lake-n,
:root[data-theme="light"] .tab.active .tab-n,
:root[data-theme="light"] .lm-item.done { color: var(--mint); }
:root[data-theme="light"] .hero .hero-powered b i { background: none; color: var(--mint); } /* the subtitle's green phrase: solid, 5.7:1 */

/* Light skin: hard-coded faint ink text (rgb(var(--ink) / <.55)) is raised to --fg-3 (≥4.5:1). Elements
   with a lit state are matched only at rest (:not(.on)), so the "dim at rest, mint when used" language
   keeps working. Placeholders and the chart strokes are left as they are. */
:root[data-theme="light"] .px-scale,
:root[data-theme="light"] .px-body [data-i]:not(.on),
:root[data-theme="light"] .ps-h span,
:root[data-theme="light"] .ps-row:not(.on) .ps-status,
:root[data-theme="light"] .ps-node:not(.on),
:root[data-theme="light"] .agw-md li::marker,
:root[data-theme="light"] .agw-meta,
:root[data-theme="light"] .pn-svc span:not(.on),
:root[data-theme="light"] .pn-st,
:root[data-theme="light"] .pc-sig span:not(.on),
:root[data-theme="light"] .pc-svc,
:root[data-theme="light"] .hero[data-demo] .hero-left > .uc::before,
:root[data-theme="light"] .pv-ev:empty::before,
:root[data-theme="light"] .bd-d,
:root[data-theme="light"] .agw-fix-h em,
:root[data-theme="light"] .customers-label,
:root[data-theme="light"] .agw-chart-h { color: var(--fg-3); }

/* Proof strip: inline source link */
.proof span a { color: inherit; text-decoration: underline; text-decoration-color: rgb(var(--ink) / .3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.proof span a:hover { color: var(--fg); text-decoration-color: currentColor; }