/* ==========================================================================
   OperBot — operbot.ai
   Hand-authored. No build step, no CDN, no framework.

   Design language: a technical document on paper. The page is warm off-white,
   the sheet a work instruction is printed on, with hairline rules where a
   softer design would use shadows, square corners, and a faint drafting grid
   behind the hero and the stakes. The product's own screens are dark, so
   every product window sits on the sheet as an ink plate: the app is the one
   dark object on the page and the eye goes straight to it. Barlow (DIN 1451
   lineage) sets the display type like industrial signage; JetBrains Mono
   carries every label, eyebrow, and data cell. Amber stays the accent: full
   strength on fills, burnt on text so it holds contrast against paper.
   ========================================================================== */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/barlow-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/barlow-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/jetbrainsmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  /* ground — the sheet, a raised band, a deeper band, the panel mat */
  --g0: #f5f3ee;
  --g1: #edeae3;
  --g2: #e4e0d7;
  --g3: #d9d4c9;
  --gd: #ebe7de;

  /* text */
  --tx: #14161a;
  --body: #3b414a;
  --mut: #5f6773;
  --fnt: #7c8391;

  /* hairlines — the whole separation system */
  --ln: rgba(20, 22, 26, 0.1);
  --ln2: rgba(20, 22, 26, 0.18);

  /* the ink plates: product windows keep the app's own dark ground whatever
     the page does, so their chrome has its own tokens */
  --ink0: #0a0b0d;
  --ink1: #131519;
  --ink2: #1b1e24;
  --ink-fnt: #8a919c;
  --ink-ln: rgba(20, 22, 26, 0.28); /* a plate's edge against the sheet */

  /* brand — amber at full strength on fills, burnt for type on paper */
  --amb: #f2a144;
  --amb2: #e8913a;
  --amb-t: #b25e0b;
  --amb-ink: #1a1104; /* text on amber fills */
  --grn: #1f8f5f;

  /* type */
  --disp: "Barlow", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* geometry — square, technical */
  --wrap: 1200px;
  --gut: 32px;
  --r-sm: 2px;
  --r: 4px;
  --r-lg: 6px;

  /* elevation — one soft lift for product windows, nothing else */
  --shd: 0 24px 64px -32px rgba(20, 22, 26, 0.35);

  /* the drafting grid — ink hairlines on the sheet */
  --grid: rgba(20, 22, 26, 0.07);
  /* the nav sits in flow above the hero; its height is a token */
  --nav-h: 68px;

  --e: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--g0);
  color: var(--body);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

::selection { background: rgba(242, 161, 68, 0.4); color: var(--tx); }

:focus-visible { outline: 2px solid var(--amb-t); outline-offset: 3px; border-radius: var(--r-sm); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--amb); color: var(--amb-ink); border-radius: 0;
  font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* Grid children default to min-width:auto, so any item whose min-content is
   wider than its track pushes the whole page wide. Reset it everywhere. */
.hero__in > *, .split > *, .frow > *,
.grid > *, .pipe > * { min-width: 0; }
.tablewrap { min-width: 0; }

.sec { padding-block: 104px; position: relative; border-top: 1px solid var(--ln); }
.sec--tint { background: var(--g1); }

/* the deeper band — audit + security sit a shade below the sheet */
.sec--dark {
  position: relative;
  background: var(--gd);
  color: var(--body);
  overflow: hidden;
}
.sec--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 420px at 82% -10%, rgba(242, 161, 68, 0.16), transparent 66%);
}
.sec--dark > .wrap { position: relative; z-index: 1; }

/* ---------- type ---------- */
h1, .h1 {
  font-family: var(--disp);
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--tx);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--disp);
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--tx);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tx);
}

.lead { margin-top: 18px; font-size: 17.5px; line-height: 1.58; color: var(--mut); max-width: 620px; }
.dim { color: var(--fnt); }

/* the section eyebrow — a mono callout with an amber tick, like a drawing
   title block naming the sheet */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--amb-t);
  margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--amb-t); flex: none; }
.hd--center .eyebrow { justify-content: center; }
.hd--center .eyebrow::before { display: none; }

.hd { max-width: 680px; margin-bottom: 52px; }
.hd--center { margin-inline: auto; text-align: center; }
.hd--center .lead { margin-inline: auto; }

/* headline left, supporting line right — fills a wide band instead of
   leaving the right half dead under a narrow column */
.hd--split {
  max-width: none; display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 22px 72px; align-items: end; margin-bottom: 58px;
}
.hd--split > * { min-width: 0; }
.hd--split h2 { max-width: 17ch; }
.hd--split .lead { margin-top: 0; max-width: 50ch; padding-bottom: 6px; }
.hd--split .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding-inline: 24px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .16s var(--e), border-color .16s var(--e), color .16s var(--e), transform .16s var(--e);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--amber { background: var(--amb); color: var(--amb-ink); }
.btn--amber:hover { background: var(--amb2); }

.btn--ghost { background: transparent; color: var(--tx); border: 1px solid var(--ln2); }
.btn--ghost:hover { border-color: var(--amb-t); color: var(--amb-t); }

.btn--onDark { background: rgba(20, 22, 26, 0.04); color: var(--tx); border: 1px solid var(--ln2); }
.btn--onDark:hover { background: rgba(20, 22, 26, 0.09); }

/* on the amber CTA slab */
.btn--ink { background: var(--tx); color: var(--g0); }
.btn--ink:hover { background: #2a2e36; }
.btn--onAmber { background: transparent; color: var(--amb-ink); border: 1px solid rgba(26, 17, 4, 0.4); }
.btn--onAmber:hover { border-color: var(--amb-ink); }

.btn--sm { height: 38px; padding-inline: 16px; font-size: 11.5px; }

/* ---------- nav ---------- */
/* Transparent over the hero photo so the plate runs to the top of the viewport —
   a solid bar here caps the image and reads as a strip bolted above it. The ink
   panel fades in on scroll (app.js toggles .is-stuck past 8px), where the nav is
   over ordinary sections and needs the ground back. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--g0);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--e);
}
.nav.is-stuck { border-bottom-color: var(--ln); }
/* The bar runs edge to edge even though the page content is capped at --wrap:
   a nav inset to the content column leaves the brand floating ~190px in on a
   wide screen and reads as a mistake. Gutter scales so it stays proportional. */
.nav__in {
  display: flex; align-items: center; gap: 32px; height: var(--nav-h);
  max-width: none; padding-inline: clamp(20px, 2.6vw, 44px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.02em; color: var(--tx); flex: none; }
.brand img { width: 27px; height: 27px; }
/* One tone, one weight. The two-tone split ("Oper" light / "Bot" amber) read as a
   consumer logotype and invited a comparison nobody wants on a defense-adjacent
   pitch. Amber stays the accent everywhere else — buttons, rules, data cells —
   but it does not appear inside the name. Anduril and Dirac both set their
   logotype monochrome for the same reason. The <b>/<span> split is left in the
   markup so a future brand pass can reintroduce a distinction if it earns one. */
.brand__wm b, .brand__wm > span { font-weight: 700; color: var(--tx); }

.nav__links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav__links a {
  padding: 8px 13px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut);
  transition: color .15s var(--e);
}
.nav__links a:hover { color: var(--tx); }
.nav__cta { flex: none; }

.nav__toggle {
  display: none; margin-left: auto; width: 40px; height: 40px;
  align-items: center; justify-content: center; border: 1px solid var(--ln2); border-radius: var(--r-sm);
}
.nav__toggle svg { width: 18px; height: 18px; }

.nav__panel { display: none; border-top: 1px solid var(--ln); background: var(--g0); padding: 12px clamp(20px, 2.6vw, 44px) 20px; }
.nav__panel.is-open { display: block; }
.nav__panel a:not(.btn) {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--ln);
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--body);
}
.nav__panel .btn { width: 100%; margin-top: 16px; }

/* ---------- hero ---------- */
/* The one dark band on the sheet: a full-bleed shop-floor plate, graded to
   the ink palette on export and scrimmed here so the type carries over the
   bright steel. It ends on a hard edge against the sheet, the way a plate
   is pasted onto a drawing; a fade into paper read as fog. The type is set
   explicitly light: the page tokens are ink now. Photo credit: img/CREDITS.md. */
.hero {
  position: relative; overflow: hidden; text-align: center;
  /* the nav is solid and sits in normal flow, so nav + hero together fill
     exactly one screen. svh rather than vh: on mobile vh measures the viewport
     with the browser chrome retracted, which overshoots by the toolbar height. */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px 0;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; display: block; }
/* Three passes: darken behind the headline, floor-to-ceiling scrim that lands
   on the exact page ground so the partner strip's top rule reads clean, then
   the amber floor glow the rest of the page uses. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* vignette so the out-of-focus workpiece at the edge of frame recedes */
    radial-gradient(125% 130% at 50% 45%, transparent 42%, rgba(10, 11, 13, 0.5) 100%),
    /* deliberately light: legibility is carried by the type's own shadow, so the
       photograph stays a photograph instead of a texture behind a wash */
    linear-gradient(to bottom, rgba(10, 11, 13, 0.4) 0%, rgba(10, 11, 13, 0.22) 40%, rgba(10, 11, 13, 0.8) 100%),
    radial-gradient(900px 380px at 50% 106%, rgba(242, 161, 68, 0.13), transparent 70%);
}
.hero__in { position: relative; z-index: 2; width: 100%; max-width: 1100px; }
/* One statement, not a stacked eyebrow/headline/lead. The mechanics in the
   middle drop to body colour so the claim at each end carries the weight. */
.hero__stmt {
  margin-inline: auto; max-width: 1000px;
  /* uppercase like every other heading. Barlow is DIN-derived: it reads
     industrial in caps and generic in lowercase. That only works because the
     copy is short — the earlier thirty-word version was a wall at this size. */
  font-size: clamp(26px, 3.6vw, 54px); line-height: 1.06; letter-spacing: -0.01em;
  text-wrap: balance; color: #f4f5f7;
  text-shadow: 0 1px 2px rgba(10, 11, 13, 0.55), 0 4px 30px rgba(10, 11, 13, 0.85);
}
.hero__stmt span { color: #b6bcc6; }
.hero__cta { margin-top: 38px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- unlisted walkthrough page (/demo) ---------- */
.demo { padding-top: 40px; }
.demo__shot { max-width: 1100px; margin-inline: auto; }

/* ---------- legal pages ---------- */
.legal { padding-block: 8px 96px; }
.legal__meta { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fnt); margin-top: 14px; }
.legal__in { max-width: 68ch; }
.legal__in h2 { font-size: 20px; margin-top: 44px; }
.legal__in p { color: var(--body); margin-top: 14px; line-height: 1.7; }
.legal__in .lead { margin-top: 0; }

/* ---------- sub-page header ---------- */
/* Product and Audit & security open on type, not a photograph: the plate is the
   home page's one big gesture and repeating it would spend it. */
.pagehead { padding-block: 92px 4px; text-align: left; }
/* the 6px margin-top here sat the h1 under an eyebrow; the page-head eyebrows
   were cut 2026-08-28 as nav-label restatements, so the h1 leads on its own */
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { max-width: 60ch; margin-top: 20px; }
@media (max-width: 860px) { .pagehead { padding-block: 64px 4px; } }

/* ---------- partner strip: programs & memberships ---------- */
/* Two names, so the strip is composed rather than scrolled: a centred amber
   eyebrow over a single row, with a hairline standing between the marks. Bigger
   logos and real vertical room — at 22px of padding it read as a toolbar. */
.partners { position: relative; border-block: 1px solid var(--ln); background: var(--g1); }
.partners::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 150px at 50% 0%, rgba(242, 161, 68, 0.12), transparent 70%);
}
.partners__in {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding-block: 46px 50px; text-align: center;
}
.partners__k {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--amb-t);
}
.partners__row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(36px, 7vw, 84px); flex-wrap: wrap;
}
/* the rule reads as a divider between two marks, not as a border on either */
.partners__row .pitem + .pitem::before {
  content: ""; position: absolute; left: calc(clamp(36px, 7vw, 84px) / -2);
  top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background: var(--ln2);
}
.pitem { position: relative; display: inline-flex; align-items: center; gap: 16px; flex: none; }
.pitem img { height: 44px; width: auto; }
.pitem img.pmark { height: 38px; }
.pname {
  font-family: var(--disp); font-size: 20px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx);
}
@media (max-width: 560px) {
  .partners__row .pitem + .pitem::before { display: none; }
}

/* ---------- the "live" chip on product window bars ---------- */
.spot__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding-inline: 10px;
  border-radius: var(--r-sm); background: rgba(242, 161, 68, 0.1); border: 1px solid rgba(242, 161, 68, 0.28);
  color: var(--amb); font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.spot__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--amb); animation: pulse 2.2s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 161, 68, 0.35); }
  55% { box-shadow: 0 0 0 7px rgba(242, 161, 68, 0); }
}

/* ---------- the stakes: a plain claim beside a spec list ---------- */
/* tighter than a normal .sec — it's a bridge between the product and the
   walkthrough, so it shouldn't read as its own full-height chapter */
/* The second dark band on the sheet, and the other photograph the page
   earns: the aft end of a launch vehicle in its hangar, which is the floor
   this is for. Scrimmed heavier on the outer thirds so the two text columns
   land on the dark and the engines sit in the gutter between them. The type
   is set explicitly light. Photo credit: img/CREDITS.md. */
.stakes { position: relative; overflow: hidden; padding-block: 108px 112px; }
.stakes__bg { position: absolute; inset: 0; z-index: 0; display: block; }
.stakes__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.stakes__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10, 11, 13, 0.82) 0%, rgba(10, 11, 13, 0.3) 40%, rgba(10, 11, 13, 0.36) 60%, rgba(10, 11, 13, 0.78) 100%),
    linear-gradient(to bottom, rgba(10, 11, 13, 0.4), rgba(10, 11, 13, 0.12) 30%, rgba(10, 11, 13, 0.12) 70%, rgba(10, 11, 13, 0.45));
}
.stakes__in { position: relative; z-index: 1; }
.stakes h2, .stakes .lead, .stakes .spec { text-shadow: 0 1px 2px rgba(10, 11, 13, 0.6), 0 4px 26px rgba(10, 11, 13, 0.8); }
.stakes h2 { color: #f4f5f7; }
.stakes .lead { color: #b6bcc6; }
.stakes .eyebrow { color: var(--amb); }
.stakes .eyebrow::before { background: var(--amb); }
.stakes .spec > div { border-top-color: rgba(255, 255, 255, 0.12); }
.stakes .spec > div:last-of-type { border-bottom-color: rgba(255, 255, 255, 0.12); }
.stakes .spec dt { color: var(--amb); }
.stakes .spec dd { color: #b6bcc6; }
.stakes .spec__src { color: #8a919c; }
.stakes .spec__src a { border-bottom-color: rgba(255, 255, 255, 0.2); }
.stakes .spec__src a:hover { color: #f4f5f7; border-color: #f4f5f7; }
#how { padding-top: 76px; }
.stakes__in { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 72px; align-items: center; }
.stakes__in > * { min-width: 0; }
.spec { display: grid; }
.spec > div {
  position: relative;
  display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center;
  padding: 26px 0 26px 24px; border-top: 1px solid var(--ln);
}
.spec > div:last-of-type { border-bottom: 1px solid var(--ln); }
/* the amber tick — the intelligence marking each fact */
.spec > div::before {
  content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 2px;
  background: var(--amb);
}
.spec dt {
  font-family: var(--disp);
  font-size: clamp(32px, 3vw, 44px); font-weight: 700; letter-spacing: -0.01em;
  line-height: 1; color: var(--amb-t); font-variant-numeric: tabular-nums;
}
.spec dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mut); }
.spec__src {
  margin-top: 16px; font-family: var(--mono); font-size: 11px; line-height: 1.7;
  letter-spacing: 0.02em; color: var(--fnt);
}
.spec__src a { border-bottom: 1px solid var(--ln2); }
.spec__src a:hover { color: var(--mut); border-color: var(--mut); }

/* ---------- alternating feature rows ---------- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-block: 44px; border-top: 1px solid var(--ln); }
.frow:nth-child(even) .frow__art { order: -1; }
.frow__n {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid rgba(178, 94, 11, 0.45); border-radius: var(--r-sm); color: var(--amb-t);
  font-family: var(--mono); font-size: 12px; font-weight: 600; margin-bottom: 16px;
}
.frow h3 { font-size: 22px; letter-spacing: 0.02em; }
.frow p { margin-top: 12px; font-size: 15.5px; color: var(--mut); max-width: 440px; }
.frow__art {
  border-radius: var(--r); background: var(--g2); border: 1px solid var(--ln);
  padding: 22px; min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
}

/* ---------- generic split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.checks { margin-top: 26px; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--body); }
.checks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--amb-t); }
.checks strong { color: var(--tx); font-weight: 600; }

/* ---------- cards (only the tour strip uses a grid now) ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* square step badge — a drawing zone reference */
.gnum {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px;
  border: 1px solid rgba(178, 94, 11, 0.45); border-radius: var(--r-sm);
  color: var(--amb-t); font-family: var(--mono); font-size: 13px; font-weight: 600;
}

/* ---------- real product screens ----------
   Actual captures from the running product, framed as ink plates on the
   sheet: square corners, a dark titlebar, the app's own ground inside. The
   frame chrome uses the ink tokens, never the page's. */
.shot {
  position: relative; overflow: hidden;
  border-radius: var(--r);
  background: var(--ink0);
  border: 1px solid var(--ink-ln);
  box-shadow: var(--shd);
}
.shot img { width: 100%; height: auto; }
/* the video sits in the same window frame as a screenshot — `display:block`
   kills the inline-element baseline gap that would show the frame's dark
   background as a seam under the controls. */
.shot__video { display: block; width: 100%; height: auto; background: var(--ink0); }
.shot__bar {
  display: flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 16px;
  background: var(--ink1); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.shot__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); flex: none; }
.shot__t {
  margin-left: 10px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-fnt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot__bar .spot__live { margin-left: auto; flex: none; }

/* The product section. Two real screens side by side: the operator's Ask view
   large, the engineer's Approvals queue small at its bottom-right, like a
   picture-in-picture. The pairing is the argument -- the floor asks, a human
   signs off -- and it says it in one glance instead of two sections. On the
   sheet the two ink plates need nothing behind them but a low amber wash. */
.showcase { position: relative; padding-block: 84px 116px; overflow-x: clip; }
.showcase .shot__bar { background: var(--ink2); }
.showcase::before {
  content: ""; position: absolute; left: 50%; top: 120px; transform: translateX(-50%);
  width: min(1600px, 96vw); height: 680px; pointer-events: none;
  background: radial-gradient(58% 58% at 50% 42%, rgba(242, 161, 68, 0.14), transparent 72%);
}
.showcase .wrap { position: relative; z-index: 1; }
/* the recording is the one thing on the page that earns more than --wrap: on
   a wide monitor an 800px video reads as a thumbnail. This section alone runs
   out to 1560px; the two spacer columns stay fixed, so all the extra width
   goes to the frame. */
.showcase .wrap { max-width: 1560px; }

/* three columns, the outer two the same width, so the big frame sits dead
   centre with the small one at its bottom-right corner; both share a baseline */
.showcase__stack {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 18px; align-items: end;
  max-width: 1520px; margin-inline: auto;
}
.shot--main { grid-column: 2; }
.shot--float { grid-column: 3; }
/* the Ask window is nearly square at full height, which lands as a slab. Held
   to a cinematic band and anchored to the top, where the question and the
   answer are. */
.shot--main { margin-bottom: 0; }
.shot--main img,
.shot--main .shot__video { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
/* the loop must be pausable (WCAG 2.2.2). One quiet control in the frame's
   top-right corner, under the titlebar: clear of the Approvals float at the
   bottom-right and of the recording's own lower-third caption at the
   bottom-left. app.js unhides it once the video can play. */
.shot__pause {
  position: absolute; right: 14px; top: 56px; z-index: 2;
  height: 28px; padding: 0 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #f4f5f7; background: rgba(10, 11, 13, 0.82); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm); backdrop-filter: blur(4px);
}
.shot__pause:hover { border-color: var(--amb); color: var(--amb); }
.shot__pause[hidden] { display: none; }

/* Shadows are otherwise near-absent in this design, on purpose. The small
   frame keeps a hairline ring plus a cast shadow so it reads as a clickable
   object rather than a second flat image. */
.shot--float {
  width: 100%; margin-bottom: 0;
  box-shadow: 0 0 0 1px var(--ink-ln), 0 24px 50px -20px rgba(20, 22, 26, 0.45);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.shot--float:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--amb), 0 28px 56px -20px rgba(20, 22, 26, 0.5); }
.shot--float .shot__bar { height: 22px; padding: 0 6px; gap: 3px; }
.shot--float .shot__dot { width: 4px; height: 4px; }
.shot--float .shot__t { margin-left: 5px; font-size: 7px; letter-spacing: 0.08em; }
/* a pause control at the small frame's size is noise */
.shot--float .shot__pause { display: none; }
/* click-to-swap affordance, shown on the small frame only */
.shot__swap {
  position: absolute; right: 4px; top: 4px; z-index: 2;
  height: 14px; padding: 0 5px;
  font-family: var(--mono); font-size: 7px; font-weight: 600; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amb); background: rgba(10, 11, 13, 0.7); border: 1px solid rgba(242, 161, 68, 0.35);
  border-radius: var(--r-sm);
}
.shot--float .shot__swap::before { content: "\2197  "; }
.shot--main .shot__swap { display: none; }

@media (max-width: 940px) {
  .showcase::before { top: 90px; height: 420px; }
}
@media (max-width: 860px) {
  .showcase { padding-block: 56px 84px; }
}
/* the caption, centred under the big frame */
.showcase__cap { max-width: 640px; margin: 26px auto 0; text-align: center; }
.showcase__cap p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mut); }
.showcase__cap em { font-style: normal; color: var(--fnt); }
@media (max-width: 940px) {
  /* the small frame drops under the big one, still small, still on the right */
  .showcase__stack { grid-template-columns: 1fr; gap: 14px; }
  .shot--main, .shot--float { grid-column: auto; }
  .shot--float { width: 160px; justify-self: end; }
}

/* screenshot crops sitting on the panel mat of a feature row */
.frow__art--shot { padding: 14px; }
.frow__art--shot img {
  width: 100%; height: auto; border-radius: var(--r-sm);
  border: 1px solid var(--ink-ln);
  box-shadow: 0 14px 30px -16px rgba(20, 22, 26, 0.35);
}

/* mini windows in the tour strip */
.tourcard { margin: 0; display: flex; flex-direction: column; }
.tourcard .shot__bar { height: 36px; }
.tourcard figcaption { margin-top: 13px; padding-inline: 4px; font-size: 13.5px; line-height: 1.55; color: var(--mut); }
.tourcard figcaption b { color: var(--tx); font-weight: 600; }

/* a screen inset on the deeper audit band */
.shot--onDark {
  max-width: 1000px; margin: 60px auto 0;
  box-shadow: 0 34px 80px -30px rgba(20, 22, 26, 0.45);
}
.audit__cap { margin: 18px auto 0; max-width: 720px; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--mut); }

/* ---------- pipeline (quality audit) ---------- */
.pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pipe__s { position: relative; padding: 0 28px; }
.pipe__s:first-child { padding-left: 0; }
.pipe__s:last-child { padding-right: 0; }
.pipe__s + .pipe__s { border-left: 1px solid var(--ln); }
.pipe__s h3 { margin-top: 4px; }
.pipe__s p { margin-top: 10px; font-size: 14.5px; color: var(--mut); }

/* the security posture, folded under the audit pipeline as a plain strip */
.posture { margin-top: 64px; padding-top: 52px; border-top: 1px solid var(--ln); }
.posture__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 32px; }
.posture__g > * { min-width: 0; }
.posture__g h3 { font-size: 14.5px; }
.posture__g p { margin-top: 9px; font-size: 14px; line-height: 1.6; color: var(--mut); }

/* ---------- comparison table ---------- */
.tablewrap { border: 1px solid var(--ln); border-radius: var(--r); overflow-x: auto; background: var(--g1); }
.cmp { min-width: 800px; font-size: 14px; }
.cmp th, .cmp td { padding: 18px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ln); }
.cmp thead th {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fnt); background: var(--g2);
}
.cmp tbody th { font-weight: 550; color: var(--tx); width: 30%; }
.cmp td { color: var(--mut); font-family: var(--mono); font-size: 13px; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .us { background: rgba(242, 161, 68, 0.07); color: var(--tx); font-weight: 600; }
.cmp thead .us { background: rgba(242, 161, 68, 0.2); color: var(--amb-t); }

/* ---------- roadmap ---------- */
.rail-v { display: grid; }
.node { position: relative; padding: 0 24px 36px 30px; border-left: 1px solid var(--ln2); }
.node:last-child { padding-bottom: 0; border-left-color: transparent; }
.node::before {
  content: ""; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px;
  background: var(--g0); border: 1px solid var(--ln2); border-radius: 1px;
}
.node--now::before { background: var(--amb); border-color: var(--amb); box-shadow: 0 0 0 4px rgba(242, 161, 68, 0.16); }
.node__k { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fnt); }
.node--now .node__k { color: var(--amb-t); }
.node h3 { margin-top: 8px; }
.node p { margin-top: 8px; font-size: 14.5px; color: var(--mut); max-width: 520px; }

/* ---------- team ---------- */
/* Photo left, copy right, on the same hairline panel as every other card. The
   portrait is deliberately small: these are crops off full-body originals, so a
   large frame would only show how little resolution the face has. */
.team__g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tcard {
  display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: start;
  background: var(--g0); border: 1px solid var(--ln);
  border-radius: var(--r); padding: 22px;
}
.tcard__ph {
  width: 132px; height: 165px; object-fit: cover; display: block;
  border: 1px solid var(--ln2); border-radius: 0;
  /* the last of the lawn goes here */
  filter: grayscale(0.55) contrast(1.02);
}
.tcard__k {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amb-t);
}
.tcard h3 { margin-top: 6px; font-size: 20px; }
.tcard__b > p { margin-top: 10px; font-size: 14.5px; color: var(--mut); }
/* Facts, not prose. A founder card on a page like this is read as a credential
   check, not a personality sketch, so it is a list of things that are verifiable
   in four seconds. Mono and hairline-separated, same as every other data cell. */
.tcard__facts { margin-top: 12px; list-style: none; }
.tcard__facts li {
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--body);
  padding: 7px 0 7px 16px; border-top: 1px solid var(--ln); position: relative;
}
.tcard__facts li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 7px; height: 1px; background: var(--amb);
}
/* unsourced placeholder -- must not ship looking like a fact */
.tcard__facts .is-todo { color: var(--fnt); font-style: italic; }
.tcard__facts .is-todo::before { background: var(--fnt); }
.tcard__ln {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--body);
  border-bottom: 1px solid var(--ln2); padding-bottom: 2px;
}
.tcard__ln:hover { color: var(--amb-t); border-color: var(--amb-t); }

/* ---------- CTA ----------
   This was a solid amber slab, which worked when it held a headline and two
   buttons. A five-field form on that ground turned the closing section into a
   wall of orange and drowned the accent everywhere else on the page. It is now
   ink with a hairline, like every other panel, and amber survives as a single
   top edge plus the submit button -- one thing to look at instead of twenty. */
.ctaBox {
  position: relative; overflow: hidden; text-align: center;
  background: var(--g1); border: 1px solid var(--ln);
  border-top: 2px solid var(--amb);
  border-radius: var(--r); padding: 80px 40px; color: var(--body);
}
.ctaBox > * { position: relative; z-index: 1; }
.ctaBox h2 { color: var(--tx); max-width: 640px; margin-inline: auto; }
.ctaBox .lead { color: var(--body); margin-inline: auto; }
.ctaBox__row { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact form ---------- */
/* Fields use the page's own hairline system -- ink at low alpha on the sheet,
   square corners, mono label -- so they read as data cells rather than a web form. */
.cform { margin-top: 34px; text-align: left; max-width: 620px; margin-inline: auto; }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform__f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cform__f--wide { grid-column: 1 / -1; }
.cform__f > span {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut);
}
.cform input, .cform textarea {
  font: inherit; font-size: 15px; color: var(--tx); width: 100%;
  background: rgba(20, 22, 26, 0.03);
  border: 1px solid var(--ln2); border-radius: 0;
  padding: 11px 13px; transition: border-color .15s, background .15s;
}
.cform textarea { resize: vertical; min-height: 74px; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--fnt); }
.cform input:focus, .cform textarea:focus {
  outline: none; background: rgba(20, 22, 26, 0.06); border-color: var(--amb-t);
}
/* the field is invalid only once it has been touched and left — never on first paint */
.cform input:user-invalid, .cform textarea:user-invalid { border-color: #b4462a; }

.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__foot { margin-top: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cform__note { font-size: 13px; color: var(--mut); margin: 0; }
.cform__note a { color: var(--tx); text-decoration: underline; text-underline-offset: 2px; }
/* body links on the legal pages and page leads: the global reset strips them */
.legal__in a, .pagehead .lead a { color: var(--tx); text-decoration: underline; text-underline-offset: 2px; }

.cform__status { margin: 14px 0 0; font-size: 14px; min-height: 1em; }
.cform__status[data-state="ok"] { color: var(--grn); font-weight: 600; }
.cform__status[data-state="err"] { color: #b4462a; font-weight: 600; }
.cform.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }
/* on success the fields go away — nothing left to re-submit or second-guess */
.cform.is-sent .cform__grid, .cform.is-sent .cform__foot { display: none; }

/* ---------- footer ---------- */
.foot { padding-block: 56px; border-top: 1px solid var(--ln); }
.foot__top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.foot__links { display: flex; flex-wrap: wrap; gap: 26px; }
.foot__links a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mut);
}
.foot__links a:hover { color: var(--tx); }
.foot__bot {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--ln);
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--fnt);
  gap: 10px 28px;
}

/* ---------- scroll reveal ---------- */
.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise.is-in { animation: rise .55s var(--e) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero__in, .split, .frow, .pipe { grid-template-columns: 1fr; gap: 40px; }
  .frow:nth-child(even) .frow__art { order: 0; }
  .pipe__s { padding: 0; }
  .pipe__s + .pipe__s { border-left: 0; border-top: 1px solid var(--ln); padding-top: 28px; margin-top: 28px; }
  .partners__in { flex-direction: column; align-items: stretch; gap: 18px; }
}

@media (max-width: 860px) {
  :root { --gut: 20px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .sec { padding-block: 72px; }
  .hero { padding: 48px 0; }
  .showcase { padding-bottom: 72px; }
  .grid--3 { grid-template-columns: 1fr; }
  .team__g { grid-template-columns: 1fr; }
  .posture__g { grid-template-columns: repeat(2, 1fr); }
  .stakes__in { grid-template-columns: 1fr; }
  .hd--split { grid-template-columns: 1fr; align-items: start; }
  .hd--split h2 { max-width: none; }
  .hd { margin-bottom: 40px; }
  .ctaBox { padding: 48px 24px; }
  .cform__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .btn { width: 100%; }
  .hero__cta .btn { width: auto; flex: 1 1 auto; }
  .spec > div { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Kill the reveal outright rather than shortening it. Zeroing only the
     duration left animation-delay intact, and with fill-mode `both` the
     backwards fill held the `from` keyframe — opacity 0 — for the whole
     stagger. Every element with --i set blinked off for up to 180ms and
     snapped back. */
  .js .rise,
  .js .rise.is-in {
    animation: none !important;
    animation-delay: 0s !important;
    opacity: 1;
    transform: none;
  }
  /* the partner marquee parks as a static row */
}

@media print {
  .nav, .hero__bg, .stakes__bg, .ctaBox { display: none; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .checks strong, .cmp tbody th { color: #000; }
}

/* footer legal row sits between the copyright and the affiliation line */
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__legal a { color: var(--mut); }
.foot__legal a:hover { color: var(--tx); }