/* =====================================================================
   CODENA v2 — site stylesheet
   Soft lavender "paper" sections explain the platform; deep-indigo "stage"
   sections are where the AI speaks. No surface is pure white or pure black.
   Product visuals are built in HTML/CSS (no screenshots) so they stay sharp,
   translate with the page, and never go stale against a UI that moved on.
   ===================================================================== */

:root {
  --paper: #f5f4fb;
  --paper-2: #ecebf7;
  --card: #fcfbff;
  --card-2: #f7f6fd;
  --ink: #17162e;
  --ink-2: #4a4966;
  --ink-3: #7c7b97;
  --line: #e3e1f0;
  --line-2: #d3d0e6;

  --accent: #4f46e5;
  --accent-ink: #3b32c9;
  --accent-soft: #e9e7fd;
  --accent-soft-2: #dcd8fb;
  --live: #0f9f6e;
  --live-soft: #def4ea;
  --warn: #c27805;
  --warn-soft: #fbefd9;

  /* The stage: deep indigo, not black. */
  --stage: #1e1b4f;
  --stage-grad: linear-gradient(165deg, #1c1a4b 0%, #262168 48%, #2e2780 100%);
  --stage-card: rgba(255, 255, 255, .07);
  --stage-card-2: rgba(255, 255, 255, .11);
  --stage-line: rgba(255, 255, 255, .14);
  --stage-ink: #f1f0ff;
  --stage-ink-2: #c3c0ea;
  --stage-ink-3: #9793c9;
  --glow: #a9a3ff;
  --mint: #6ee7b7;

  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(35, 30, 90, .05), 0 10px 30px -14px rgba(35, 30, 90, .18);
  --shadow-lg: 0 2px 6px rgba(35, 30, 90, .06), 0 34px 70px -28px rgba(35, 30, 90, .36);
  --wrap: 1180px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 28px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
@media (min-width: 861px) and (max-width: 1399px) { body { padding-left: 98px; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.022em; margin: 0; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Soft colour washes so long light sections never read as flat white. */
.tint { position: relative; }
.tint::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(79, 70, 229, .07), transparent 70%),
    radial-gradient(700px 380px at 100% 100%, rgba(14, 165, 233, .06), transparent 70%);
}
.tint > * { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .7); }
.btn--primary:hover { background: var(--accent-ink); }
.btn--ghost { border-color: var(--line-2); background: var(--card); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn--light { background: #fff; color: var(--stage); }
.btn--light:hover { background: var(--accent-soft); }
.btn--line-light { border-color: var(--stage-line); color: var(--stage-ink); background: rgba(255, 255, 255, .04); }
.btn--line-light:hover { border-color: var(--stage-ink-2); }
.btn svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Eyebrows & section heads ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.section { padding: 120px 0; position: relative; }
.section--tight { padding: 88px 0; }
.section--alt { background: var(--paper-2); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; margin-top: 18px; }
.section-head h2 em { font-style: normal; color: var(--accent); }
.section-head p { margin-top: 20px; font-size: 18px; color: var(--ink-2); max-width: 640px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center p { margin-left: auto; margin-right: auto; }

/* ---------- Rail: the floating side navigation ----------
   A dark console panel over the light page: collapsed to icons, expanded on hover or keyboard focus.
   It is opaque on purpose — a translucent blur over the animated demos scrolling underneath re-blurs
   every frame, which Chrome paints as a flicker. */
.rail {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  z-index: 60; width: 68px; padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--stage-grad); color: var(--stage-ink);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px;
  box-shadow: 0 30px 70px -30px rgba(18, 14, 70, .75), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: width .28s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.rail:hover, .rail:focus-within { width: 246px; }
.rail__brand { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; text-decoration: none; }
.rail__brand .brand__mark { width: 42px; height: 42px; border-radius: 13px; }
.rail__wordmark { font: 700 19px/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.rail__nav { display: flex; flex-direction: column; gap: 4px; }
.rail__item {
  position: relative; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px;
  height: 46px; padding-right: 12px; border-radius: 14px; text-decoration: none;
  color: var(--stage-ink-2); transition: background .18s, color .18s;
}
.rail__item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.rail__item.is-active { background: rgba(169, 163, 255, .18); color: #fff; }
/* The active marker: a glowing bar on the panel's inner edge. */
.rail__item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 50%; margin-top: -11px;
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--glow); box-shadow: 0 0 14px 1px rgba(169, 163, 255, .9);
}
.rail__icon { width: 42px; height: 42px; display: grid; place-items: center; }
.rail__icon svg { width: 20px; height: 20px; }
.rail__label, .rail__num { white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .28s; }
.rail__label { font: 500 14.5px var(--font-body); }
.rail__num { font: 500 10.5px var(--font-mono); color: var(--stage-ink-3); letter-spacing: .06em; }
.rail:hover .rail__label, .rail:focus-within .rail__label,
.rail:hover .rail__num, .rail:focus-within .rail__num { opacity: 1; transform: none; }
.rail__item.is-active .rail__num { color: var(--glow); }

/* How far down the page you are, as a line on the panel's edge. */
.rail__track { position: absolute; right: 6px; top: 74px; bottom: 116px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.rail__track i { display: block; width: 100%; height: 0; border-radius: 2px; background: linear-gradient(180deg, var(--glow), var(--mint)); box-shadow: 0 0 10px rgba(169, 163, 255, .7); }

.rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rail__demo {
  display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px;
  height: 46px; padding: 0; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #6d63ff, #9d8cff); color: #fff; font: 600 14.5px var(--font-body);
  box-shadow: 0 10px 24px -12px rgba(109, 99, 255, .9);
}
.rail__demo:hover { filter: brightness(1.08); }
.rail__demo span:first-child { display: grid; place-items: center; }
.rail__demo svg { width: 19px; height: 19px; }
/* Collapsed, the switch is one icon-width wide and shows only the language you are reading —
   the other one used to be sliced in half by the panel's edge. Expanding reveals both. */
.rail .lang { align-self: start; width: 42px; overflow: hidden; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); transition: width .28s cubic-bezier(.4, 0, .2, 1); }
.rail:hover .lang, .rail:focus-within .lang { width: 78px; }
.rail .lang a { color: var(--stage-ink-3); padding: 6px 0; flex: 0 0 34px; text-align: center; opacity: 0; transition: opacity .2s; }
.rail .lang a[aria-current="true"] { order: -1; opacity: 1; }
.rail:hover .lang a, .rail:focus-within .lang a { opacity: 1; }
.rail .lang a:hover { color: #fff; }
.rail .lang a[aria-current="true"] { background: rgba(169, 163, 255, .24); color: #fff; }

/* ---------- Dock: the same navigation on phones and tablets ---------- */
.dock {
  position: fixed; top: 12px; left: 16px; right: 16px; z-index: 60;
  display: none; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  background: var(--stage-grad); color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px; box-shadow: 0 20px 44px -26px rgba(18, 14, 70, .8);
}
/* The legal pages carry the same bar, in the flow of the page rather than floating over it. */
.dock--static { display: flex; position: sticky; left: auto; right: auto; top: 12px; width: min(1180px, calc(100% - 32px)); margin: 12px auto 0; }
.dock__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 700 17px/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.dock__brand .brand__mark { width: 30px; height: 30px; border-radius: 10px; }
.dock__demo { margin-left: auto; border: 0; border-radius: 12px; padding: 9px 14px; cursor: pointer; font: 600 13.5px var(--font-body); color: #fff; background: linear-gradient(135deg, #6d63ff, #9d8cff); }
.dock__toggle { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); cursor: pointer; }
.dock__toggle span { display: block; width: 16px; height: 2px; margin: 3.5px auto; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.nav-open .dock__toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-open .dock__toggle span:nth-child(2) { opacity: 0; }
.nav-open .dock__toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; gap: 6px;
  padding: 84px 20px 28px; background: var(--stage-grad); color: var(--stage-ink);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  overflow-y: auto;
}
.nav-open .sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease; }
.nav-open { overflow: hidden; }
.sheet__item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 16px 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-decoration: none; color: #fff; font: 600 20px var(--font-display); }
.sheet__item .rail__icon { width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, .08); color: var(--glow); }
.sheet__item.is-active { color: var(--glow); }
.sheet__item .rail__num { opacity: 1; transform: none; }
.sheet__foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sheet .lang { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.sheet .lang a { color: var(--stage-ink-2); }
.sheet .lang a[aria-current="true"] { background: rgba(169, 163, 255, .24); color: #fff; }
.sheet .btn { flex: 1; justify-content: center; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--font-display); letter-spacing: -.03em; }
.brand__mark { width: 28px; height: 28px; }

/* Language switch: two links, the current one filled. */
.lang { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); }
.lang a { font: 600 12px/1 var(--font-mono); letter-spacing: .04em; padding: 6px 9px; border-radius: 999px; text-decoration: none; color: var(--ink-3); }
.lang a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.lang a:hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 104px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -260px; top: -200px; width: 1000px; height: 1000px;
  background: radial-gradient(closest-side, rgba(79, 70, 229, .16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; left: -300px; bottom: -420px; width: 900px; height: 800px;
  background: radial-gradient(closest-side, rgba(14, 165, 233, .09), transparent 70%);
  pointer-events: none;
}
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(40px, 5.8vw, 72px); line-height: 1.0; letter-spacing: -.035em; margin-top: 22px; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #4f46e5, #7c3aed 60%, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin-top: 24px; font-size: 19px; color: var(--ink-2); max-width: 540px; }
/* The programme badge under the hero's notes: NVIDIA's logo as supplied, on the white it is drawn for,
   with the programme's name under it. */
.hero__member { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 30px; padding: 12px 20px 10px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.hero__member img { display: block; height: 30px; width: auto; }
.hero__member-name { margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1a1a1a; }
.hero__actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__notes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink-3); }
.hero__notes li { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.hero__notes li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--live-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230f9f6e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Hero console: a light magic screen that asks, answers, then acts. */
.console {
  background: var(--card); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); overflow: hidden; position: relative;
}
.console__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 12px var(--font-mono); color: var(--ink-3); background: var(--card-2); }
.console__dots { display: flex; gap: 6px; margin-right: 8px; }
.console__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.console__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--live); }
.console__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(15, 159, 110, .15); }
.console__body { padding: 22px 22px 58px; display: grid; gap: 14px; background: linear-gradient(180deg, var(--card), #f4f2ff); } /* bottom: room for the status line */
.bubble { max-width: 88%; padding: 12px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.bubble--user { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bubble--ai { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink-2); box-shadow: 0 1px 0 rgba(35, 30, 90, .03); }
.bubble--ai strong { color: var(--ink); }
.caret { display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mini-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.mini-table th { text-align: left; font: 500 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table td:first-child { color: var(--ink); font-weight: 500; }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--font-mono); padding: 6px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.chip--live { color: var(--live); background: var(--live-soft); border-color: transparent; }
.chip--lock { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }

.confirm { border: 1px solid var(--accent-soft-2); background: linear-gradient(180deg, #f1efff, #f8f7ff); border-radius: 14px; padding: 14px 16px; }
.confirm__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.confirm__head svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.confirm__rows { margin: 10px 0 12px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.confirm__rows div { display: flex; justify-content: space-between; gap: 10px; }
.confirm__rows s { color: var(--ink-3); }
.confirm__rows b { color: var(--ink); font-weight: 600; }
.confirm__actions { display: flex; gap: 8px; }
.confirm__btn { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); }
.confirm__btn--go { background: var(--accent); color: #fff; border-color: var(--accent); }
.confirm__btn--go.is-pressed { background: var(--live); border-color: var(--live); }

.console [data-step] { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.console [data-step].is-on { opacity: 1; transform: none; }
.console__status { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 10px; font: 500 12px var(--font-mono); color: var(--ink-3); }
.console__status .bar { flex: 1; height: 3px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.console__status .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #7c3aed); transition: width .4s ease; }

/* Typing must not resize anything: a hidden copy of the final text (every scene's copy, where the
   text varies) holds the space, and the typed text is drawn on top of it. Reserving a fixed height
   instead would break at another width or in another language. */
.typer { position: relative; display: grid; min-width: 0; }
.typer__ghost { grid-area: 1 / 1; visibility: hidden; }
/* The typed text ends in a caret the ghost does not have: sized to the ghost alone, a sentence that
   exactly fills its line wrapped its last word BELOW the bubble once the caret arrived (white on the
   page). The ghost carries the caret's width too, so both wrap at the same place. */
.typer__ghost::after { content: ""; display: inline-block; width: 2px; margin-left: 2px; }
.typer__live { position: absolute; inset: 0; }

/* ---------- Shift (old way vs this way) ---------- */
.shift { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.shift__col { border-radius: var(--radius-lg); padding: 36px; border: 1px solid var(--line); background: var(--card); }
.shift__col--old { background: transparent; border-style: dashed; border-color: var(--line-2); }
.shift__col--new { background: var(--stage-grad); color: var(--stage-ink); border-color: transparent; box-shadow: var(--shadow-lg); }
.shift__label { font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.shift__col--new .shift__label { color: var(--glow); }
.shift__col h3 { font-size: 26px; margin-top: 12px; line-height: 1.15; }
.shift__list { margin-top: 26px; display: grid; gap: 16px; }
.shift__list li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; color: var(--ink-2); }
.shift__col--new .shift__list li { color: var(--stage-ink-2); }
.shift__list li b { color: var(--ink); font-weight: 600; display: block; }
.shift__col--new .shift__list li b { color: #fff; }
.shift__icon { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; margin-top: 2px; }
.shift__icon svg { width: 13px; height: 13px; }
.shift__col--old .shift__icon { background: var(--paper-2); color: var(--ink-3); }
.shift__col--new .shift__icon { background: rgba(169, 163, 255, .2); color: var(--glow); }

/* ---------- Steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
/* A column, so the text takes what height is left and every card's tag sits on the same line —
   with the tag simply following the text, a card with one line more pushed its tag lower. */
.step { list-style: none; padding: 32px 28px 30px; border-right: 1px solid var(--line); position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.step:last-child { border-right: 0; }
.step__num { font: 500 12px var(--font-mono); color: var(--ink-3); }
.step__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 18px 0 20px; }
.step__icon svg { width: 22px; height: 22px; }
.step h3 { font-size: 21px; }
.step p { margin-top: 10px; font-size: 15px; color: var(--ink-2); flex: 1; }
.step__tag { margin-top: 18px; display: inline-block; font: 500 11.5px var(--font-mono); color: var(--ink-3); background: var(--paper); border: 1px solid var(--line); padding: 5px 9px; border-radius: 999px; }
.step--ai .step__icon { background: var(--stage-grad); color: #fff; }

/* ---------- Platform grid ---------- */
.platform-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; margin-bottom: 56px; }
.platform-intro .section-head { margin-bottom: 0; }
.static-note { border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; font-size: 16px; color: var(--ink-2); }
.static-note b { color: var(--ink); }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; transition: border-color .2s, box-shadow .2s; }
.tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.tile--2 { grid-column: span 2; }
.tile--3 { grid-column: span 3; }
.tile--4 { grid-column: span 4; }
.tile__kicker { font: 500 11.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tile h3 { font-size: 21px; }
.tile p { font-size: 15px; color: var(--ink-2); }
.tile__visual { margin-top: auto; padding-top: 18px; }

/* mini product UIs inside tiles */
.ui { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; overflow: hidden; }
.ui__head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font: 500 11.5px var(--font-mono); color: var(--ink-3); background: var(--card-2); }
.ui__head b { color: var(--ink); font-weight: 600; font-family: var(--font-body); font-size: 12.5px; }
.ui table { width: 100%; border-collapse: collapse; }
.ui th { text-align: left; font: 500 10.5px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ui th .t { display: inline-block; margin-right: 5px; padding: 1px 4px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9.5px; text-transform: none; }
.ui td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.ui tr:last-child td { border-bottom: 0; }
/* A number column is right-aligned, header included — otherwise the values sit visibly off their label. */
.ui th.num, .ui td.num { text-align: right; }
.ui td.num { font-variant-numeric: tabular-nums; color: var(--ink); }
.ui .add-col { color: var(--accent); font-weight: 500; text-align: right; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tag--ok { background: var(--live-soft); color: var(--live); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
.tag--new { background: var(--accent-soft); color: var(--accent-ink); }

.dash { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; padding: 12px; }
.dash__metric { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dash__metric span { display: block; font-size: 11px; color: var(--ink-3); }
.dash__metric b { font: 600 20px/1.2 var(--font-display); }
.dash__chart { grid-row: span 2; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.dash__chart span { font-size: 11px; color: var(--ink-3); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: auto; padding-top: 10px; }
.bars i { flex: 1; background: var(--accent-soft-2); border-radius: 4px 4px 0 0; }
.bars i:nth-child(5), .bars i:nth-child(6) { background: var(--accent); }
.dash__kanban { grid-column: span 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dash__kanban div { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px; display: grid; gap: 5px; align-content: start; }
.dash__kanban small { font: 500 10px var(--font-mono); color: var(--ink-3); }
.dash__kanban i { height: 9px; border-radius: 3px; background: var(--paper-2); }

.flow { display: flex; align-items: center; padding: 18px 12px; overflow: hidden; }
.flow__node { flex-shrink: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.flow__node i { width: 8px; height: 8px; border-radius: 3px; background: var(--ink-3); }
.flow__node--start i { background: var(--live); }
.flow__node--gate i { background: var(--warn); transform: rotate(45deg); }
.flow__line { flex: 1; min-width: 14px; height: 1px; background: var(--line-2); position: relative; }
.flow__line::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left-color: var(--line-2); }

.form-mock { padding: 12px; display: grid; gap: 8px; }
.form-mock__steps { display: flex; gap: 6px; }
.form-mock__steps i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.form-mock__steps i.on { background: var(--accent); }
.field { display: grid; gap: 4px; }
.field span { font-size: 10.5px; color: var(--ink-3); }
.field div { background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font-size: 12px; color: var(--ink-2); }
.field--calc div { background: var(--paper-2); font-variant-numeric: tabular-nums; }

.list-mini { display: grid; gap: 7px; }
.list-mini li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.list-mini li::before { content: ""; width: 5px; height: 5px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }

.sources { display: flex; flex-wrap: wrap; gap: 6px; }
.source { font: 500 11.5px var(--font-mono); padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink-2); }

/* ---------- AI stage (deep indigo) ---------- */
.stage { background: var(--stage-grad); color: var(--stage-ink); position: relative; overflow: hidden; }
.stage::before {
  content: ""; position: absolute; left: 50%; top: -260px; width: 1200px; height: 760px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(169, 163, 255, .28), transparent 72%);
  pointer-events: none;
}
.stage::after {
  content: ""; position: absolute; right: -200px; bottom: -300px; width: 800px; height: 700px;
  background: radial-gradient(closest-side, rgba(56, 189, 248, .16), transparent 70%);
  pointer-events: none;
}
.stage > .wrap { position: relative; z-index: 1; }
.stage .eyebrow { color: var(--glow); }
.stage .section-head p { color: var(--stage-ink-2); }
.stage .section-head h2 em { color: var(--glow); }

.magic { display: grid; grid-template-columns: 300px 1fr; gap: 20px; position: relative; }
.magic__prompts { display: grid; gap: 10px; align-content: start; }
.magic__prompt {
  text-align: left; border: 1px solid var(--stage-line); background: var(--stage-card);
  border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .2s, background .2s;
  display: grid; gap: 6px; position: relative; overflow: hidden;
}
.magic__prompt:hover { border-color: rgba(255, 255, 255, .26); }
.magic__prompt.is-active { border-color: var(--glow); background: var(--stage-card-2); }
.magic__prompt small { font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stage-ink-3); }
.magic__prompt.is-active small { color: var(--glow); }
.magic__prompt span { font-size: 14.5px; color: var(--stage-ink); line-height: 1.4; }
.magic__prompt .timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--glow); }
.magic__prompt.is-active .timer.run { animation: timer var(--dwell, 9s) linear forwards; }
@keyframes timer { to { width: 100%; } }

.magic__screen { background: rgba(16, 14, 52, .45); border: 1px solid var(--stage-line); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(8, 6, 40, .7); }
.magic__ask { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--stage-line); }
.magic__ask-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, #6d63ff, #b39dff); display: grid; place-items: center; }
.magic__ask-icon svg { width: 18px; height: 18px; color: #fff; }
.magic__ask-text { font-size: 16px; color: #fff; }
/* Every scene sits in the same grid cell, so the screen is always as tall as the tallest scene and
   switching scenes never changes its height — it used to, and the whole page jumped with it. */
.magic__results { display: grid; flex: 1; }
.magic__result { grid-area: 1 / 1; padding: 22px; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.magic__result.is-on { visibility: visible; opacity: 1; transition: opacity .35s ease; }
.magic__answer { font-size: 15.5px; color: var(--stage-ink-2); max-width: 640px; }
.magic__answer strong { color: #fff; font-weight: 600; }
.magic__foot { padding: 14px 20px; border-top: 1px solid var(--stage-line); display: flex; flex-wrap: wrap; gap: 6px; min-height: 55px; align-content: center; }
.stage .chip { background: var(--stage-card-2); color: var(--stage-ink-2); border-color: var(--stage-line); }
.stage .chip--live { color: var(--mint); }
.stage .chip--lock { color: #d4d0ff; }

.card-d { background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 14px; padding: 16px; }
.card-d__title { font: 500 11.5px var(--font-mono); color: var(--stage-ink-3); text-transform: uppercase; letter-spacing: .06em; }
.result-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-top: 18px; }
.chart { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding-top: 16px; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart__pair { display: flex; gap: 4px; align-items: flex-end; width: 100%; height: 100%; justify-content: center; }
.chart__pair i { width: 42%; max-width: 26px; border-radius: 5px 5px 0 0; background: rgba(255, 255, 255, .2); transform-origin: bottom; }
.chart__pair i + i { background: linear-gradient(180deg, #c4bfff, #8b83ff); }
.magic__result.is-on .chart__pair i { animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes grow { from { transform: scaleY(0); } }
.chart__col span { font: 500 11px var(--font-mono); color: var(--stage-ink-3); }
.legend { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--stage-ink-3); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: rgba(255, 255, 255, .2); vertical-align: -1px; }
.legend i.b { background: #a9a3ff; }
.kv { display: grid; gap: 10px; margin-top: 12px; }
.kv div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--stage-ink-2); border-bottom: 1px solid var(--stage-line); padding-bottom: 9px; }
.kv div:last-child { border-bottom: 0; }
.kv b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.up { color: var(--mint) !important; }
.down { color: #ffa3bd !important; }

.stage .confirm { border-color: rgba(169, 163, 255, .4); background: linear-gradient(180deg, rgba(169, 163, 255, .16), rgba(169, 163, 255, .06)); }
.stage .confirm__head { color: #fff; }
.stage .confirm__head svg { color: var(--glow); }
.stage .confirm__rows { color: var(--stage-ink-2); }
.stage .confirm__rows b { color: #fff; }
.stage .confirm__btn { background: transparent; color: var(--stage-ink-2); border-color: var(--stage-line); }
.stage .confirm__btn--go { background: #fff; color: var(--stage); border-color: #fff; }

.hits { display: grid; gap: 10px; margin-top: 18px; }
.hit { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px; padding: 12px 14px; }
.hit__icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--stage-card-2); color: var(--glow); }
.hit__icon svg { width: 17px; height: 17px; }
.hit b { display: block; color: #fff; font-weight: 600; font-size: 14.5px; }
.hit small { color: var(--stage-ink-3); font-size: 12.5px; }
.hit mark { background: rgba(253, 224, 71, .28); color: inherit; border-radius: 3px; padding: 0 2px; }
.pill { display: inline-block; font: 500 11px/1 var(--font-mono); padding: 4px 7px; border-radius: 6px; background: var(--stage-card-2); color: var(--stage-ink-2); }

.preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.preview__group { background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px; padding: 12px; }
.preview__group h4 { font: 500 11px var(--font-mono); color: var(--stage-ink-3); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; }
.preview__group h4 b { color: var(--glow); font-weight: 500; }
.preview__group ul { margin-top: 10px; display: grid; gap: 6px; }
.preview__group li { list-style: none; font-size: 12.5px; color: var(--stage-ink); background: var(--stage-card-2); border-radius: 7px; padding: 6px 8px; }
.preview-note { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--stage-ink-2); }

/* Six tracks: the first row is two halves (document → system, understanding), the second three thirds. */
.ai-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 88px; }
.ai-grid > .ai-card { grid-column: span 2; }
.ai-grid > .ai-card--half { grid-column: span 3; }
.ai-card { background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ai-card__icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(169, 163, 255, .2); color: #d8d4ff; display: grid; place-items: center; margin-bottom: 6px; }
.ai-card__icon svg { width: 20px; height: 20px; }
.ai-card h3 { font-size: 21px; color: #fff; }
.ai-card p { font-size: 15px; color: var(--stage-ink-2); }
.ai-card__visual { margin-top: auto; padding-top: 20px; }

.doc2sys { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.doc2sys__box { background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px; padding: 14px; min-height: 124px; }
.doc2sys__box small { font: 500 10.5px var(--font-mono); color: var(--stage-ink-3); text-transform: uppercase; letter-spacing: .06em; }
.doc2sys__lines { margin-top: 10px; display: grid; gap: 5px; }
.doc2sys__lines i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.doc2sys__lines i:nth-child(2) { width: 82%; }
.doc2sys__lines i:nth-child(3) { width: 64%; }
.doc2sys__lines i:nth-child(4) { width: 90%; }
.doc2sys__lines i.h { background: rgba(169, 163, 255, .5); width: 45%; height: 6px; margin-top: 4px; }
.doc2sys__arrow { color: var(--stage-ink-3); }
.doc2sys__arrow svg { width: 20px; height: 20px; }
.doc2sys__stats { margin-top: 10px; display: grid; gap: 6px; font-size: 12.5px; color: var(--stage-ink-2); }
.doc2sys__stats b { color: #fff; font-variant-numeric: tabular-nums; }
.doc2sys__ok { margin-top: 10px; display: grid; gap: 6px; }
.doc2sys__ok span { font-size: 12px; color: var(--stage-ink); display: flex; align-items: center; gap: 7px; }
.doc2sys__ok span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }

/* Understanding graph: every edge starts and ends ON a node's edge; labels sit in pills at the
   curve's midpoint so no line runs through text. */
.graph { width: 100%; max-width: 380px; height: auto; overflow: visible; margin: 0 auto; } /* text inside scales with it */
.graph .edge { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; fill: none; }
.graph .edge--hot { stroke: var(--glow); stroke-dasharray: 4 5; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.graph .node rect { fill: #342e86; stroke: rgba(255, 255, 255, .3); }
.graph .node--hot rect { stroke: var(--glow); fill: #463ea8; }
.graph .node text { fill: #fff; font: 600 12px var(--font-body); }
.graph .elabel rect { fill: #2b256f; stroke: rgba(255, 255, 255, .18); }
.graph .elabel text { fill: var(--stage-ink-2); font: 500 9.5px var(--font-mono); }
.graph-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; font: 500 11px var(--font-mono); color: var(--stage-ink-3); }
.graph-actions span:not(:first-child) { color: #e0ddff; background: rgba(169, 163, 255, .18); border-radius: 6px; padding: 4px 7px; }

.quote-src { display: grid; gap: 8px; }
.quote-src__ans { font-size: 13.5px; line-height: 1.6; color: var(--stage-ink-2); background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px; padding: 12px 14px; }
/* A citation is an inline badge, not a <sup>: a superscript raises its line box and spaces the
   paragraph unevenly. */
.cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px; border-radius: 5px; font: 600 10px/1 var(--font-mono); background: rgba(169, 163, 255, .28); color: #fff; vertical-align: 1px; }
.modes { display: flex; gap: 6px; flex-wrap: wrap; }
.modes span { font: 500 11.5px var(--font-mono); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--stage-line); color: var(--stage-ink-3); }
.modes span.on { border-color: var(--glow); color: #fff; background: rgba(169, 163, 255, .2); }
.models { display: flex; flex-wrap: wrap; gap: 6px; }
.models span { font: 500 11.5px var(--font-mono); padding: 7px 10px; border-radius: 8px; background: var(--stage-card-2); border: 1px solid var(--stage-line); color: var(--stage-ink-2); }

/* ---------- Systems: many systems on one platform ---------- */
.stack { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 28px; box-shadow: var(--shadow); }
.stack__systems { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sys {
  display: grid; justify-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-2); text-align: center; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.sys:hover { border-color: var(--accent-soft-2); transform: translateY(-2px); }
.sys.is-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 10px 24px -14px rgba(79, 70, 229, .6); }
.sys__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.sys__icon svg { width: 21px; height: 21px; }
.sys b { font: 600 14px/1.25 var(--font-display); letter-spacing: -.01em; }
.sys small { font: 500 10.5px var(--font-mono); color: var(--ink-3); }
.c1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.c2 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.c3 { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.c4 { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.c5 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.c6 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }

/* The wires: one per system, dropping into the shared layers. */
.stack__wires { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 34px; }
.stack__wires i { justify-self: center; width: 2px; height: 100%; background: linear-gradient(180deg, var(--line-2), var(--accent-soft-2)); border-radius: 2px; position: relative; }
.stack__wires i::after { content: ""; position: absolute; left: -3px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft-2); }
.stack__wires i.is-active { background: linear-gradient(180deg, var(--accent), #8b5cf6); }
.stack__wires i.is-active::after { background: var(--accent); box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); }
.layers { display: grid; gap: 8px; }
.layer { display: grid; grid-template-columns: 30px 190px 1fr; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.layer svg { width: 18px; height: 18px; color: var(--accent); }
.layer b { font: 600 14px var(--font-display); }
.layer span { font-size: 13.5px; color: var(--ink-2); }
.layer--ai { background: var(--stage-grad); border-color: transparent; color: #fff; }
.layer--ai svg { color: var(--glow); }
.layer--ai span { color: var(--stage-ink-2); }

.sys-detail { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; }
.sys-detail__col { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; min-width: 0; }
.sys-detail__col h4 { font: 500 11.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-weight: 500; }
.sys-detail__col h4 svg { width: 14px; height: 14px; color: var(--accent); }
.entities { display: grid; }
.entity { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; padding: 9px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.entity svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.entity-link { height: 14px; margin-left: 19px; border-left: 2px dotted var(--line-2); }
.steps-v li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 12px; position: relative; padding-bottom: 16px; font-size: 14px; color: var(--ink-2); }
.steps-v li:last-child { padding-bottom: 0; }
.steps-v li::before { content: ""; width: 12px; height: 12px; margin: 5px 0 0 5px; border-radius: 50%; border: 2px solid var(--accent); background: var(--card); }
.steps-v li::after { content: ""; position: absolute; left: 10px; top: 20px; bottom: 2px; width: 2px; background: var(--accent-soft-2); }
.steps-v li:last-child::after { display: none; }
.steps-v li.gate::before { border-color: var(--warn); border-radius: 3px; transform: rotate(45deg); }
.ask-box { display: grid; gap: 10px; }
.ask-box__q { justify-self: end; background: var(--accent); color: #fff; padding: 11px 14px; border-radius: 14px 14px 4px 14px; font-size: 14px; max-width: 92%; }
.ask-box__a { background: var(--accent-soft); color: var(--ink); padding: 12px 14px; border-radius: 14px 14px 14px 4px; font-size: 14px; max-width: 96%; }
.ask-box__a small { display: block; margin-top: 8px; font: 500 11px var(--font-mono); color: var(--accent-ink); }
.sys-body { display: grid; }
.sys-body > [data-sys-panel] { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
.sys-body > [data-sys-panel].is-on { visibility: visible; opacity: 1; transition: opacity .3s ease; }
.cross { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 18px; background: var(--stage-grad); color: var(--stage-ink); }
.cross__label { font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--glow); }
.cross__q { font-size: 15.5px; color: #fff; flex: 1; min-width: 240px; }
.cross__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cross__tags span { font: 500 11px var(--font-mono); padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; }
.systems-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- Governance ---------- */
.gov { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.gov__list { display: grid; border-top: 1px solid var(--line); }
.gov__item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.gov__icon { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }
.gov__icon svg { width: 19px; height: 19px; }
.gov__item h3 { font-size: 18px; }
.gov__item p { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.trail { position: sticky; top: 100px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.trail__head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.trail__head b { font-family: var(--font-display); font-size: 16px; }
.trail__head span { font: 500 11.5px var(--font-mono); color: var(--ink-3); }
.trail__ask { padding: 16px 22px; font-size: 14.5px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.trail__ask small { display: block; font: 500 11px var(--font-mono); color: var(--accent-ink); margin-bottom: 4px; }
.trail ol { padding: 8px 22px 18px; }
.trail li { list-style: none; display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; padding: 12px 0; align-items: start; position: relative; }
.trail li::after { content: ""; position: absolute; left: 10.5px; top: 36px; bottom: -6px; width: 1px; background: var(--line); }
.trail li:last-child::after { display: none; }
.trail__dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--live-soft); color: var(--live); }
.trail__dot svg { width: 12px; height: 12px; }
.trail__dot--wait { background: var(--warn-soft); color: var(--warn); }
.trail li b { display: block; font-size: 14.5px; font-weight: 600; }
.trail li p { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.trail li time { font: 500 11px var(--font-mono); color: var(--ink-3); padding-top: 3px; }

/* ---------- Deployment ---------- */
.deploy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.deploy__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.deploy__card h3 { font-size: 20px; margin-top: 16px; }
.deploy__card p { font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.deploy__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.deploy__icon svg { width: 21px; height: 21px; }
.deploy__card--accent { background: linear-gradient(160deg, #efedff, #e4e0ff); border-color: var(--accent-soft-2); }
.deploy__card--accent .deploy__icon { background: var(--accent); color: #fff; }
.tenant-diagram { margin-top: 20px; display: grid; gap: 8px; }
.tenant-diagram__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.db { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--accent-soft-2); font: 500 11.5px var(--font-mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.db svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.db--ws { flex-direction: column; gap: 3px; padding: 9px 4px; font-size: 10.5px; text-align: center; }
.db--ws b { font: 600 13px var(--font-display); color: var(--ink); }
.db--master { grid-column: 1 / -1; justify-content: center; background: var(--accent); color: #fff; border-color: var(--accent); }
.db--master svg { color: #fff; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 600 18px/1.35 var(--font-display); letter-spacing: -.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 0 24px; color: var(--ink-2); font-size: 16px; max-width: 720px; }

/* ---------- CTA ---------- */
.cta { padding: 0 0 120px; }
.cta__box { background: var(--stage-grad); color: var(--stage-ink); border-radius: 28px; padding: 72px 56px; position: relative; overflow: hidden; text-align: center; box-shadow: var(--shadow-lg); }
.cta__box::before { content: ""; position: absolute; left: 50%; bottom: -380px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(169, 163, 255, .45), transparent 70%); }
.cta__box > * { position: relative; }
.cta__box h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.05; max-width: 780px; margin: 18px auto 0; }
.cta__box p { margin: 20px auto 0; max-width: 580px; color: var(--stage-ink-2); font-size: 18px; }
.cta__actions { margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .eyebrow { color: var(--glow); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14px; color: var(--ink-2); background: var(--paper-2); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer__tag { margin-top: 14px; max-width: 300px; color: var(--ink-3); }
.footer h4 { font: 500 11.5px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; font-weight: 500; }
.footer ul { display: grid; gap: 9px; }
.footer li { list-style: none; }
.footer a { text-decoration: none; }
.footer a:hover, .footer .linklike:hover { color: var(--ink); }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font-size: inherit; }
.footer__bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-3); font-size: 13px; }

/* ---------- Demo request modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 79, .5); }
.modal__panel { position: relative; width: 100%; max-width: 900px; max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: .85fr 1.15fr; background: var(--card); border-radius: 24px; box-shadow: 0 40px 100px -30px rgba(20, 16, 70, .6); animation: pop .25s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal__side { background: var(--stage-grad); color: var(--stage-ink); padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.modal__side h2 { font-size: 28px; line-height: 1.1; }
.modal__side p { color: var(--stage-ink-2); font-size: 15px; }
.modal__side ul { display: grid; gap: 12px; margin-top: 4px; }
.modal__side li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14.5px; color: var(--stage-ink); }
.modal__side li svg { width: 18px; height: 18px; color: var(--mint); margin-top: 2px; }
.modal__side small { margin-top: auto; font-size: 12.5px; color: var(--stage-ink-3); }
.modal__main { padding: 32px; position: relative; }
.modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.modal__close svg { width: 14px; height: 14px; }
.modal__close:hover { color: var(--ink); border-color: var(--line-2); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form[hidden] { display: none; }
.form h3 { grid-column: 1 / -1; font-size: 20px; padding-right: 40px; }
.form__field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.form__field--full { grid-column: 1 / -1; }
.form__field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.form__field label i { font-style: normal; color: var(--ink-3); font-weight: 500; }
.form__field input, .form__field select, .form__field textarea {
  width: 100%; border: 1px solid var(--line-2); background: var(--card-2); border-radius: 10px;
  padding: 10px 12px; font-size: 14.5px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.form__field textarea { resize: vertical; min-height: 84px; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.form__field.has-error input, .form__field.has-error select, .form__field.has-error textarea { border-color: #dc2656; }
.form__error { font-size: 12.5px; color: #c81e4b; }
.form__error:empty { display: none; }
.form__checks { grid-column: 1 / -1; display: grid; gap: 8px; }
.form__check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--ink-2); }
.form__check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.form__check a { color: var(--accent-ink); }
.form__check.has-error { color: #c81e4b; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.form__status { font-size: 13px; color: var(--ink-3); }
.form__status.is-error { color: #c81e4b; }
.form-done { display: grid; justify-items: start; gap: 12px; padding: 30px 0 10px; }
.form-done[hidden] { display: none; }
.form-done__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--live-soft); color: var(--live); display: grid; place-items: center; }
.form-done__icon svg { width: 26px; height: 26px; }
.form-done h3 { font-size: 22px; }
.form-done p { color: var(--ink-2); font-size: 15px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 64px var(--gutter) 96px; }
.legal__back { display: inline-block; font-size: 14px; color: var(--ink-3); text-decoration: none; margin-bottom: 28px; }
.legal__back:hover { color: var(--ink); }
.legal h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.05; }
.legal__meta { margin-top: 12px; font: 500 12.5px var(--font-mono); color: var(--ink-3); }
.legal h2 { font-size: 22px; margin: 40px 0 12px; }
.legal h3 { font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--ink-2); font-size: 16px; }
.legal p { margin: 12px 0; }
.legal ul, .legal ol { padding-left: 22px; margin: 12px 0; }
.legal ul { list-style: disc; }       /* re-declared on purpose: the reset above strips list styling */
.legal ol { list-style: decimal; }
.legal li { margin: 6px 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 12px 10px 0; vertical-align: top; }
.legal a { color: var(--accent-ink); }

/* ---------- Cookie consent ---------- */
.cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; justify-content: flex-start; pointer-events: none; }
.cc[hidden] { display: none; }
.cc__panel { pointer-events: auto; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 22px; }
.cc__title { font-size: 17px; }
.cc__text { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.cc__text a { color: var(--accent-ink); }
.cc__prefs { margin-top: 14px; display: grid; gap: 10px; }
.cc__prefs[hidden] { display: none; }
.cc__cat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.cc__cat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cc__cat-name { font-weight: 600; font-size: 14px; }
.cc__badge { font: 500 11px var(--font-mono); color: var(--ink-3); }
.cc__cat-desc { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.cc__switch { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.cc__switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc__slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background .2s; }
.cc__slider::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cc__switch input:checked + .cc__slider { background: var(--accent); }
.cc__switch input:checked + .cc__slider::after { transform: translateX(16px); }
.cc__switch input:focus-visible + .cc__slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cc__actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.cc__btn { border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.cc__btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.cc__btn[hidden] { display: none; }

/* Grid children default to min-width:auto, so a nowrap mini-table would widen its whole column on a
   phone. Let them shrink; the .ui boxes scroll sideways instead. */
.bento > *, .ai-grid > *, .deploy > *, .shift > *, .result-grid > *, .magic > *, .hero__grid > *, .sys-detail > * { min-width: 0; }
.ui { max-width: 100%; }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .console { max-width: 640px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .platform-intro { grid-template-columns: 1fr; gap: 28px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--2, .tile--3, .tile--4 { grid-column: span 1; }
  .tile--wide-md { grid-column: span 2; }
  .magic { grid-template-columns: 1fr; }
  .magic__prompts { grid-template-columns: repeat(2, 1fr); }
  .ai-grid { grid-template-columns: 1fr 1fr; }
  .ai-grid > .ai-card, .ai-grid > .ai-card--half { grid-column: span 1; }
  .ai-grid > .ai-card--half:first-child { grid-column: span 2; }
  .gov { grid-template-columns: 1fr; gap: 40px; }
  .trail { position: static; }
  .deploy { grid-template-columns: 1fr 1fr; }
  .stack__systems { grid-template-columns: repeat(3, 1fr); }
  .stack__wires { display: none; }
  .layers { margin-top: 16px; }
  .sys-detail { grid-template-columns: 1fr 1fr; }
  .sys-detail__col:last-child { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  /* The rail gives way to the dock: the same items, reachable with a thumb. */
  html { scroll-padding-top: 88px; }
  body { padding-top: 68px; }
  .rail { display: none; }
  .dock { display: flex; }
  .shift { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .preview { grid-template-columns: 1fr 1fr; }
  .doc2sys { grid-template-columns: 1fr; }
  .doc2sys__arrow { justify-self: center; transform: rotate(90deg); }
  .modal__panel { grid-template-columns: 1fr; }
  .modal__side { padding: 26px 24px; }
  .modal__side ul, .modal__side small { display: none; }
  .layer { grid-template-columns: 24px 1fr; }
  .layer span { grid-column: 2; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section { padding: 80px 0; }
  .section--tight { padding: 64px 0; }
  .hero { padding: 40px 0 72px; }
  .hero__lead { font-size: 17px; }
  .console__body { padding: 16px 16px 58px; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
  .bento, .ai-grid, .deploy { grid-template-columns: 1fr; }
  .tile--wide-md, .ai-grid > .ai-card--half:first-child { grid-column: span 1; }
  .ui { overflow-x: auto; }
  .dash { grid-template-columns: 1fr 1fr; }
  .dash__chart { grid-column: span 2; grid-row: auto; }
  .magic__prompts { grid-template-columns: 1fr; }
  .shift__col, .tile, .ai-card, .deploy__card, .sys-detail__col, .stack { padding: 20px; }
  .stack__systems { grid-template-columns: repeat(2, 1fr); }
  .sys-detail { grid-template-columns: 1fr; }
  .cta__box { padding: 52px 22px; border-radius: 22px; }
  .footer__grid { grid-template-columns: 1fr; }
  .chart { gap: 8px; }
  .form { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: end; }
  .modal__panel { max-height: 94vh; border-radius: 22px 22px 0 0; }
  .modal__main { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}