/* Omnira — the website. Omnira's brand as on omnira.dev: warm off-white or deep charcoal, one forest-green accent,
   near-black (or near-white) type. Light and dark follow the visitor's system; the header switch overrides it.
   Everything is served from this site. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-latin-800-normal.woff2") format("woff2"); }

/* ── themes ─────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #f7f8f4; --surface: #ffffff; --band: #eef1e8; --tint: #eef3e7;
  --line: rgba(29, 33, 28, 0.11); --line-strong: rgba(29, 33, 28, 0.18);
  --text: #1d211c; --text-2: #5a6356; --text-3: #646c60;
  --accent: #2f7d4f; --accent-text: #276b43; --on-accent: #ffffff;
  --btn: #2f7d4f; --btn-hover: #276b43; --on-btn: #ffffff;
  --good: #2f7d4f; --good-bg: rgba(47, 125, 79, 0.10);
  --bad: #b44c43; --bad-bg: rgba(180, 76, 67, 0.08);
  --warm: #9a5f28; --warm-bg: rgba(154, 95, 40, 0.08);
  --slate: #4a5563; --slate-bg: rgba(74, 85, 99, 0.09);
  --ink: #1d211c; --on-ink: #f4f6f1;
  --dot: rgba(29, 33, 28, 0.09);
  --header-bg: rgba(247, 248, 244, 0.85);
  --shadow-sm: 0 1px 2px rgba(29, 33, 28, 0.06), 0 2px 8px rgba(29, 33, 28, 0.04);
  --shadow-md: 0 6px 20px rgba(29, 33, 28, 0.10);
  --shadow-lg: 0 16px 40px rgba(29, 33, 28, 0.14);
  --radius: 14px; --radius-sm: 10px;
  --wrap: 1200px; --gutter: clamp(16px, 4vw, 40px);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1311; --surface: #161b18; --band: #121714; --tint: #182219;
  --line: rgba(233, 237, 231, 0.10); --line-strong: rgba(233, 237, 231, 0.18);
  --text: #e9ede7; --text-2: #b3bcaf; --text-3: #9aa396;
  --accent: #5bb584; --accent-text: #6fc596; --on-accent: #0b100d;
  --btn: #5bb584; --btn-hover: #6fc596; --on-btn: #0b100d;
  --good: #66c290; --good-bg: rgba(102, 194, 144, 0.14);
  --bad: #e5877e; --bad-bg: rgba(229, 135, 126, 0.13);
  --warm: #dcaa6f; --warm-bg: rgba(220, 170, 111, 0.13);
  --slate: #aab6c6; --slate-bg: rgba(170, 182, 198, 0.13);
  --ink: #070a08; --on-ink: #e9ede7;
  --dot: rgba(233, 237, 231, 0.07);
  --header-bg: rgba(15, 19, 17, 0.82);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1311; --surface: #161b18; --band: #121714; --tint: #182219;
    --line: rgba(233, 237, 231, 0.10); --line-strong: rgba(233, 237, 231, 0.18);
    --text: #e9ede7; --text-2: #b3bcaf; --text-3: #9aa396;
    --accent: #5bb584; --accent-text: #6fc596; --on-accent: #0b100d;
    --btn: #5bb584; --btn-hover: #6fc596; --on-btn: #0b100d;
    --good: #66c290; --good-bg: rgba(102, 194, 144, 0.14);
    --bad: #e5877e; --bad-bg: rgba(229, 135, 126, 0.13);
    --warm: #dcaa6f; --warm-bg: rgba(220, 170, 111, 0.13);
    --slate: #aab6c6; --slate-bg: rgba(170, 182, 198, 0.13);
    --ink: #070a08; --on-ink: #e9ede7;
    --dot: rgba(233, 237, 231, 0.07);
    --header-bg: rgba(15, 19, 17, 0.82);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

/* ── base ───────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.3s ease, color 0.3s ease; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }
sup { font-size: 0.55em; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; background: var(--btn); color: var(--on-btn); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.i { width: 1.2em; height: 1.2em; flex: none; stroke-width: 1.9; }
.center { text-align: center; }
.accent { color: var(--accent); }

/* type */
.eyebrow { color: var(--accent-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-block-end: 14px; }
.lede { color: var(--text-2); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; max-width: 62ch; }
.center .lede, .section-head.center .lede { margin-inline: auto; }
.fine { color: var(--text-3); font-size: 0.86rem; line-height: 1.55; margin-block-start: 18px; }
.fine.center { margin-inline: auto; max-width: 70ch; }
.source { color: var(--text-3); font-size: 0.8rem; margin-block-start: auto; padding-block-start: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--accent-text); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link .i { width: 1em; height: 1em; }
.text-link.inline { display: inline; white-space: nowrap; }
.text-link.inline .i { display: inline-block; vertical-align: -0.12em; }
.more { margin-block-start: 34px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 46px; padding: 0.72em 1.25em; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 0.98rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.btn .i { width: 1.1em; height: 1.1em; transition: transform 0.18s ease; }
.btn-primary { background: var(--btn); color: var(--on-btn); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:hover .i-arrow-right { transform: translateX(3px); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-lg { min-height: 54px; padding: 0.85em 1.5em; font-size: 1.04rem; }
.btn-sm { min-height: 38px; padding: 0.5em 0.95em; font-size: 0.92rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 28px; }
.center-row { justify-content: center; }
.reassure { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block-start: 16px; color: var(--text-3); font-size: 0.88rem; }
.reassure li { display: inline-flex; align-items: center; gap: 6px; }
.reassure .i { width: 15px; height: 15px; color: var(--accent); stroke-width: 2.5; }
.reassure.center { justify-content: center; }

/* ── header ─────────────────────────────────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-block-end: 1px solid transparent; transition: border-color 0.25s, background-color 0.25s; }
.site-header.scrolled { border-block-end-color: var(--line); }
.header-in { display: flex; align-items: center; gap: 18px; min-height: 68px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; white-space: nowrap; }
.brand img { width: 30px; height: 30px; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 18px; }
.nav > a, .nav-drop { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; font: inherit; font-weight: 600; font-size: 0.94rem; padding: 0.5em 0.75em; border-radius: 9px; border: 0; background: none; cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.nav > a .i { width: 0.9em; height: 0.9em; }
.nav > a:hover, .nav-drop:hover, .nav-drop[aria-expanded="true"] { color: var(--text); background: var(--band); }
.nav-drop .i { width: 1em; height: 1em; transition: transform 0.2s; }
.nav-drop[aria-expanded="true"] .i { transform: rotate(180deg); }
.nav-group { position: relative; }
.drop { position: absolute; top: calc(100% + 10px); inset-inline-start: -8px; z-index: 60; display: none; width: min(560px, 90vw); grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); }
.drop.open { display: grid; animation: drop-in 0.18s ease both; }
html:not(.js) .nav-group:hover .drop, html:not(.js) .nav-group:focus-within .drop { display: grid; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.drop-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.drop-item:hover { background: var(--band); }
.drop-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--tint); color: var(--accent); flex: none; }
.drop-icon .i { width: 18px; height: 18px; }
.drop-item strong { display: block; font-size: 0.95rem; }
.drop-sub { display: block; color: var(--text-3); font-size: 0.8rem; line-height: 1.4; margin-block-start: 2px; }
.nav-signin, .nav-cta { display: none !important; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.header-signin { color: var(--text-2); font-weight: 600; font-size: 0.94rem; text-decoration: none; padding: 0.45em 0.7em; border-radius: 9px; }
.header-signin:hover { color: var(--text); background: var(--band); }
.theme-btn, .menu-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.theme-btn:hover, .menu-btn:hover { border-color: var(--text-3); }
.theme-btn .i { width: 18px; height: 18px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
html:not(.js) .theme-btn { display: none; }
.menu-btn { display: none; }
.menu-btn .i-x { display: none; }
.menu-btn[aria-expanded="true"] .i-menu { display: none; }
.menu-btn[aria-expanded="true"] .i-x { display: block; }

@media (max-width: 1060px) {
  .js .menu-btn { display: inline-grid; }
  .js .nav { position: absolute; top: calc(100% + 6px); inset-inline: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); max-height: calc(100vh - 90px); overflow-y: auto; }
  .js .nav.open { display: flex; }
  .js .nav > a, .js .nav-drop { padding: 0.75em 0.9em; font-size: 1rem; justify-content: space-between; }
  .js .drop { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 6px; grid-template-columns: 1fr; }
  .js .nav-signin { display: flex !important; }
  .js .nav-cta { display: inline-flex !important; margin-block-start: 8px; }
  .js .header-signin { display: none; }
  html:not(.js) .header-in { flex-wrap: wrap; padding-block: 8px; }
  html:not(.js) .nav { order: 3; width: 100%; flex-wrap: wrap; margin: 0; }
}
@media (max-width: 480px) {
  .header-cta { display: none; }
  .header-in { gap: 10px; }
}

/* ── hero ───────────────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(40px, 6vw, 84px) clamp(40px, 5vw, 72px); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.03; letter-spacing: -0.042em; }
.hero .lede { margin-block-start: 22px; }
.hero-note { margin-block-start: 14px; color: var(--text-3); font-size: 0.9rem; }
.hero-copy > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.hero-copy > :nth-child(3) { animation-delay: 0.1s; }
.hero-copy > :nth-child(n+4) { animation-delay: 0.15s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the trace: a job's five-second life, told in pictures */
.trace { --loop: 5s; position: relative; margin: 0; padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: trace-clock var(--loop) linear infinite; }
@keyframes trace-clock { to { outline-color: transparent; } }
.trace-chats { position: relative; min-height: 122px; margin-block-end: 14px; }
.chat { position: absolute; inset: 0; display: grid; align-content: start; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.chat.is-on { opacity: 1; transform: none; }
.chat-q { justify-self: start; max-width: 88%; padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: var(--band); color: var(--text); font-weight: 600; font-size: 0.92rem; line-height: 1.4; }
.chat-a { justify-self: end; display: flex; gap: 8px; align-items: flex-start; max-width: 88%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.9rem; line-height: 1.4; }
.chat-a .i { width: 17px; height: 17px; margin-block-start: 1px; }
.trace-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, 0.62fr) minmax(0, 1.08fr); align-items: center; gap: 10px; }
.trace-store, .trace-machine { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg); text-align: center; min-height: 176px; align-content: center; }
.trace-store strong, .trace-mach strong { font-size: 0.95rem; line-height: 1.25; }
.trace-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tint); color: var(--accent); }
.trace-icon .i { width: 26px; height: 26px; }
.trace-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.trace-files span, .trace-mem span { padding: 2px 7px; border-radius: 6px; background: var(--good-bg); color: var(--accent-text); font-size: 0.72rem; font-weight: 700; }
.trace-wire { position: relative; height: 72px; }
.trace-line { position: absolute; top: 50%; inset-inline: 0; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.trace-lock { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent); }
.trace-lock .i { width: 14px; height: 14px; }
.pkt { position: absolute; top: 50%; left: 0; width: 18px; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--accent); opacity: 0; }
.pkt-in { animation: pkt-in var(--loop) linear infinite; }
.pkt-2 { animation-delay: 0.16s; }
.pkt-3 { animation-delay: 0.32s; }
.pkt-out { background: var(--text-2); animation: pkt-out var(--loop) linear infinite; }
@keyframes pkt-in { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 21% { left: calc(100% - 18px); opacity: 1; } 24%, 100% { left: calc(100% - 18px); opacity: 0; } }
@keyframes pkt-out { 0%, 50% { left: calc(100% - 18px); opacity: 0; } 53% { opacity: 1; } 71% { left: 0; opacity: 1; } 74%, 100% { left: 0; opacity: 0; } }
.trace-machine { overflow: hidden; animation: machine var(--loop) ease-in-out infinite; }
@keyframes machine { 0%, 24% { border-color: var(--line-strong); box-shadow: none; } 28%, 72% { border-color: var(--accent); box-shadow: 0 0 0 4px var(--good-bg); } 78%, 100% { border-color: var(--line-strong); box-shadow: none; } }
.trace-machines { display: grid; justify-items: center; }
.trace-mach { grid-area: 1 / 1; display: grid; justify-items: center; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.trace-mach.is-on { opacity: 1; transform: none; }
.trace-vault { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--band); color: var(--text-2); font-size: 0.74rem; font-weight: 700; animation: vault var(--loop) ease-in-out infinite; }
.trace-vault .i { width: 14px; height: 14px; }
@keyframes vault { 0%, 24% { background: var(--band); color: var(--text-2); } 28%, 72% { background: var(--accent); color: var(--on-accent); } 78%, 100% { background: var(--band); color: var(--text-2); } }
.trace-mem { display: flex; gap: 4px; min-height: 20px; animation: mem var(--loop) ease-in-out infinite; }
@keyframes mem { 0%, 24% { opacity: 0; transform: scale(0.8); } 28%, 72% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: scale(0.8); } }
.trace-run { width: 70%; height: 4px; border-radius: 4px; background: var(--band); overflow: hidden; }
.trace-run span { display: block; height: 100%; width: 0; background: var(--accent); animation: run var(--loop) linear infinite; }
@keyframes run { 0%, 25% { width: 0; opacity: 1; } 50% { width: 100%; opacity: 1; } 74% { width: 100%; opacity: 1; } 78%, 100% { width: 100%; opacity: 0; } }
.trace-sweep { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--good-bg) 50%, transparent 80%); transform: translateX(-100%); pointer-events: none; animation: sweep var(--loop) ease-in-out infinite; }
@keyframes sweep { 0%, 76% { transform: translateX(-100%); } 92%, 100% { transform: translateX(100%); } }
.trace-meter { display: flex; align-items: center; justify-content: center; gap: 10px; margin-block-start: 16px; padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line-strong); color: var(--text-2); font-size: 0.92rem; animation: meter var(--loop) ease-in-out infinite; }
.trace-zero { font-family: var(--mono); font-weight: 800; font-size: 1.25rem; color: var(--accent); letter-spacing: -0.02em; }
.trace-meter .i { width: 20px; height: 20px; color: var(--accent); animation: tick var(--loop) ease-in-out infinite; }
@keyframes meter { 0%, 76% { border-color: var(--line-strong); background: var(--bg); } 82%, 97% { border-color: var(--accent); background: var(--good-bg); } 100% { border-color: var(--line-strong); background: var(--bg); } }
@keyframes tick { 0%, 76% { opacity: 0; transform: scale(0.6); } 82%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.trace-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin-block-start: 14px; }
.trace-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; line-height: 1.35; color: var(--text-2); opacity: 0.45; animation: step var(--loop) linear infinite; }
.trace-steps li:nth-child(2) { animation-delay: 1.25s; }
.trace-steps li:nth-child(3) { animation-delay: 2.5s; }
.trace-steps li:nth-child(4) { animation-delay: 3.75s; }
@keyframes step { 0%, 24% { opacity: 1; background: var(--tint); color: var(--text); } 25%, 100% { opacity: 0.45; background: transparent; color: var(--text-2); } }
.trace-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-weight: 800; flex: none; }

/* ── the numbers row ───────────────────────────────────────────────────────────────────────────────── */
.stats-row { border-block: 1px solid var(--line); background: var(--surface); }
.stats-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 24px; }
.stats-in li { display: grid; gap: 4px; justify-items: center; text-align: center; }
.big { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.small { color: var(--text-2); font-size: 0.92rem; }
.stat-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.stat-link:hover { text-decoration: underline; }
.stat-link .i { width: 15px; height: 15px; }
/* how the bill comes down: three plain reasons under the numbers */
.stats-why { margin-block-start: 34px; padding-block-start: 26px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.stats-why-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; text-align: center; margin: 0; }
.stats-why-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.stats-why-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 0.93rem; line-height: 1.5; }
.stats-why-list strong { color: var(--text); display: block; margin-bottom: 2px; }
/* the timings beside "Get started" */
.times { padding-block: 6px 26px; }
.time-big { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ── mission ────────────────────────────────────────────────────────────────────────────────────────── */
.mission { padding-block: clamp(56px, 7vw, 96px); text-align: center; }
.mission-in { max-width: 1000px; }
.mission-text { font-size: clamp(1.6rem, 3.3vw, 2.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
.mission-text .accent { color: var(--accent); }
.mission-team { display: inline-flex; gap: 9px; align-items: center; margin-block-start: 24px; color: var(--text-2); font-size: 0.95rem; }
.mission-team .i { width: 18px; height: 18px; color: var(--accent); }

/* ── sections ───────────────────────────────────────────────────────────────────────────────────────── */
.section { padding-block: clamp(60px, 8vw, 104px); }
.section-band { background: var(--band); }
/* Two sections on the same background read as one gap, not two: the second drops its top padding. */
.mission + .section:not(.section-band), .section-band + .section-band,
.section:not(.section-band) + .section:not(.section-band) { padding-block-start: 0; }
.section-head { max-width: 760px; margin-block-end: clamp(32px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2, .start-card h2, .cta-band h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; }
.section-head .lede { margin-block-start: 16px; }
.card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: clamp(22px, 2.4vw, 30px); }
.card h3 { font-size: 1.16rem; line-height: 1.3; letter-spacing: -0.015em; margin-block: 16px 8px; }
.card p { color: var(--text-2); }
.icon-badge { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--tint); color: var(--accent); flex: none; }
.icon-badge .i { width: 23px; height: 23px; }
.icon-badge.sm { width: 36px; height: 36px; border-radius: 10px; }
.icon-badge.sm .i { width: 18px; height: 18px; }
.icon-badge.warm { background: var(--warm-bg); color: var(--warm); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.define-pillar .text-link { margin-top: auto; padding-top: 12px; }
.reveal-ready [data-reveal]:not(.in) { opacity: 0; transform: translateY(18px); }
.reveal-ready [data-reveal] { transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* today vs traceless */
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.compare-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); font-weight: 700; font-size: 0.88rem; }
.compare-tag.good { background: var(--good-bg); color: var(--accent-text); }
.compare-tag .i { width: 16px; height: 16px; }
.disk { position: relative; display: grid; gap: 10px; margin-block: 20px; padding: 16px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--bg); min-height: 104px; }
.disk-label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.disk-label .i { width: 16px; height: 16px; }
.disk-fill, .disk-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-bad, .chip-good { padding: 4px 10px; border-radius: 8px; font-size: 0.82rem; font-weight: 700; }
.chip-bad { background: var(--bad-bg); color: var(--bad); animation: pile 6s ease infinite; }
.chip-bad:nth-child(2) { animation-delay: 0.5s; } .chip-bad:nth-child(3) { animation-delay: 1s; } .chip-bad:nth-child(4) { animation-delay: 1.5s; }
@keyframes pile { 0% { opacity: 0; transform: translateY(-10px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.disk-empty { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-weight: 700; }
.disk-empty .i { width: 18px; height: 18px; }
.disk-flow { position: absolute; inset-inline-end: 14px; top: 14px; }
.chip-good { background: var(--good-bg); color: var(--accent-text); opacity: 0; animation: leave 6s ease infinite; }
.chip-good:nth-child(2) { animation-delay: 0.4s; } .chip-good:nth-child(3) { animation-delay: 0.8s; } .chip-good:nth-child(4) { animation-delay: 1.2s; }
@keyframes leave { 0% { opacity: 0; transform: translateY(8px); } 10% { opacity: 1; transform: none; } 38% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateY(-14px); } }
.compare-steps { display: grid; gap: 10px; }
.compare-steps li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 0.8rem; font-weight: 800; color: var(--text); flex: none; margin-block-start: 1px; }
.is-omnira .num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.compare-result { margin-block-start: auto; padding-block-start: 18px; font-weight: 700; }
.compare-result.bad { color: var(--bad); }
.compare-result.good { color: var(--accent-text); }
.compare-card .compare-result { border-block-start: 1px solid var(--line); margin-block-start: 20px; }

/* segment tabs */
.tab-list { display: flex; gap: 6px; }
html:not(.js) .tab-list { display: none; }
html:not(.js) .tab-panel + .tab-panel { margin-block-start: 18px; }
.seg-tabs .tab-list { justify-content: center; flex-wrap: wrap; margin-block-end: 22px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font: inherit; font-weight: 700; font-size: 0.93rem; cursor: pointer; transition: all 0.2s ease; }
.tab .i { width: 18px; height: 18px; }
.tab:hover { color: var(--text); border-color: var(--text-3); }
.tab[aria-selected="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.tab-panel { animation: panel-in 0.35s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.seg-cards { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.seg-cards .tab { display: grid; justify-items: start; align-content: start; gap: 6px; padding: 16px 14px; border-radius: 14px; text-align: start; min-height: 136px; box-shadow: var(--shadow-sm); }
.seg-cards .tab:hover { transform: translateY(-2px); border-color: var(--accent); }
.seg-cards .tab[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: var(--shadow-md); }
.seg-tab-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--tint); color: var(--accent); margin-block-end: 4px; }
.seg-tab-icon .i { width: 20px; height: 20px; }
.seg-cards .tab[aria-selected="true"] .seg-tab-icon { background: var(--accent); color: var(--on-accent); }
.seg-tab-name { font-weight: 800; font-size: 1rem; color: inherit; }
.seg-tab-want { font-size: 0.82rem; font-weight: 600; line-height: 1.35; color: inherit; opacity: 0.72; }
.seg-panel { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 3vw, 40px); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.seg-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--tint); color: var(--accent); }
.seg-icon .i { width: 28px; height: 28px; }
.seg-lead h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.12; margin-block: 16px 12px; }
.seg-lead p { color: var(--text-2); }
.seg-points { display: grid; gap: 14px; align-content: center; }
.seg-points li, .ticks li { display: flex; gap: 14px; align-items: flex-start; }
.seg-points li strong, .ticks li strong { display: block; margin-block-end: 2px; }
.seg-points li span span, .ticks li span span { color: var(--text-2); font-size: 0.95rem; }

/* security scorecards */
.switch { display: flex; justify-content: center; gap: 4px; width: max-content; margin: 0 auto 24px; padding: 4px; border-radius: 12px; background: var(--band); border: 1px solid var(--line); }
.section-band .switch { background: var(--surface); }
.switch-btn { padding: 9px 18px; border-radius: 9px; border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 700; font-size: 0.94rem; cursor: pointer; transition: all 0.2s ease; }
.switch-btn[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); box-shadow: var(--shadow-sm); }
html:not(.js) .switch { display: none; }
.score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.score-head { display: flex; align-items: center; gap: 12px; }
.score-head h3 { margin: 0; }
.score-count { display: flex; align-items: baseline; gap: 10px; margin-block: 18px 4px; }
.score-n { font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; transition: color 0.3s; }
.score-of { color: var(--text-2); font-weight: 600; }
.score-sum { color: var(--text-3); font-size: 0.9rem; margin-block-end: 14px; }
.score-list { display: grid; gap: 6px; }
.score-list li { border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 0.93rem; transition: background-color 0.3s ease; }
.chip { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.chip-risk { background: var(--bad-bg); color: var(--bad); }
.chip-removed { background: var(--good-bg); color: var(--accent-text); }
.chip-handled { background: var(--slate-bg); color: var(--slate); }
.chip-remains { background: var(--warm-bg); color: var(--warm); }
.scores[data-state="omnira"] .when-today, .scores[data-state="today"] .when-omnira { display: none; }
.scores[data-state="today"] .score-n { color: var(--bad); }
.scores[data-state="today"] .score-list li { background: var(--bad-bg); }
.scores[data-state="today"] .score-list li.today-maybe { background: var(--warm-bg); }

/* phases: load, compute, save */
.phases { display: grid; gap: 14px; max-width: 980px; margin-inline: auto; }
.phase-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 16px; }
.phase-label { font-weight: 800; color: var(--text); }
.phase-track { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 6px; }
.phase { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 0.9rem; }
.phase strong { font-size: 0.95rem; }
.phase span { color: var(--text-2); }
.is-traceless .phase { border-color: rgba(47, 125, 79, 0.35); }
.phase-2 { position: relative; overflow: hidden; background: var(--tint); }
.is-traceless .phase-2::after, .phase-row:first-child .phase-2::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; animation: compute 3.2s ease-in-out infinite; }
@keyframes compute { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.is-traceless .phase-3 { background: var(--good-bg); }

/* latency explorer */
.lat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.lat-list { flex-direction: column; }
.lat-tab { justify-content: flex-start; border-radius: 12px; padding: 12px 14px; width: 100%; text-align: start; }
.lat-tab span:nth-child(2) { flex: 1; }
.lat-mini { color: var(--text-3); font-family: var(--mono); font-size: 0.82rem; }
.lat-tab[aria-selected="true"] .lat-mini { color: inherit; opacity: 0.8; }
.lat-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lvl-0.lat-dot, .lvl-1.lat-dot { background: var(--good); }
.lvl-2.lat-dot { background: var(--warm); }
.lvl-3.lat-dot { background: var(--bad); }
.lat-panel { padding: clamp(22px, 3vw, 34px); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.lat-k { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lat-k .i { width: 16px; height: 16px; }
.lat-k strong { color: var(--text); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.lat-v { font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-block: 4px 12px; font-variant-numeric: tabular-nums; }
.meter { display: flex; gap: 5px; margin-block-start: 10px; }
.meter span { width: 46px; height: 7px; border-radius: 4px; background: var(--band); }
.lvl-1 .meter span:nth-child(1) { background: var(--good); }
.lvl-2 .meter span:nth-child(-n+2) { background: var(--warm); }
.lvl-3 .meter span { background: var(--bad); }
.lat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block-start: 22px; padding-block-start: 22px; border-block-start: 1px solid var(--line); }
.lat-col p:last-child { margin-block-start: 6px; color: var(--text); font-weight: 600; }
.lat-col.good .lat-k { color: var(--accent-text); }
.lat > .fine { grid-column: 1 / -1; }

/* stats and insights */
.situation { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.stat-v { font-size: clamp(2.3rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.stat h3 { margin-block-start: 8px; }
.stat-runs { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; color: var(--accent-text) !important; font-weight: 700; font-size: 0.92rem; }
.stat-runs .i { width: 17px; height: 17px; }
.insight h3 { margin-block-start: 14px; }
.gives .give { flex-direction: row; gap: 18px; align-items: flex-start; }
.give h3 { margin-block: 4px 6px; }
.note { display: flex; gap: 8px; align-items: flex-start; margin-block-start: 12px; padding: 10px 12px; border-radius: 10px; background: var(--band); color: var(--text-2); font-size: 0.86rem; }
.note .i { width: 15px; height: 15px; color: var(--accent); margin-block-start: 3px; }
.roadmap { display: flex; gap: 10px; align-items: center; justify-content: center; margin-block-start: 22px; color: var(--warm); font-weight: 600; font-size: 0.94rem; text-align: center; }
.roadmap .i { width: 18px; height: 18px; }
.side { gap: 4px; }
.side h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-block: 16px 8px; }
.side .cta-row { margin-block-start: auto; padding-block-start: 22px; }

/* AI deep dives */
.ai-grid { display: grid; gap: 20px; }
.ai-head { display: flex; align-items: center; gap: 14px; }
.ai-head h3 { margin: 0; font-size: 1.3rem; }
.ai-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block-start: 20px; }
.ai-cols ul { display: grid; gap: 10px; }
.ai-cols li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.ai-cols li span { color: var(--text-2); font-size: 0.92rem; }
.list-h { display: flex; align-items: center; gap: 8px; margin-block-end: 10px; color: var(--text-3); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.list-h.good { color: var(--accent-text); }
.list-h .i { width: 16px; height: 16px; }
.ai-note { margin-block-start: 18px; color: var(--text) !important; font-weight: 600; }

/* mitigation */
.fix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); }
.ticks { display: grid; gap: 16px; }
.bars { margin-block-start: 34px; gap: 12px; }
.bars-h { font-weight: 800; color: var(--text) !important; margin-block-end: 4px; }
.bar-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 110px; align-items: center; gap: 14px; }
.bar-label { color: var(--text-2); font-size: 0.93rem; }
.bar { height: 12px; border-radius: 6px; background: var(--band); overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w); min-width: 6px; border-radius: 6px; background: var(--accent); transform-origin: left; }
.bar-row:first-of-type .bar span { background: var(--bad); }
.reveal-ready .bars:not(.in) .bar span { transform: scaleX(0); }
.bars .bar span { transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.bar-v { font-family: var(--mono); font-weight: 700; font-size: 0.9rem; text-align: end; }

/* start card, demos, steps */
.start-card { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px); padding: clamp(26px, 4vw, 48px); }
.start-card .lede { margin-block-start: 14px; }
.cta-col { display: grid; gap: 10px; flex: none; min-width: 260px; }
.start-card + .demos { margin-block-start: 22px; }
.demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.demo { gap: 6px; text-decoration: none; color: var(--text); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.demo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.demo-t { margin-block-start: 12px; font-weight: 800; font-size: 1.08rem; }
.demo-d { color: var(--text-2); }
.demo-open { display: inline-flex; align-items: center; gap: 7px; margin-block-start: auto; padding-block-start: 14px; color: var(--accent-text); font-weight: 700; font-size: 0.9rem; }
.demo-open .i { width: 1em; height: 1em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 var(--good-bg); animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(47, 125, 79, 0.45); } 100% { box-shadow: 0 0 0 9px rgba(47, 125, 79, 0); } }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step-n { position: absolute; top: 20px; inset-inline-end: 22px; font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--text-3); }

/* proof of life: the others */
.others { padding-block: 0 clamp(40px, 5vw, 64px); }
.others-h { font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-block-end: 14px; }
.others-list { display: flex; flex-wrap: wrap; gap: 8px; }
.other { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.93rem; transition: border-color 0.2s, transform 0.2s; }
.other .i { width: 17px; height: 17px; color: var(--accent); }
.other:hover { border-color: var(--accent); transform: translateY(-1px); }

/* faq */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--accent); transition: transform 0.25s; }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details > div { padding: 0 20px 18px; color: var(--text-2); }

/* closing band */
.section-final { padding-block-start: 0; }
.cta-band { display: grid; justify-items: center; text-align: center; padding: clamp(40px, 7vw, 84px) clamp(20px, 5vw, 64px); border-radius: 22px; background: radial-gradient(70% 90% at 50% 0%, var(--good-bg), transparent 70%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.cta-band .lede { margin-block-start: 14px; }
.cta-band .cta-row { justify-content: center; }
.signin-line { margin-block-start: 14px; color: var(--text-3); font-size: 0.92rem; }
.signin-line a { color: var(--accent-text); font-weight: 700; }
.missing { min-height: 60vh; display: grid; align-content: center; }
.missing h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-block-end: 14px; }

/* footer */
.site-footer { border-block-start: 1px solid var(--line); background: var(--band); padding-block: 56px 32px; }
.footer-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-brand p { margin-block: 12px 18px; color: var(--text-2); }
.footer-brand .footer-tag { margin-block-end: 8px; font-weight: 700; color: var(--text); }
.footer-mission { max-width: 44ch; font-size: 0.9rem; line-height: 1.55; }
.footer-mission strong { color: var(--text); }
.footer-nav { display: grid; gap: 9px; align-content: start; }
.footer-h { font-weight: 800; margin-block-end: 4px; }
.footer-nav a { color: var(--text-2); text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--accent-text); }
.footer-fine { display: grid; gap: 6px; margin-block-start: 40px; padding-block-start: 22px; border-block-start: 1px solid var(--line); color: var(--text-3); font-size: 0.84rem; }

/* sticky call to action (phones) */
.sticky-cta { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); color: var(--text-3); font-size: 0.82rem; font-weight: 600; }
.sticky-cta .btn { order: 2; min-height: 44px; }
@media (max-width: 760px) {
  .sticky-cta.show { display: flex; animation: rise 0.3s ease both; }
  body { padding-block-end: 0; }
}

/* ── architecture: today the server keeps everything; with Omnira, nothing ─────────────────────────── */
.arch-rows { display: grid; gap: clamp(22px, 3vw, 34px); }
.arch-row { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(22px, 3.5vw, 48px); align-items: center; padding: clamp(20px, 2.6vw, 34px); border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.arch-row.is-omnira { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
.arch-copy { display: grid; gap: 14px; align-content: start; }
.arch-copy .compare-tag { justify-self: start; }
.arch-copy h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; }
.arch-row .compare-result { margin-block-start: 4px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }

.arch { --arch-line: var(--text); margin: 0; min-width: 0; font-size: 0.9rem; }
.arch-omnira { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.arch-box { position: relative; z-index: 1; display: grid; gap: 0; padding: 16px; border-radius: 18px; border: 1.5px solid var(--line-strong); background: var(--bg); }
.arch-tag { display: inline-flex; align-items: center; gap: 6px; margin-block-end: 12px; color: var(--text); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.arch-tag .i { width: 15px; height: 15px; }
.arch-tag.warm { margin: 10px 0 0; color: var(--warm); }
.arch-tag.bad { margin: 10px 0 0; color: var(--bad); }
.arch-tag.good { color: var(--accent-text); }
.arch-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.arch-unit { display: grid; place-items: center; padding: 12px 8px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.arch-down { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 26px; }
.arch-down i { position: relative; justify-self: center; width: 2px; height: 100%; background: var(--arch-line); }
.arch-down i::after { content: ""; position: absolute; left: 50%; bottom: -1px; margin-left: -5px; border-inline: 5px solid transparent; border-top: 7px solid var(--arch-line); }
.arch-ram { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 12px; border: 2px solid var(--text); background: var(--surface); text-align: center; }
.arch-ram strong { font-size: 1.15rem; letter-spacing: 0.02em; }
.arch-ram > span { color: var(--text-2); }
.arch-ram.has-vault { justify-items: stretch; text-align: start; }
.arch-vault { display: grid; justify-items: center; gap: 4px; margin-block-start: 8px; padding: 14px 12px; border-radius: 12px; border: 2px solid var(--accent); background: var(--good-bg); text-align: center; box-shadow: 0 0 0 4px var(--good-bg); }
.arch-vault .i { width: 22px; height: 22px; color: var(--accent); }
.arch-vault b { color: var(--accent-text); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.arch-vault span { color: var(--text); font-size: 0.86rem; line-height: 1.4; }

/* today: the disk loads the software and takes the writes */
.arch-io { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: 58px; }
.io { position: relative; display: flex; justify-content: center; }
.io i { position: relative; width: 2px; height: 100%; background: var(--bad); }
.io i::after { content: ""; position: absolute; left: 50%; margin-left: -5px; border-inline: 5px solid transparent; }
.io-up i::after { top: -1px; border-bottom: 7px solid var(--bad); }
.io-down i::after { bottom: -1px; border-top: 7px solid var(--bad); }
.io i::before { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--bad); opacity: 0; }
.io-up i::before { animation: io-up 1.8s ease-in infinite; }
.io-down i::before { animation: io-down 1.8s ease-in infinite; }
.io:nth-child(3) i::before { animation-delay: 0.6s; }
@keyframes io-up { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }
@keyframes io-down { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }
.io b { position: absolute; top: 50%; left: calc(50% + 10px); transform: translateY(-50%); color: var(--bad); font-size: 0.82rem; font-weight: 800; }
.arch-disk { padding: 12px; border-radius: 14px; border: 1.5px solid var(--bad); background: var(--bad-bg); }
.arch-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.arch-files span { display: grid; place-items: center; min-height: 58px; padding: 8px 6px; border-radius: 10px; border: 1.5px solid var(--bad); background: var(--surface); text-align: center; font-weight: 800; font-size: 0.84rem; line-height: 1.25; animation: disk-grow 3.6s ease-in-out infinite; }
.arch-files span:nth-child(2) { animation-delay: 0.6s; }
.arch-files span:nth-child(3) { animation-delay: 1.2s; }
@keyframes disk-grow { 0%, 60%, 100% { box-shadow: none; } 70% { box-shadow: 0 0 0 4px var(--bad-bg); } }

/* with Omnira: nothing on the disk; everything travels to your storage, encrypted */
.arch-zero { display: flex; align-items: center; gap: 12px; margin-block-start: 14px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); }
.arch-zero > .i { width: 30px; height: 30px; color: var(--text-2); flex: none; }
.arch-zero span { display: grid; line-height: 1.25; }
.arch-zero b { font-size: 0.98rem; }
.arch-zero em { color: var(--accent-text); font-style: normal; font-weight: 800; font-size: 1.02rem; }
.arch-link { position: relative; display: grid; grid-template-columns: minmax(64px, 0.5fr) minmax(0, 1fr); grid-template-rows: auto repeat(3, minmax(58px, auto)) auto; align-items: center; row-gap: 8px; margin-inline-start: -2px; }
.arch-store-bg { grid-column: 2; grid-row: 1 / 5; align-self: stretch; margin: -12px -12px -12px -10px; border-radius: 16px; border: 1.5px solid var(--accent); background: var(--tint); }
.arch-store-tag { grid-column: 2; grid-row: 1; margin: 2px 0 0 4px; position: relative; }
.arch-item { position: relative; grid-column: 2; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--accent); background: var(--surface); font-weight: 800; font-size: 0.92rem; line-height: 1.25; }
.arch-item > .i { width: 20px; height: 20px; color: var(--accent); flex: none; }
.arch-dir { display: none; margin-inline-start: auto; padding: 2px 8px; border-radius: 999px; background: var(--good-bg); color: var(--accent-text); font-style: normal; font-size: 0.72rem; font-weight: 800; }
.arch-lane { position: relative; z-index: 2; grid-column: 1; display: grid; place-items: center; height: 100%; margin-inline-start: -18px; }
.arch-lane i { position: absolute; top: 50%; left: 0; right: 0; height: 12px; margin-top: -6px; background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, radial-gradient(circle, var(--accent) 3.5px, transparent 4px) no-repeat; background-size: 100% 2px, 12px 12px; }
.arch-lane i::before, .arch-lane i::after { content: ""; position: absolute; top: 50%; margin-top: -5px; border-block: 5px solid transparent; }
.lane-in i::before, .lane-both i::before { left: -1px; border-right: 8px solid var(--accent); }
.lane-out i::after, .lane-both i::after { right: -1px; border-left: 8px solid var(--accent); }
.lane-in i { animation: lane-in 2.2s linear infinite; }
.lane-out i { animation: lane-out 2.2s linear infinite; animation-delay: 0.7s; }
.lane-both i { animation: lane-both 3s ease-in-out infinite; }
@keyframes lane-in { from { background-position: center, 100% 50%; } to { background-position: center, 0% 50%; } }
@keyframes lane-out { from { background-position: center, 0% 50%; } to { background-position: center, 100% 50%; } }
@keyframes lane-both { 0%, 100% { background-position: center, 100% 50%; } 50% { background-position: center, 0% 50%; } }
.arch-lane b { position: relative; z-index: 1; padding: 1px 9px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent-text); font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.lane-in, .arch-item.r2 { grid-row: 2; }
.lane-both, .arch-item.r3 { grid-row: 3; }
.lane-out, .arch-item.r4 { grid-row: 4; }
.arch-enc { grid-row: 5; grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-block-start: 14px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.8rem; font-weight: 800; }
.arch-enc .i { width: 14px; height: 14px; }

/* the home version: one picture at a time, before and after */
.arch-switch { max-width: 900px; margin-inline: auto; }
.arch-switch > .switch { margin-block-end: 20px; }
.arch-stage { display: grid; }
.arch-panel { grid-area: 1 / 1; display: grid; gap: 16px; align-content: start; padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md); transition: opacity 0.45s ease, visibility 0.45s ease; }
.arch-panel .compare-steps { margin-block-start: 4px; }
.arch-switch[data-state="today"] .when-omnira, .arch-switch[data-state="omnira"] .when-today { opacity: 0; visibility: hidden; }
html:not(.js) .arch-panel { grid-area: auto; opacity: 1; visibility: visible; margin-block-end: 16px; }

/* ── a vertical's first screen: its own hook, its own number, its own picture ──────────────────────── */
.hero[data-hook] h1 { font-size: clamp(2.2rem, 4.3vw, 3.55rem); line-height: 1.05; }
.hero[data-hook] .lede { margin-block-start: 18px; }
.signal { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; margin-block-start: 20px; padding: 12px 16px; max-width: 540px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.signal-n { grid-row: span 2; font-size: clamp(1.9rem, 3.2vw, 2.55rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.signal-l { font-weight: 700; line-height: 1.3; color: var(--text); }
.signal-s { color: var(--text-3); font-size: 0.8rem; line-height: 1.4; }
.hero[data-hook] .cta-row { margin-block-start: 20px; }
.hero-visual { min-width: 0; }

.vis { position: relative; margin: 0; padding: clamp(18px, 2.2vw, 26px); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: rise 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vis-title { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; }
.vis-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--good-bg); }
.vis figcaption { margin-block-start: 12px; color: var(--text-3); font-size: 0.82rem; line-height: 1.45; }
.vis .switch { width: 100%; margin: 14px 0 0; }
.vis .switch-btn { flex: 1; padding: 8px 10px; font-size: 0.86rem; }
.vis-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--accent); flex: none; }
.vis-icon .i { width: 22px; height: 22px; }
.vis-icon.sm { width: 36px; height: 36px; border-radius: 10px; }
.vis-icon.sm .i { width: 18px; height: 18px; }
.vis-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.vis-chips span { padding: 2px 7px; border-radius: 6px; background: var(--good-bg); color: var(--accent-text); font-size: 0.72rem; font-weight: 700; }
.vis-facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-block-start: 14px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--bg); color: var(--text-2); font-size: 0.88rem; }
.vis-facts b { color: var(--accent-text); }
.mono { font-family: var(--mono); }
.vis-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-block-start: 12px; color: var(--text-2); font-size: 0.82rem; }
.vis-legend li { display: inline-flex; align-items: center; gap: 6px; }
.vis-legend .i { width: 14px; height: 14px; color: var(--accent); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-idle { background: #8a9486; }
.dot-busy { background: #3fbf74; }
.dot-host { background: var(--text-3); }
.dot-copy { background: var(--bad); }
@keyframes stream { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* enterprises: pick where the job runs; the data stays put */
.hop { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 14px; }
.hop-store { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 16px 10px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg); text-align: center; }
.hop-stay { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.74rem; font-weight: 800; }
.hop-stay .i { width: 12px; height: 12px; }
.hop-places { display: grid; gap: 8px; }
.hop-place { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; }
.hop-place::after { content: ""; position: absolute; inset-inline: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; opacity: 0; animation: stream 1.4s linear infinite; }
.hop-name { display: grid; line-height: 1.25; }
.hop-name strong { font-size: 0.92rem; }
.hop-name span { color: var(--text-3); font-size: 0.78rem; }
.hop-job { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--good-bg); color: var(--accent-text); font-size: 0.74rem; font-weight: 800; opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.3s; }
.hop-job .i { width: 12px; height: 12px; }
.vis-hop[data-state="own"] [data-place="own"], .vis-hop[data-state="a"] [data-place="a"], .vis-hop[data-state="b"] [data-place="b"] { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--good-bg); }
.vis-hop[data-state="own"] [data-place="own"] .hop-job, .vis-hop[data-state="a"] [data-place="a"] .hop-job, .vis-hop[data-state="b"] [data-place="b"] .hop-job,
.vis-hop[data-state="own"] [data-place="own"]::after, .vis-hop[data-state="a"] [data-place="a"]::after, .vis-hop[data-state="b"] [data-place="b"]::after { opacity: 1; transform: none; }

/* governments: everything a job touches stays inside the border */
.border-in { padding: 16px; border-radius: 16px; border: 2px dashed var(--accent); background: var(--tint); }
.border-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.border-tag .i { width: 15px; height: 15px; }
.border-tag.muted { color: var(--text-3); }
.border-nodes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block-start: 12px; }
.bn { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: 0.82rem; }
.bn .i { width: 22px; height: 22px; color: var(--accent); }
.bn b { font-weight: 700; line-height: 1.2; }
.bn-hub { border-color: var(--accent); }
.border-flow { position: absolute; inset-inline: 14%; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.border-flow i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: flow 2.7s linear infinite; }
.border-flow i:nth-child(2) { animation-delay: 0.9s; }
.border-flow i:nth-child(3) { animation-delay: 1.8s; }
@keyframes flow { from { left: 0; } to { left: calc(100% - 8px); } }
.border-out { position: relative; display: grid; justify-items: center; gap: 8px; padding: 30px 12px 4px; text-align: center; }
.border-cut { position: absolute; top: 0; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: repeating-linear-gradient(var(--accent) 0 4px, transparent 4px 8px); transition: height 0.35s ease; }
.vis-border[data-state="gapped"] .border-cut { height: 6px; }
.border-line { display: none; align-items: center; gap: 8px; color: var(--text); font-weight: 700; font-size: 0.92rem; }
.border-line .i { width: 18px; height: 18px; color: var(--accent); }
.vis-border[data-state="connected"] .when-connected, .vis-border[data-state="gapped"] .when-gapped { display: inline-flex; }
html:not(.js) .border-line.when-connected { display: inline-flex; }

/* data centers: a rack filling with sovereign tenants; the disks hold none of their data */
.rack { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #1c211d; border: 1px solid var(--line-strong); box-shadow: inset 0 0 0 4px #252b26; }
.rack-u { --loop: 8s; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: #2a302b; color: #d6ddd2; font-size: 0.8rem; font-weight: 600; animation: rack-slot var(--loop) ease-in-out infinite; animation-delay: calc(var(--i) * 0.55s); }
.rack-led { width: 8px; height: 8px; border-radius: 50%; background: #737d70; animation: rack-led var(--loop) ease-in-out infinite; animation-delay: calc(var(--i) * 0.55s); }
.rack-state { display: grid; }
.rack-state > span { grid-area: 1 / 1; }
.rack-idle { color: #aab3a6; animation: rack-show-idle var(--loop) ease-in-out infinite; animation-delay: calc(var(--i) * 0.55s); }
.rack-busy { opacity: 0; color: #eaf5ee; animation: rack-show-busy var(--loop) ease-in-out infinite; animation-delay: calc(var(--i) * 0.55s); }
.rack-disk { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 0.74rem; color: #8fd3aa; }
.rack-disk .i { width: 13px; height: 13px; }
@keyframes rack-slot { 0%, 12% { background: #2a302b; } 18%, 78% { background: #1f4a31; } 86%, 100% { background: #2a302b; } }
@keyframes rack-led { 0%, 12% { background: #737d70; box-shadow: none; } 18%, 78% { background: #5bdc8f; box-shadow: 0 0 8px #5bdc8f; } 86%, 100% { background: #737d70; box-shadow: none; } }
@keyframes rack-show-idle { 0%, 12% { opacity: 1; } 18%, 78% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes rack-show-busy { 0%, 12% { opacity: 0; } 18%, 78% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* cloud providers: the same machine, as the operator and as the customer see it */
.op-who { display: flex; align-items: center; margin-block-end: 10px; font-weight: 800; font-size: 0.94rem; }
.op-who > span { display: none; align-items: center; gap: 8px; }
.op-who .i { width: 18px; height: 18px; color: var(--accent); }
.vis-operator[data-state="operator"] .when-operator, .vis-operator[data-state="customer"] .when-customer { display: inline-flex; }
.op-rows { display: grid; gap: 6px; }
.op-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 0.86rem; transition: background-color 0.3s; }
.op-label { color: var(--text-2); font-weight: 600; }
.op-val { font-family: var(--mono); font-size: 0.8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter 0.35s, opacity 0.35s; }
.op-seal { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--slate-bg); color: var(--slate); font-size: 0.72rem; font-weight: 800; opacity: 0; transition: opacity 0.3s; }
.op-seal .i { width: 12px; height: 12px; }
.op-infra .op-seal { visibility: hidden; }
.vis-operator[data-state="operator"] .op-tenant { background: var(--band); }
.vis-operator[data-state="operator"] .op-tenant .op-val { filter: blur(5px); opacity: 0.55; }
.vis-operator[data-state="operator"] .op-tenant .op-seal { opacity: 1; }

/* frontier AI labs: every host keeps a copy today; with Omnira, one place */
.w-field { position: relative; display: grid; place-items: center; height: 148px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.w-dots, .w-copies { position: absolute; inset: 12px; background-size: 28px 28px; }
.w-dots { background-image: radial-gradient(circle, var(--text-3) 3px, transparent 3.6px); opacity: 0.55; }
.w-copies { background-image: radial-gradient(circle, var(--bad) 2.6px, transparent 3.2px); background-position: 8px -8px; transition: opacity 0.5s; }
.w-vault { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent); transition: box-shadow 0.4s, border-color 0.4s; }
.w-vault .i { width: 28px; height: 28px; }
.vis-weights[data-state="omnira"] .w-copies { opacity: 0; }
.vis-weights[data-state="omnira"] .w-vault { border-color: var(--accent); box-shadow: 0 0 0 6px var(--good-bg), 0 0 36px var(--good-bg); }
.w-count { margin-block-start: 12px; color: var(--text-2); font-size: 0.98rem; }
.w-count > span { display: none; align-items: baseline; gap: 8px; }
.w-count b { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vis-weights[data-state="today"] .when-today, .vis-weights[data-state="omnira"] .when-omnira { display: inline-flex; }
html:not(.js) .w-count .when-today { display: inline-flex; }
.vis-weights .when-today b { color: var(--bad); }
.vis-weights .when-omnira b { color: var(--accent); }
.w-range { display: grid; gap: 6px; margin-block-start: 10px; color: var(--text-2); font-size: 0.84rem; }
.w-range input { width: 100%; accent-color: var(--accent); }
html:not(.js) .w-range { display: none; }

/* marketplace: pick the device you have */
.drawer-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 12px; background: var(--band); border: 1px solid var(--line); }
.drawer-tab { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.drawer-tab .i { width: 20px; height: 20px; }
.drawer-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.drawer-tab[aria-selected="true"] .i { color: var(--accent); }
.drawer-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: center; margin-block-start: 12px; padding: 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); animation: panel-in 0.35s ease both; }
.drawer-big { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; background: var(--tint); color: var(--accent); }
.drawer-big .i { width: 34px; height: 34px; }
.drawer-runs { display: grid; gap: 2px; }
.drawer-runs span { color: var(--text-3); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.drawer-runs strong { font-size: 1.05rem; line-height: 1.3; }
.drawer-promises { grid-column: 1 / -1; display: grid; gap: 6px; color: var(--text-2); font-size: 0.88rem; }
.drawer-promises li { display: flex; align-items: center; gap: 8px; }
.drawer-promises .i { width: 16px; height: 16px; color: var(--accent); flex: none; }
.drawer-panel .text-link { grid-column: 1 / -1; }

/* how it helps: three changes, each before → after, with one proof */
.outcome-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.outcome { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.outcome h3 { margin-block-start: 4px; font-size: 1.14rem; line-height: 1.3; letter-spacing: -0.015em; }
.oc-before, .oc-after { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; font-size: 0.92rem; line-height: 1.45; }
.oc-before { background: var(--bad-bg); color: var(--text-2); }
.oc-after { background: var(--good-bg); color: var(--text); }
.oc-tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.oc-before .oc-tag { color: var(--bad); }
.oc-after .oc-tag { color: var(--accent-text); }
.oc-proof { display: flex; align-items: flex-start; gap: 8px; margin-block-start: auto; padding-block-start: 4px; color: var(--text-2); font-size: 0.86rem; font-weight: 600; }
.oc-proof .i { width: 16px; height: 16px; margin-block-start: 2px; color: var(--accent); flex: none; }

/* explore: the details, folded until asked for */
.folds { display: grid; gap: 10px; }
.fold { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; }
.fold[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 800; font-size: 1.05rem; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.fold-t { display: inline-flex; align-items: center; gap: 12px; }
.fold-t .i { width: 20px; height: 20px; color: var(--accent); }
.fold summary > .i { color: var(--accent); transition: transform 0.25s; }
.fold[open] summary > .i { transform: rotate(180deg); }
.fold-body { padding: 2px 22px 22px; }
.fold-lede { margin-block-end: 14px; color: var(--text-2); font-weight: 600; }
.fold .card { box-shadow: none; }
.brief { display: grid; gap: 10px; }
.brief li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); }
.brief .i { width: 18px; height: 18px; margin-block-start: 3px; color: var(--accent); flex: none; }
.fold .more { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* home: six doors, each with its own question and number */
.doors { background: var(--band); }
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.door { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.door:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.door-top { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.door-q { color: var(--text); font-size: 1.08rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.door-n { margin-block-start: 6px; color: var(--accent); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.door-l { color: var(--text-2); font-size: 0.88rem; }
.door-go { display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; padding-block-start: 10px; color: var(--accent-text); font-weight: 800; font-size: 0.92rem; }
.door-go .i { width: 16px; height: 16px; transition: transform 0.2s ease; }
.door:hover .door-go .i { transform: translateX(3px); }

/* ── responsive ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .trace { max-width: 620px; width: 100%; justify-self: center; }
  .stats-why-list { grid-template-columns: minmax(0, 1fr); }
  .compare-grid, .score-grid, .seg-panel, .lat, .fix-grid, .faq-wrap, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .demos, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-cols { grid-template-columns: minmax(0, 1fr); }
  .start-card { flex-direction: column; align-items: flex-start; }
  .lat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-4, .grid-3, .demos, .steps, .situation, .lat-list, .footer-in { grid-template-columns: minmax(0, 1fr); }
  .cta-row .btn { width: 100%; }
  .cta-col { width: 100%; min-width: 0; }
  .trace-stage { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; }
  .trace-store, .trace-machine { min-height: 150px; padding: 12px 8px; }
  .trace-icon { width: 40px; height: 40px; }
  .trace-vault { font-size: 0.66rem; padding: 3px 7px; white-space: nowrap; }
  .trace-vault .i { width: 12px; height: 12px; }
  .trace-lock { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .phase-track { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: minmax(0, 1fr) 90px; }
  .bar-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .lat-cols { grid-template-columns: minmax(0, 1fr); }
  .gives .give { flex-direction: column; }
  .seg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-cards .tab { min-height: 0; padding: 12px; }
  .stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .trace-chats { min-height: 136px; }
  .chat-q, .chat-a { font-size: 0.84rem; max-width: 94%; }
}

@media (max-width: 1060px) {
  .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-visual { max-width: 620px; width: 100%; justify-self: center; }
  .arch-row, .arch-row.is-omnira { grid-template-columns: minmax(0, 1fr); }
  .outcome-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .arch-switch > .switch { width: 100%; }
  .arch-switch .switch-btn { flex: 1; padding: 8px 10px; font-size: 0.86rem; }
  .arch-omnira { grid-template-columns: minmax(0, 1fr); }
  .arch-link { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin: 10px 0 0; padding: 12px; border-radius: 16px; border: 1.5px solid var(--accent); background: var(--tint); row-gap: 8px; }
  .arch-store-bg, .arch-lane { display: none; }
  .arch-store-tag, .arch-item, .arch-item.r2, .arch-item.r3, .arch-item.r4, .arch-enc { grid-column: 1; grid-row: auto; }
  .arch-dir { display: inline-block; }
  .arch-enc { margin-block-start: 4px; }
  .arch-files span { min-height: 52px; padding: 6px 4px; font-size: 0.72rem; hyphens: auto; -webkit-hyphens: auto; }
  .io b { font-size: 0.72rem; left: calc(50% + 6px); }
  .trace-steps { display: none; }  /* on a phone the pictures tell the story; the captions only repeat it */
  .stats-in { padding-block: 16px; gap: 12px 10px; }
  .stats-in .small { font-size: 0.84rem; }
  .door-grid { grid-template-columns: minmax(0, 1fr); }
  .signal { padding: 10px 12px; }
  .hop { grid-template-columns: minmax(0, 1fr); }
  .hop-store { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; }
  .hop-store .vis-chips, .hop-store .hop-stay { grid-column: 2; justify-content: flex-start; }
  .border-nodes { gap: 6px; }
  .bn { font-size: 0.74rem; padding: 10px 4px; }
  .op-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .op-seal { grid-column: 2; justify-self: start; }
  .op-infra .op-seal { display: none; }
  .fold summary { padding: 16px 16px; font-size: 1rem; }
  .fold-body { padding: 2px 16px 18px; }
}
/* the smallest phones: the numbers row's labels a little smaller, so the six doors stay within two screens */
@media (max-width: 400px) {
  .stats-in { padding-block: 12px; gap: 10px 8px; }
  .stats-in .small { font-size: 0.78rem; line-height: 1.35; }
  .stats-in .stat-link { display: none; } /* the menu has Security and Prove it; How is just below the doors */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .io i::before { display: none; }
  .arch-lane i { background-position: center, 50% 50%; }
  .rack-u:nth-child(-n+5) { background: #1f4a31; }
  .rack-u:nth-child(-n+5) .rack-led { background: #5bdc8f; }
  .rack-u:nth-child(-n+5) .rack-idle { opacity: 0; }
  .rack-u:nth-child(-n+5) .rack-busy { opacity: 1; }
  .border-flow i:nth-child(2), .border-flow i:nth-child(3) { display: none; }
  .border-flow i:first-child { left: calc(50% - 4px); }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready [data-reveal]:not(.in) { opacity: 1; transform: none; }
  .pkt, .trace-sweep { display: none; }
  .trace-steps li { opacity: 1; }
  .trace-mem { opacity: 1; }
  .trace-meter .i { opacity: 1; }
  .chip-good { opacity: 1; }
  .reveal-ready .bars:not(.in) .bar span { transform: none; }
}

/* ── from the deck "Introducing traceless compute" ──────────────────────────────────────────────────── */

/* security: our own figures, each with its basis beside it; every row opens to say what it means */
.score-big { display: inline-flex; align-items: baseline; }
.score-unit { font-size: clamp(1.7rem, 3.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--accent); line-height: 1; transition: color 0.3s; }
.scores[data-state="today"] .score-unit { color: var(--bad); }
.scores { display: grid; gap: 22px; }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 16px 16px; }
.vs-col { border-radius: 12px; padding: 12px 16px; border: 1px solid var(--line); }
.vs-today { background: var(--bad-bg); }
.vs-omnira { background: var(--good-bg); }
.vs-head { margin: 0 0 4px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vs-today .vs-head { color: var(--bad); }
.vs-omnira .vs-head { color: var(--accent-text); }
.vs-sum { margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.45; }
.vs-sum .score-big { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; margin-inline-end: 4px; }
.score-cols, .score-row summary { display: grid; grid-template-columns: minmax(0, 1fr) 170px 170px 26px; align-items: center; gap: 10px; }
.score-cols { margin: 0; padding: 0 12px 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.score-row summary { padding: 9px 12px; cursor: pointer; list-style: none; border-radius: 10px; }
.score-row .chip { justify-self: start; }
.chip-when { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.score-open { display: grid; place-items: center; color: var(--text-3); }
.score-open .i { width: 18px; height: 18px; transition: transform 0.2s ease; }
.score-row[open] .score-open .i { transform: rotate(180deg); }
.score-detail { display: grid; gap: 6px; padding: 2px 14px 14px 39px; }
.score-row summary::-webkit-details-marker { display: none; }
.score-row summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.score-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; color: var(--text); }
.score-name .i { width: 17px; height: 17px; color: var(--text-3); flex: none; }
.score-row summary:hover .score-name > span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.score-row[open] summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.score-detail p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-2); }
.score-detail strong { color: var(--text); }
.score-risk strong { color: var(--bad); }
.score-with { color: var(--text); }
.score-with strong { color: var(--accent-text); }
.scores[data-state="today"] .score-with { color: var(--text-2); }
.chip-maybe { background: var(--warm-bg); color: var(--warm); }
.chip-encrypted, .chip-nojobdata, .chip-noatrest { background: var(--slate-bg); color: var(--slate); }
.chip-operatorblind { background: var(--warm-bg); color: var(--warm); }
/* phones: the column heads go; each chip says which side it is */
@media (max-width: 640px) {
  .score-cols { display: none; }
  .score-row summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 26px; }
  .score-row .score-name { grid-column: 1 / -1; }
  .chip-when { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; font-weight: 700; opacity: 0.8; }
  .score-row .chip { white-space: normal; border-radius: 10px; }
  .vs { grid-template-columns: minmax(0, 1fr); }
}

/* the diagrams: a warning on today's server, a check on Omnira's; the vault opens only with your key */
.arch-flag { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; }
.arch-flag .i { width: 20px; height: 20px; }
.arch-flag.bad { color: var(--bad); }
.arch-flag.good { color: var(--accent); }
.arch-today .arch-box { border-color: var(--bad); background: var(--bad-bg); }
.arch-omnira .arch-box { border-color: var(--accent); }
.arch-key { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-text); font-style: normal; font-size: 0.74rem; font-weight: 800; }
.arch-vault .arch-key .i { width: 14px; height: 14px; }

/* today's panel ends on the evidence, and on the way out of it */
.breach { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--bad-bg); }
.breach-n { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--bad); font-variant-numeric: tabular-nums; flex: none; }
.breach-l { display: grid; gap: 2px; color: var(--text); font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.breach-l .source { margin: 0; padding: 0; font-weight: 500; }
.better { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; border: 0; border-radius: 14px; background: var(--btn); color: var(--on-btn); font: inherit; font-size: 1rem; font-weight: 800; text-align: start; }
.better .i { width: 20px; height: 20px; flex: none; }
button.better, a.better { cursor: pointer; text-decoration: none; transition: background-color 0.2s ease; }
button.better:hover, a.better:hover { background: var(--btn-hover); }
button.better:hover .i { transform: translateX(3px); }
a.better:hover .i { transform: translateY(3px); }
.better .i { transition: transform 0.2s ease; }
.better:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html:not(.js) button.better { display: none; }

/* the quote that names the problem */
.quote-band { text-align: center; }
.quote { display: grid; justify-items: center; gap: 18px; max-width: 940px; margin: 0 auto; }
.quote-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--tint); color: var(--accent); }
.quote-mark .i { width: 26px; height: 26px; }
.quote blockquote { margin: 0; }
.quote blockquote p { color: var(--text); font-size: clamp(1.35rem, 2.6vw, 2.05rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; text-wrap: balance; }
.quote blockquote p::before { content: "“"; }
.quote blockquote p::after { content: "”"; }
.quote figcaption { color: var(--text-2); font-size: 0.95rem; }
.quote cite { color: var(--text-3); font-style: normal; }
.quote-answer { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 720px; margin-block-start: 4px; padding: 14px 18px; border-radius: 14px; background: var(--good-bg); color: var(--text); font-weight: 600; text-align: start; }
.quote-answer .i { width: 20px; height: 20px; margin-block-start: 2px; color: var(--accent); flex: none; }

/* the founder's story: the fleet it became, and who tells it */
.fleet { margin-block-start: 22px; padding: 18px 20px; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: var(--surface); }
.fleet-lead { margin-block-end: 12px; color: var(--text); font-weight: 800; }
.fleet-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fleet-list li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--text); font-size: 0.88rem; font-weight: 700; }
.fleet-list .i { width: 16px; height: 16px; color: var(--accent); }
.reveal-ready .fleet.in .fleet-list li { animation: join 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 70ms + 0.2s); }
@keyframes join { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.fleet-note { margin-block-start: 10px; color: var(--text-3); font-size: 0.82rem; }
.story-close { max-width: 820px; margin: 30px auto 0; color: var(--text); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.card.founder { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-block-start: 30px; }
.founder-id { display: flex; align-items: center; gap: 14px; }
.founder-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; flex: none; }
.card .founder-name { color: var(--text); font-size: 1.1rem; font-weight: 800; }
.founder-role { font-size: 0.9rem; }
.founder-bio { font-size: 0.93rem; line-height: 1.6; }
.founder-patent { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--tint); }
.founder-pn { color: var(--accent); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.founder-patent strong { display: block; color: var(--text); font-size: 0.9rem; line-height: 1.3; }
.founder-patent span span { color: var(--text-2); font-size: 0.82rem; line-height: 1.4; }

/* who it's for: one compute layer, weighted differently for each buyer */
.matrix table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.matrix th, .matrix td { padding: 13px 10px; border-block-end: 1px solid var(--line); text-align: center; vertical-align: middle; }
.matrix thead th { color: var(--text); font-size: 0.84rem; font-weight: 800; line-height: 1.3; vertical-align: bottom; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-block-end: 0; }
.matrix-note { display: block; margin-block-start: 3px; color: var(--warm); font-size: 0.72rem; font-weight: 700; }
.matrix tbody th { padding-inline-start: 16px; text-align: start; }
.matrix tbody th a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; text-decoration: none; }
.matrix tbody th a:hover .who-name { color: var(--accent-text); text-decoration: underline; }
.matrix tbody tr { transition: background-color 0.2s ease; }
.matrix tbody tr:hover { background: var(--bg); }
.lvl { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--accent); vertical-align: middle; flex: none; }
.lvl-core { background: var(--accent); }
.lvl-core::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: translateY(-1px) rotate(-45deg); }
.lvl-support::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lvl-none { border-color: var(--text-3); opacity: 0.6; }
.lvl-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block-start: 14px; color: var(--text-2); font-size: 0.88rem; }
.matrix-legend li { display: inline-flex; align-items: center; gap: 8px; }
.matrix-legend .lvl { width: 18px; height: 18px; }
.matrix-legend .lvl-core::after { width: 7px; height: 4px; }
.matrix-legend .lvl-support::after { width: 5px; height: 5px; }
.matrix .fine { margin-block-start: 8px; }

/* debugging: the one trade-off, said plainly */
.debug-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.card.debug-what h3 { margin-block: 0 12px; font-size: 1.35rem; }
.debug-what p + p { margin-block-start: 12px; }
.debug-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-block-end: 1px solid var(--line); }
.debug-steps li:first-child { border-block-start: 1px solid var(--line); }
.debug-steps strong { display: block; margin-block-end: 2px; color: var(--text); }
.debug-steps li span span { color: var(--text-2); font-size: 0.95rem; }
.debug-close { display: flex; align-items: center; gap: 12px; margin-block-start: 26px; padding: 16px 22px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--on-ink); font-weight: 700; }
.debug-close .i { width: 20px; height: 20px; color: #7ccf9f; flex: none; }

/* latency: from one customer's storage in Virginia, in three tiers */
.dist { margin: 22px 0 0; }
.dist-h { display: grid; gap: 4px; margin-block-end: 16px; }
.dist-h strong { color: var(--text); font-size: 1.1rem; }
.dist-h span { color: var(--text-2); font-size: 0.92rem; }
.dist-list { display: grid; gap: 9px; }
.dist-list li { display: grid; grid-template-columns: 116px minmax(0, 1fr) 70px; align-items: center; gap: 12px; font-size: 0.9rem; }
.dist-place { color: var(--text); font-weight: 700; }
.dist-bar { height: 10px; border-radius: 999px; background: var(--band); overflow: hidden; }
.dist-bar span { display: block; width: calc(var(--ms) * 100% / 240); height: 100%; border-radius: inherit; background: var(--good); transform-origin: left; transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.dist-list .lvl-2 .dist-bar span { background: var(--warm); }
.dist-list .lvl-3 .dist-bar span { background: var(--bad); }
.reveal-ready .dist:not(.in) .dist-bar span { transform: scaleX(0); }
.dist-ms { color: var(--text); font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.dist-tiers { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--line); color: var(--text-2); font-size: 0.88rem; }
.dist-tiers li { display: inline-flex; align-items: center; gap: 8px; }
.dist-tiers strong { color: var(--text); }

@media (max-width: 960px) {
  .debug-grid { grid-template-columns: minmax(0, 1fr); }
  .card.founder { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 760px) {
  .matrix table, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix thead { display: none; }
  .matrix table { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .matrix tbody tr { margin-block-end: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
  .matrix tbody th { padding: 0 0 8px; border: 0; }
  .matrix td { display: flex; align-items: center; gap: 10px; padding: 5px 0; border: 0; text-align: start; font-size: 0.9rem; }
  .matrix td::before { content: attr(data-label); flex: 1; color: var(--text); font-weight: 600; }
  .matrix td .lvl { width: 20px; height: 20px; }
  .matrix td .lvl-t { position: static; width: 6.5em; height: auto; overflow: visible; clip: auto; color: var(--text-2); font-size: 0.8rem; }
}
@media (max-width: 640px) {
  .breach { align-items: flex-start; }
  .dist-list li { grid-template-columns: 96px minmax(0, 1fr) 58px; gap: 8px; font-size: 0.84rem; }
  .debug-close { border-radius: 16px; align-items: flex-start; }
  .quote-answer { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .dist:not(.in) .dist-bar span { transform: none; }
  .reveal-ready .fleet .fleet-list li { opacity: 1; transform: none; }
}

/* ── one thing at a time: the story page, How it works' jump menu, and each vertical's scenario ─────── */

/* home: the founder line leads to the story */
.mission-team { flex-wrap: wrap; justify-content: center; }
.mission-team .text-link { margin-inline-start: 6px; }

/* the story's first screen: the phone where it began, all nine cores busy, nothing on its disk */
.vis-phone .phone-stage { display: grid; justify-items: center; gap: 16px; padding-block: 6px; }
.phone { position: relative; width: min(230px, 70%); aspect-ratio: 9 / 17; padding: 14px 12px; border-radius: 34px; background: #1d211c; box-shadow: 0 18px 40px rgba(29, 33, 28, 0.25), inset 0 0 0 2px #3a4238; }
.phone-notch { position: absolute; top: 10px; left: 50%; width: 38%; height: 16px; margin-left: -19%; border-radius: 999px; background: #0b0e0c; }
.phone-screen { display: grid; align-content: center; gap: 12px; height: 100%; padding: 26px 14px 16px; border-radius: 24px; background: linear-gradient(170deg, #203225, #121a15); color: #e9ede7; text-align: center; }
.phone-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.phone-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.phone-specs span { padding: 3px 9px; border-radius: 999px; background: rgba(124, 207, 159, 0.16); color: #9fe0bb; font-size: 0.74rem; font-weight: 700; }
.phone-cores { display: grid; grid-template-columns: repeat(9, 1fr); align-items: end; gap: 4px; height: 70px; padding: 0 4px; }
.phone-cores i { height: 30%; border-radius: 3px; background: #5bdc8f; animation: core 1.6s ease-in-out infinite; }
.phone-cores i:nth-child(2n) { animation-delay: 0.3s; } .phone-cores i:nth-child(3n) { animation-delay: 0.6s; } .phone-cores i:nth-child(5n) { animation-delay: 0.9s; }
@keyframes core { 0%, 100% { height: 25%; } 50% { height: 95%; } }
.phone-job { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #9fe0bb; font-size: 0.82rem; font-weight: 700; }
.phone-job .i { width: 15px; height: 15px; }
.phone-zero { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--good-bg); color: var(--accent-text); font-size: 0.92rem; }
.phone-zero .i { width: 18px; height: 18px; }

/* the three steps, one at a time */
.acts .act-list { justify-content: center; flex-wrap: wrap; margin-block-end: 22px; }
/* opened from a link to one step: the header and the step buttons stay in view above it */
.acts { scroll-margin-top: 90px; }
.act-panel { scroll-margin-top: 170px; }
.act-tab { gap: 10px; padding: 10px 18px 10px 10px; }
.act-tab .act-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--accent-text); font-size: 0.82rem; font-weight: 800; }
.act-tab[aria-selected="true"] .act-n { background: var(--on-btn); color: var(--btn); }
.act-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.act-card h3 { margin-block: 16px 6px; }
.act-panel.act-2 .icon-badge { background: var(--warm-bg); color: var(--warm); }
.act-next-row { display: flex; justify-content: center; margin-block-start: 22px; }
.act-next { display: inline-flex; align-items: center; gap: 8px; }
.act-next .i { width: 18px; height: 18px; }
html:not(.js) .act-next-row { display: none; }
.act-panel .act-card { animation: panel-in 0.4s ease both; }
.act-panel .act-card:nth-child(2) { animation-delay: 0.08s; } .act-panel .act-card:nth-child(3) { animation-delay: 0.16s; }
.story-fleet .fleet { background: var(--surface); }
.story-mission { display: grid; justify-items: center; gap: 4px; max-width: 900px; margin: 28px auto 0; color: var(--text-2); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; line-height: 1.45; text-align: center; text-wrap: balance; }
.story-mission .eyebrow { margin: 0; }
.story-mission .accent { color: var(--accent-text); }

/* How it works: a menu of what is on the page */
.jump { position: sticky; top: 68px; z-index: 40; border-block: 1px solid var(--line); background: var(--header-bg); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.jump-in { display: flex; align-items: center; gap: 6px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.jump-in::-webkit-scrollbar { display: none; }
.jump-h { flex: none; margin-inline-end: 6px; color: var(--text-3); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.jump-link { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-size: 0.88rem; font-weight: 700; text-decoration: none; transition: all 0.2s ease; }
.jump-link .i { width: 16px; height: 16px; color: var(--accent); }
.jump-link:hover { border-color: var(--accent); color: var(--text); }
.jump-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#traceless, #security, #debugging, #performance, #who, #faq, #latency-more { scroll-margin-top: 130px; }

/* How it works: the short version — each answer a visitor came for in one line, a tap from its detail */
.short { padding-block: clamp(8px, 2vw, 24px) clamp(40px, 5vw, 64px); }
.short-title { margin: 0 0 16px; font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; }
.short-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.short-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.short-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.short-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.short-start { border-color: var(--accent); background: var(--tint); }
.short-text { display: grid; gap: 3px; min-width: 0; }
.short-text strong { font-size: 0.98rem; line-height: 1.3; }
.short-text span { color: var(--text-2); font-size: 0.9rem; line-height: 1.45; }
.short-text b { color: var(--text); font-weight: 800; }
.short-go { display: grid; place-items: center; width: 22px; height: 22px; margin-block-start: 7px; color: var(--accent); }
.short-go .i { width: 17px; height: 17px; transition: transform 0.2s ease; }
.short-tile:hover .short-go .i { transform: translateY(2px); }
.short-start:hover .short-go .i { transform: translateX(2px); }

/* security: on phones each list shows its first rows, and one button shows the rest (site.js folds the list) */
.more-btn { display: none; }

/* who it's for: each buyer links to its own page; on phones, one buyer at a time (site.js marks the rest is-off) */
.who-pick { display: none; }
.who-go { display: inline-grid; color: var(--accent); }
.who-go .i { width: 16px; height: 16px; transition: transform 0.2s ease; }
.matrix tbody th a:hover .who-go .i { transform: translateX(3px); }

@media (max-width: 960px) {
  .short-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .js .who-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 14px; }
  .js .matrix tbody tr.is-off { display: none; }
  .who-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
  .who-chip .i { width: 16px; height: 16px; color: var(--accent); }
  .who-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
  .who-chip[aria-pressed="true"] .i { color: var(--on-accent); }
  .who-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .matrix tbody th a { width: 100%; }
  .matrix tbody th .who-go { margin-inline-start: auto; }
}
@media (max-width: 640px) {
  .short-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .short-tile { padding: 12px 14px; }
  .card.impact, .card.step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 18px; }
  .card.impact .icon-badge, .card.step .icon-badge { grid-row: 1 / span 2; width: 40px; height: 40px; }
  .card.impact h3, .card.step h3 { margin: 0 0 3px; font-size: 1.02rem; }
  .card.impact p, .card.step p { margin: 0; font-size: 0.92rem; }
  .card.step h3 { padding-inline-end: 24px; }
  .card.step .step-n { top: 16px; inset-inline-end: 16px; }
  /* a buyer page's before/after cards: the icon beside the title */
  .outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .outcome .icon-badge { width: 40px; height: 40px; }
  .outcome h3 { margin: 0; }
  .outcome .oc-before, .outcome .oc-after, .outcome .oc-proof { grid-column: 1 / -1; }
  .js .score-list.is-folded > li:nth-child(n+4) { display: none; }
  .more-btn:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-block-start: 8px; padding: 11px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; color: var(--accent-text); font: inherit; font-size: 0.92rem; font-weight: 800; cursor: pointer; }
  .more-btn .i { width: 18px; height: 18px; transition: transform 0.2s ease; }
  .more-btn[aria-expanded="true"] .i { transform: rotate(180deg); }
  .more-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  /* load, compute, save: today's server and Omnira side by side, so the difference reads across */
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .phase { padding: 10px 12px; font-size: 0.85rem; }
  .phase strong { font-size: 0.9rem; }
}

/* a vertical's scenario: the same situation, today and with Omnira */
.scn { max-width: 980px; margin: 0 auto; padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md); }
.scn > .switch { margin-block-end: 20px; }
.scn-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.scn-outage .scn-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scn-box { position: relative; display: grid; align-content: start; gap: 10px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--bg); transition: border-color 0.4s ease, background-color 0.4s ease, opacity 0.4s ease; }
.scn-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 800; }
.scn-tag .i { width: 18px; height: 18px; color: var(--text-2); }
.scn-tag.good, .scn-tag.good .i { color: var(--accent-text); }
.scn-seal, .scn-down, .scn-up { position: absolute; top: 14px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.scn-seal, .scn-down { background: var(--bad-bg); color: var(--bad); }
.scn-up { background: var(--good-bg); color: var(--accent-text); }
.scn-seal .i, .scn-down .i, .scn-up .i { width: 14px; height: 14px; }
.scn-disk { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--line-strong); background: var(--surface); }
.scn-disk-h { display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.scn-disk-h .i { width: 15px; height: 15px; }
.scn-files, .scn-kept { display: flex; flex-wrap: wrap; gap: 6px; }
.scn-files li, .scn-kept li, .scn-lost { padding: 5px 10px; border-radius: 8px; font-size: 0.84rem; font-weight: 700; transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.scn-files li, .scn-lost { background: var(--bad-bg); color: var(--bad); }
.scn-kept li { display: inline-flex; align-items: center; gap: 6px; background: var(--good-bg); color: var(--accent-text); }
.scn-kept li .i { width: 13px; height: 13px; }
.scn-zero { color: var(--accent-text); font-weight: 800; }
.scn-job { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 6px 12px; border-radius: 10px; background: var(--btn); color: var(--on-btn); font-size: 0.86rem; font-weight: 800; transition: opacity 0.4s ease, transform 0.4s ease; }
.scn-job .i { width: 16px; height: 16px; }
.scn-store-t { color: var(--text-3); font-size: 0.9rem; }
.scn-store-o { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text); font-weight: 800; }
.scn-store-o .i { width: 16px; height: 16px; }
.scn-line { display: flex; justify-content: center; margin-block-start: 18px; font-weight: 700; text-align: center; }
.scn-line span { display: inline-flex; align-items: flex-start; gap: 8px; }
.scn-line .i { width: 19px; height: 19px; margin-block-start: 2px; flex: none; }
.scn-when-today { color: var(--bad); }
.scn-when-omnira { color: var(--accent-text); }
.scn figcaption { margin-block-start: 10px; color: var(--text-3); font-size: 0.82rem; line-height: 1.5; text-align: center; }

/* today: the seized server's disk holds everything; the storage box sits empty */
.scn[data-state="today"] .scn-when-omnira, .scn[data-state="omnira"] .scn-when-today { display: none; }
.scn-seized[data-state="today"] .scn-server { border-color: var(--bad); background: var(--bad-bg); }
.scn-seized[data-state="today"] .scn-zero, .scn-seized[data-state="omnira"] .scn-files { display: none; }
.scn-seized[data-state="today"] .scn-store { opacity: 0.5; }
.scn-seized[data-state="today"] .scn-kept li { opacity: 0; transform: translateY(6px); }
.scn-seized[data-state="omnira"] .scn-store { border-color: var(--accent); background: var(--tint); box-shadow: 0 0 0 4px var(--good-bg); }
.scn-seized[data-state="omnira"] .scn-seal { background: var(--slate-bg); color: var(--slate); }

/* today: the site goes down with the data; with Omnira the job restarts elsewhere and the data never moved */
.scn-outage .scn-a { border-color: var(--bad); background: var(--bad-bg); }
.scn-outage .scn-a .scn-tag { opacity: 0.8; }
.scn-outage[data-state="today"] .scn-a .scn-zero, .scn-outage[data-state="omnira"] .scn-a .scn-lost { display: none; }
.scn-outage[data-state="today"] .scn-job-b, .scn-outage[data-state="omnira"] .scn-job-a { opacity: 0; transform: scale(0.9); }
.scn-outage[data-state="today"] .scn-job-a { background: var(--bad); color: #fff; opacity: 0.55; text-decoration: line-through; }
.scn-outage[data-state="today"] .scn-store-o, .scn-outage[data-state="omnira"] .scn-store-t { display: none; }
.scn-outage[data-state="today"] .scn-store { opacity: 0.55; }
.scn-outage[data-state="omnira"] .scn-store, .scn-outage[data-state="omnira"] .scn-b { border-color: var(--accent); background: var(--tint); box-shadow: 0 0 0 4px var(--good-bg); }
html:not(.js) .scn .scn-when-omnira { display: inline-flex; }

@media (max-width: 960px) {
  .act-cards { grid-template-columns: minmax(0, 1fr); }
  .scn-outage .scn-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scn-outage .scn-store { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .scn-stage, .scn-outage .scn-stage { grid-template-columns: minmax(0, 1fr); }
  .scn > .switch { width: 100%; }
  .scn > .switch .switch-btn { flex: 1; }
  .scn-seal, .scn-down, .scn-up { position: static; justify-self: start; }
  .act-tab { padding: 8px 14px 8px 8px; font-size: 0.86rem; }
  .jump { top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-cores i { height: 70%; }
}

/* home: the genesis of traceless compute — three steps that draw in, each opening its step of the story */
.beats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.beats::before { content: ""; position: absolute; top: 36px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--warm), var(--accent)); transform-origin: left; }
.reveal-ready .beats:not(.in)::before { transform: scaleX(0); }
.beats::before { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.beat { position: relative; }
.beat-link { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.beat-link:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.beat-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.beat-top { display: flex; align-items: center; gap: 10px; }
.beat-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 0.88rem; font-weight: 800; }
.beat-2 .beat-n { background: var(--warm); color: var(--surface); }
.beat-2 .icon-badge { background: var(--warm-bg); color: var(--warm); }
.beat-name { color: var(--text); font-size: 1.12rem; letter-spacing: -0.01em; }
.beat-body { color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }
.beat-go { display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; padding-block-start: 6px; color: var(--accent-text); font-size: 0.9rem; font-weight: 800; }
.beat-go .i { width: 16px; height: 16px; transition: transform 0.2s ease; }
.beat-link:hover .beat-go .i { transform: translateX(3px); }
.beat { transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.beat-2 { transition-delay: 0.25s; }
.beat-3 { transition-delay: 0.5s; }
.reveal-ready .beats:not(.in) .beat { opacity: 0; transform: translateY(14px); }
.genesis-close { max-width: 820px; margin: 30px auto 0; color: var(--text); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
@media (max-width: 960px) {
  .beats { grid-template-columns: minmax(0, 1fr); }
  .beats::before { top: 0; bottom: 0; left: 36px; right: auto; width: 2px; height: auto; transform-origin: top; }
  .reveal-ready .beats:not(.in)::before { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .beats:not(.in)::before { transform: none; }
  .reveal-ready .beats:not(.in) .beat { opacity: 1; transform: none; }
}

/* ── prove it yourself: one live machine, requests flowing in, nothing on its disk ─────────────────── */
.vis-proof .proof-stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 14px; padding-block: 8px 14px; }
.proof-flow { position: relative; display: grid; gap: 10px; min-height: 140px; align-content: center; padding-inline-end: 8px; }
.proof-flow span { color: var(--text-2); font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.proof-flow i { display: block; width: 100%; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent) 45%, transparent 55%); background-size: 220% 100%; animation: proof-flow 1.9s linear infinite; opacity: 0.8; }
.proof-flow i:nth-of-type(2) { animation-delay: 0.35s; } .proof-flow i:nth-of-type(3) { animation-delay: 0.7s; }
.proof-flow i:nth-of-type(4) { animation-delay: 1.05s; } .proof-flow i:nth-of-type(5) { animation-delay: 1.4s; }
@keyframes proof-flow { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.proof-box { display: grid; justify-items: center; gap: 8px; padding: 18px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); text-align: center; }
.proof-name { font-weight: 800; font-size: 0.98rem; }
.proof-served { display: grid; gap: 2px; }
.proof-served b { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-text); line-height: 1.05; }
.proof-served span { color: var(--text-2); font-size: 0.82rem; }
.proof-disk { display: inline-flex; align-items: center; gap: 8px; width: 100%; color: var(--text-3); }
.proof-disk .i { width: 18px; height: 18px; flex: none; }
.proof-disk-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--band); border: 1px solid var(--line); overflow: hidden; }
.proof-disk-bar i { display: block; width: 0; height: 100%; background: var(--good); }
.vis-proof .phone-zero { justify-self: center; }
.proof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-start: 8px; }
.proof-stats li { display: grid; align-content: start; gap: 6px; padding: 20px; }
.proof-stats .big { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--accent-text); }
.proof-stats .small { color: var(--text-2); font-size: 0.93rem; }
.proof-note { max-width: 62ch; margin: 22px auto 0; color: var(--text-2); }
.proof-check { display: flex; align-items: flex-start; gap: 12px; max-width: 62ch; margin: 22px auto 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-2); }
.proof-check .i { flex: none; width: 22px; height: 22px; margin-block-start: 1px; color: var(--accent); }
.proof-check b { color: var(--text); }
.proof-id { font-family: var(--mono); font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.proof-cta { justify-content: center; margin-block-start: 18px; }
.soon { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--warm-bg); color: var(--warm); letter-spacing: 0.12em; }
.proof-status { display: inline-block; color: var(--text-2); font-weight: 600; }
.term { max-width: 640px; margin: clamp(28px, 4vw, 40px) auto 0; }
.term-title { font-weight: 800; margin-block-end: 10px; text-align: center; }
.term-win { border-radius: var(--radius-sm); overflow: hidden; background: #161b18; box-shadow: var(--shadow-lg); border: 1px solid rgba(233, 237, 231, 0.12); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #1f2621; color: #9aa396; font-size: 0.78rem; font-family: var(--mono); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4238; }
.term-bar span { margin-inline-start: 8px; }
.term-body { margin: 0; padding: 16px 18px 18px; font-family: var(--mono); font-size: 0.88rem; line-height: 1.7; color: #e9ede7; white-space: pre-wrap; overflow-x: auto; }
.term-cmd { color: #9fe0bb; font-weight: 700; }
.term-note { color: #9aa396; }
.term figcaption { margin-block-start: 10px; color: var(--text-3); font-size: 0.86rem; text-align: center; }
@media (max-width: 980px) { .proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .vis-proof .proof-stage { grid-template-columns: minmax(0, 1fr); }
  .proof-flow { min-height: 0; }
  .proof-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .proof-flow i { animation: none; background: var(--line-strong); } }

/* ── membership: the plans and their prices (on omnira.dev the console fills this from its plan catalog, §16.7.368) ── */
.plans-fallback { margin-block-start: 8px; }
.plans-promo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; max-width: 760px;
  margin: 0 auto 22px; padding: 12px 18px; border-radius: 999px; background: var(--good-bg); color: var(--text); font-size: 0.95rem; text-align: center; }
.plans-promo b { color: var(--accent-text); }
.plans-promo a { color: var(--accent-text); font-weight: 700; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 20px 20px; }
.plan-featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan-badge { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.plan-name { font-size: 1.12rem; font-weight: 800; }
.plan-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plan-price b { font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.plan-price span { color: var(--text-2); font-size: 0.92rem; }
.plan-sub { color: var(--text-2); font-size: 0.9rem; margin-block-start: -4px; }
.plan-tagline { color: var(--text-2); font-size: 0.95rem; }
.plan-includes { font-weight: 700; font-size: 0.9rem; }
.plan-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.plan-list li { position: relative; padding-inline-start: 22px; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.plan-cta { margin-block-start: auto; justify-content: center; }
.plan-more { text-align: center; font-size: 0.9rem; color: var(--accent-text); font-weight: 600; }
.plans-terms { max-width: 760px; margin: 22px auto 0; text-align: center; color: var(--text-3); font-size: 0.86rem; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plans { grid-template-columns: minmax(0, 1fr); } .plans-promo { border-radius: var(--radius-sm); } }

/* §16.7.381 · See it for yourself: the landing's live machine, one request, the search for it */
.see-it-panel { max-width: 900px; margin: 0 auto; padding: clamp(18px, 3vw, 28px); gap: 18px; }
.see-it-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 0.9rem; color: var(--text-3); }
.see-it-live { display: inline-flex; align-items: center; gap: 8px; color: var(--good); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.see-it-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); animation: see-it-pulse 2s ease-out infinite; }
@keyframes see-it-pulse { 0% { box-shadow: 0 0 0 0 var(--good-bg); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.see-it-watch { display: inline-flex; align-items: center; gap: 6px; }
.see-it-watch .i { width: 16px; height: 16px; color: var(--accent); }
.see-it-asof { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.see-it-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.see-it-stats, .see-it-disk ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.see-it-stats li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; }
.see-it-stats b, .see-it-disk b { font-size: 1.3rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.see-it-stats li > span:last-child { color: var(--text-2); }
.see-it-disk { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.see-it-disk h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.see-it-disk h3 .i { width: 18px; height: 18px; color: var(--accent); }
.see-it-disk li { color: var(--text-2); }
.see-it-disk small { display: block; color: var(--text-3); font-size: 0.82rem; }
.see-it-go { align-self: center; position: relative; min-width: min(100%, 22rem); justify-content: center; }
.see-it-go[disabled] { opacity: 0.85; cursor: progress; transform: none; box-shadow: none; }
.see-it-spin { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: see-it-turn 0.8s linear infinite; }
.see-it-go.running .see-it-spin { display: inline-block; }
.see-it-go.running > .i { display: none; }
.see-it-go [data-see-it-label] { font-variant-numeric: tabular-nums; }
@keyframes see-it-turn { to { transform: rotate(360deg); } }
.see-it-msg { margin: 0; color: var(--warm); text-align: center; }
.see-it-run { display: grid; gap: 16px; padding: 18px 0 2px; border-top: 1px solid var(--line); }
.see-it-whose { margin: 0; color: var(--text-2); font-size: 0.92rem; text-align: center; }
.see-it-whose code { padding: 2px 8px; border-radius: 6px; background: var(--tint); color: var(--text-2); font-family: var(--mono); font-size: 0.85rem; overflow-wrap: anywhere; }
.see-it-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.see-it-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; color: var(--text-3); text-align: center; font-size: 0.92rem; }
.see-it-steps li + li::before { content: ""; position: absolute; top: 21px; right: calc(50% + 28px); width: calc(100% - 46px); height: 2px; background: var(--line); }
.see-it-steps li.done + li::before, .see-it-steps li.done + li.done::before { background: var(--good); }
.see-it-step-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface, var(--bg)); }
.see-it-step-icon .i { width: 20px; height: 20px; grid-area: 1 / 1; }
.see-it-step-icon .i:last-child { display: none; }
.see-it-steps li.now { color: var(--text); font-weight: 600; }
.see-it-steps li.now .see-it-step-icon { border-color: var(--accent); color: var(--accent-text); animation: see-it-pulse 1.4s ease-out infinite; }
.see-it-steps li.done { color: var(--text); }
.see-it-steps li.done .see-it-step-icon { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.see-it-steps li.done .see-it-step-icon .i:first-child { display: none; }
.see-it-steps li.done .see-it-step-icon .i:last-child { display: block; }
.see-it-steps li.stopped .see-it-step-icon { border-color: var(--bad); color: var(--bad); }
.see-it-step-time { min-height: 1.2em; color: var(--accent-text); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.see-it-result { display: grid; justify-items: center; gap: 8px; text-align: center; }
.see-it-result p { margin: 0; }
.see-it-zero { display: inline-flex; align-items: baseline; gap: 10px; }
.see-it-zero b { color: var(--good); font-size: clamp(3rem, 8vw, 4.2rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.see-it-zero span { color: var(--text-2); font-size: 1.05rem; }
.see-it-result .see-it-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-weight: 700; letter-spacing: 0.02em; }
.see-it-badge .i { width: 18px; height: 18px; }
.see-it-searched { color: var(--text-3); font-size: 0.9rem; }
.see-it-panel .see-it-grid { padding-top: 16px; border-top: 1px solid var(--line); }
.see-it-offline { max-width: 62ch; margin-inline: auto; color: var(--text-2); }
.see-it-next { margin-top: 30px; }
.see-it-next-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.see-it-next .cta-row { margin-block-start: 14px; }
@media (max-width: 720px) { .see-it-grid { grid-template-columns: minmax(0, 1fr); } .see-it-asof { margin-inline-start: 0; } .see-it-steps li { font-size: 0.82rem; } .see-it-step-icon { width: 38px; height: 38px; } .see-it-steps li + li::before { top: 18px; right: calc(50% + 24px); width: calc(100% - 40px); } }
@media (prefers-reduced-motion: reduce) { .see-it-dot, .see-it-steps li.now .see-it-step-icon, .see-it-spin { animation: none; } }
.see-it-note { margin: 10px 0 0; color: var(--text-3); font-size: 0.82rem; }
.see-it-files li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.see-it-file { color: var(--text); font-family: var(--mono); font-size: 0.92rem; overflow-wrap: anywhere; }
.see-it-size { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The home page, problem first (founder 2026-10-03: "give the problem we are solving right there"): the hero's copy
   centred above where your data ends up, traditional vs traceless; the deck's pictures sit in white cards so their
   white corners never show, in either theme. */
.hero[data-problem] .hero-copy { max-width: 52rem; margin-inline: auto; text-align: center; }
.hero[data-problem] h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.06; }
.hero[data-problem] .lede { max-width: 44rem; margin-inline: auto; }
.hero[data-problem] .cta-row, .hero[data-problem] .reassure { justify-content: center; }
.problem-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 1.6vw, 20px); max-width: 1180px; margin: clamp(30px, 4.5vw, 54px) auto 0; }
.problem-vs { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--text-3); font-weight: 700; }
.problem-img { display: block; width: 100%; height: auto; }
.figure-img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: #fff; }
.figure-card { max-width: 1080px; margin: clamp(20px, 3vw, 34px) auto 0; padding: clamp(8px, 1.4vw, 16px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.figure-card .figure-img { border-radius: calc(var(--radius) - 6px); }
.figure-link { display: block; border-radius: calc(var(--radius) - 6px); }
.figure-source { margin: 10px 6px 2px; color: #4b5563; font-size: 0.8rem; line-height: 1.45; }
.start-note { margin: 10px 0 0; color: var(--text-3); font-size: 0.92rem; }
.speed-list { display: none; margin: 4px 0 0; padding: 0; list-style: none; }
.speed-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #e5e7eb; color: #1f2937; }
.speed-what { display: grid; } .speed-what small { color: #6b7280; }
.speed-time { font-weight: 700; color: #2f7d4f; font-variant-numeric: tabular-nums; }
.speed-blink { border-bottom: 0 !important; } .speed-blink .speed-time { color: #111827; }
@media (max-width: 760px) {
  .speed-img { display: none; }
  .speed-list { display: grid; }
  .problem-pair { grid-template-columns: minmax(0, 1fr); }
  .problem-vs { justify-self: center; }
}
.problem-evidence { max-width: 46rem; margin: clamp(18px, 2.4vw, 26px) auto 0; text-align: center; }
.problem-evidence .breach { justify-content: center; }

/* The front: Traceless Compute (founder 2026-10-04 — his investor teaser's pages 1–5, simplified): what it is, how things
   change with Omnira, three ways to use it. The hero is text first; the pictures moved to "How things change". */
.hero[data-problem] h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; }
.hero[data-problem] .lede.hero-tagline { margin-block-start: 18px; color: var(--text); font-weight: 750; font-size: clamp(1.25rem, 2.1vw, 1.65rem); letter-spacing: -0.01em; }
.hero-lines { display: grid; gap: 8px; max-width: 40rem; margin: 18px auto 0; color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.hero-lines b { color: var(--text); font-weight: 800; }
.hero[data-problem] .cta-row { margin-block-start: 26px; }
.hero-footnote { max-width: 44rem; margin: 14px auto 0; color: var(--text-3); font-size: 0.78rem; line-height: 1.5; }
.change-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.change-step .icon-badge { margin-block-start: 12px; }
.change-tag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--good-bg); color: var(--accent-text); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.change-step.tone-bad .change-tag, .change-step.tone-bad .icon-badge { background: var(--bad-bg); color: var(--bad); }
.ways-band { margin-block-start: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ways-band-label { margin: 0; padding: 16px 18px 0; text-align: center; color: var(--accent-text); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.ways-band .stats-in { padding-inline: 14px; }
.ways-note { max-width: 52rem; margin: 12px auto 0; text-align: center; color: var(--text-3); font-size: 0.82rem; line-height: 1.5; }
.hero[data-problem] .lede.hero-tagline { line-height: 1.3; }
@media (max-width: 900px) { .change-steps { grid-template-columns: minmax(0, 1fr); } }
/* on a phone each card is a row a thumb can scan: the icon beside its title, the words under them */
@media (max-width: 760px) {
  .change-step, .ways .way { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 16px 18px; }
  .change-step .change-tag { grid-column: 1 / -1; justify-self: start; margin-block-end: 10px; }
  .change-step .icon-badge, .ways .way .icon-badge { width: 40px; height: 40px; margin: 0; }
  .change-step h3, .ways .way h3 { margin: 0; }
  .change-step p, .ways .way p { grid-column: 1 / -1; margin-block-start: 8px; }
}

/* Time to value on a phone (founder 2026-10-03: "build the website to making the value of user's time … information
   they care about with ease"): nothing is removed, the long card stacks become rows a thumb can scan. */
@media (max-width: 760px) {
  /* who it is for: icon · name · the question · an arrow — the number waits on its own page */
  .door-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .door { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name go" "icon q go"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-radius: 12px; }
  .door-top { display: contents; }
  .door-top .icon-badge { grid-area: icon; }
  .door-name { grid-area: name; font-size: 0.95rem; }
  .door-q { grid-area: q; font-size: 0.88rem; font-weight: 500; color: var(--text-2); }
  .door-n, .door-l { display: none; }
  .door-go { grid-area: go; margin: 0; padding: 0; font-size: 0; }
  .door-go .i { width: 18px; height: 18px; }
  .stats-why { margin-block-start: 22px; padding-block-start: 18px; gap: 10px; }
  .stats-why-list li { font-size: 0.88rem; line-height: 1.45; }
  /* live demos: two columns */
  .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .demo { padding: 14px; }
  .demo .icon-badge { width: 34px; height: 34px; }
  .demo-t { margin-block-start: 8px; font-size: 0.98rem; }
  .demo-d { font-size: 0.86rem; line-height: 1.4; }
  .demo-open { padding-block-start: 8px; font-size: 0.82rem; }
  /* the plans: a row to swipe, the next plan peeking in so it is plain there is more — every plan and line kept */
  .plans { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 14px 4px 10px; margin-inline: -4px; scrollbar-width: thin; }
  .plan { scroll-snap-align: start; }
  /* the definition's three cards: tighter */
  .define-pillar { padding: 16px 18px; }
}