/* Scops, every page but the home page (home.css). Figtree (the app's), Sora only in the wordmark. The app's graphite, white and one green;
   the hero dashboard keeps the wait-class palette of the app's charts, so it reads like the app itself. */
@font-face { font-family: 'Sora'; src: url('../fonts/Sora-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; src: url('../fonts/Sora-latin-ext.woff2') format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Mona Sans'; src: url('../fonts/MonaSans-latin.woff2') format('woff2'); font-weight: 200 900; font-display: swap; 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: 'Mona Sans'; src: url('../fonts/MonaSans-latin-ext.woff2') format('woff2'); font-weight: 200 900; font-display: swap; 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: 'Figtree'; src: url('../fonts/Figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; 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: 'Figtree'; src: url('../fonts/Figtree-latin-ext.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --display: 'Figtree', system-ui, sans-serif;
  --text: 'Figtree', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --bg: #121212;
  --surface: #1C1C1C;
  --ink: #F4F4F4;
  --ink-2: #B9B9B9;
  --ink-3: #969696;
  --olive: #40BF8C;
  --pop: #B69CFF; /* rare accent: only where something must pop between two colors */
  --olive-hi: #7BE1B2;
  --olive-deep: #00845A;
  --olive-ink: #071911;
  --crit: #F0616B;
  --warn: #F2B654;
  --ok: #79B98A;
  --sand: #EEEDE6;
  --sand-ink: #17170F;
  --sand-2: #5B5B50;
  --paper: #F6F5F0;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: max(16px, env(safe-area-inset-left, 0px), 4vw);
  --max: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.04; text-wrap: balance; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 6px; }
.olive { color: var(--olive); }
.dim { color: #8A8A8A; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; background: rgba(18,18,18,.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; padding-top: env(safe-area-inset-top, 0px); }
.nav.edge { border-bottom-color: rgba(255,255,255,.08); }
.nav-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 52px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 600 17px/1 'Sora', system-ui, sans-serif; letter-spacing: -0.02em; }
.mark { width: 24px; height: 24px; fill: var(--olive); flex: none; }
.links { display: flex; gap: 26px; font-size: 14px; color: var(--ink-2); }
.links a { transition: color .2s; }
.links a:hover { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--olive); color: var(--olive-ink); font: 600 17px/1 var(--text); cursor: pointer; transition: background .2s, transform .25s var(--ease), box-shadow .3s; white-space: nowrap; }
.btn:hover { background: var(--olive-hi); }
.btn:active { transform: scale(.97); }
.btn-sm { height: 30px; padding: 0 15px; font-size: 14px; }
.btn-big { height: 54px; padding: 0 38px; font-size: 17px; }
.btn-dark { background: var(--sand-ink); color: #fff; }
.btn-dark:hover { background: #2a2a1f; }
.cta { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.cta-row { display: flex; align-items: center; gap: 28px; }
.cta-link { font: 500 17px var(--text); color: var(--olive); transition: color .2s; }
.cta-link:hover { color: var(--olive-hi); }
.cta-link::after { content: ' \203A'; }

/* ---------- section scaffolding ---------- */
section { position: relative; }
.sec-head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sec-head.center { text-align: center; }
.sec-head.center .sub { margin-left: auto; margin-right: auto; }
.kicker { font: 600 clamp(20px, 2vw, 26px)/1 var(--display); letter-spacing: -0.02em; color: var(--ink-2); margin-bottom: 18px; }
.kicker.big { font-size: clamp(32px, 3.6vw, 50px); letter-spacing: -0.022em; color: var(--olive); margin-bottom: 16px; }
.title { font-size: clamp(40px, 6vw, 84px); }
.sub { margin-top: 24px; max-width: 640px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-2); text-wrap: balance; }

/* ---------- orbit: the product's AI glyph (the owl inside two turning orbits), as in the app ---------- */
.orb { --box: 160px; --st: 1.6; --node: 1; position: relative; display: block; width: var(--box); height: var(--box); flex: none; color: var(--olive); }
.orb-l { position: absolute; inset: 0; display: block; pointer-events: none; }
.orb-l svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb-sweep, .orb-track { will-change: transform; }
.orb .ring-a { fill: none; stroke: currentColor; stroke-width: var(--st); opacity: .42; stroke-dasharray: 100 100; animation: orbDraw 1.4s cubic-bezier(.16,1,.3,1) .45s backwards; }
.orb .ring-b { fill: none; stroke: currentColor; stroke-width: calc(var(--st) * 1.5); stroke-linecap: round; stroke-dasharray: 0 2.5; opacity: .4; animation: orbRingIn 1.2s cubic-bezier(.16,1,.3,1) .7s backwards; }
.orb-sweep { animation: orbFade .8s ease-out 1.8s backwards, orbSpin 7s linear 1.8s infinite; }
.orb-sweep circle { fill: none; stroke: currentColor; stroke-width: calc(var(--st) * 1.6); stroke-linecap: round; stroke-dasharray: 9 91; }
.orb-track.a { animation: orbSpin 28s linear infinite; }
.orb-track.b { animation: orbSpinR 42s linear infinite; }
.orb-node { scale: var(--node); }
.orb-cell { opacity: .5; animation: orbLit 7s ease-in-out calc(1.6s + var(--i) * 1.4s) infinite; }
.orb-cell rect { fill: currentColor; animation: orbCellIn .7s cubic-bezier(.16,1,.3,1) calc(.9s + var(--i) * 90ms) backwards; }
.orb-owl { position: absolute; inset: 17.4419%; animation: orbEnter 1.2s cubic-bezier(.16,1,.3,1) backwards; }
.orb-body { position: absolute; inset: 0; display: block; animation: orbTilt 10s 2s infinite; }
.orb-body svg { width: 100%; height: 100%; overflow: visible; }
.orb-body path { fill: currentColor; }
.orb .o-eye-l, .orb .o-eye-r { fill-rule: evenodd; }
.orb .o-eye-l { animation: orbEyeL 1.2s cubic-bezier(.16,1,.3,1) .06s backwards; }
.orb .o-eye-r { animation: orbEyeR 1.2s cubic-bezier(.16,1,.3,1) .06s backwards; }
.orb .o-crown { animation: orbCrown 1.2s cubic-bezier(.16,1,.3,1) .14s backwards; }
.orb .o-beak { animation: orbFade .8s ease-out .3s backwards; }
.orb.m { --st: 3; --node: 1.4; }
.orb.s { --st: 6; --node: 2; }
.orb:not(.s):not(.m) .ring-b { display: none; }
.orb.s :is(.ring-b, .orb-track.b, .orb-sweep) { display: none; }
.orb.s .orb-body { animation: none; }
@keyframes orbSpin { to { rotate: 360deg; } }
@keyframes orbSpinR { to { rotate: -360deg; } }
@keyframes orbDraw { from { stroke-dashoffset: 100; } }
@keyframes orbRingIn { from { opacity: 0; scale: .92; } }
@keyframes orbFade { from { opacity: 0; } }
@keyframes orbCellIn { from { opacity: 0; scale: 0; } }
@keyframes orbLit { 0%, 100% { opacity: .5; } 20% { opacity: .95; } 45% { opacity: .5; } }
@keyframes orbTilt { 0%, 52%, 100% { rotate: 0deg; animation-timing-function: cubic-bezier(.37,0,.63,1); } 60%, 72% { rotate: -7deg; animation-timing-function: cubic-bezier(.37,0,.63,1); } 80% { rotate: 1deg; animation-timing-function: cubic-bezier(.37,0,.63,1); } }
@keyframes orbEnter { from { opacity: 0; filter: blur(3px); translate: 0 6px; scale: .94; } }
@keyframes orbEyeL { from { translate: -5px 0; opacity: 0; } }
@keyframes orbEyeR { from { translate: 5px 0; opacity: 0; } }
@keyframes orbCrown { from { translate: 0 -6px; opacity: 0; } }

/* ---------- hero: the Scops lockup, one headline and a plain paragraph, over one database's Activity chart and Top SQL ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(52px + clamp(24px, 4vh, 56px) + env(safe-area-inset-top, 0px)) 0 clamp(32px, 5vh, 64px); text-align: center; overflow-x: clip; }
.hero-copy { position: relative; z-index: 2; padding: 0 var(--gutter); }
.hero { --lock: clamp(26px, 2vw, 34px); --h1: clamp(44px, 5vw, 88px); --lede: clamp(17px, 1.3vw, 21px); }
.hero-lock { display: inline-flex; align-items: center; gap: 12px; font: 600 var(--lock)/1 'Sora', system-ui, sans-serif; letter-spacing: -0.02em; color: var(--ink); }
.hero-lock svg { width: 1.6em; height: .88em; fill: var(--olive); flex: none; }
.hero h1 { margin-top: 22px; font-size: var(--h1); letter-spacing: -0.022em; line-height: 1; white-space: nowrap; }
.hero-lede { max-width: 38em; margin: 20px auto 0; font: 500 var(--lede)/1.45 var(--text); color: #9A9A9A; text-wrap: balance; }
.hero-lede b { font-weight: 600; color: var(--olive); white-space: nowrap; }   /* each green phrase stays on one line */
@media (max-width: 640px) { .hero-lede b { white-space: normal; } .hero-lede .keep { white-space: nowrap; } }   /* phones: only AI-driven, so the paragraph keeps five lines */
.hero .cta { margin-top: 28px; flex-direction: column; gap: 14px; }
.ver { font: 500 14px var(--text); color: var(--ink-3); }
.rise { opacity: 0; transform: translateY(18px); animation: rise 1s var(--ease) forwards; }
.hero-copy > .rise:nth-child(2) { animation-delay: .1s; } .hero-copy > .rise:nth-child(3) { animation-delay: .2s; } .hero-copy > .rise:nth-child(4) { animation-delay: .3s; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* the Dashboard's Activity chart and Top SQL in the app's palette, drawn on the page with no card around them.
   The chart runs into the next 15 minutes, where Radar draws what is coming. */
.act { --h: clamp(140px, calc(100vh - 740px), 260px); max-width: 1200px; margin: 44px auto 0; padding: 0 var(--gutter); text-align: left; }
@supports (height: 100svh) { .act { --h: clamp(140px, calc(100svh - 740px), 260px); } }
.act.rise { animation-delay: .25s; }
.act-head { display: flex; align-items: baseline; gap: 24px; padding: 0 0 12px; white-space: nowrap; }
.act-db { font: 600 15px var(--text); color: var(--ink); letter-spacing: .02em; }
.act-sub { margin-left: -14px; font: 500 15px var(--text); color: var(--ink-3); }
.act-vit { display: flex; gap: 24px; }
.act-vit span { display: flex; align-items: baseline; gap: 8px; }
.act-vit i { font: 500 14px var(--text); font-style: normal; color: var(--ink-3); }
.act-vit b { font: 600 15px var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.act-find { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--text); color: var(--ink-2); }
.act-find::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5A5A5A; }
.act-find.warn, .act-find.crit { color: var(--olive); }
.act-find.warn::before, .act-find.crit::before { background: var(--olive); }
.act-chart { position: relative; height: calc(var(--h) + 60px); background: linear-gradient(90deg, transparent, #2E2E2E 8%, #2E2E2E 92%, transparent) top / 100% 1px no-repeat; }
.act-plot { position: absolute; left: 0; right: 0; top: 24px; height: var(--h); cursor: crosshair; }
#actCv, .act-fc { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
#actCv { position: absolute; inset: 0; width: 100%; height: 100%; }
.act-fc { position: absolute; top: -24px; bottom: 0; right: 0; background: rgba(255,255,255,.03); }
.act-fc span { position: absolute; top: 5px; left: 10px; font: 500 12px var(--text); color: var(--ink-3); white-space: nowrap; }
.act-lane { position: absolute; left: 0; right: 0; top: calc(var(--h) + 28px); height: 16px; }
.act-x { position: absolute; top: calc(var(--h) + 42px); font: 500 11px var(--text); color: #7A7A7A; transform: translateX(-50%); white-space: nowrap; }
.act-x.now { color: var(--olive); font-weight: 600; }
.act-pin { position: absolute; top: -20px; bottom: 0; width: 0; color: var(--olive); pointer-events: none; }
.act-pin::before { content: ''; position: absolute; top: 15px; bottom: 0; left: 0; border-left: 1.5px dashed currentColor; opacity: .85; }
.act-pin b { position: absolute; top: 0; left: 0; transform: translateX(-50%); min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center; font: 600 11px var(--mono); line-height: 1; background: currentColor; }
.act-pin b::after { content: '1'; color: #1C1C1C; }
.act-pin.fc b { background: var(--bg); box-shadow: inset 0 0 0 1.5px currentColor; }
.act-pin.fc b::after { color: currentColor; }
.act-pin.fc::before { border-left-style: dotted; }
.act-pc { position: absolute; top: 1px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #BDBDBD; }
.act-pc::after { content: ''; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-top: 1.5px solid #BDBDBD; border-left: 1.5px solid #BDBDBD; border-radius: 1px; }
.act-tip { position: absolute; z-index: 3; width: 300px; padding: 11px 13px 12px; border-radius: 12px; background: rgba(16,16,16,.96); box-shadow: 0 0 0 1px #2C2C2C, 0 24px 50px -24px #000; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.act-tip.on { opacity: 1; transform: none; }
.act-tip.quiet { padding: 0; background: none; box-shadow: none; pointer-events: none; }
.act-tip.quiet.on { opacity: .55; }
.act-tip.quiet b { font-size: 13px; font-weight: 500; }
.act-tip-h { font: 600 12px var(--text); color: var(--olive); }
.act-tip b { display: block; margin-top: 3px; font: 600 14px var(--text); color: var(--ink); }
.act-tip p { margin: 5px 0 0; font: 400 13px/1.45 var(--text); color: var(--ink-2); }
.act-tip p:empty { display: none; }
.act-trs { display: grid; gap: 3px; }
.act-tr { display: flex; align-items: center; gap: 7px; font: 500 12px var(--text); color: var(--ink-2); }
.act-tr i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.act-tr em { margin-left: auto; font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.act-grid { background: linear-gradient(90deg, transparent, #2E2E2E 8%, #2E2E2E 92%, transparent) top / 100% 1px no-repeat; }
.act-gh, .act-gr { display: grid; grid-template-columns: 210px minmax(160px, 300px) minmax(0, 1fr) 110px; align-items: center; column-gap: 18px; }
.act-gh { height: 34px; background: linear-gradient(90deg, transparent, #2E2E2E 8%, #2E2E2E 92%, transparent) bottom / 100% 1px no-repeat; font: 500 12px var(--text); color: var(--ink-3); }
.act-rows { position: relative; }
.act-gr { position: absolute; left: 0; right: 0; top: 0; height: 38px; background: linear-gradient(90deg, transparent, #171717 8%, #171717 92%, transparent) bottom / 100% 1px no-repeat; font-size: 13px; color: #B9B9B9; transition: transform .8s var(--ease), opacity .5s, background .4s; }
.act-gr.sel { background: linear-gradient(90deg, transparent, #171717 8%, #171717 92%, transparent) bottom / 100% 1px no-repeat, linear-gradient(90deg, transparent, rgba(255,255,255,.035) 10%, rgba(255,255,255,.035) 90%, transparent); }
.act-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.act-id code { font: 500 13px var(--mono); color: #E5E5E5; }
.act-id small { font: 500 12px var(--text); white-space: nowrap; color: var(--ink-3); }
.act-id small.crit { color: var(--olive); }
.act-ac { display: flex; align-items: center; gap: 10px; }
.act-rail { flex: 1; display: flex; height: 6px; border-radius: 3px; background: #1C1C1C; overflow: hidden; }
.act-rail i { display: block; height: 100%; transition: width .8s var(--ease); }
.act-ac .pct { flex: 0 0 44px; text-align: right; font: 500 13px var(--text); color: #E5E5E5; font-variant-numeric: tabular-nums; }
.act-txt { font: 400 12px var(--mono); color: #8C8C8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-user { color: #7A7A7A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-toast { position: absolute; left: 14px; top: 4px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 8px; border-radius: 999px; background: rgba(16,16,16,.96); box-shadow: inset 0 0 0 1px #2C2C2C; font: 600 13px var(--text); color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .45s, transform .45s var(--ease); }
.act-toast.on { opacity: 1; transform: none; }
.act-toast i { width: 17px; height: 17px; border-radius: 50%; flex: none; background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23071911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-height: 800px) and (min-width: 641px) {
  .act { --h: clamp(120px, calc(100vh - 678px), 250px); margin-top: 28px; }
}
@media (max-width: 860px) {
  .act-gh, .act-gr { grid-template-columns: 150px minmax(0, 1fr); }
  .act-gh :nth-child(n+3), .act-gr > :nth-child(n+3) { display: none; }
}
@media (max-width: 640px) {
  .act { --h: 170px; margin-top: 32px; }
  .act-head { gap: 14px; }
  .act-vit { display: none; }
  .act-sub { margin-left: -6px; }
  .act-find { font-size: 13px; }
  .act-tip { width: 230px; }
  .act-tip p { display: none; }
  .act-fc span { display: none; }
  .act-toast { display: none; }
  .act-gh, .act-gr { grid-template-columns: 196px minmax(0, 1fr); column-gap: 12px; }
}

/* ---------- pillars ---------- */
.pillars { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pc { position: relative; background: var(--surface); border-radius: 20px; padding: 26px 26px 30px; box-shadow: inset 0 0 0 1px #2E2E2E; transition: box-shadow .4s; }
.pc:hover { box-shadow: inset 0 0 0 1px #2E2E2E; }
.pc h3 { font-size: 28px; margin-top: 22px; }
.pc p { margin-top: 10px; font-size: 17px; color: var(--ink-2); }
.pc-vis { height: 170px; border-radius: 12px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #2E2E2E; position: relative; overflow: hidden; }
.vis-ai { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 14px 16px 14px 12px; }
.vai-orb { display: block; }
.vai-chat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vq { align-self: flex-end; font-size: 13px; background: #242424; padding: 7px 11px; border-radius: 12px 12px 4px 12px; }
.va { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--ink); background: #1C1C1C; padding: 8px 11px; border-radius: 12px 12px 12px 4px; }
.vis-ai .vq, .vis-ai .va { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); }
.vis-ai.play .vq { opacity: 1; transform: none; }
.vis-ai.play .va { opacity: 1; transform: none; transition-delay: .7s; }
.vis-mesh svg { width: 100%; height: 100%; }
.vis-lic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.xp s { position: relative; text-decoration: none; font: 600 22px var(--display); letter-spacing: -0.022em; color: #6c6c6c; }
.xp s::after { content: ''; position: absolute; left: -6%; right: -6%; top: 52%; height: 3px; border-radius: 3px; background: #EDEDED; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.6,.1,.2,1); }
.vis-lic.play .xp s::after { transform: scaleX(1); }
.vis-lic.play .xp:nth-child(2) s::after { transition-delay: .35s; }
.zero { font: 700 44px/1 var(--display); letter-spacing: -0.022em; color: var(--olive); opacity: 0; transform: scale(.8); transition: opacity .5s .8s, transform .6s .8s var(--ease); }
.vis-lic.play .zero { opacity: 1; transform: none; }

/* ---------- finds the problem and fixes it: one problem at a time, through Radar, Scops AI and Automation ---------- */
.flow { padding: 130px 0 60px; }

.fl-head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.fl-tabs { display: inline-flex; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 999px; background: #101010; box-shadow: inset 0 0 0 1px #222; }
.fl-tabs button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font: 600 15px var(--text); cursor: pointer; transition: background .25s, color .25s; }
.fl-tabs button:hover { color: var(--ink); }
.fl-tabs button[aria-selected="true"] { background: #F4F4F4; color: #1C1C1C; }
.fl { max-width: var(--max); margin: 48px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fl-col { position: relative; min-width: 0; padding-top: 24px; }
.fl-col::before, .fl-col::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px; }
.fl-col::before { right: 0; background: #222; }
.fl-col::after { width: 0; background: #F4F4F4; }
.fl-col.on::after { width: 100%; transition: width 1.7s linear; }
.fl-col.fix.on::after { background: var(--olive); }
.fl-col h3 { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.022em; }
.fl-vis { position: relative; display: flex; flex-direction: column; justify-content: center; margin-top: 20px; height: 204px; padding: 14px 16px; border-radius: 12px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #1C1C1C; overflow: hidden; }
.fl-vis svg { display: block; width: 100%; height: auto; overflow: visible; }
.fl-t { margin-top: 18px; font: 600 17px/1.35 var(--text); color: var(--ink); }
.fl-m { margin-top: 4px; font: 500 13px var(--text); color: var(--ink-3); }
.fl-col :is(.fl-vis, .fl-t, .fl-m) { opacity: .22; transition: opacity .6s; }
.fl-col.on :is(.fl-vis, .fl-t, .fl-m) { opacity: 1; }
.fl.swap .fl-col :is(.fl-vis, .fl-t, .fl-m) { opacity: 0; transition-duration: .35s; }
.fl-col .dr { stroke-dasharray: var(--l, 900); stroke-dashoffset: var(--l, 900); }
.fl-col.on .dr { animation: drw 1.4s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: var(--dl, 0s); }
.fl-col .fa { opacity: 0; }
.fl-col.on .fa { animation: fadeIn .6s forwards; animation-delay: var(--dl, .3s); }
.fl-ai { display: flex; align-items: flex-start; gap: 12px; }
.fl-ai p { font: 500 14px/1.45 var(--text); color: var(--ink-2); }
.fl-bars { margin-top: 16px; display: grid; gap: 10px; }
.fl-bar { display: grid; grid-template-columns: 116px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font: 500 13px var(--text); color: var(--ink-3); }
.fl-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-bar > i { height: 6px; border-radius: 3px; background: #1C1C1C; overflow: hidden; }
.fl-bar > i > i { display: block; height: 100%; border-radius: 3px; background: #5A5A5A; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease) .5s; }
.fl-col.on .fl-bar > i > i { transform: none; }
.fl-bar.hi { color: var(--ink); }
.fl-bar.hi > i > i { background: #F4F4F4; }
.fl-bar b { text-align: right; font: 600 13px var(--text); color: inherit; font-variant-numeric: tabular-nums; }
.fl-ddl { display: flex; align-items: flex-start; gap: 9px; min-width: 0; margin-bottom: 10px; }
.fl-ddl code { min-width: 0; font: 500 13px/1.5 var(--text); color: var(--ink-2); }
.fl-ok { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23071911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }

/* ---------- radar: sixty detectors, six different pictures ---------- */
.radar { padding: 100px 0 70px; }
.fs-head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.fs-num { font: 700 clamp(140px, 24vw, 300px)/.85 var(--display); letter-spacing: -0.022em; color: var(--ink); }
.fs-word { margin-top: 6px; font: 700 clamp(44px, 7vw, 96px)/1 var(--display); letter-spacing: -0.022em; }
.fs-line { margin: 22px auto 0; max-width: 640px; text-wrap: balance; font: 500 clamp(18px, 1.8vw, 23px)/1.4 var(--text); color: var(--ink-2); }
.fs-names { margin: 44px auto 0; max-width: 1100px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fs-names-track { display: flex; gap: 44px; width: max-content; animation: marq 90s linear infinite reverse; }
.fs-names-track span { font-size: 17px; font-weight: 500; color: #7A7A7A; white-space: nowrap; }
.fs-cards { max-width: var(--max); margin: 52px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fsc { background: #1C1C1C; border-radius: 20px; padding: 20px 20px 16px; box-shadow: inset 0 0 0 1px #2E2E2E; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .35s; }
.fsc:hover { box-shadow: inset 0 0 0 1px #333; }
.fsc-top { display: flex; align-items: center; gap: 8px; }
.fsc-top b { font: 600 13px var(--text); color: var(--ink-3); letter-spacing: .05em; }
.eta { margin-left: auto; font: 600 13px var(--mono); color: var(--olive); white-space: nowrap; }
.fsc h3 { font: 600 20px/1.25 var(--display); letter-spacing: -0.02em; min-height: 2.5em; }
.fsc-chart { padding: 6px 0 0; }
.fsc-chart svg { width: 100%; height: auto; overflow: visible; }
.fsc .dr { stroke-dasharray: var(--l, 900); stroke-dashoffset: var(--l, 900); }
.fsc.play .dr { animation: drw 1.5s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: var(--dl, 0s); }
@keyframes drw { to { stroke-dashoffset: 0; } }
.fsc .fa { opacity: 0; }
.fsc.play .fa { animation: fadeIn .6s forwards; animation-delay: var(--dl, .3s); }
@keyframes fadeIn { to { opacity: 1; } }
.fsc .gy { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.fsc.play .gy { animation: growY .7s var(--ease) forwards; animation-delay: var(--dl, 0s); }
@keyframes growY { to { transform: scaleY(1); } }
.ants { stroke-dasharray: 5 6; }
@keyframes ants { to { stroke-dashoffset: -11; } }
.beat { transform-box: fill-box; transform-origin: center; }
@keyframes beat { 50% { transform: scale(1.7); opacity: .35; } }
.needle { transform-box: view-box; transform-origin: 160px 118px; transform: rotate(-90deg); transition: transform 1.8s cubic-bezier(.3,1.3,.4,1) .2s; }
.fsc.play .needle { transform: rotate(var(--deg, 79deg)); }
.gauge-arc { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.3,.7,.3,1) .2s; }
.fsc.play .gauge-arc { stroke-dashoffset: var(--off, 6); }
.ecg { stroke-dasharray: var(--l, 900); stroke-dashoffset: var(--l, 900); }
.fsc.play .ecg { animation: ecg 2.8s linear forwards; }
@keyframes ecg { 0% { stroke-dashoffset: var(--l, 900); } 65%, 100% { stroke-dashoffset: 0; } }
.flat { opacity: 0; }
.fsc.play .flat { animation: flat 2.8s linear forwards; }
@keyframes flat { 0%, 62% { opacity: 0; } 70%, 100% { opacity: 1; } }

/* ---------- Scops AI: question to fix ---------- */
.aisec { padding: 120px 0 70px; text-align: center; overflow-x: clip; }
.ai-orb { display: flex; justify-content: center; margin: 0 auto 26px; min-height: 128px; }
.ai-stage { position: relative; max-width: 880px; margin: 56px auto 0; padding: 0 var(--gutter); }
.ai-card { position: relative; background: #1C1C1C; border-radius: 20px; text-align: left; overflow: hidden; box-shadow: inset 0 0 0 1px #222; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid #222; font: 600 15px var(--display); }
.ai-db { margin-left: 4px; font: 500 14px var(--text); color: var(--ink-3); }
.ai-body { padding: 22px 24px 16px; min-height: 500px; display: flex; flex-direction: column; gap: 18px; }
.uq { align-self: flex-end; max-width: 80%; color: #F7F7F7; background: #353535; box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); border-radius: 18px 18px 4px 18px; padding: 10px 16px; font-size: 15px; font-weight: 500; transform-origin: 100% 100%; animation: bubbleIn .5s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.am-typing { display: inline-flex; gap: 5px; align-items: center; height: 34px; padding: 0 14px; border-radius: 18px 18px 18px 4px; background: #1A1A1A; box-shadow: inset 0 0 0 1px #262626; animation: bubbleIn .4s cubic-bezier(.2,.9,.3,1.15) both; transform-origin: 0 100%; }
.am-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); animation: dotBounce 1s ease-in-out infinite; }
.am-typing i:nth-child(2) { animation-delay: .15s; } .am-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }
.am-av { animation: avPulse 2.4s ease-in-out infinite; }
@keyframes avPulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(64,191,140,0)); } 50% { filter: drop-shadow(0 0 8px rgba(64,191,140,.55)); } }
.am { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; transform-origin: 0 0; animation: bubbleIn .45s cubic-bezier(.2,.9,.3,1.1) both; }
.am-c { display: grid; gap: 12px; min-width: 0; padding-top: 4px; }
.am-c .step { font-size: 14px; }
.ai-input { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 8px 8px 8px 18px; border-radius: 12px; background: #161616; box-shadow: inset 0 0 0 1px #262626; font-size: 15px; color: var(--ink-3); min-height: 50px; }
.ai-input.typing { color: var(--ink); box-shadow: inset 0 0 0 1px #3A3A3A; }
.ai-input i { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; flex: none; background: #2A2A2A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 12.5v-9M4.5 7L8 3.5 11.5 7' fill='none' stroke='%23B4B4B4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: background-color .2s; }
.ai-input.typing i { background-color: var(--olive); }
.steps { display: grid; gap: 9px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); animation: stepIn .4s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.step i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #3a3a3a; border-top-color: var(--olive); animation: spin .8s linear infinite; flex: none; }
.step.done { color: var(--ink); }
.step.done i { animation: none; border: 0; background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23071911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fdIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.verdict { font: 600 17px/1.4 var(--text); animation: fdIn .5s var(--ease) both; }
.verdict code { font: inherit; color: var(--olive); }
.proof { font-size: 15px; color: var(--ink-2); line-height: 1.55; animation: fdIn .5s .1s var(--ease) both; }
.ai-vis { animation: fdIn .5s .2s var(--ease) both; border-radius: 12px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #2E2E2E; padding: 12px 14px; }
.ai-vis svg { width: 100%; height: auto; overflow: visible; }
.ailn { stroke-dasharray: var(--l, 900); stroke-dashoffset: var(--l, 900); animation: drw 1.2s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: var(--dl, .25s); }
.ai-vis .pop { opacity: 0; animation: fadeIn .35s forwards; animation-delay: var(--dl, 0s); }
.abars { display: grid; gap: 12px; padding: 4px 2px; }
.abr { display: grid; grid-template-columns: 170px 1fr 70px; gap: 14px; align-items: center; font-size: 14px; }
.abr b { text-align: right; font: 600 15px var(--display); }
.abar { height: 10px; border-radius: 6px; background: #242424; overflow: hidden; }
.abar i { display: block; height: 100%; border-radius: 6px; transform-origin: left; animation: growX 1s var(--ease) both; }
@keyframes growX { from { transform: scaleX(0); } }
.mono { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.ai-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; animation: fdIn .5s .3s var(--ease) both; }
.ai-act .btn { height: 40px; padding: 0 18px; font-size: 15px; }
.ai-act .btn:disabled { cursor: default; opacity: .85; }
.ai-done { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--olive); animation: fdIn .4s var(--ease) both; }
.ai-done::before { content: ''; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23071911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ai-prompts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding: 0 var(--gutter); }
.ai-prompts button { border: 0; cursor: pointer; padding: 11px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-2); background: #141414; box-shadow: inset 0 0 0 1px #2a2a2a; transition: all .25s var(--ease); }
.ai-prompts button:hover { color: var(--ink); transform: translateY(-2px); }
.ai-prompts button.on { color: #1C1C1C; background: #F4F4F4; box-shadow: none; }
.sec-head.center .ai-sub { max-width: none; }
.ai-native { margin-top: 18px; padding: 0 var(--gutter); font: 600 22px/1.3 var(--display); color: rgba(255,255,255,.94); text-wrap: balance; }
.ai-tools { color: var(--olive); }
.ai-note { margin-top: 18px; padding: 0 var(--gutter); font-size: 14px; color: var(--ink-3); }

/* ---------- archiving: time flows right, old months cross into the archive ---------- */
.archiving { padding: 120px 0 110px; background: var(--sand); color: var(--sand-ink); }
.archiving .kicker { color: var(--sand-2); }
.archiving .sub { color: var(--sand-2); }
.arx { position: relative; max-width: var(--max); margin: 52px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 2fr 128px 1fr; align-items: stretch; }
.arx-box { background: #fff; border-radius: 20px; padding: 16px 18px 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 70px -45px rgba(0,0,0,.35); min-width: 0; }
.arx-arc { background: #10241B; color: #E3F2EA; box-shadow: 0 30px 70px -40px rgba(0,0,0,.6); }
.arx-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--sand-2); white-space: nowrap; overflow: hidden; }
.arx-arc .arx-head { color: #9FBFAF; }
.arx-head b { font: 600 17px var(--display); }
.arx-prod .arx-head b { color: var(--sand-ink); }
.arx-arc .arx-head b { color: #fff; }
.arx-head em { margin-left: auto; font-style: normal; font-size: 13px; }
.arx-lane { position: relative; height: 150px; margin-top: 12px; overflow: hidden; }
.blk { position: absolute; left: 0; bottom: 20px; border-radius: 6px 6px 3px 3px; background: #DADAD0; transition: transform .9s cubic-bezier(.45,.05,.2,1), width .9s cubic-bezier(.45,.05,.2,1), background .4s; will-change: transform; }
.blk.edge { background: #8F8F84; }
.blk span { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font: 500 11px var(--mono); color: var(--sand-2); white-space: nowrap; }
.ablk { position: absolute; left: 0; bottom: 20px; border-radius: 4px 4px 2px 2px; background: #3CBC89; transition: transform .9s cubic-bezier(.45,.05,.2,1); will-change: transform; }
.arx-gap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; }
.arx-arrow { position: relative; width: 58px; height: 2px; background: repeating-linear-gradient(90deg, #8F8F84 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: arrowFlow .8s linear infinite; }
.arx-arrow::before { content: ''; position: absolute; right: -4px; top: -5px; border-left: 9px solid #8F8F84; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@keyframes arrowFlow { to { background-position: 22px 0; } }
.arx-cutlbl { font: 600 13px/1.3 var(--text); color: var(--sand-2); text-align: center; }
.fly { position: absolute; left: 0; top: 0; z-index: 5; border-radius: 6px; background: #8F8F84; pointer-events: none; }
.chk { position: absolute; left: 0; top: 0; z-index: 4; width: 8px; height: 8px; border-radius: 2px; background: #8F8F84; pointer-events: none; opacity: 0; }
.arx-bottom { max-width: var(--max); margin: 26px auto 0; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.arx-keep { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; }
.arx-keep input { width: 220px; accent-color: var(--olive-deep); }
.arx-keep output { font: 600 20px var(--display); min-width: 2ch; }
.arx-keep output::after { content: attr(data-unit); margin-left: 5px; font: 500 15px var(--text); color: var(--sand-2); }
.arx-stats { margin-left: auto; display: flex; gap: 28px; flex-wrap: wrap; }
.arx-stats div { display: flex; flex-direction: column; }
.arx-stats b { font: 600 22px var(--display); letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.arx-stats span { font-size: 13px; color: var(--sand-2); }
/* compression: one database's compression in one screen; ILM moves partitions to stronger compression as they age */
.cmp { max-width: var(--max); margin: 88px auto 0; padding: 0 var(--gutter); }
.cmp .kicker { margin-bottom: 16px; }
.cmp-title { font-size: clamp(34px, 4.4vw, 58px); }
.cmp-sub { margin-top: 14px; font-size: clamp(17px, 1.5vw, 20px); color: var(--sand-2); }
.ilm { margin-top: 32px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 70px -45px rgba(0,0,0,.35); overflow: hidden; }
.ilm-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #EDEDE5; font-size: 14px; color: var(--sand-2); flex-wrap: wrap; }
.ilm-top > b { font: 600 17px var(--display); color: var(--sand-ink); }
.ilm-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #DBF5E7; color: var(--olive-deep); font: 600 13px var(--text); }
.ilm-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: beat 1.4s ease-in-out infinite; }
.ilm-kpis { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
.ilm-kpis b { font: 600 17px var(--display); color: var(--sand-ink); font-variant-numeric: tabular-nums; }
.ilm-kpis span:first-child b { color: var(--olive-deep); }
.ilm-btn { padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #D5D5CA; font: 600 13px var(--text); color: var(--sand-ink); }
.ilm-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.ilm-rules { padding: 18px 20px; border-right: 1px solid #EDEDE5; background: #FBFBF8; }
.ilm-h { margin: 0 0 8px; font: 600 13px var(--text); color: var(--sand-ink); }
.ilm-h span { margin-left: 6px; font-weight: 500; color: #9A9A8D; }
.ilm-rules ul { margin: 0 0 18px; display: grid; gap: 6px; }
.ilm-rules ul:last-child { margin-bottom: 0; }
.ilm-rules li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #ECECE3; font-size: 14px; color: var(--sand-ink); }
.ilm-rules code { font: 600 12px var(--mono); color: var(--olive-deep); padding: 2px 7px; border-radius: 6px; background: #DBF5E7; white-space: nowrap; }
.ilm-time { padding: 18px 22px 16px; min-width: 0; }
.ilm-tt { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--sand-2); }
.ilm-tt b { font: 600 14px var(--mono); color: var(--sand-ink); }
.ilm-zones { display: grid; grid-template-columns: 1fr 1fr 2fr; margin-top: 14px; font-size: 12px; color: var(--sand-2); }
.ilm-zones span { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 8px 10px 22px; border-left: 2px solid #7FD3AE; }
.ilm-zones span:first-child { border-left: 0; padding-left: 0; }
/* the flow: each boundary carries an arrow, no compression to QUERY HIGH to ARCHIVE HIGH */
.ilm-zones span + span::before { content: ''; position: absolute; left: -13px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5' fill='none' stroke='%2300845A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 2px #7FD3AE; }
.ilm-zones i { font-style: normal; }
.ilm-zones .sm { display: none; }
.ilm-zones b { font: 600 13px var(--mono); color: var(--sand-ink); white-space: nowrap; }
.ilm-zones .z1 b { color: #00A673; }
.ilm-zones .z2 b { color: var(--olive-deep); }
.ilm-flow { display: none; }
.ilm-lane { position: relative; height: 150px; border-bottom: 1px solid #E6E6DC; }
.ilm-cut { position: absolute; top: 0; bottom: 0; margin-left: -1px; border-left: 2px solid #7FD3AE; }
.ilm-cut.c1 { left: 25%; } .ilm-cut.c2 { left: 50%; }
.ilm-p { position: absolute; left: 0; bottom: 0; border-radius: 5px 5px 2px 2px; background: #D2E4DA; transition: transform .9s cubic-bezier(.45,.05,.2,1), height .7s cubic-bezier(.45,.05,.2,1), background .5s, opacity .5s; }
.ilm-p.t1 { background: #5FC99B; }
.ilm-p.t2 { background: #00845A; }
.ilm-p.busy { animation: ilmBusy .8s ease-in-out infinite; }
@keyframes ilmBusy { 50% { filter: brightness(1.12); box-shadow: 0 0 0 3px rgba(0,132,90,.3); } }
.ilm-p span { position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); font: 500 11px var(--mono); color: var(--sand-2); white-space: nowrap; }
.ilm-p em { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font: 600 11px var(--text); font-style: normal; color: var(--sand-2); white-space: nowrap; }
.ilm-log { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; min-height: 62px; }
.ilm-log li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; font: 500 12px var(--mono); color: #6F6F63; animation: fdIn .35s var(--ease) both; }
.ilm-log li i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #D5EEE2; border-top-color: var(--olive-deep); animation: spin .8s linear infinite; }
.ilm-log li.ok i { border: 0; animation: none; background: var(--olive-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ilm-log li code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilm-log li code b { color: var(--olive-deep); font-weight: 600; }
.ilm-log li span { font: 600 13px var(--text); color: var(--sand-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ilm-log li span s { margin-right: 5px; color: #B5B5A8; font-weight: 500; }

/* compression, plainer: one font, nothing blinking, green only on the compressed partitions */
.ilm-st { padding: 0; background: none; color: var(--sand-2); font: 500 14px var(--text); }
.ilm-st::before { display: none; }
.ilm-kpis span:first-child b { color: var(--sand-ink); }
.ilm-rules li { padding: 9px 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid #ECECE3; }
.ilm-rules li:last-child { border-bottom: 0; }
.ilm-rules code { padding: 0; background: none; font: 600 14px var(--text); color: var(--sand-ink); }
.ilm-tt b { font: 600 14px var(--text); }
.ilm-zones span { border-left-color: #D6D6CB; }
.ilm-zones span + span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5' fill='none' stroke='%235B5B50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: inset 0 0 0 1.5px #D6D6CB; }
.ilm-zones b, .ilm-zones .z1 b, .ilm-zones .z2 b { font: 600 14px var(--text); color: var(--sand-ink); }
.ilm-cut { border-left-color: #D6D6CB; }
.ilm-p { background: #DEDED4; }
.ilm-p.t1 { background: #8FD3B4; }
.ilm-p.t2 { background: #2E9C70; }
.ilm-p.busy { animation: none; }
.ilm-p span { font: 500 11px var(--text); }
.ilm-log li { font: 500 13px var(--text); color: var(--sand-2); }
.ilm-log li i { width: 16px; height: 16px; border: 1.5px solid #C9C9BE; border-radius: 50%; animation: none; }
.ilm-log li.ok i { border: 0; background: var(--sand-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ilm-log li code { font-family: var(--text); font-size: 13px; }
.ilm-log li code b { color: var(--sand-ink); }
@media (max-width: 640px) {
  .ilm-flow b { font: 600 12px var(--text); color: var(--sand-ink); padding: 0; background: none; }
  .ilm-flow i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5' fill='none' stroke='%235B5B50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

/* ---------- features in three groups ---------- */
.features { padding: 130px 0 80px; }
.groups { max-width: var(--max); margin: 56px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grp { background: var(--surface); border-radius: 20px; padding: 26px 22px 26px; box-shadow: inset 0 0 0 1px #2E2E2E; transition: box-shadow .4s; }
.grp:hover { box-shadow: inset 0 0 0 1px #2E2E2E; }
.grp-k { white-space: nowrap; font: 600 clamp(26px, 2.5vw, 36px)/1.05 var(--display); letter-spacing: -0.022em; color: var(--ink); }
.grp-h { margin: 8px 0 20px; font: 500 17px/1.35 var(--text); color: var(--ink-3); }
.grp-vis { height: 192px; border-radius: 12px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #2E2E2E; position: relative; overflow: hidden; }
.grp ul { margin-top: 18px; display: grid; }
.grp li { padding: 11px 0; border-top: 1px solid #2E2E2E; font: 500 15px/1.35 var(--text); color: var(--ink-2); }
.grp li:last-child { padding-bottom: 0; }
.vis-auto { display: grid; align-content: center; gap: 10px; padding: 14px 16px; }
.sw-row { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.sw-st { font: 500 13px var(--text); color: var(--ink-2); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; text-align: right; white-space: nowrap; }
.sw-row.on .sw-st { opacity: 1; transform: none; }
.sw { width: 44px; height: 26px; border-radius: 999px; background: #333; position: relative; border: 0; cursor: pointer; transition: background .3s; padding: 0; flex: none; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sw[aria-checked="true"] { background: var(--olive); }
.sw[aria-checked="true"]::after { transform: translateX(18px); }
.vis-ins { display: grid; align-content: center; }
.vis-ins { gap: 0; padding: 4px 18px; }
.in-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 3px; padding: 12px 0; border-bottom: 1px solid #1C1C1C; }
.in-row:last-child { border-bottom: 0; }
.in-tag { font: 600 15px var(--text); color: var(--ink); }
.in-id { grid-column: 1; font: 500 13px var(--text); color: #7A7A7A; }
.in-v { grid-column: 2; grid-row: 1 / 3; font: 600 15px var(--text); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-chg .in-v { color: var(--olive); }
.in-id, .in-v { transition: opacity .35s; }
.in-row.swap :is(.in-id, .in-v) { opacity: 0; }
.vis-alert { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px; }
.vis-alert { position: relative; }
.va-scene { position: absolute; inset: 16px; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0; transition: opacity .5s; }
.va-scene.on { opacity: 1; }
.va-name b { display: block; font: 600 14px var(--text); color: var(--ink); }
.va-name span { font-size: 13px; color: var(--ink-3); }
.va-sql { font: 500 13px/1.5 var(--text); color: #8C8C8C; background: #151515; border-radius: 8px; padding: 10px 12px; box-shadow: inset 0 0 0 1px #262626; min-height: 4.4em; }
.va-sql .kw { color: #E5E5E5; }
.va-save { align-self: flex-start; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #262626; color: var(--ink-2); transition: background .2s, color .2s, transform .2s; }
.va-save.press { background: var(--olive); color: var(--olive-ink); transform: scale(.94); }
.va-done { display: flex; align-items: center; gap: 8px; font: 600 13px var(--text); color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s var(--ease); }
.va-done em { display: block; font-style: normal; font-weight: 500; font-size: 13px; color: var(--ink-3); }
.va-done::before { content: ''; width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23071911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.va-hit { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 12px; border-radius: 8px; background: #151515; box-shadow: inset 0 0 0 1px #2A2A2A; font-size: 13px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease); }
.va-done.on, .va-hit.on { opacity: 1; transform: none; }
.va-hit i { width: 8px; height: 8px; border-radius: 50%; background: var(--olive); flex: none;  }
.va-hit em { font-style: normal; color: var(--olive); font-weight: 600; font-variant-numeric: tabular-nums; }
.va-hit b { font-weight: 600; color: var(--ink); }
.va-hit span { min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-rep-h { display: grid; gap: 2px; }
.va-rep-h b { font: 600 15px var(--text); color: var(--ink); }
.va-rep-h span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.va-rep { display: grid; }
.va-rep div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #1C1C1C; font-size: 13px; color: var(--ink-2); opacity: 0; transition: opacity .4s; }
.va-rep div.on { opacity: 1; }
.va-rep div b { font-weight: 600; color: var(--ink); }
.va-rep div em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.va-rep div.bad em, .va-rep div.bad span { color: var(--olive); font-weight: 600; }
.va-rep-f { font-size: 13px; color: var(--ink-3); }
@keyframes ringA { 0% { box-shadow: 0 0 0 0 rgba(64,191,140,.6); } 100% { box-shadow: 0 0 0 10px rgba(64,191,140,0); } }
.compat { max-width: var(--max); margin: 48px auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.compat-track { display: flex; gap: 44px; width: max-content; animation: marq 60s linear infinite; }
.compat:hover .compat-track { animation-play-state: paused; }
.compat-track span { white-space: nowrap; font-size: 17px; font-weight: 500; color: #7A7A7A; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- pricing: two cards, one screen ---------- */
.pricing { padding: 84px 0 84px; background: var(--paper); color: var(--sand-ink); }
.pricing .kicker { color: var(--sand-2); margin-bottom: 16px; }
.pricing .title { font-size: clamp(34px, 4.4vw, 60px); }
.pricing .sub { margin-top: 18px; color: var(--sand-2); }   /* the line under the title, on the light section */
.plans2 { max-width: 1040px; margin: 40px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1.45fr; gap: 20px; align-items: stretch; }
.pcard { background: #fff; border-radius: 20px; padding: 26px 28px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 70px -45px rgba(0,0,0,.28); display: flex; flex-direction: column; min-width: 0; }
.pc-pro { box-shadow: 0 0 0 1.5px #17170F, 0 30px 70px -45px rgba(0,0,0,.28); }
.pcard h3 { font-size: 26px; letter-spacing: -0.022em; }
.pp { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pp b { font: 600 44px/1 var(--display); letter-spacing: -0.022em; }
.pp span { font-size: 15px; color: var(--sand-2); }
.pfor { margin-top: 6px; font-size: 15px; color: var(--sand-2); }
.pc-free .btn-dark { margin-top: 22px; height: 52px; font-size: 17px; }
.pl { margin-top: 24px; display: grid; gap: 12px; align-content: start; }
.pl li { position: relative; padding-left: 26px; font-size: 15px; }
.pl li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 10px; height: 6px; border-left: 2px solid var(--olive-deep); border-bottom: 2px solid var(--olive-deep); transform: rotate(-45deg); }
.pro-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pro-top .pp { margin-top: 0; }
.vol { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--sand-ink); }
.vol-chip { flex: none; padding: 4px 10px; border-radius: 999px; background: #ECECE4; color: var(--sand-ink); font: 700 14px var(--display); letter-spacing: -0.01em; }
.dbpick { margin-top: 16px; padding: 14px 18px 12px; border-radius: 12px; background: #F6F6F0; }
.dbpick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dbpick-q { font-size: 15px; color: var(--sand-ink); font-weight: 600; }
.dbpick-n { display: flex; align-items: center; gap: 12px; }
.dbpick-n output { font: 600 36px/1 var(--display); letter-spacing: -0.022em; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.stepb { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 4px 12px -6px rgba(0,0,0,.3); font: 500 20px/1 var(--text); color: var(--sand-ink); cursor: pointer; transition: transform .15s, background .2s; }
.stepb:hover { background: #fafaf5; }
.stepb:active { transform: scale(.92); }
.stepb.sm { width: 28px; height: 28px; font-size: 17px; }
.dbpick input[type=range], .addon input[type=range] { width: 100%; margin: 12px 0 0; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #00A673 var(--p, 10%), #DDDDD2 var(--p, 10%)); }
.dbpick input[type=range]::-webkit-slider-thumb, .addon input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.25); cursor: grab; transition: transform .15s; }
.dbpick input[type=range]::-moz-range-thumb, .addon input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: grab; }
.dbpick input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.dbnext { margin-top: 8px; font-size: 14px; color: var(--sand-2); min-height: 1.4em; }
.dbnext b { color: #008259; font-weight: 700; }
.addons-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; font: 600 15px/1.2 var(--display); letter-spacing: -0.01em; }
.addons-h span { font: 500 13px var(--text); color: var(--sand-2); letter-spacing: 0; }
.addons { margin-top: 8px; display: grid; gap: 8px; }
.addon { border-radius: 12px; padding: 10px 14px 10px 16px; box-shadow: inset 0 0 0 1px #E6E6DC; transition: box-shadow .25s, background .25s; }
.addon.on { background: #F7F7F2; box-shadow: inset 0 0 0 1.5px #BDBDB2; }
.ahead { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.an { flex: 1; min-width: 0; cursor: pointer; font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; }
.an small { display: block; margin-top: 2px; font: 500 13px var(--text); color: var(--sand-2); letter-spacing: 0; }
.amod-n { display: none; align-items: center; gap: 8px; }
.amod-n output { font: 600 22px/1 var(--display); letter-spacing: -0.022em; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.addon.on .amod-n { display: flex; animation: fadeIn .3s both; }
.addon .sw { background: #D6D6CB; }
.addon .sw[aria-checked="true"] { background: var(--olive-deep); }
.addon input[type=range] { display: none; height: 6px; margin-top: 10px; }
.addon input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; }
.addon.on input[type=range] { display: block; }
.ptotal { margin-top: 14px; padding-top: 14px; border-top: 1px solid #EBEBE3; }
.pbreak { display: grid; gap: 4px; font-size: 14px; color: var(--sand-2); }
.pbreak div { display: flex; justify-content: space-between; gap: 12px; animation: fdIn .35s var(--ease) both; }
.pbreak s { margin-right: 8px; color: #B5B5A8; }
.psave { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #008259; }
.psave:empty { display: none; }
.psave b { margin-left: 4px; }
.psum { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.psum-t { display: flex; flex-direction: column; gap: 4px; }
.psum-t span { font-size: 14px; font-weight: 600; color: var(--sand-2); }
.psum-t b { font: 600 clamp(36px, 4vw, 48px)/1 var(--display); letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.psum .btn-big { padding: 0 34px; }
.calc-note { margin-top: 10px; font-size: 13px; color: var(--olive-deep); }

/* ---------- pricing, plain (2026-11-02): what each plan includes; a counter per licensed count; struck list price ---------- */
.plans2 { grid-template-columns: 1fr 1fr; align-items: start; }
.pricing .pl { margin-top: 20px; gap: 11px; }
.pl li.pl-trial { color: var(--sand-2); }
.pl li.pl-trial b { font-weight: 600; color: var(--sand-ink); }
.pl li.pl-trial::before { left: 1px; top: .28em; width: 12px; height: 12px; border: 1.5px solid #B5B5A8; border-radius: 50%; transform: none; }
.pl li.pl-trial::after { content: ''; position: absolute; left: 7px; top: calc(.28em + 3px); width: 3px; height: 4px; border-left: 1.5px solid #B5B5A8; border-bottom: 1.5px solid #B5B5A8; }
.pc-free .btn-dark { margin-top: 26px; width: 100%; height: 54px; }
.pc-pro .vol { margin-top: 8px; color: var(--sand-2); }
.pc-pro .vol-chip { background: #E3F5EC; color: #006E4B; }
.qty { margin-top: 24px; border-top: 1px solid #EBEBE3; }
.qrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #EBEBE3; }
.qn { min-width: 0; font-size: 16px; font-weight: 600; }
.qn small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--sand-2); }
.qty .addons-h { margin: 0; padding: 18px 0 10px; border-bottom: 1px solid #EBEBE3; }
.qc { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.qc input { width: 3.4ch; border: 0; background: transparent; text-align: center; font: 600 22px/1 var(--display); letter-spacing: -0.022em; color: var(--sand-ink); padding: 6px 0; border-radius: 8px; }
.qc input:focus { outline: 2px solid var(--olive); outline-offset: 0; background: #F6F6F0; }
.qrow.q0 .qc input { color: #B5B5A8; }
.stepb:disabled { opacity: .35; cursor: default; transform: none; }
.pricing .ptotal { margin-top: 0; padding-top: 20px; border-top: 0; }
.pricing .psum { margin-top: 0; }
.pamt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pamt s { font: 500 22px/1 var(--display); letter-spacing: -0.02em; color: #A3A396; text-decoration-thickness: 1.5px; }
.pamt s:empty { display: none; }
.psum-t .pamt b { font-variant-numeric: normal; }   /* Mona Sans draws a slashed zero in tabular figures */
.psum-t .pchip { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: #E3F5EC; color: #006E4B; font: 600 13px/1.2 var(--text); }
.psum-t .pchip:empty { display: none; }
.ptip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -3px 0 -3px 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9A9A8C; cursor: help; vertical-align: middle; transition: color .2s; }
.ptip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ptip:hover, .ptip.open, .ptip:focus-visible { color: var(--sand-ink); }
.ptip-b { position: absolute; z-index: 30; left: -10px; bottom: calc(100% + 8px); width: 264px; max-width: calc(100vw - 48px); padding: 10px 12px; border-radius: 10px; background: var(--sand-ink); color: #F4F4EE; font: 400 13px/1.45 var(--text); letter-spacing: 0; text-align: left; white-space: normal; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; pointer-events: none; }
.ptip-b::after { content: ''; position: absolute; left: 15px; top: 100%; border: 6px solid transparent; border-top-color: var(--sand-ink); }
.ptip:hover .ptip-b, .ptip:focus-visible .ptip-b, .ptip.open .ptip-b { opacity: 1; visibility: visible; transform: none; }

/* ---------- contact ---------- */
.contact { padding: 130px 0 140px; }
.ct-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.ct-left .sub { max-width: 420px; }
/* owner 10-29: the two addresses, quietly under the text */
.ct-mail { display: grid; gap: 8px; margin: 36px 0 0; font-size: 16px; }
.ct-mail div { display: flex; gap: 14px; }
.ct-mail dt { width: 64px; color: var(--ink-3); }
.ct-mail dd { margin: 0; }
.ct-mail a { color: var(--ink); text-decoration: none; }
.ct-mail a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-form { display: grid; gap: 16px; padding: 30px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px #232323; }
.ct-topic { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #222; justify-self: start; }
.ct-topic button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 15px var(--text); cursor: pointer; transition: background .25s, color .25s; }
.ct-topic button[aria-checked="true"] { background: #F4F4F4; color: #1C1C1C; }
.ct-row { display: grid; grid-template-columns: 1fr; gap: 16px; }   /* name and email one under the other: an email needs the full width */
.ct-form label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.ct-form input, .ct-form textarea { width: 100%; padding: 13px 15px; border: 0; border-radius: 12px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #262626; color: var(--ink); font: 400 17px/1.4 var(--text); transition: box-shadow .2s; resize: vertical; }
.ct-form input:focus, .ct-form textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px #8A8A8A; }
.ct-form .bad { box-shadow: inset 0 0 0 1.5px #F0616B; }
.ct-form .btn-big { justify-self: start; margin-top: 4px; gap: 10px; }
.ct-form .btn-big.busy { cursor: progress; opacity: .9; }
.ct-form .btn-big.busy::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(7,25,17,.25); border-top-color: var(--olive-ink); animation: spin .7s linear infinite; flex: none; }
.ct-form .btn-big:disabled:active { transform: none; }
.ct-done { font-size: 15px; font-weight: 600; color: var(--olive); animation: fdIn .4s var(--ease) both; }

/* ---------- foot ---------- */
.foot { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--ink-3); }
.f-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding: 44px 0 40px; background: linear-gradient(90deg, transparent, #2E2E2E 8%, #2E2E2E 92%, transparent) top / 100% 1px no-repeat; }
.f-brand p { margin-top: 12px; color: var(--ink-3); }
.foot .small { font-size: 17px; color: var(--ink); }
.foot .small .mark { width: 20px; height: 20px; }
.f-col { display: grid; gap: 10px; align-content: start; }
.f-col b { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.f-col a { color: var(--ink-3); transition: color .2s; }
.f-col a:hover { color: var(--ink); }
.f-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: 13px; background: linear-gradient(90deg, transparent, #262626 8%, #262626 92%, transparent) top / 100% 1px no-repeat; }
.ver a { color: var(--ink-3); border-bottom: 1px solid #333; transition: color .2s; }
.ver a:hover { color: var(--ink); }
.links a.on { color: var(--ink); }
/* docs and release notes: the frames, filled in later */
.page { max-width: var(--max); margin: 0 auto; padding: calc(52px + 72px) var(--gutter) 110px; }
.page .title { font-size: clamp(38px, 5vw, 64px); }
.page .sub { margin-top: 16px; }
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
.doc-side { position: sticky; top: 92px; align-self: start; display: grid; gap: 6px; font-size: 15px; }
.doc-side p { margin: 18px 0 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.doc-side p:first-child { margin-top: 0; }
.doc-side a { color: var(--ink-3); padding: 3px 0; transition: color .2s; }
.doc-side a:hover, .doc-side a.on { color: var(--ink); }
.doc-search { margin-top: 30px; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 13px 16px; border-radius: 12px; background: #121212; box-shadow: inset 0 0 0 1px #232323; color: var(--ink-3); font-size: 15px; }
.doc-search kbd { margin-left: auto; font: 500 12px var(--text); color: var(--ink-3); padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px #2E2E2E; }
.doc-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doc-card { padding: 22px 22px 20px; border-radius: 12px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #2E2E2E; }
.doc-card h3 { font-size: 22px; letter-spacing: -0.02em; }
.doc-card p { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.soon { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--olive); }
.rn-list { margin-top: 48px; display: grid; gap: 0; }
.rn { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding: 32px 0; background: linear-gradient(90deg, transparent, #2E2E2E 8%, #2E2E2E 92%, transparent) top / 100% 1px no-repeat; }
.rn-meta b { display: block; font: 600 26px var(--display); letter-spacing: -0.02em; color: var(--ink); }
.rn-meta span { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--olive); }
.rn-meta em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: var(--ink-3); }
.rn-body h3 { font-size: 17px; letter-spacing: -0.01em; margin-top: 20px; }
.rn-body h3:first-child { margin-top: 0; }
.rn-body p { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
@media (max-width: 860px) {
  .f-in { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .doc { grid-template-columns: 1fr; gap: 32px; }
  .doc-side { display: none; }
  .doc-cards { grid-template-columns: 1fr; }
  .rn { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .rise { opacity: 1 !important; transform: none !important; }
  .compat-track, .fs-names-track { animation: none !important; }
}

/* short laptop screens: the whole hero, the picture included, still fits the first screen */
@media (max-height: 920px) and (min-width: 641px) {
  .hero { padding-top: calc(52px + 28px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 960px) {
  .links { display: none; }
  .pillars, .groups { grid-template-columns: 1fr; }
  .pillars { max-width: 620px; }
  .groups { max-width: 620px; }
  .fs-cards { grid-template-columns: 1fr 1fr; }
  .plans2 { grid-template-columns: 1fr; max-width: 580px; }
  .ct-wrap { grid-template-columns: 1fr; gap: 36px; max-width: 620px; }
  .ilm-body { grid-template-columns: 1fr; }
  .ilm-rules { border-right: 0; border-bottom: 1px solid #EDEDE5; }
  .ilm-rules ul { grid-template-columns: 1fr 1fr; }
  .fl-head, .fl { max-width: calc(560px + 2 * var(--gutter)); }
  .fl { grid-template-columns: 1fr; gap: 44px; }
  .fl-vis { height: auto; min-height: 180px; }
  .fl-vis svg { max-width: 400px; margin: 0 auto; }
  .fl-col :is(.fl-vis, .fl-t, .fl-m) { opacity: .35; }
  .arx { grid-template-columns: 1fr; }
  .arx-gap { flex-direction: row; height: 70px; }
  .arx-arrow { transform: rotate(90deg); width: 34px; }
  .arx-stats { margin-left: 0; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { padding-top: calc(52px + 40px + env(safe-area-inset-top, 0px)); }
  .fs-cards { grid-template-columns: 1fr; }
  .ai-body { padding: 18px 16px 22px; min-height: 0; }
  .uq { font-size: 15px; }
  .ai-input { margin: 0 10px 10px; }
  .abr { grid-template-columns: 1fr 60px; }
  .abr .abar { grid-column: 1 / 3; grid-row: 2; }
  .arx-lane { height: 130px; }
  .arx-keep { flex-wrap: wrap; }
  .arx-keep input { width: 160px; }
  .ilm-top { padding: 12px 14px; gap: 8px 12px; }
  .ilm-kpis { margin-left: 0; order: 5; width: 100%; gap: 14px; }
  .ilm-btn { margin-left: auto; }
  .ilm-time { padding: 16px 14px 14px; }
  .ilm-rules ul { grid-template-columns: 1fr; }
  .ilm-zones { font-size: 11px; }
  .ilm-zones .lg { display: none; }
  .ilm-zones .sm { display: inline; }
  .ilm-zones b { display: none; }
  .ilm-zones span { padding-bottom: 12px; }
  .ilm-zones span + span::before { top: -3px; width: 20px; height: 20px; left: -11px; background-size: 12px; }
  .ilm-flow { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
  .ilm-flow b { font: 600 12px var(--text); color: var(--sand-ink); white-space: nowrap; }
  .ilm-flow i { flex: none; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5' fill='none' stroke='%235B5B50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .ilm-log li { grid-template-columns: 16px minmax(0, 1fr); align-items: start; }
  .ilm-log li code { white-space: normal; overflow: visible; }
  .ilm-log li span { grid-column: 2; }
  .pcard { padding: 22px; }
  .pro-top .pp b { font-size: 38px; }
  .psum .btn-big { width: 100%; }
  .ct-form { padding: 22px; }
  .ct-row { grid-template-columns: 1fr; }
  .contact { padding-top: 96px; padding-bottom: 110px; }
  .flow, .radar, .aisec, .features { padding-top: 96px; }
  .archiving, .pricing { padding-top: 88px; padding-bottom: 88px; }
}

/* Increase Contrast: secondary text and lines one step stronger, focus ring 3 px */
@media (prefers-contrast: more) {
  :root { --ink-2: #D0D0D0; --ink-3: #A6A6A6; --sand-2: #3F3F36; }
  :focus-visible { outline-width: 3px; }
  .nav { background: #121212; }
}
.flow .title { font-size: clamp(32px, 5vw, 64px); }
@media (min-width: 961px) { .flow .title { white-space: nowrap; font-size: calc((min(1160px, 100vw) - 8vw) / 22); } }   /* one line on wide screens */
@media (min-width: 700px) { .ai-title { white-space: nowrap; } }
/* the bar: four places on the page, then Docs and Download on their own at the right */
.nav-end { gap: 22px; }
.nav-doc { font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: color .2s; }
.nav-doc:hover, .nav-doc.on { color: var(--ink); }
.nav-doc .hx-ext, .f-col .hx-ext { width: 11px; height: 11px; margin: 0 0 0 3px; vertical-align: -1px; }
@media (max-width: 480px) { .nav-demo { display: none; } }
.links { gap: 30px; font-size: 14px; }
.hero .act { width: 100%; }   /* the hero is a flex column: auto margins alone would shrink the dashboard to its content */
/* hero: the dashboard inside a quiet browser window, dark (owner 10-26: the frame of option D, in dark mode) */
.hero-win { width: min(1120px, calc(100% - 2 * var(--gutter))); margin: 40px auto 0; border-radius: 16px; background: #1C1C1C; box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.03), 0 60px 120px -60px rgba(0,0,0,.9); overflow: hidden; text-align: left; }
.hero-win.rise { animation-delay: .25s; }
.win-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: #131314; border-bottom: 1px solid #1F1F21; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2C2C2E; }
.win-url { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: min(340px, 50%); height: 28px; border-radius: 8px; background: #1C1C1E; display: grid; place-items: center; font: 500 13px var(--text); color: #8C8C8C; }
.win-app { padding: 18px 24px 6px; }
/* the chart takes what the first screen has left, so the whole window ends inside it: the screen's height less the hero's
   paddings, the text (the lockup, one headline line, four lines of paragraph and 160px of gaps, Download and the version)
   and the window around the chart (36px above it, 267px of bar, header, axis and Top SQL) */
.hero .win-app .act { --h: clamp(100px, calc(100vh - 52px - clamp(24px, 4vh, 56px) - clamp(32px, 5vh, 64px) - var(--lock) - var(--h1) - 5.8 * var(--lede) - 463px), 260px); width: 100%; max-width: none; margin: 0; padding: 0; }
@supports (height: 100svh) { .hero .win-app .act { --h: clamp(100px, calc(100svh - 52px - clamp(24px, 4vh, 56px) - clamp(32px, 5vh, 64px) - var(--lock) - var(--h1) - 5.8 * var(--lede) - 463px), 260px); } }
.hero-win { margin-top: 36px; }
@media (max-height: 920px) and (min-width: 641px) {
  .hero-win { margin-top: 26px; }
  .hero .win-app .act { --h: clamp(100px, calc(100vh - 80px - clamp(32px, 5vh, 64px) - var(--lock) - var(--h1) - 5.8 * var(--lede) - 343px), 240px); }   /* no Top SQL: 157px of window */
  .hero .win-app .act-grid { display: none; }
}
@media (max-width: 640px) { .win-app { padding: 14px 14px 4px; } .win-url { width: 52%; } .hero .win-app .act { --h: 100px; } .hero h1 { white-space: normal; } .hero-win { margin-top: 28px; } }
@media (max-width: 900px) { .hero h1 { white-space: normal; } }   /* "Intelligence for Oracle databases." is too long for one line at 44px on narrow tablets */
@media (max-width: 640px) { .hero .win-app .act-grid { display: none; } }   /* phones: the paragraph is longer there, so the window shows the chart alone */
.hero .act-tip.quiet { padding: 3px 6px; margin-left: -6px; border-radius: 6px; background: rgba(13,13,14,.88); }   /* the pin lines pass behind the note, not through it */
/* small phones: the steps under the name close up a little, so the window still ends inside the first screen */
@media (max-width: 640px) and (max-height: 760px) {
  .hero { padding-top: calc(52px + 28px + env(safe-area-inset-top, 0px)); }
  .hero h1 { margin-top: 18px; }
  .hero-lede { margin-top: 14px; font-size: 16px; }
  .hero .cta { margin-top: 22px; }
  .hero-win { margin-top: 24px; }
}

/* ---------- checkout and contact: what the server answers ---------- */
.ptax { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.calc-note.bad, .ct-err { color: var(--crit); }
.ct-err { font-size: 15px; font-weight: 500; }
.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- hero (owner 10-28, option K): Radar Engine's scope under the text, then the app at work in a gallery ---------- */
/* K: the first screen is Radar Engine's scope under the site's text */
.hero.hero-k { justify-content: flex-start; min-height: 0; padding-top: 0; padding-bottom: clamp(64px, 9vh, 110px); }
.hx-stage { position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 640px; padding-top: 52px; overflow: hidden; }
.hx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-stage .hero-copy { position: relative; z-index: 2; }

/* K: Download and, beside it, the live demo: dark glass, a light that slowly circles its edge and the arrow
   of a link that opens in a new tab (demo.scops.dev) */
.hx-cta-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
@property --hx-demo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn.hx-btn-demo { position: relative; isolation: isolate; gap: 10px; padding: 0 30px 0 34px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -18px rgba(64,191,140,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s, box-shadow .3s, transform .25s var(--ease); }
.btn.hx-btn-demo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--hx-demo-a), rgba(255,255,255,.14) 0deg, rgba(255,255,255,.14) 250deg,
    rgba(64,191,140,.55) 295deg, rgba(123,225,178,.8) 320deg, rgba(255,255,255,.14) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hxDemoEdge 5s linear infinite; }
.btn.hx-btn-demo:hover { background: linear-gradient(180deg, rgba(64,191,140,.16), rgba(64,191,140,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 30px -16px rgba(64,191,140,.5); }
.hx-ext { display: inline-block; width: 15px; height: 15px; flex: none; margin-left: 1px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: transform .25s var(--ease), opacity .2s; }
.btn.hx-btn-demo:hover .hx-ext { transform: translate(2px, -2px); opacity: 1; }
@keyframes hxDemoEdge { to { --hx-demo-a: 360deg; } }
#hxCar { scroll-margin-top: 76px; }

/* K: under it, the gallery of apple.com/logic-pro: large rounded cards, the next one peeking, a caption in the card */
.hx-gal { margin-top: 16px; overflow: hidden; }
.hx-gal-track { display: flex; column-gap: 20px; padding: 0 max(var(--gutter), calc((100vw - 1260px) / 2)); transition: transform .8s cubic-bezier(.65,0,.35,1); will-change: transform; }
.hx-gal-card { position: relative; flex: 0 0 min(1260px, calc(100vw - 2 * var(--gutter) - 60px)); margin: 0; display: flex; flex-direction: column; padding: 44px 56px; border-radius: 28px; overflow: hidden; background: #141416; cursor: pointer; }
.hx-gal-card.on { cursor: default; }
.hx-gal-card figcaption { font: 600 28px/1.18 var(--display); letter-spacing: -0.01em; color: rgba(255,255,255,.94); text-align: left; text-wrap: balance; }
.hx-gal-shot { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; margin-top: 24px; }
.hx-gal-win { max-width: min(100%, calc((100vh - 250px) * var(--ar, 2))); border-radius: 14px; overflow: hidden; background: #1C1C1C; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px rgba(0,0,0,.8); }
.hx-gal-win .win-bar { height: 36px; }
.hx-gal-win .win-url { top: 5px; height: 26px; font-size: 12px; }
.hx-gal-win img { display: block; width: 100%; height: auto; }
.hx-gal-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.hx-gal-dots { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border-radius: 999px; background: rgba(42,42,45,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hx-gal-dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.42); overflow: hidden; cursor: pointer; transition: width .4s; }
.hx-gal-dot.on { width: 48px; background: rgba(255,255,255,.3); }
.hx-gal-dot.on::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 999px; background: #F4F4F4; }
.hx-gal-play { position: relative; width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(42,42,45,.72); cursor: pointer; }
.hx-gal-play::before, .hx-gal-play::after { content: ''; position: absolute; top: 21px; width: 4px; height: 14px; border-radius: 2px; background: #F4F4F4; }
.hx-gal-play::before { left: 22px; } .hx-gal-play::after { left: 30px; }
.hx-gal-play.is-paused::after { display: none; }
.hx-gal-play.is-paused::before { left: 23px; top: 20px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #F4F4F4; }
/* The launch film, the gallery's first card (owner 10-30): the frame only, a white pill to start it, then a dark pill
   like the gallery's own that leaves when the mouse rests. */
.hx-gal-shot:first-child { margin-top: 0; }
.hx-film { position: relative; background: #000; }
.hx-film video { display: block; width: 100%; height: auto; cursor: pointer; }
/* A veil over the first frame (owner 10-31): the white button stands out and it reads as a film. Gone while it plays. */
.hx-film::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); pointer-events: none; transition: opacity .25s; }
.hx-film.is-started::before { opacity: 0; }
.hx-film:fullscreen { width: 100vw !important; max-width: none; border-radius: 0; display: flex; align-items: center; }
.hx-film-start { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 104px; height: 104px; padding: 0; border: 0; border-radius: 50%; background: #F4F4F4; color: #1C1C1C; transform: translate(-50%, -50%); cursor: pointer; transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, opacity .25s; }
.hx-film-start:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.hx-film-start:focus-visible, .hx-film-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hx-film-start svg { width: 38px; height: 38px; margin-left: 5px; fill: currentColor; }
.hx-film.is-started .hx-film-start { opacity: 0; pointer-events: none; }
.hx-film-wait { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgba(255,255,255,.22); border-top-color: #F4F4F4; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .2s; animation: hx-film-spin .8s linear infinite; }
.hx-film.is-waiting .hx-film-wait { opacity: 1; }
@keyframes hx-film-spin { to { transform: rotate(360deg); } }
.hx-film-bar { position: absolute; left: 50%; bottom: 20px; width: min(620px, calc(100% - 32px)); transform: translate(-50%, 8px); display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px; border-radius: 999px; background: rgba(42,42,45,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.hx-film.is-started.is-awake .hx-film-bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hx-film.is-started.is-playing:not(.is-awake) video { cursor: none; }
.hx-film-btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #F4F4F4; cursor: pointer; transition: background .2s; }
.hx-film-btn:hover { background: rgba(255,255,255,.14); }
.hx-film-btn svg { width: 16px; height: 16px; fill: currentColor; }
.hx-film-btn .ln { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hx-film-toggle .i-play, .hx-film.is-playing .hx-film-toggle .i-pause { display: block; }
.hx-film-toggle .i-pause, .hx-film.is-playing .hx-film-toggle .i-play { display: none; }
.hx-film-mute .i-off, .hx-film.is-muted .hx-film-mute .i-on { display: none; }
.hx-film.is-muted .hx-film-mute .i-off { display: block; }
.hx-film-time { flex: none; min-width: 32px; font: 500 13px var(--text); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.72); text-align: center; }
.hx-film-seek { flex: 1; min-width: 0; height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.hx-film-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #F4F4F4 var(--p, 0%), rgba(255,255,255,.26) var(--p, 0%)); }
.hx-film-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.26); }
.hx-film-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: #F4F4F4; }
.hx-film-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.hx-film-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; opacity: 0; }
.hx-film-seek:hover::-webkit-slider-thumb, .hx-film-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.hx-film-seek:hover::-moz-range-thumb, .hx-film-seek:focus-visible::-moz-range-thumb { opacity: 1; }
@media (max-width: 640px) { .hx-film-start { width: 64px; height: 64px; } .hx-film-start svg { width: 24px; height: 24px; margin-left: 3px; } .hx-film-bar { bottom: 8px; height: 40px; gap: 6px; padding: 0 6px; } .hx-film-time { min-width: 28px; font-size: 12px; } .hx-film-mute { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-gal-track { transition: none; } }
@media (max-width: 640px) { .hx-gal-card { aspect-ratio: auto; padding: 24px 16px; border-radius: 18px; } .hx-gal-card figcaption { font-size: 19px; } .hx-gal-shot { margin-top: 16px; } }


/* a book before Docs in the top bar (owner 10-29) */
.nav-doc .nav-ic { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

/* ======== B2B layer (2026-11-02): sales links, trust band, architecture, enterprise facts ======== */
@media (max-width: 760px) {
  .nav-sales { display: none; }
}
.hx-sales { display: inline-flex; align-items: center; height: 54px; padding: 0 6px 0 10px; }
.hx-sales::after { margin-left: 5px; }
.trust { width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vh, 64px) var(--gutter) 0; text-align: left; }
.trust + .hx-gal { margin-top: clamp(48px, 7vh, 72px); }
.trust-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr); gap: 24px 56px; align-items: center; padding: 30px 0 34px; border-top: 1px solid #2E2E2E; border-bottom: 1px solid #2E2E2E; }
.trust-lead { font: 600 clamp(20px, 1.9vw, 25px)/1.25 var(--display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.trust-lead span { display: block; margin-top: 8px; font: 500 14px/1.45 var(--text); color: var(--ink-3); letter-spacing: 0; }
.trust-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.trust-nums li { display: grid; gap: 6px; min-width: 0; padding-left: 16px; border-left: 1px solid #262626; }
.trust-nums b { font: 600 clamp(30px, 3vw, 44px)/1 var(--display); letter-spacing: -0.022em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trust-nums span { font: 500 14px/1.35 var(--text); color: var(--ink-3); }
@media (max-width: 960px) {
  .trust-in { grid-template-columns: 1fr; }
  .trust-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ent { padding: 110px 0 30px; }
.ent .title { font-size: clamp(34px, 4.4vw, 60px); }
.ent-grid { max-width: var(--max); margin: 40px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.ent-i { min-width: 0; padding: 22px 0 26px; border-top: 1px solid #2E2E2E; }
.ent-i b { display: flex; align-items: center; gap: 10px; font: 600 19px/1.25 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.ent-i b::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--olive); flex: none; }
.ent-i p { margin-top: 9px; font: 400 15px/1.5 var(--text); color: var(--ink-2); }
@media (max-width: 960px) {
  .ent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ent-grid { grid-template-columns: 1fr; }
  .ent { padding-top: 88px; }
}
.p-ent { max-width: 1040px; margin: 26px auto 0; padding: 0 var(--gutter); text-align: center; font: 500 15px/1.4 var(--text); color: var(--sand-2); }
.p-ent a { color: var(--sand-ink); text-decoration: underline; text-underline-offset: 3px; }
.arch { padding: 120px 0 20px; }
.arch .title { font-size: clamp(34px, 4.4vw, 60px); }
.arch-d { max-width: var(--max); margin: 48px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1.25fr) 150px minmax(0, 1fr); align-items: stretch; }
.ar-col { min-width: 0; padding: 22px 24px 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px #2E2E2E; }
.ar-k { font: 600 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ar-col ul { margin-top: 16px; display: grid; }
.ar-col li { padding: 9px 0; border-top: 1px solid #2E2E2E; font: 500 15px/1.4 var(--text); color: var(--ink-2); }
.ar-col li:first-child { border-top: 0; padding-top: 0; }
.ar-col > b { display: block; margin-top: 12px; font: 600 20px/1.2 var(--display); letter-spacing: -0.025em; color: var(--ink); }
.ar-col .mark { width: 30px; height: 30px; margin-top: 16px; }
.ar-sc { box-shadow: inset 0 0 0 1px rgba(64,191,140,.5), 0 30px 80px -50px rgba(64,191,140,.4); }
.ar-sc .ar-k { color: var(--olive); }
.ar-n { display: inline-block; margin-top: 16px; font: 500 14px var(--text); color: var(--olive); }
.ar-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 10px; text-align: center; }
.ar-link i { position: relative; display: block; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, #5A5A5A 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: arrowFlow .8s linear infinite; }
.ar-link i::after { content: ''; position: absolute; right: -2px; top: -5px; border-left: 9px solid #5A5A5A; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ar-link span { font: 500 12px/1.35 var(--text); color: var(--ink-3); }
.arch-note { max-width: var(--max); margin: 22px auto 0; padding: 0 var(--gutter); font: 500 14px/1.4 var(--text); color: var(--ink-3); }
@media (max-width: 960px) {
  .arch-d { grid-template-columns: 1fr; }
  .ar-link { height: 72px; }
  .ar-link i { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, #5A5A5A 0 6px, transparent 6px 11px); background-size: 2px 22px; animation: arrowFlowV .8s linear infinite; }
  .ar-link i::after { right: -5px; top: auto; bottom: -2px; border-top: 9px solid #5A5A5A; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0; }
  .ar-link span { display: none; }
}
@keyframes arrowFlowV { to { background-position: 0 22px; } }
@media (prefers-reduced-motion: reduce) {
  .ar-link i { animation: none; }
}

/* ======== Hero gallery: one window with tabs, film in a lightbox ======== */
.gx { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); text-align: left; }
.trust + .gx { margin-top: clamp(48px, 7vh, 72px); }
.gx-win { position: relative; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 100px -50px rgba(0,0,0,.9); }
.gx-win .win-bar { height: 38px; }
.gx-win .win-url { top: 6px; height: 26px; font-size: 12px; }
.gx-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-top: 18px; }
.gx-foot p { margin: 0; min-width: 0; font: 500 17px/1.4 var(--text); color: var(--ink-2); }
.sg-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.sg-title { margin: 0; font: 600 clamp(28px, 2.8vw, 40px)/1.1 var(--display); letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
.sg-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.sg-tabs { display: flex; width: 100%; gap: 4px; padding: 5px; border-radius: 999px; background: #161616; box-shadow: inset 0 0 0 1px #2E2E2E; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sg-tabs::-webkit-scrollbar { display: none; }
.sg-tabs button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 10px; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 15px var(--text); cursor: pointer; overflow: hidden; transition: background .25s, color .25s; }
.sg-tabs button:hover { color: var(--ink); background: rgba(255,255,255,.07); }
.sg-tabs button[aria-selected="true"] { background: linear-gradient(90deg, #CFCFCF calc(var(--p, 0) * 100%), #F4F4F4 0); color: #1C1C1C; }
.sg-stage { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #111; }
.sg-stage > img, .sg-stage > .sg-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transform: scale(1.015); transition: opacity .7s cubic-bezier(.65,0,.35,1), transform 1.4s cubic-bezier(.2,.7,.2,1), visibility 0s .7s; }
.sg-stage > .on { opacity: 1; transform: none; z-index: 1; visibility: visible; transition-delay: 0s, 0s, 0s; }
.sg-stage > *:not(.on) { pointer-events: none; visibility: hidden; }
.sg-stage > img.on { cursor: zoom-in; }
.sg-stage img.fit { object-fit: contain; object-position: 50% 0; }
.sg-stage img.mid { object-position: 50% 50%; }
.sg-cap { display: grid; min-width: 0; flex: 1 1 420px; }
.sg-cap p { grid-area: 1 / 1; opacity: 0; transition: opacity .5s; }
.sg-cap p.on { opacity: 1; }
.sg-tabs button svg { position: static; flex: none; width: 10px; height: 10px; margin: 0 7px 0 0; fill: currentColor; }
.sg-tabs button small { margin-left: 7px; font: 500 14px var(--text); color: inherit; opacity: .55; }
.sg-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sg-film video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.sg-film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,.42), rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%); transition: opacity .4s; }
.sg-film.playing::after { opacity: 0; }
.sg-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0; padding: 0; border: 0; background: transparent; color: #F4F4F4; cursor: pointer; }
.sg-play i { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #F4F4F4; color: #1C1C1C; box-shadow: 0 0 0 12px rgba(255,255,255,.09), 0 30px 70px -20px rgba(0,0,0,.9); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.sg-play i::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); animation: playPulse 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes playPulse { 0% { transform: scale(.82); opacity: .9; } 70% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sg-play i::before { animation: none; } }
.sg-play:hover i { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(64,191,140,.22), 0 30px 70px -20px rgba(0,0,0,.9); }
.sg-play svg { width: 34px; height: 34px; margin-left: 6px; fill: currentColor; }
.sg-play span { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border-radius: 999px; background: rgba(8,8,8,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font: 600 15px var(--text); letter-spacing: -0.01em; white-space: nowrap; }
.sg-play small { font: 500 14px var(--text); color: var(--ink-2); }
@media (max-width: 700px) { .sg-play i { width: 68px; height: 68px; } .sg-play svg { width: 24px; height: 24px; } .sg-play span { height: 32px; font-size: 13px; } }
.sg-film.playing img, .sg-film.playing .sg-play { display: none; }
/* the lightbox: a screen opened from the gallery, with the previous and the next screen a key away */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 8px; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); background: rgba(18,18,18,.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: lbIn .25s ease-out; }
.lb[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-body { grid-column: 2; width: 100%; max-width: 1400px; margin: 0 auto; min-width: 0; }
.lb-media { position: relative; border-radius: 14px; overflow: hidden; background: #1C1C1C; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 120px -60px rgba(0,0,0,.9); }
.lb-media img { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); object-fit: contain; animation: lbIn .3s ease-out; }
.lb-cap { margin: 16px 0 0; min-height: 22px; text-align: center; font: 500 16px/1.4 var(--text); color: var(--ink-2); }
.lb-x, .lb-nav { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #F4F4F4; cursor: pointer; transition: background .2s; }
.lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.16); }
.lb-x { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: max(16px, env(safe-area-inset-top, 0px)); }
.lb-x svg, .lb-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { grid-column: 1; } .lb-next { grid-column: 3; }
@media (max-width: 700px) { .lb { grid-template-columns: 1fr; } .lb-nav { display: none; } .lb-body { grid-column: 1; } }
@media (max-width: 900px) {
  .sg-title { font-size: 26px; }
  .sg-tabs button { flex: none; height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 700px) {
}