/* ===========================================================================
   Indagate site styles

   Structure:
     1. Fonts          DM Sans (text) + Manrope (logotype) + Geist Mono (data)
     2. Tokens         light ground by default; .band-dark redefines them
     3. Base           reset, type, links, focus
     4. Chrome         header, nav, footer
     5. Marketing      hero, bands, value stack, cards, contact
     6. Components     preserved console / assistant / record styling, which is
                       dark by design and therefore lives inside .band-dark

   Dark is rationed on purpose. Two sections carry it — the Oddy record and the
   live demos — so those read as the emphasis of the page rather than competing
   with everything else for attention.
   =========================================================================== */

/* --- 1. Fonts ------------------------------------------------------------ */
@font-face {
  font-family: "Manrope var";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-var-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: "Manrope var";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans var";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/dmsans-var-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: "DM Sans var";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/dmsans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono var";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/geistmono-var-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: "Geist Mono var";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/geistmono-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces. One ground for the whole site; sections separate by a small lift
     rather than by inversion, which is what made the banded version read as
     several different pages stitched together. */
  --paper: #0a0a0f;
  --paper-2: #14141c;
  --paper-3: #1c1c26;
  --rule: #23232e;
  --rule-strong: #34343f;

  /* One text ramp, used everywhere. */
  --ink: #f5f5f7;
  --ink-2: #b4b4c2;
  --ink-3: #85859a;

  /* Brand. --violet is the fill (white text clears 5:1 on it); the lighter
     steps are for accents and small text, which need to lift off the ground. */
  --violet: #6c4df6;
  --violet-2: #8f77fa;
  --violet-3: #c0b0fd;
  --violet-tint: rgba(108, 77, 246, .14);
  --violet-text: #b9a8fc;

  /* Action. Colour lives on the leading edge rather than across the whole
     face, so the CTA never becomes "the coloured button" — while the fill and
     spine together still keep it clearly dominant over the outline secondary. */
  --action: #1c1c26;
  --action-hover: #23232e;
  --action-fg: #f5f5f7;
  --action-edge: #2a2a36;
  --action-spine: #6c4df6;

  /* Retired. Copper was reserved for the Oddy test, but as the only warm
     colour on the site it read as a leftover rather than a deliberate
     reservation. The literal coupon swatches keep their metals; nothing else
     does. */

  /* State only — never decorative. */
  --pass: #5fd39a;
  --warn: #e6b45c;
  --fail: #f0798c;
  --pass-tint: rgba(95, 211, 154, .12);
  --fail-tint: rgba(240, 121, 140, .12);

  /* Legacy console tokens, mapped onto the ramp above so the preserved
     components share the site's palette instead of carrying their own. */
  --bg: var(--paper);
  --bg-deep: #0a0a0f;
  --panel: var(--paper-2);
  --panel-2: #1c1c26;
  --panel-3: var(--paper-3);
  --line: var(--rule);
  --line-bright: rgba(108, 77, 246, .42);
  --text: var(--ink);
  --muted: var(--ink-3);
  --blue: var(--violet);
  --blue-2: var(--violet-2);
  --blue-3: var(--violet-3);
  --green: var(--pass);
  --amber: var(--warn);
  --red: var(--fail);
  --brand-name-accent: var(--violet-3);

  /* Type */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9688rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.375rem, 1.9vw, 1.75rem);
  --text-3xl: clamp(1.875rem, 2.9vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 4.2vw, 3.5rem);
  --text-5xl: clamp(2.75rem, 5.6vw, 4.75rem);

  --lh-tight: 1.06;
  --lh-head: 1.16;
  --lh-body: 1.62;
  --track-display: -0.03em;
  --track-head: -0.02em;
  --track-label: 0.12em;

  --space-band: clamp(96px, 10.5vw, 168px);
  /* Square by default. Only genuinely soft objects (the video frame, the
     assistant orb) carry a radius. */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 2px;
  --radius-xl: 3px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 20px 50px -28px rgba(0, 0, 0, .85);
  --shadow-dark: 0 24px 70px rgba(0, 0, 0, .55);

  --shell: min(1240px, calc(100vw - 56px));

  --sans: "DM Sans var", "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Reserved for the logotype only. A wordmark does not have to be set in
     the body face, and a distinct one gives the mark its own identity. */
  --wordmark: "Manrope var", Manrope, var(--sans);
  --mono: "Geist Mono var", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --brand-logo-image: url("/assets/oddessy-mark.svg");
}

/* Alternating sections lift off the ground instead of inverting. Both class
   names resolve to the same lift so existing markup needs no change. */
.band-tint, .band-dark {
  --paper: #14141c;
  --paper-2: #1c1c26;
  --paper-3: #23232e;
}

/* --- 3. Base ------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 3px; }

.shell { width: var(--shell); margin-inline: auto; }
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  background: var(--violet); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}

.icon {
  width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; pointer-events: none;
}
.icon-inline { width: 1.05em; height: 1.05em; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Bands are the page's rhythm: white, tinted, dark. */
.band { padding-block: var(--space-band); background: var(--paper); color: var(--ink); }
/* The subpage equivalent of .band. Width-constrained at the section itself (it
   carries .shell) rather than full-bleed, because it paints no background.
   Half the band: consecutive .section siblings each contribute one half, so the
   gap between them lands on --space-band. .band can afford the full value on
   both edges because its background alternates, which reads the padding as
   interior rather than as a gap. */
.section { padding-block: calc(var(--space-band) / 2); }
.band-tint { background: var(--paper-2); }
.band-dark { background: var(--paper); color: var(--ink); }
.band + .band-tint, .band-tint + .band { border-top: 1px solid var(--rule); }


.band-head { display: grid; gap: 18px; max-width: 60ch; margin-bottom: 72px; }
.band-head h2 {
  font-size: var(--text-4xl); line-height: var(--lh-head);
  letter-spacing: var(--track-head); font-weight: 600;
}
.band-head p { color: var(--ink-2); font-size: var(--text-lg); line-height: 1.6; max-width: 56ch; }
.band-head.centered { margin-inline: auto; justify-items: center; text-align: center; }

/* --- Buttons ---------------------------------------------------------------
   Square. The rounded pill is the single most generic thing a site can do, and
   the reference deliberately runs rounded-none: a fixed 48px height, 32px of
   horizontal padding, regular weight, and a slow 400ms ease-out so the hover
   feels mechanical rather than springy. The secondary is an outline that fills
   with the brand colour instead of a second filled style. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; min-height: 48px; padding-inline: 32px;
  border: 1px solid transparent; border-radius: 0;
  font-size: var(--text-base); font-weight: 400; letter-spacing: -0.005em;
  white-space: nowrap; cursor: pointer;
  transition: background-color 400ms ease-out, border-color 400ms ease-out, color 400ms ease-out;
}
.button-primary {
  background: var(--action); color: var(--action-fg);
  border-color: var(--action-edge);
  border-left: 3px solid var(--action-spine);
  padding-left: 30px; /* keeps the label optically centred against the 3px spine */
  box-shadow: 0 3px 12px 3px rgba(0, 0, 0, .19);
  transition: background-color 400ms ease-out, border-color 400ms ease-out;
}
.button-primary:hover { background: var(--action-hover); border-left-color: var(--violet-2); }
.button-secondary { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.button-secondary:hover { background: transparent; border-color: var(--ink-3); color: var(--ink); }
.button .icon { width: 16px; height: 16px; }
/* Used inside the demo console, where the full 48px button crowds the column. */
.button.compact { height: 38px; min-height: 38px; padding-inline: 16px; gap: 8px; font-size: var(--text-sm); }
.button.compact .icon { width: 14px; height: 14px; }
.button:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }

/* Everything else that reads as a control follows the same square language. */
.header-actions { justify-self: end; display: inline-flex; align-items: center; gap: 12px; }
.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 20px; border-radius: 0;
  background: var(--action); color: var(--action-fg);
  border: 1px solid var(--action-edge); border-left: 3px solid var(--action-spine);
  padding-left: 18px;
  font-size: var(--text-base); font-weight: 400;
  transition: background-color 400ms ease-out, border-color 400ms ease-out;
}
.header-cta:hover { background: var(--action-hover); border-left-color: var(--violet-2); }

/* Sign-in sits beside the demo CTA as the quieter of the two: an outline
   against the filled button, so returning customers can find it without it
   competing with the primary action. */
.header-login {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding-inline: 16px; border-radius: 0;
  border: 1px solid var(--rule-strong); color: var(--ink-2);
  font-size: var(--text-base); font-weight: 400; white-space: nowrap;
  transition: color 400ms ease-out, border-color 400ms ease-out;
}
.header-login:hover { color: var(--ink); border-color: var(--ink-3); }
.header-login .icon { width: 14px; height: 14px; }

/* --- 4. Header ----------------------------------------------------------- */
/* The header sits over a dark hero at rest and resolves to the light page
   surface once scrolling starts. Both states are declared; nothing is left to
   inherit from whatever happens to be underneath. */
.site-header {
  position: fixed; z-index: 100; inset: 0 0 auto; height: 76px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding-inline: max(28px, calc((100vw - 1240px) / 2));
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(18px); border-color: var(--rule);
}

/* At rest over the hero: light chrome. */
.site-header:not(.scrolled) .brand-copy strong { color: #fff; }
.site-header:not(.scrolled) .brand-name-accent { color: var(--violet-3); }
.site-header:not(.scrolled) .brand-copy small { color: rgba(255, 255, 255, .5); }
.site-header:not(.scrolled) .nav-trigger { color: rgba(255, 255, 255, .78); }
.site-header:not(.scrolled) .nav-trigger:hover,
.site-header:not(.scrolled) .nav-item.open .nav-trigger { color: #fff; background: rgba(255, 255, 255, .1); }
.site-header:not(.scrolled) .status-nav-link { color: rgba(255, 255, 255, .66); }
.site-header:not(.scrolled) .status-nav-link:hover { color: #fff; }
.site-header:not(.scrolled) .header-login { color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .3); }
.site-header:not(.scrolled) .header-login:hover { color: #fff; border-color: rgba(255, 255, 255, .58); }
.site-header:not(.scrolled) .nav-toggle { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); }
.site-header:not(.scrolled) .nav-toggle span { background: #fff; }

/* Subpage heroes are dark too, so the chrome is identical everywhere. */
/* Lockup: solid mark, wide-tracked caps wordmark. Tracking opens up because
   capitals set tight read as a stencil rather than a logotype. */
/* Lockup: mark plus wordmark, nothing else. The domain sat under the wordmark
   and only repeated what the address bar already says. */
.brand { display: inline-flex; align-items: center; gap: 6px; width: max-content; }
.brand-mark { width: 28px; height: 28px; object-fit: contain; flex: none; }
.brand-copy { display: flex; align-items: center; line-height: 1; }
.brand-copy strong {
  font-family: var(--wordmark);
  font-size: 1.25rem; font-weight: 600;
  text-transform: none; letter-spacing: -0.015em;
}
.brand-name-accent { color: inherit; }

.site-nav { justify-self: center; display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--ink-2); font-size: var(--text-base); cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.nav-trigger:hover, .nav-item.open .nav-trigger { color: var(--ink); background: var(--paper-2); }
.nav-chevron { width: 11px; height: 11px; opacity: .7; transition: transform 180ms ease; }
.nav-item.open .nav-chevron { transform: rotate(180deg); }
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  display: grid; gap: 2px; width: 316px; padding: 8px;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.nav-item.open .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-panel::before { content: ""; position: absolute; inset: -10px 0 100%; }
.nav-panel a { display: grid; gap: 2px; padding: 9px 11px; border-radius: var(--radius-sm); transition: background 140ms ease; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--violet-tint); }
.nav-panel b { color: var(--ink); font-size: var(--text-base); font-weight: 500; }
.nav-panel small { color: var(--ink-3); font-size: var(--text-xs); line-height: 1.45; }
/* Status reads as a control, not a decorated link: solid ground, green edge,
   no indicator dot — the colour already says what the dot was saying. */
.status-nav-link {
  display: inline-flex; align-items: center; margin-left: 14px;
  height: 30px; padding-inline: 13px; border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--pass) 50%, transparent);
  background: var(--paper); color: var(--pass);
  font-size: 0.75rem; letter-spacing: .01em;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}
.status-nav-link:hover {
  background: color-mix(in srgb, var(--pass) 14%, var(--paper));
  border-color: var(--pass);
}
.site-header:not(.scrolled) .status-nav-link { background: rgba(10, 10, 15, .6); }
.nav-toggle { display: none; }

/* --- 5. Hero ---------------------------------------------------------------
   Full-bleed footage behind the type. The hero runs on the dark token set so
   every child component inverts without needing its own variant, and a two-stop
   scrim guarantees text contrast whatever the frame underneath is doing. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(94vh, 900px);
  display: grid; align-items: end;
  padding: 160px 0 clamp(44px, 5vw, 76px);
  background: #0a0a0f;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
/* Clips are stacked and cross-faded rather than swapped on one element, so the
   transition never shows a blank frame. */
.hero-clip {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms ease-in-out;
  filter: saturate(.72) contrast(1.04);
}
.hero-clip.is-active { opacity: 1; }

.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10, 10, 15, .94) 0%, rgba(10, 10, 15, .82) 38%, rgba(10, 10, 15, .34) 72%, rgba(10, 10, 15, .55) 100%),
    linear-gradient(0deg, rgba(10, 10, 15, .92) 0%, transparent 42%),
    radial-gradient(ellipse 60% 50% at 82% 22%, rgba(108, 77, 246, .3), transparent 70%);
}
/* A faint engineering grid, anchored to the floor line of the frame. */
.hero-grid {
  position: absolute; inset: auto 0 0; height: 46%; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(160, 140, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 140, 255, .07) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(transparent, #000 55%, transparent);
  transform: perspective(700px) rotateX(64deg) scale(1.7);
  transform-origin: bottom;
}

/* Scene selector. It sits on the panel it drives rather than in the copy
   column — proximity makes the interaction legible without a label, and it
   keeps the left side down to headline, sentence, buttons. */
.hero-panel { display: grid; gap: 0; min-width: 0; }
/* Two-up rather than four-across: four full labels never fit the panel width,
   and abbreviating them ("Security", "Flow") loses the thing the tabs are for. */
.hero-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.hero-tab {
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; border-right: 0;
  background: rgba(12, 12, 20, .55); backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .58); font-size: 0.75rem; white-space: nowrap;
  cursor: pointer; text-align: center;
  transition: color 250ms ease-out, background 250ms ease-out;
}
.hero-tab:nth-child(2n) { border-right: 1px solid rgba(255, 255, 255, .14); }
.hero-tab:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
.hero-tab:hover { color: #fff; }
.hero-tab.is-active {
  color: #fff; background: rgba(108, 77, 246, .24);
  box-shadow: inset 0 2px 0 var(--violet-2);
}
.hero-tab:focus-visible { outline: 2px solid var(--violet-2); outline-offset: -2px; z-index: 1; }

.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 372px);
  gap: clamp(36px, 4vw, 60px); align-items: center;
}
.hero-copy { min-width: 0; }
@media (max-width: 1000px) { .hero-inner { grid-template-columns: 1fr; align-items: start; } }
.hero h1 {
  margin: 0; max-width: 14ch;
  font-size: var(--text-5xl); line-height: 1.02;
  letter-spacing: var(--track-display); font-weight: 600;
}
.hero h1 em { color: var(--violet-3); font-style: normal; }
.hero-lede {
  margin: 24px 0 0; max-width: 48ch; color: #c8c8d6;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.62;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .button-secondary { border-color: rgba(255, 255, 255, .28); color: #fff; }
.hero .button-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Live-record chip: the page's one piece of ambient motion. Labelled so it
   never reads as a live claim. */
.hero-record {
  width: 100%; padding: 18px 20px; border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(10, 10, 15, .68); backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.hero-record-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .13em;
  text-transform: uppercase; color: #8f8fa6;
}
.hero-record-live { display: inline-flex; align-items: center; gap: 6px; color: var(--violet-3); }
.hero-record-live i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--violet-2);
  box-shadow: 0 0 9px var(--violet-2); animation: hero-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero-record-meta { display: grid; gap: 8px; margin: 0; }
.hero-record-meta > div { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: baseline; }
.hero-record dt {
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .1em;
  text-transform: uppercase; color: #75758a;
}
.hero-record dd { margin: 0; font-family: var(--mono); font-size: 0.75rem; color: #e4e4ee; }
.hero-record .verdict { color: var(--pass); }
.hero-record footer {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .06em; color: #6a6a7f;
}

/* Four hard claims rather than four numbers.
   The numeric band this replaces had the form of social proof without the
   substance: "3 coupons per agent" and "1 named target device" describe our
   own mechanism, not an outcome, and putting them where competitors put
   "16,000 organizations" invited a comparison we lose. These are claims a
   buyer can hold us to instead — and the second one is something no
   competitor in the category says. */
.hero-claims {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 clamp(20px, 2.6vw, 38px);
  margin: clamp(34px, 4vw, 52px) 0 0; padding: 0; list-style: none;
}
.hero-claims li {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 0;
  color: #c8c8d6; font-size: var(--text-sm); white-space: nowrap;
}
.hero-claims li + li { padding-left: clamp(20px, 2.6vw, 38px); border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-claims .icon { color: var(--violet-2); flex: none; }

.hero-note {
  margin: 30px 0 0; max-width: 62ch; padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, .18);
  color: #8f8fa6; font-size: var(--text-sm); line-height: 1.6;
}
.hero-note b { color: #c8c8d6; font-weight: 500; }
.hero-note code { font-family: var(--mono); font-size: .95em; }
.hero-media-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.hero-media-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--violet-2);
  box-shadow: 0 0 8px var(--violet-2);
}

@media (max-width: 1000px) {
  .hero-record { justify-self: start; }
}
@media (max-width: 820px) {
  .hero { min-height: 0; padding-top: 128px; }
  .hero-record { width: 100%; }
}

/* --- Ecosystem strip ----------------------------------------------------- */
/* Dark ground on purpose: the AWS and Zephyr marks are supplied white-on-
   transparent, and recolouring them would breach the usage terms the footer
   note commits to. So the strip adapts to the artwork, not the reverse. */
.logo-strip { padding-block: 44px; background: var(--paper); border-block: 1px solid var(--rule); }
.logo-strip-label {
  margin-bottom: 30px; text-align: center;
  font-family: var(--mono); color: var(--ink-3); font-size: var(--text-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
}

/* Even cells with hairline dividers, so the row reads as one system rather
   than four marks floating at different weights. */
.logo-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.logo-row li {
  display: grid; place-items: center; min-height: 56px; padding-inline: 20px;
  border-left: 1px solid var(--rule);
}
.logo-row li:first-child { border-left: 0; }
.logo-row a { display: inline-grid; place-items: center; }
.logo-row img {
  width: auto; opacity: .68;
  transition: opacity 200ms ease-out;
  /* Height is set per mark below. A single height cannot work here: these
     four files differ in aspect ratio and in how much internal padding the
     artwork carries, so a uniform value makes ROS tower and Zephyr vanish. */
}
.logo-row a:hover img { opacity: 1; }

.logo-aws    { height: 30px; }
.logo-ros    { height: 19px; }
.logo-zephyr { height: 38px; }
.logo-ieee   { height: 21px; }

/* ROS ships dark-on-transparent. It gets a light chip rather than being
   recoloured, kept tight so it reads as a detail and not a panel. */
/* Off-white rather than pure white, and tight: a bright panel in a row of
   knocked-out marks pulls the eye straight to it. */
.logo-on-light { padding: 5px 8px; border-radius: 2px; background: #dcdce0; }
.logo-on-light img { opacity: .82; }
.logo-on-light:hover { background: #f2f2f0; }
.logo-on-light:hover img { opacity: 1; }

@media (max-width: 720px) {
  .logo-strip { padding-block: 34px; }
  .logo-row { grid-template-columns: 1fr 1fr; }
  .logo-row li { min-height: 62px; }
  .logo-row li:nth-child(odd) { border-left: 0; }
  .logo-row li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* --- Value stack (the spine) --------------------------------------------- */
.stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stack article {
  display: grid; align-content: start; gap: 16px; padding: 38px 34px 40px;
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.stack .stack-index {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .1em; color: var(--violet-text);
}
.stack .stack-index::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.stack h3 { font-size: var(--text-xl); letter-spacing: var(--track-head); font-weight: 600; }
.stack > article > p { color: var(--ink-2); font-size: var(--text-base); }
.stack ul { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.stack li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.stack li .icon { flex: none; margin-top: 2px; color: var(--violet-2); }

/* --- Who this is for ----------------------------------------------------- */
.icp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.icp-card {
  display: grid; align-content: start; gap: 14px; padding: 36px 32px;
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper);
}
.icp-role {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3);
}
.icp-card h3 { font-size: var(--text-lg); letter-spacing: var(--track-head); font-weight: 600; }
.icp-card p { color: var(--ink-2); font-size: var(--text-base); }
.icp-quote {
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: var(--text-sm); line-height: 1.55;
}
.icp-quote b { display: block; color: var(--violet-text); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; font-weight: 500; }

/* --- Solutions ----------------------------------------------------------- */
/* Three across, so the six offerings fill two even rows. Four across left a
   short row of two hanging off the end. */
.solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.solution-card {
  display: grid; align-content: start; gap: 14px; padding: 34px 30px 36px;
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.solution-card:hover { border-color: var(--violet-3); transform: translateY(-2px); box-shadow: var(--shadow); }
.solution-card .solution-icon { color: var(--violet-2); }
.solution-card .solution-icon .icon { width: 26px; height: 26px; }
.solution-card h3 { font-size: var(--text-lg); letter-spacing: var(--track-head); font-weight: 600; }
.solution-card p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.solution-card .solution-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  color: var(--violet-text); font-size: var(--text-sm); font-weight: 500;
}
.solution-card:hover .solution-more .icon { transform: translateX(3px); }
.solution-more .icon { transition: transform 160ms ease; }

/* --- Boundary callout ---------------------------------------------------- */

/* --- Trust grid ---------------------------------------------------------- */

/* --- Contact ------------------------------------------------------------- */
.contact-section { padding-block: var(--space-band); background: var(--paper); border-top: 1px solid var(--rule); }
.contact-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-copy h2 { margin: 14px 0 0; max-width: 16ch; font-size: var(--text-3xl); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 600; }
.contact-copy > p { margin: 16px 0 0; max-width: 46ch; color: var(--ink-2); font-size: var(--text-base); }
.contact-points { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.contact-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.contact-points .icon { color: var(--pass); flex: none; margin-top: 2px; }
.contact-scheduler { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; color: var(--violet-text); font-size: var(--text-base); font-weight: 500; border-bottom: 1px solid var(--violet-3); padding-bottom: 3px; }
.contact-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 36px; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--paper-2); box-shadow: var(--shadow);
}
.contact-field { display: grid; gap: 7px; min-width: 0; }
.contact-field-wide, .contact-submit, .contact-privacy { grid-column: 1 / -1; }
.contact-field label { font-family: var(--mono); color: var(--ink-3); font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase; }
.contact-field .optional { text-transform: none; letter-spacing: 0; }
.contact-field input, .contact-field select, .contact-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font-size: var(--text-base); transition: border-color 150ms ease, box-shadow 150ms ease;
}
.contact-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint);
}
.contact-field [aria-invalid="true"] { border-color: var(--fail); }
.contact-field ::placeholder { color: var(--ink-3); opacity: .8; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-submit .button { min-width: 140px; }
.contact-submit .button[disabled] { opacity: .55; cursor: progress; }
.contact-status { font-size: var(--text-sm); color: var(--ink-2); }
.contact-status.error { color: var(--fail); }
.contact-status.success { color: var(--pass); }
.contact-privacy { color: var(--ink-3); font-size: var(--text-xs); line-height: 1.6; }
.contact-privacy a { color: var(--violet-text); border-bottom: 1px solid var(--violet-3); }

/* --- Footer -------------------------------------------------------------- */
body > footer { background: var(--bg-deep); color: var(--ink-2); padding: 84px 0 40px; border-top: 1px solid var(--rule); }
body > footer .brand-copy strong { color: var(--ink); }
/* The footer lockup is the last thing on the page and the only place the mark
   has room, so it is set well above the header size rather than repeating it. */
body > footer .brand { gap: 14px; }
body > footer .brand-mark { width: 56px; height: 56px; }
body > footer .brand-copy strong { font-size: 2.375rem; letter-spacing: -0.022em; }
body > footer .brand-name-accent { color: var(--violet-3); }
body > footer .brand-copy small { color: var(--ink-3); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.footer-grid > div { display: grid; align-content: start; gap: 11px; }
.footer-grid > div:first-child > p { margin-top: 18px; max-width: 34ch; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.6; }
.footer-grid b { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 2px; }
.footer-grid a { color: var(--ink-2); font-size: var(--text-sm); transition: color 140ms ease; width: max-content; }
.footer-grid a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: var(--text-xs);
}

/* --- Routed pages -------------------------------------------------------- */
.page-hero { padding: 176px 0 var(--space-band); background: radial-gradient(ellipse 62% 74% at 86% -6%, rgba(108, 77, 246, .2), transparent 70%), var(--paper); border-bottom: 1px solid var(--rule); }
.page-hero-oddy { background: radial-gradient(ellipse 62% 74% at 86% -6%, rgba(108, 77, 246, .2), transparent 70%), var(--paper); }
.page-hero-inner { display: grid; justify-items: start; }
.page-hero h1 { margin: 18px 0 0; max-width: 19ch; font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 600; }
.page-hero h1 em { color: var(--violet); font-style: normal; }
.page-hero-oddy h1 em { color: var(--violet-3); }
.page-lede { margin: 20px 0 0; max-width: 58ch; color: var(--ink-2); font-size: var(--text-lg); }
.page-hero .hero-actions { margin-top: 30px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: var(--ink-3); font-family: var(--mono); font-size: var(--text-xs); }
.breadcrumb a:hover { color: var(--ink); }
.page-section-title { margin-bottom: 32px; font-size: var(--text-3xl); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 600; }
.page-body { margin-bottom: 16px; max-width: 62ch; color: var(--ink-2); }
.page-note { margin-top: 18px; max-width: 58ch; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.6; }
/* Stretch, not start: these are always two bordered panels, and letting them
   take their natural heights left one box visibly shorter than its neighbour. */
.page-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 60px); align-items: stretch; }
/* The trailing link sits at the foot of the panel once heights are matched. */
.page-panel { display: grid; grid-template-rows: auto 1fr auto; }
.page-panel > .solution-more { justify-self: start; }
.page-split h2 { margin: 12px 0 16px; font-size: var(--text-2xl); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 600; }
.page-panel { padding: 34px 36px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); }
.page-panel-oddy { border-color: rgba(108, 77, 246, .3); background: var(--violet-tint); }
.page-panel h2 { margin: 0 0 16px; font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--track-head); }
.page-panel-title { margin: 12px 0 14px; font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--track-head); }
.page-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.page-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: var(--text-base); line-height: 1.5; }
.page-list .icon { flex: none; margin-top: 3px; color: var(--pass); }
.page-list-route .icon { color: var(--violet-2); }
.page-verdicts, .page-spec { display: grid; margin: 0; }
.page-verdicts > div, .page-spec > div { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.page-verdicts > div:last-child, .page-spec > div:last-child { border-bottom: 0; }
.page-verdicts dt { font-size: var(--text-base); font-weight: 600; }
.page-verdicts dd { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.page-spec > div { display: grid; grid-template-columns: 148px 1fr; gap: 16px; align-items: baseline; }
.page-spec dt { font-family: var(--mono); color: var(--ink-3); font-size: var(--text-xs); letter-spacing: .09em; text-transform: uppercase; }
.page-spec dd { margin: 0; color: var(--ink); font-size: var(--text-base); }
.page-coupons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.page-coupons article { display: grid; align-content: start; gap: 12px; padding: 28px 26px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); }
.coupon-index { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--violet-text); font-weight: 500; }
.page-coupons h3 { font-size: var(--text-xl); letter-spacing: var(--track-head); font-weight: 600; }
.page-coupons > article > p { color: var(--ink-2); font-size: var(--text-base); }
.page-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.page-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.page-steps li:last-child { border-bottom: 0; }
.page-steps > li > span { font-family: var(--mono); color: var(--violet-text); font-size: var(--text-xs); letter-spacing: .09em; padding-top: 3px; }
.page-steps b { display: block; font-size: var(--text-base); font-weight: 600; }
.page-steps p { margin-top: 4px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.page-figure { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 52px); align-items: center; }
/* Pages with no photograph of their own yet. Better an honest single column
   than a borrowed image that implies a deployment we have not run. */
.page-figure-solo { grid-template-columns: minmax(0, 74ch); }
.page-figure picture { display: block; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.page-figure img { display: block; width: 100%; height: auto; }
.page-figure-copy h2 { margin: 10px 0 18px; font-size: var(--text-2xl); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 600; }
.page-faq { display: grid; gap: 10px; }
.page-faq details { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.page-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 22px; cursor: pointer; font-size: var(--text-md); font-weight: 500; list-style: none; }
.page-faq summary::-webkit-details-marker { display: none; }
.page-faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--violet-2); border-bottom: 1.5px solid var(--violet-2); rotate: 45deg; translate: 0 -2px; transition: rotate 180ms ease; }
.page-faq details[open] summary::after { rotate: -135deg; translate: 0 2px; }
.page-faq p { padding: 0 22px 20px; max-width: 76ch; color: var(--ink-2); font-size: var(--text-base); line-height: 1.65; }
.page-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 34px; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(108, 77, 246, .18), rgba(108, 77, 246, .05) 60%), var(--paper-2);
  border: 1px solid rgba(108, 77, 246, .32);
  /* Owns its own top spacing rather than inheriting whatever the preceding
     section happens to leave, so the closing break never ends up tighter than
     the gaps between the sections above it. */
  margin-block: calc(var(--space-band) / 2) var(--space-band);
}
.page-cta h2 { font-size: var(--text-2xl); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 600; }
.page-cta p { margin-top: 8px; max-width: 52ch; color: var(--ink-2); font-size: var(--text-base); }
.page-cta-actions { display: flex; gap: 10px; flex: none; }
/* The ambient loop is masked to sit at 78% across — directly behind these
   buttons. A transparent secondary reads as a moving smear there, so inside the
   CTA it takes a solid surface and a border bright enough to hold an edge
   against the animation. The primary keeps the accent spine, so the hierarchy
   between them survives both becoming opaque. */
.page-cta .button-primary { border-color: rgba(108, 77, 246, .55); }
.page-cta .button-secondary { background: var(--action); border-color: rgba(245, 245, 247, .3); color: var(--ink); }
.page-cta .button-secondary:hover { background: var(--action-hover); border-color: var(--ink); color: var(--ink); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .stack, .icp-grid, .page-coupons { grid-template-columns: 1fr; }
  .solution-grid { grid-template-columns: 1fr 1fr; }
  .page-figure, .page-split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .page-cta { flex-direction: column; align-items: stretch; }
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  :root { --shell: calc(100% - 32px); }
  html { scroll-padding-top: 76px; }
  .site-header { height: 66px; grid-template-columns: 1fr auto auto; padding-inline: 18px; }
  /* The demo CTA folds away, but sign-in stays reachable — it is the one header
     action a returning customer needs on a phone. */
  .header-cta { display: none; }
  .header-actions { order: 2; gap: 0; }
  .header-login { height: 38px; padding-inline: 13px; font-size: var(--text-sm); }
  .nav-toggle {
    order: 3;
    display: grid; place-content: center; gap: 5px; width: 42px; height: 42px;
    border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
    background: var(--paper); cursor: pointer;
  }
  .nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 160ms ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 66px 0 auto; display: none; padding: 8px 18px 24px;
    max-height: calc(100dvh - 66px); overflow-y: auto;
    background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .site-nav.open { display: grid; gap: 0; }
  .nav-item { position: static; border-bottom: 1px solid var(--rule); }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: var(--text-md); border-radius: 0; }
  .nav-trigger:hover, .nav-item.open .nav-trigger { background: transparent; }
  .nav-panel {
    position: static; translate: none; transform: none; width: auto; display: none;
    padding: 0 0 12px 4px; border: 0; border-radius: 0; background: transparent;
    box-shadow: none; opacity: 1; visibility: visible;
  }
  .nav-item.open .nav-panel { display: grid; }
  .nav-panel::before { content: none; }
  .status-nav-link { margin: 16px 0 0 4px; }
  .hero { padding-top: 116px; }
  .page-hero { padding-top: 112px; }
  .solution-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-spec > div { grid-template-columns: 1fr; gap: 4px; }
  .page-cta-actions { flex-direction: column; }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .solution-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .contact-form { grid-template-columns: 1fr; padding: 20px; }
  .logo-row { gap: 24px; }
  .logo-row img { height: 21px; }
}
/* Reduced motion: the poster frame carries the same scene, so nothing is lost
   by never starting playback. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===========================================================================
   6. Preserved components
   Console, assistant, record card and hardware detail. These were authored
   dark and are used inside .band-dark sections, so their palette is correct
   as-is; their blues have been rotated onto the new violet.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   Inter Variable, self-hosted. The stylesheet asks for weights between 400 and
   700, which only a variable font can supply — without this the page falls back
   to Arial on macOS and every weight snaps to 400 or 700.
   --------------------------------------------------------------------------- */
/* Icon primitive — every <use> reference inherits colour from its container. */
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  background: var(--blue); color: white; padding: 10px 16px; border-radius: 2px;
}
.skip-link:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
}
/* --- Primary nav: four groups plus status ---------------------------------
   Replaces the previous eleven flat links, which only fitted by dropping to
   12px type at 12px gaps below 1180px. */
/* Numeric proof, above the fold. Every comparable site puts a countable claim
   here; this is the site's first hard number. */
.system-card {
  position: absolute; z-index: 3; right: max(34px, calc((100vw - 1440px) / 2)); top: 164px;
  width: 235px; padding: 20px; background: rgba(10, 10, 15, 0.78);
  border: 1px solid rgba(84, 73, 174, 0.4); border-radius: 2px;
  backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.system-card-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.system-card-head div { display: grid; gap: 2px; }
.system-card-head strong { font-size: 15px; }
.system-card-head small { color: var(--blue-2); font-size: 10px; }
.assistant-orb {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(10, 10, 15, .94) var(--brand-logo-image) center/72% no-repeat;
  border: 1px solid rgba(194, 102, 255, .62);
  box-shadow: 0 0 20px rgba(115, 62, 255, .46), 0 0 30px rgba(145, 57, 243, .12);
}
.assistant-orb i { display: none; }
.system-status { display: grid; grid-template-columns: 1fr auto; gap: 9px 8px; padding: 16px 0; font-size: 10px; }
.system-status span { color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.system-status b { font-weight: 550; color: var(--ink); }
.system-status i { width: 5px; height: 5px; border-radius: 50%; }
.system-card > a { display: flex; justify-content: space-between; background: #320be8; border-radius: 2px; padding: 10px 12px; font-size: 11px; }
.oled-panel {
  position: relative; overflow: hidden; margin-top: 22px;
  border: 1px solid rgba(93, 64, 238, .48); border-radius: 2px;
  background: linear-gradient(145deg, var(--paper), #0a0a0f 55%, #14141c);
  box-shadow: inset 0 0 28px rgba(73, 37, 255, .08), 0 0 22px rgba(56, 31, 220, .08);
}
.oled-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .13;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(129, 106, 243, .16) 4px);
}
.oled-head {
  min-height: 33px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(80, 55, 204, .26); color: #7b61ff;
  font: 700 7px/1 monospace; letter-spacing: .13em;
}
.oled-head span { color: var(--ink-3); }
.oled-head b { display: flex; align-items: center; gap: 6px; color: #68efa9; font-weight: 700; }
.oled-head i { width: 5px; height: 5px; border-radius: 50%; background: #68efa9; box-shadow: 0 0 7px #68efa9; }
.oled-body { padding: 12px; }
.oled-workloads { display: grid; gap: 6px; }
.oled-workloads article {
  min-height: 30px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 6px 8px; border: 1px solid rgba(62, 43, 160, .22); border-radius: 2px; background: rgba(10, 10, 15, .7);
}
.oled-workloads span { color: #765bff; font: 700 7px/1 monospace; letter-spacing: .12em; }
.oled-workloads b { overflow: hidden; color: #e6e1fd; font: 700 9px/1 monospace; text-overflow: ellipsis; white-space: nowrap; }
.oled-workloads em { color: #6ff3b3; font: 700 7px/1 monospace; letter-spacing: .08em; }
.oled-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 9px;
  border: 1px solid rgba(62, 43, 160, .2); background: rgba(62, 43, 160, .2);
}
.oled-stats span { min-width: 0; display: grid; gap: 5px; padding: 8px 7px; background: var(--paper); }
.oled-stats small { color: var(--ink-3); font: 700 6px/1 monospace; letter-spacing: .09em; }
.oled-stats b { overflow: hidden; color: #8771f4; font: 700 9px/1 monospace; text-overflow: ellipsis; white-space: nowrap; }
.oled-note { display: block; padding: 0 12px 10px; color: var(--ink-3); font: 600 6px/1.4 monospace; letter-spacing: .04em; }
.assistant-mini { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; background: var(--paper) var(--brand-logo-image) center/78% no-repeat; border: 1px solid rgba(194, 102, 255, .48); box-shadow: 0 0 13px rgba(182, 88, 255, .38); }
.assistant-mini i { display: none; }
.demos-section {
  padding-block: var(--space-band); border-block: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 55% 60% at 70% 40%, rgba(108, 77, 246, .14), transparent 70%),
    #0a0a0f;
}
.demo-switcher { display: flex; gap: 10px; margin-bottom: 14px; }
.demo-tab {
  flex: 0 1 380px; height: 76px; padding: 0 18px; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  text-align: left; color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 2px; background: rgba(10, 10, 15, .76); cursor: pointer;
}
.demo-tab.active { color: white; border-color: #371bdc; background: linear-gradient(135deg, rgba(26, 10, 130, .38), rgba(20, 20, 28, .9)); }
.tab-index { color: var(--blue-2); font: 700 10px/1 monospace; }
.demo-tab > span:nth-child(2) { display: grid; }
.demo-tab b { font-size: 14px; }
.demo-tab small { color: var(--ink-3); font-size: 10px; }
.demo-tab i { font-style: normal; color: var(--green); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.demo-tab i::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 5px; box-shadow: 0 0 8px var(--green); }
.demo-console {
  border: 1px solid rgba(59, 38, 211, .56); border-radius: 2px;
  overflow: hidden; background: rgba(10, 10, 15, .94); box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
}
.demo-console[hidden] { display: none; }
.console-bar {
  height: 53px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.console-bar > div { display: flex; align-items: center; gap: 10px; }
.console-bar b { font: 700 10px/1 monospace; letter-spacing: .12em; }
.console-bar small { color: var(--ink-3); font-size: 9px; border-left: 1px solid var(--rule-strong); padding-left: 10px; }
.console-light { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px var(--green); }
.runtime-badge {
  display: flex; align-items: center; gap: 6px; font: 600 8px/1 monospace; letter-spacing: .08em;
  color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 6px 8px;
}
.runtime-badge::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.runtime-badge.running { color: var(--green); border-color: rgba(87,211,140,.44); }
.runtime-badge.running::before { animation: runtimePulse 1s ease-in-out infinite; }
.runtime-badge.complete { color: var(--blue-3); border-color: rgba(149, 127, 255, .4); }
.runtime-badge.error { color: var(--red); border-color: rgba(255,101,122,.44); }
.console-grid { display: grid; grid-template-columns: 1.05fr .95fr 1fr; min-height: 690px; }
.console-grid > * { padding: 24px; border-right: 1px solid var(--line); }
.console-grid > *:last-child { border-right: 0; }
.panel-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; text-transform: uppercase; }
.panel-label span { color: var(--ink); font: 700 10px/1 monospace; letter-spacing: .12em; }
.panel-label small { color: var(--ink-3); font: 600 8px/1 monospace; letter-spacing: .09em; }
.dropzone {
  position: relative; height: 385px; overflow: hidden; border-radius: 2px;
  border: 1px dashed var(--rule-strong); background:
    linear-gradient(rgba(20, 20, 28, .88), rgba(10, 10, 15, .96)),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(58, 45, 173, .08) 21px);
}
.dropzone.dragging { border-color: var(--blue-2); background: rgba(23, 9, 125, .2); }
.dropzone > img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dropzone.has-image > img { display: block; }
.dropzone-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.dropzone.has-image .dropzone-empty { display: none; }
.dropzone-empty b { margin-top: 19px; font-size: 14px; }
.dropzone-empty p { margin: 4px 0 0; color: var(--ink-3); font-size: 11px; }
.viewfinder { width: 68px; height: 68px; position: relative; border: 1px solid #2c2279; border-radius: 2px; }
.viewfinder::before, .viewfinder::after, .viewfinder i::before, .viewfinder i::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-color: var(--blue-2); filter: drop-shadow(0 0 6px var(--blue));
}
.viewfinder::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.viewfinder::after { right: -1px; top: -1px; border-right: 2px solid; border-top: 2px solid; }
.viewfinder i::before { left: -1px; bottom: -1px; border-left: 2px solid; border-bottom: 2px solid; }
.viewfinder i::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.frame-overlay {
  display: none; position: absolute; inset: auto 10px 9px; justify-content: space-between;
  color: white; font: 600 8px/1 monospace; text-shadow: 0 1px 4px black;
}
.dropzone.has-image .frame-overlay { display: flex; }
.dropzone input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
/* Wrap to stacked rows rather than letting the label break mid-phrase: the
   input column gets narrow at intermediate widths. */
.frame-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.text-button { padding: 8px 0; border: 0; background: none; color: var(--ink-2); font-size: 10px; white-space: nowrap; cursor: pointer; }
.text-button:hover { color: var(--ink); }
.text-button .icon, .text-button span { color: var(--blue-2); margin-left: 5px; }
.scenario-library { margin-top: 19px; }
.scenario-library-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px;
  color: var(--ink-3); font: 700 8px/1 monospace; letter-spacing: .1em; text-transform: uppercase;
}
.scenario-library-head small { color: var(--ink-3); font: inherit; letter-spacing: .05em; }
.scenario-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.scenario-card {
  position: relative; min-width: 0; overflow: hidden; padding: 0 0 9px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
  color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}
.scenario-card:hover { transform: translateY(-2px); border-color: var(--rule-strong); }
.scenario-card.active {
  border-color: var(--blue-2); background: var(--paper-2);
  box-shadow: 0 0 0 1px rgba(62, 20, 255, .2), 0 8px 22px rgba(26, 0, 140, .16);
}
.scenario-card img { display: block; width: 100%; height: 62px; object-fit: cover; border-bottom: 1px solid var(--rule); }
.scenario-card > span { display: grid; gap: 2px; padding: 8px 8px 0; }
.scenario-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.scenario-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 7px; }
.scenario-risk {
  position: absolute; right: 5px; top: 5px; padding: 3px 4px; border-radius: 2px;
  background: rgba(10, 10, 15, .86); backdrop-filter: blur(4px); font: 700 6px/1 monospace;
  text-transform: uppercase; letter-spacing: .07em;
}
.scenario-risk.low { color: var(--green); border: 1px solid rgba(87,211,140,.45); }
.scenario-risk.medium { color: var(--amber); border: 1px solid rgba(255,196,91,.45); }
.scenario-risk.high, .scenario-risk.critical { color: var(--red); border: 1px solid rgba(255,101,122,.48); }
.privacy-note { display: flex; gap: 8px; margin: 22px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 9px; }
.privacy-note span { color: var(--blue-2); }
.privacy-note.warning span { color: var(--amber); }
.config-column { display: flex; flex-direction: column; }
.config-column label { display: grid; gap: 6px; color: var(--ink-3); font: 600 9px/1.2 monospace; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 13px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rule-card { border: 1px solid #2c246d; border-radius: 2px; background: rgba(20, 20, 28, .82); padding: 13px; margin: 4px 0 14px; }
.rule-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.rule-title span { color: var(--blue-2); font: 700 9px/1 monospace; letter-spacing: .12em; }
.rule-title small { color: var(--ink-3); font: 600 8px/1 monospace; }
.rule-row { grid-template-columns: 33px 1fr !important; align-items: center; margin-bottom: 8px !important; }
.rule-row:last-child { margin-bottom: 0 !important; }
.rule-row b { color: var(--ink-2); font: 700 10px/1 monospace; }
.rule-row textarea { min-height: 48px; }
.industrial-rule { margin-bottom: 10px; }
.policy-details { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); }
.policy-details summary { cursor: pointer; list-style: none; padding: 10px 11px; color: var(--ink-2); font: 600 9px/1 monospace; text-transform: uppercase; }
.policy-details summary::-webkit-details-marker { display: none; }
.policy-details summary span { float: right; color: var(--green); }
.policy-details[open] summary { border-bottom: 1px solid var(--line); }
.check-grid, .action-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px 11px 2px; }
.action-checks { padding: 7px 11px 10px; }
.check-grid label, .action-checks label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: 8px; }
.check-grid input, .action-checks input { width: 12px; height: 12px; padding: 0; accent-color: var(--blue); }
.analyze-button { width: 100%; min-height: 45px; margin-top: auto; justify-content: space-between; }
.analyze-button.loading { opacity: .8; cursor: wait; }
.analyze-button.loading .button-label::after { content: " ···"; animation: loadingDots 1.2s infinite; }
.result-column { background: rgba(10, 10, 15, .58); display: flex; flex-direction: column; }
.empty-result { margin: auto; max-width: 270px; display: grid; justify-items: center; text-align: center; }
.empty-result b { font-size: 14px; margin: 16px 0 5px; }
.empty-result p { color: var(--ink-3); font-size: 11px; }
.scan-glyph { width: 64px; height: 64px; border: 1px solid #302581; border-radius: 50%; position: relative; box-shadow: inset 0 0 25px rgba(62, 20, 255, .13), 0 0 30px rgba(62, 20, 255, .08); }
.scan-glyph::before { content: ""; position: absolute; inset: 15px; border: 1px solid var(--blue-2); transform: rotate(45deg); }
.scan-glyph::after { content: ""; position: absolute; left: 8px; right: 8px; top: 31px; height: 1px; background: var(--blue-2); box-shadow: 0 0 8px var(--blue); }
.scan-glyph.plc::before { border-radius: 2px; transform: none; }
.analysis-result { display: grid; gap: 12px; overflow: auto; }
.result-head { padding: 16px; border-radius: 2px; border: 1px solid #2b2766; background: linear-gradient(140deg, rgba(35, 35, 46, .8), rgba(20, 20, 28, .9)); }
.result-head h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.2; }
.result-head p { margin: 0; color: var(--ink-2); font-size: 11px; }

/* Decision record. Dense on purpose — it stands in for an audit entry, so the
   labels stay small and mono while the values carry the weight. Every rule
   below has markup in app.js renderSecurity/renderIndustrial. */
.result-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.result-kicker > span:first-child { color: var(--ink-3); font: 700 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.severity, .safety-state { flex: none; border: 1px solid currentColor; border-radius: 999px; padding: 5px 9px; font: 700 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.severity.low, .safety-state.ready_for_approval { color: var(--green); }
.severity.medium, .safety-state.review_required { color: var(--amber); }
.severity.high, .safety-state.blocked { color: var(--red); }
.confidence-bar { margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; color: var(--ink-3); font: 600 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.confidence-bar b { color: var(--ink-2); font-size: 10px; }
.confidence-bar i { height: 3px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.confidence-bar i::after { content: ""; display: block; height: 100%; width: var(--confidence); background: var(--blue-2); box-shadow: 0 0 8px var(--blue); }
.record-card { border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-2); padding: 13px; }
.record-card h4 { margin: 0 0 9px; color: var(--ink-3); font: 700 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.record-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.record-card li { position: relative; padding-left: 14px; color: var(--ink-2); font-size: 11px; line-height: 1.45; }
.record-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; background: var(--blue-2); }
.rule-match { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; color: var(--ink-2); font-size: 11px; line-height: 1.45; }
.rule-match > span { border-radius: 2px; padding: 4px 6px; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); font: 700 7px/1 var(--mono); letter-spacing: .08em; }
.rule-match.matched > span { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.action-record { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.action-record b { display: block; margin-top: 2px; color: var(--ink); font: 700 12px/1.35 var(--mono); word-break: break-word; }
.action-record small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 9px; line-height: 1.4; }
.copy-button { border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper-3); color: var(--ink-2); padding: 8px 10px; font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.copy-button:hover { color: var(--ink); border-color: var(--violet); }
.approve-button { width: 100%; min-height: 40px; border: 1px solid var(--violet); border-radius: 2px; background: var(--violet); color: #fff; font: 600 10px/1 var(--sans); cursor: pointer; }
.approve-button:disabled { color: var(--ink-3); border-color: var(--rule); background: var(--paper-2); cursor: not-allowed; }
.ask-assistant-record {
  width: 100%; min-height: 38px; border-radius: 2px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  color: var(--ink); font: 600 10px/1 var(--sans);
}
.ask-assistant-record:hover { background: color-mix(in srgb, var(--violet) 24%, transparent); }
.json-details { border-top: 1px solid var(--rule); padding-top: 12px; }
.json-details summary { color: var(--ink-3); cursor: pointer; font: 600 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.json-details pre { margin: 10px 0 0; max-height: 210px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); font: 9px/1.5 var(--mono); }
/* Shown in place of a record when inference fails, so it has to read clearly
   against the same dark column. */
.error-result {
  margin: auto; padding: 25px; border-radius: 2px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--red) 38%, transparent);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: color-mix(in srgb, var(--red) 70%, white);
}
.error-result b { display: block; margin-bottom: 6px; font-size: 13px; }
.error-result p { margin: 0; font-size: 11px; line-height: 1.5; }
.oddy-gate {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden;
  background: var(--paper); box-shadow: 0 35px 90px rgba(0,0,0,.4);
}
.oddy-record { min-width: 0; border-right: 1px solid var(--rule); background: var(--paper); }
.oddy-record > header {
  min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 25px 30px; border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, rgba(108, 77, 246, .13), transparent 48%);
}
.oddy-record > header span,
.oddy-candidate span,
.oddy-result span {
  color: var(--ink-3); font: 700 8px/1 monospace; letter-spacing: .14em;
}
.oddy-record > header h3 { margin: 9px 0 0; color: var(--ink); font-size: 25px; font-weight: 590; }
.oddy-record > header p { margin: 5px 0 0; color: var(--ink-3); font-size: 11px; }
.oddy-build { display: grid; justify-items: end; gap: 9px; }
/* "Manifest signed" is a pass state, so it reads on the pass colour. It was
   amber, which in this system means warning. */
.oddy-build b {
  padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--pass) 42%, transparent);
  border-radius: 2px; color: var(--pass); background: var(--pass-tint);
  font: 700 8px/1 monospace; letter-spacing: .08em;
}
.oddy-candidate {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 19px 30px;
  border-bottom: 1px solid var(--rule); background: var(--paper);
}
.oddy-candidate p { display: grid; gap: 8px; margin: 0; }
.oddy-candidate b { color: var(--ink); font: 600 11px/1.35 monospace; }
.oddy-coupons { padding: 7px 30px; }
.oddy-coupons article {
  min-height: 96px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 19px; border-bottom: 1px solid var(--rule);
}
.oddy-coupons article:last-child { border-bottom: 0; }
.oddy-coupons small { color: var(--ink-3); font: 700 8px/1 monospace; letter-spacing: .12em; }
.oddy-coupons h4 { margin: 7px 0 5px; color: var(--ink); font-size: 18px; }
.oddy-coupons p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.55; }
.oddy-pass {
  display: inline-flex; align-items: center; gap: 7px; color: #78d09b;
  font: 700 9px/1 monospace; text-transform: uppercase; letter-spacing: .08em;
}
.oddy-pass::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #57d38c;
  box-shadow: 0 0 8px rgba(87,211,140,.55);
}
.oddy-result {
  min-height: 96px; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 21px 30px; border-top: 1px solid var(--rule-strong); background: var(--paper);
}
.oddy-result > div { display: grid; gap: 7px; }
.oddy-result b { color: #92e3b8; font-size: 17px; }
.oddy-result p { max-width: 330px; margin: 0; color: var(--ink-3); font: 9px/1.55 monospace; text-align: right; }
.oddy-workflow { display: grid; align-content: space-between; padding: 28px; background: var(--paper); }
.oddy-workflow-head {
  display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.oddy-workflow-head span { color: var(--violet-text); font: 700 8px/1 monospace; letter-spacing: .14em; }
.oddy-workflow-head b { color: var(--ink); font-size: 13px; font-weight: 620; text-transform: capitalize; }
.oddy-workflow ol { margin: 0; padding: 0; list-style: none; }
.oddy-workflow li {
  display: grid; grid-template-columns: 40px 1fr; gap: 15px; padding: 19px 0;
  border-bottom: 1px solid var(--rule);
}
.oddy-workflow li > span { color: var(--violet-text); font: 700 9px/1.5 monospace; }
.oddy-workflow h3 { margin: 0 0 6px; color: var(--ink); font-size: 15px; }
.oddy-workflow p { margin: 0; color: var(--ink-3); font-size: 11px; line-height: 1.55; }
.oddy-rejection {
  display: grid; gap: 7px; margin-top: 24px; padding: 17px;
  border: 1px solid rgba(212,102,92,.38); border-radius: 2px; background: rgba(89,31,27,.16);
}
.oddy-rejection span { color: #dc766e; font: 700 8px/1 monospace; letter-spacing: .12em; }
.oddy-rejection b { color: #e1b4b0; font-size: 12px; }
.oddy-rejection small { color: var(--ink-3); font-size: 10px; }
.assistant-section {
  padding-block: var(--space-band); border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 50% 60% at 78% 45%, rgba(108, 77, 246, .16), transparent 70%),
    #0a0a0f;
}
.assistant-layout {
  display: grid; grid-template-columns: minmax(360px, .82fr) minmax(540px, 1.18fr);
  gap: clamp(48px, 6vw, 90px); align-items: center;
}
.assistant-story { min-width: 0; }
.assistant-story h2 {
  margin: 16px 0 18px; max-width: 22ch;
  font-size: var(--text-3xl); line-height: var(--lh-head);
  letter-spacing: var(--track-head); font-weight: 600;
  text-wrap: balance;
}
.assistant-story > p {
  max-width: 590px; margin: 0; color: var(--ink-2);
  font-size: 16px; line-height: 1.65;
}
.assistant-capabilities { display: grid; gap: 8px; margin-top: 30px; }
.assistant-capabilities article {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.assistant-capabilities article > span { color: var(--blue-2); font: 700 9px/1 monospace; padding-top: 5px; }
.assistant-capabilities article > div { display: grid; gap: 4px; }
.assistant-capabilities b { color: #ebeafb; font-size: 14px; line-height: 1.35; }
.assistant-capabilities small { color: var(--ink-2); font-size: 11px; line-height: 1.5; }
.assistant-system-line {
  display: flex; align-items: center; gap: 13px; margin-top: 26px;
  color: var(--ink); font-size: 12px; line-height: 1.45;
}
.assistant-console {
  min-width: 0; overflow: hidden; border: 1px solid rgba(70, 42, 239, .58);
  border-radius: 2px; background: rgba(10, 10, 15, .96);
  box-shadow: 0 30px 90px rgba(0,0,0,.38), 0 0 50px rgba(45, 13, 206, .08);
}
.assistant-console-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--line); background: var(--paper); }
.assistant-console-head > div { display: flex; align-items: center; gap: 11px; }
.assistant-console-head > div > span:last-child { display: grid; gap: 3px; }
.assistant-console-head b { font-size: 14px; }
.assistant-console-head small { color: var(--blue-2); font-size: 10px; }
.assistant-online { display: flex; align-items: center; gap: 6px; color: var(--green); font: 700 8px/1 monospace; text-transform: uppercase; letter-spacing: .09em; }
.assistant-online i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }
.assistant-context-bar { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.assistant-context-bar span { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2); font: 600 8px/1 monospace; }
.assistant-context-bar i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-2); }
.assistant-context-bar span.live { color: #9bdab8; border-color: rgba(87,211,140,.38); }
.assistant-context-bar span.live i { background: var(--green); box-shadow: 0 0 6px var(--green); }
.assistant-messages { min-height: 260px; max-height: 390px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; padding: 20px; scroll-behavior: smooth; }
.assistant-message { display: flex; align-items: flex-start; gap: 10px; max-width: 86%; }
.assistant-message > div { padding: 12px 13px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); }
.assistant-message p { margin: 0; white-space: pre-wrap; color: var(--ink); font-size: 13px; line-height: 1.55; }
.assistant-message-copy { display: grid; gap: 8px; color: var(--ink); font-size: 13px; line-height: 1.55; }
.assistant-message-copy p { white-space: normal; }
.assistant-message-copy .assistant-message-heading { color: #eeedff; font-weight: 700; font-size: 13px; }
.assistant-message-copy ul, .assistant-message-copy ol { display: grid; gap: 5px; margin: 0; padding-left: 18px; }
.assistant-message-copy li::marker { color: var(--blue-2); }
.assistant-message-copy strong { color: #eeedff; }
.assistant-message-copy code { padding: 1px 4px; border: 1px solid #28255f; border-radius: 2px; background: var(--paper); color: #aa9eff; font: 9px/1.4 monospace; }
.assistant-message small { display: block; margin-top: 8px; color: var(--ink-3); font-size: 9px; line-height: 1.45; }
.assistant-message.user { align-self: flex-end; flex-direction: row-reverse; }
.assistant-message.user > div { border-color: rgba(64, 39, 219, .5); border-radius: 2px; background: #180b79; }
.assistant-message.user p { color: white; }
.assistant-message.loading p::after { content: " ···"; animation: loadingDots 1.1s infinite; }
.assistant-orb.small { width: 28px; height: 28px; flex: 0 0 auto; }
.assistant-prompts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 17px 13px; }
.assistant-prompts button { border: 1px solid #27235f; border-radius: 2px; background: var(--paper); color: var(--ink-2); padding: 8px 10px; font-size: 9px; cursor: pointer; }
.assistant-prompts button:hover { border-color: #4439b9; color: #cfc9ed; }
.assistant-input-row { display: grid; grid-template-columns: 1fr 42px; gap: 8px; padding: 13px 16px; border-top: 1px solid var(--line); background: var(--paper); }
/* The input had no background declared, so it fell back to the UA default —
   a white field on a dark card. */
.assistant-input-row input {
  min-height: 42px; padding: 0 12px; border-radius: 0; font-size: 12.5px;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.assistant-input-row input::placeholder { color: var(--ink-3); }
.assistant-input-row input:focus-visible {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint);
}
.assistant-input-row button {
  border: 1px solid var(--violet); border-radius: 0;
  background: var(--violet); color: #fff; cursor: pointer; font-size: 17px;
  transition: background 200ms ease-out;
}
.assistant-input-row button:hover { background: #5537e0; }
.assistant-input-row button:disabled { opacity: .5; cursor: wait; }
.assistant-disclaimer { margin: 0; padding: 0 17px 13px; color: var(--ink-3); background: var(--paper); font-size: 9px; line-height: 1.45; }
.assistant-float {
  position: fixed; z-index: 80; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 10px;
  padding: 9px 13px 9px 9px; border: 1px solid rgba(81, 50, 255, .62); border-radius: 2px;
  background: rgba(20, 20, 28, .9); backdrop-filter: blur(12px); box-shadow: 0 14px 35px rgba(0,0,0,.35), 0 0 24px rgba(62, 20, 255, .17);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.assistant-float.is-suppressed { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(12px); }
.assistant-float > span:last-child { display: grid; gap: 2px; }
.assistant-float b { font-size: 10px; }
.assistant-float small { color: var(--blue-2); font-size: 7px; }
/* --- Contact ---------------------------------------------------------------
   Replaces the two mailto: buttons. The form posts to the configured endpoint
   and degrades to a prefilled mail link if that endpoint is unreachable. */
/* Honeypot: removed from layout, from tab order and from the a11y tree. */
.toast {
  position: fixed; z-index: 200; left: 50%; bottom: 28px; translate: -50% 20px;
  opacity: 0; pointer-events: none; padding: 10px 15px; border: 1px solid var(--rule-strong);
  border-radius: 2px; background: var(--paper-2); color: #dbd9f6; box-shadow: var(--shadow);
  font-size: 11px; transition: opacity 150ms ease, translate 150ms ease;
}
.toast.show { opacity: 1; translate: -50% 0; }
@media (max-width: 1180px) {
  :root { --shell: min(100% - 40px, 1100px); }
  .site-header { padding-inline: 20px; grid-template-columns: 180px 1fr 160px; }
  .site-nav { gap: 0; }
  .nav-trigger { padding: 8px 8px; font-size: 12.5px; }
  .site-nav .status-nav-link { margin-left: 8px; font-size: 12px; }
  .system-card { display: none; }
  .hero-content > p { width: min(620px, 60vw); }
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
  .trust-strip > div:nth-child(3) { border-right: 0; }
  .trust-strip > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .solution-grid { grid-template-columns: 1fr 1fr; }
  .hardware-product { grid-template-columns: 1fr; }
  .hardware-visual { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--line); }
  .compatibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .complete-system { grid-template-columns: 1fr 1fr; }
  .complete-system > i { display: none; }
  .future-layout { gap: 44px; }
  .integration-journey { grid-template-columns: 1fr 1fr; }
  .integration-journey > i { display: none; }
  .integration-journey article { border: 1px solid var(--rule); }
  .integration-cta { grid-template-columns: 1fr 1fr; }
  .integration-cta > div { grid-column: 1 / -1; }
  .console-grid { grid-template-columns: 1fr 1fr; }
  .result-column { grid-column: 1 / -1; min-height: 440px; border-top: 1px solid var(--line); }
  .console-grid > *:nth-child(2) { border-right: 0; }
  .analysis-result { grid-template-columns: 1fr 1fr; }
  .result-head { grid-column: 1 / -1; }
  .oddy-intro { gap: 48px; }
  .assistant-layout { grid-template-columns: 1fr; gap: 48px; max-width: 940px; margin-inline: auto; }
  .assistant-story { max-width: 720px; }
  .assistant-console { width: 100%; }
  .architecture-flow { grid-template-columns: repeat(3, 1fr); }
  .architecture-flow > i { display: none; }
  .architecture-flow article:last-child { grid-column: 2; }
}
@media (max-width: 780px) {
  :root { --shell: calc(100% - 28px); }
  html { scroll-padding-top: 66px; }
  .site-header { height: 66px; grid-template-columns: 1fr auto auto; }
  .header-cta { display: none; }
  .header-actions { order: 2; gap: 0; }
  .header-login { height: 38px; padding-inline: 13px; font-size: var(--text-sm); }
  .nav-toggle {
    order: 3;
    display: grid; place-content: center; gap: 6px; width: 42px; height: 42px;
    border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
  }
  .nav-toggle span { display: block; width: 18px; height: 1px; background: white; transition: transform 150ms ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 66px 0 auto; display: none; padding: 12px 16px 22px;
    max-height: calc(100dvh - 66px); overflow-y: auto;
    background: rgba(10, 10, 15, .98); border-bottom: 1px solid var(--line);
  }
  .site-nav.open { display: grid; gap: 2px; }

  /* Dropdowns become a stacked accordion; each group opens in flow rather than
     floating over the page. */
  .nav-item { position: static; border-bottom: 1px solid var(--line); }
  .nav-trigger {
    width: 100%; justify-content: space-between; padding: 15px 4px;
    font-size: 15px; color: #dddbf3; border-radius: 2px;
  }
  .nav-trigger:hover, .nav-item.open .nav-trigger { background: transparent; }
  .nav-chevron { width: 13px; height: 13px; }
  .nav-panel {
    position: static; translate: none; transform: none; width: auto;
    padding: 0 0 12px 4px; border: 0; border-radius: 2px;
    background: transparent; backdrop-filter: none; box-shadow: none;
    display: none; opacity: 1; visibility: visible;
  }
  .nav-item.open .nav-panel { display: grid; }
  .nav-panel::before { content: none; }
  .nav-panel a { padding: 9px 8px; }
  .nav-panel b { font-size: 14.5px; }
  .site-nav .status-nav-link { margin: 14px 0 0 4px; font-size: 14px; }
  .hero { min-height: 760px; }
  .hero-art { background-position: 62% center; opacity: .58; }
  .hero-content { padding: 145px 0 84px; }
  .hero-content > p { width: 100%; font-size: 15px; }
  .hero-content > .hero-deployment-note { width: 100%; max-width: 560px; font-size: 10px; line-height: 1.55; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 360px; }
  .trust-strip { margin-top: -22px; grid-template-columns: 1fr 1fr; }
  .trust-strip > div { min-height: 82px; }
  .trust-strip > div:nth-child(2) { border-right: 0; }
  .trust-strip > div:nth-child(3) { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
  .trust-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .trust-strip > div:last-child { grid-column: 1 / -1; }
  .hardware-section, .future-section, .integration-section, .demos-section, .oddy-section, .assistant-section { padding-block: 82px; }
  .section-heading.split { grid-template-columns: 1fr; gap: 15px; align-items: start; }
  .solution-grid, .console-grid, .trust-layout, .trust-cards, .footer-grid { grid-template-columns: 1fr; }
  .hardware-visual { min-height: 420px; }
  .hardware-details { padding: 28px 24px; }
  .hardware-compatibility { padding: 22px; }
  .compatibility-heading { grid-template-columns: 1fr; gap: 13px; }
  .compatibility-heading > span { grid-column: auto; }
  .compatibility-grid { grid-template-columns: 1fr; }
  .compatibility-grid article { min-height: 0; }
  .complete-system { grid-template-columns: 1fr; }
  .future-layout { grid-template-columns: 1fr; gap: 50px; }
  .integration-journey, .integration-cta { grid-template-columns: 1fr; }
  .integration-cta > div { grid-column: auto; }
  .demo-switcher { flex-direction: column; }
  .demo-tab { flex-basis: 70px; width: 100%; }
  .console-bar { padding: 0 14px; }
  .console-bar small { display: none; }
  .runtime-badge { padding: 5px 6px; font-size: 7px; letter-spacing: .04em; }
  .console-grid > * { padding: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dropzone { height: 320px; }
  .scenario-card img { height: 76px; }
  .result-column { grid-column: auto; min-height: 480px; }
  .analysis-result { display: grid; grid-template-columns: 1fr; }
  .result-head { grid-column: auto; }
  .oddy-intro { grid-template-columns: 1fr; gap: 25px; align-items: start; }
  .oddy-origin { max-width: 620px; }
  .oddy-origin p { font-size: 14px; line-height: 1.7; }
  .oddy-gate { grid-template-columns: 1fr; }
  .oddy-record { border-right: 0; border-bottom: 1px solid var(--rule); }
  .oddy-workflow { gap: 20px; }
  .oddy-workflow p { font-size: 12px; line-height: 1.6; }
  .oddy-boundary p { font-size: 12px; }
  .assistant-layout { gap: 40px; }
  .assistant-story > p { font-size: 15px; line-height: 1.65; }
  .assistant-messages { min-height: 240px; max-height: 350px; padding: 17px; }
  .assistant-message { max-width: 94%; }
  .assistant-context-bar { flex-wrap: wrap; }
  .architecture-flow { grid-template-columns: 1fr; }
  .architecture-flow article:last-child { grid-column: auto; }
  .trust-layout { gap: 45px; }
  .footer-grid { gap: 35px; }
}
@media (max-width: 480px) {
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip > div, .trust-strip > div:nth-child(3) { border-right: 0; border-top: 1px solid var(--line); }
  .trust-strip > div:first-child { border-top: 0; }
  .trust-strip > div:last-child { grid-column: auto; }
  .oddy-intro { margin-bottom: 36px; }
  .oddy-facts span { padding: 13px 9px; }
  .oddy-facts small { font-size: 7px; letter-spacing: .08em; }
  .oddy-gate { border-radius: 2px; }
  .oddy-record > header { min-height: 0; padding: 23px 20px; }
  .oddy-record > header h3 { font-size: 23px; }
  .oddy-candidate { padding: 18px 20px; }
  .solution-grid { grid-template-columns: 1fr; }
  .oled-stats { grid-template-columns: 1fr 1fr; }
  .hardware-spec-grid { grid-template-columns: 1fr; }
  .hardware-visual { min-height: 340px; }
  .hardware-callout { display: none; }
  .control-plane-grid { grid-template-columns: 1fr; }
  .deployment-flow { flex-wrap: wrap; }
  .two-fields { grid-template-columns: 1fr; }
  .dropzone { height: 280px; }
  .oddy-record > header, .oddy-result { align-items: flex-start; flex-direction: column; }
  .oddy-build { justify-items: start; }
  .oddy-candidate { grid-template-columns: 1fr; }
  .oddy-coupons { padding-inline: 20px; }
  .oddy-coupons article { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 17px; }
  .oddy-pass { grid-column: 2; }
  .oddy-result p { text-align: left; }
  .oddy-workflow { padding: 24px 20px; }
  .oddy-workflow li { grid-template-columns: 34px 1fr; gap: 12px; }
  .oddy-workflow h3 { font-size: 16px; }
  .oddy-boundary { grid-template-columns: 28px minmax(0, 1fr); padding: 15px; }
  .frame-actions { align-items: stretch; gap: 8px; flex-direction: column; }
  .scenario-list { grid-template-columns: 1fr; }
  .scenario-card { display: grid; grid-template-columns: 98px 1fr; padding: 0; align-items: center; }
  .scenario-card img { height: 68px; border-bottom: 0; border-right: 1px solid var(--rule); }
  .scenario-card > span { padding: 0 10px; }
  .trust-cards { grid-template-columns: 1fr; }
  .assistant-story h2 { font-size: 37px; }
  .assistant-capabilities article { grid-template-columns: 27px 1fr; gap: 10px; padding: 15px 0; }
  .assistant-capabilities b { font-size: 13px; }
  .assistant-capabilities small { font-size: 10px; }
  .assistant-system-line { align-items: flex-start; font-size: 11px; }
  .assistant-console-head { padding-inline: 14px; }
  .assistant-context-bar { gap: 6px; padding-inline: 14px; }
  .assistant-context-bar span { font-size: 7px; }
  .assistant-prompts { display: grid; padding-inline: 16px; }
  .assistant-prompts button { width: 100%; font-size: 9px; }
  .assistant-input-row { grid-template-columns: minmax(0, 1fr) 42px; padding-inline: 14px; }
  .assistant-float { padding-right: 9px; }
  .assistant-float > span:last-child { display: none; }
  .footer-bottom { gap: 10px; flex-direction: column; }
}
/* ===========================================================================
   Routed pages (/oddy-test, /solutions/*)
   Generated from site/_partials/layout.html. These pages have no full-bleed
   hero image, so the fixed header needs clearance from the page itself.
   =========================================================================== */
/* Green reads as "pass" on the verification lists. Routing destinations are not
   verdicts, so they carry the brand hue instead. */

/* --- Oddy test band -------------------------------------------------------
   Same ground and palette as everything else; the section earns its weight
   from the record card, not from a colour of its own. */
.oddy-section {
  padding-block: var(--space-band);
  border-block: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 50% 55% at 22% 8%, rgba(108, 77, 246, .15), transparent 70%),
    #0a0a0f;
}
.oddy-lede {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 5vw, 72px); align-items: end; margin-bottom: 52px;
}
.oddy-lede h2 {
  margin-top: 18px; max-width: 20ch; font-size: var(--text-4xl);
  line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 600;
}
.oddy-lede h2 em { color: var(--violet-3); font-style: normal; }
.oddy-lede > div:last-child > p { color: var(--ink-2); font-size: var(--text-base); line-height: 1.7; }
.oddy-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  color: var(--violet-text); font-size: var(--text-base); font-weight: 500;
  border-bottom: 1px solid rgba(108, 77, 246, .45);
  padding-bottom: 3px;
}
.oddy-link:hover { color: var(--violet-3); }

@media (max-width: 900px) {
  .oddy-lede { grid-template-columns: 1fr; align-items: start; gap: 28px; }
}

/* --- Hardware compatibility grid ------------------------------------------
   Repopulated at runtime from admin-config profiles, so the styling targets the
   element shape app.js produces: span / h4 / b / p. */
.compatibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.compatibility-grid article {
  display: grid; align-content: start; gap: 8px; padding: 26px 24px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
}
.compatibility-grid article.reference { border-color: var(--violet-3); background: var(--violet-tint); }
.compatibility-grid span {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3);
}
.compatibility-grid article.reference span { color: var(--violet-text); }
.compatibility-grid h4 { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--track-head); }
.compatibility-grid b { color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.compatibility-grid p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
@media (max-width: 1100px) { .compatibility-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .compatibility-grid { grid-template-columns: 1fr; } }

/* --- Compliance map --------------------------------------------------------
   Names the regimes reviewers actually cite, and states the limit of the claim
   in the same block rather than in a footnote elsewhere. */
.compliance-map {
  margin-top: 40px; padding: 40px 42px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-2);
}
.compliance-map-lede {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px;
}
.compliance-map dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 0; }
.compliance-map dl > div { display: grid; grid-template-columns: 158px 1fr; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.compliance-map dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.compliance-map dt { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.compliance-map dd { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; }
.compliance-map-note {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule);
  max-width: 84ch; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.65;
}
.compliance-map-note b { color: var(--warn); font-weight: 600; }
@media (max-width: 1000px) {
  .compliance-map { padding: 30px 26px; }
  .compliance-map dl { grid-template-columns: 1fr; gap: 0; }
  .compliance-map dl > div { border-bottom: 1px solid var(--rule); }
  .compliance-map dl > div:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
  .compliance-map dl > div { grid-template-columns: 1fr; gap: 6px; }
}

/* Trademark attribution. Present but set at the quietest level on the page —
   it is a legal necessity, not a reading destination. */


/* Record values swap with the scene; a short fade stops the text snapping. */
.hero-record dd { transition: opacity 250ms ease-out; }
.hero-record.is-swapping dd { opacity: .25; }

@media (max-width: 820px) {
  .hero-tab { font-size: 0.7188rem; padding: 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-clip { transition: none; }
  .hero-box { transition: none; }
}


/* --- Hero conversation -----------------------------------------------------
   Replaces the detection overlay. Bounding boxes say computer vision; an
   exchange says agent — and it can show the thing a box cannot, which is the
   agent declining to act. */
.hero-chat {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; gap: 10px;
}
.hero-chat-turn {
  display: grid; gap: 5px; font-size: 0.8125rem; line-height: 1.5;
  transition: opacity 260ms ease-out;
}
.hero-chat-who {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .13em;
  text-transform: uppercase;
}
.is-operator .hero-chat-who { color: #75758a; }
.is-operator > span:last-child { color: #c8c8d6; }
.is-agent .hero-chat-who { color: var(--violet-3); }
.is-agent .hero-chat-who i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--violet-2);
  box-shadow: 0 0 8px var(--violet-2);
}
.is-agent > span:last-child { color: #e8e8ee; }
.hero-chat-cite {
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .05em;
  color: #6a6a7f; transition: opacity 260ms ease-out;
}
/* Values fade rather than snap when the scene changes. */
.hero-record.is-swapping .hero-chat-turn,
.hero-record.is-swapping .hero-chat-cite,
.hero-record.is-swapping dd { opacity: .2; }

@media (max-width: 1000px) { .hero-panel { max-width: 470px; } }

/* Subpage heroes are on the flat ground, so the claims sit without a scrim. */
.page-hero .hero-claims { margin-top: clamp(30px, 3.5vw, 44px); }
.page-hero .hero-claims li { color: var(--ink-2); }
.page-hero .hero-claims li + li { border-left-color: var(--rule); }
@media (max-width: 820px) {
  .hero-claims { gap: 0; }
  .hero-claims li { width: 100%; white-space: normal; }
  .hero-claims li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .page-hero .hero-claims li + li { border-top-color: var(--rule); }
}

/* --- Ambient background loop -----------------------------------------------
   A drifting halftone field behind otherwise flat sections. Generated by
   tools/make-dither-bg.mjs, not stock: 4px dots on an 8px grid, because a 1px
   dither smears into scanlines under H.264.

   Masked to fade at every edge so it never reads as a video with a boundary,
   and held well below the text it sits behind. */
.contact-section, .band.has-ambient, .page-cta { position: relative; isolation: isolate; overflow: hidden; }
.contact-section > .shell, .band.has-ambient > .shell,
.page-cta > div:not(.band-ambient), .page-cta > .page-cta-actions { position: relative; z-index: 1; }

.band-ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Weighted to the right so it never drifts through the left-aligned copy —
     the same reason the hero scrim is asymmetric. */
  -webkit-mask-image: radial-gradient(ellipse 62% 88% at 76% 48%, #000 4%, transparent 68%);
  mask-image: radial-gradient(ellipse 62% 88% at 76% 48%, #000 4%, transparent 68%);
}
.band-ambient video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .5;
}
.page-cta .band-ambient {
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 78% 50%, #000 5%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 100% at 78% 50%, #000 5%, transparent 70%);
}
.page-cta .band-ambient video { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  /* Nothing is communicated by the drift, so it simply does not run. */
  .band-ambient { display: none; }
}

/* --- Section textures ------------------------------------------------------
   A small family, one per section, so texture marks a section as distinct
   rather than becoming wallpaper. All are pure CSS — no requests, no decode —
   and all are masked so they fade out before reaching any edge.

   Motion is reserved for the CTA moment (.band-ambient). Everything here is
   static, which is what keeps four textures from fighting each other.

   Drawn from the same source as the rest of the identity: engineering paper,
   drawing hatch, survey contours, perforated panel. */
.band-tex {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .8;
}

/* Graph paper — behind the schematic "how it works" spine. */
.tex-grid {
  background-image:
    linear-gradient(rgba(160, 140, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 140, 255, .075) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 76% 74% at 50% 42%, #000 8%, transparent 74%);
  mask-image: radial-gradient(ellipse 76% 74% at 50% 42%, #000 8%, transparent 74%);
}

/* Section hatch, as a drawing marks a cut face — behind the audience section. */
.tex-hatch {
  background-image: repeating-linear-gradient(
    128deg,
    rgba(160, 140, 255, .12) 0 1px,
    transparent 1px 10px
  );
  -webkit-mask-image: radial-gradient(ellipse 66% 92% at 84% 58%, #000 4%, transparent 70%);
  mask-image: radial-gradient(ellipse 66% 92% at 84% 58%, #000 4%, transparent 70%);
}

/* Survey contours — behind security & compliance, where the subject is
   measurement against an external standard. */
.tex-rings {
  background-image: repeating-radial-gradient(
    circle at 86% 22%,
    rgba(160, 140, 255, .13) 0 1px,
    transparent 1px 30px
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 96% at 84% 30%, #000 4%, transparent 66%);
  mask-image: radial-gradient(ellipse 70% 96% at 84% 30%, #000 4%, transparent 66%);
}

/* Perforated panel — behind the hardware section. The mask sits high and right
   because the render now spans the middle of that section full width; centred,
   the pattern painted entirely behind the image where nothing could see it. */
.tex-dots {
  background-image: radial-gradient(circle, rgba(160, 140, 255, .3) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 58% 46% at 78% 12%, #000 2%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 46% at 78% 12%, #000 2%, transparent 72%);
}

/* Any section carrying a texture needs a stacking context and content above it. */
.band.has-tex { position: relative; isolation: isolate; overflow: hidden; }
.band.has-tex > .shell { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  /* These are static, so they stay — only the moving one is dropped. */
  .band-tex { opacity: .4; }
}

/* --- Demo section heading --------------------------------------------------
   The console sits directly below, so the CTA is less about navigation than
   about signalling that this is live and not a screenshot. */
.band-head-demo { max-width: 62ch; }
.band-head-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 10px;
}
.band-head-note {
  max-width: 42ch; color: var(--ink-3);
  font-size: var(--text-sm); line-height: 1.55;
}
@media (max-width: 620px) {
  .band-head-actions .button { width: 100%; }
}

/* The assistant console is live in the page, so the section gets a control
   that puts the cursor in it rather than only describing it. */
.assistant-actions { margin-top: 30px; }

/* --- Three pillars ---------------------------------------------------------
   Replaces the Admit/Deploy/Prove spine. That was a table of contents for the
   page; this is the claim the page exists to make, with each pillar linking to
   the section that proves it. */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pillars article {
  /* index / heading / copy / link. The copy row takes the slack so the three
     links land on one line even when the bodies differ in length. */
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 38px 34px 34px;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: var(--shadow-sm);
}
.pillar-index {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .12em; color: var(--violet-text);
}
.pillars h3 { font-size: var(--text-xl); letter-spacing: var(--track-head); font-weight: 600; }
.pillars p { color: var(--ink-2); font-size: var(--text-base); line-height: 1.6; }
.pillar-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
  color: var(--violet-text); font-size: var(--text-sm); font-weight: 500;
}
.pillar-link .icon { transition: transform 160ms ease; }
.pillar-link:hover .icon { transform: translateX(3px); }


@media (max-width: 1000px) { .pillars { grid-template-columns: 1fr; } }

/* The record handoff between the two demo steps. Muted until a record exists,
   then it lights up — it is the only signal that step one carried over. */
.assistant-loaded {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 11px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--rule);
  background: var(--paper-3);
}
.assistant-loaded i {
  grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3); transition: background 300ms ease, box-shadow 300ms ease;
}
.assistant-loaded b { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.assistant-loaded small { color: var(--ink-3); font-size: 10.5px; }
.assistant-loaded.live { background: var(--violet-tint); border-bottom-color: rgba(108, 77, 246, .3); }
.assistant-loaded.live i { background: var(--violet-2); box-shadow: 0 0 10px var(--violet-2); }
.assistant-loaded.live b { color: var(--ink); }

/* --- Hardware ---------------------------------------------------------------
   The controller render is 2.3:1 even cropped, so it runs full width as a band
   rather than fighting a tall text column beside it. Order is statement, then
   the object, then the detail. */
.hardware-shot {
  margin: 0 0 52px; display: grid; gap: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper-2);
}
.hardware-shot picture { display: block; }
.hardware-shot img { display: block; width: 100%; height: auto; }
.hardware-shot figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 16px 22px; border-top: 1px solid var(--rule);
}
.hardware-shot figcaption b {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.hardware-shot figcaption span { color: var(--ink-3); font-size: var(--text-sm); }

/* Upload previews are filled at runtime, so they cannot carry intrinsic
   dimensions. A fixed aspect ratio reserves the space instead. */
[data-preview] { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* --- Contact: the other door -----------------------------------------------
   The audit CTA asks for procedures, which is a lot to ask of a first visit.
   This gives anyone not ready for that somewhere to go that is not "leave". */
.contact-alt {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule);
}
.contact-alt b { display: block; color: var(--ink); font-size: var(--text-base); font-weight: 600; }
.contact-alt p { margin-top: 6px; max-width: 44ch; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.55; }
.contact-alt-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.contact-alt-links a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--violet-text); font-size: var(--text-sm); font-weight: 500;
}
.contact-alt-links a:hover { color: var(--violet-3); }

/* The picture is the positioning context for the caption and spec strip. */
.shot-frame { position: relative; }

/* Spec strip under the caption — the detail that makes the section read as
   hardware documentation rather than a product photo. */
.shot-spec {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--rule);
}
.shot-spec li {
  flex: 1 1 auto; padding: 13px 22px; border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .04em;
  color: var(--ink-3); white-space: nowrap;
}
.shot-spec li:last-child { border-right: 0; }

/* --- Target matrix ---------------------------------------------------------
   A compatibility table reads more like hardware documentation than a bulleted
   list, and lets the device name and what it runs align in columns. */
.target-matrix { display: grid; margin: 0; }
.target-matrix > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.target-matrix > div:last-of-type { border-bottom: 0; }
.target-matrix dt { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.target-matrix dd {
  margin: 0; font-family: var(--mono); font-size: var(--text-xs);
  color: var(--ink-3); line-height: 1.5;
}
.target-matrix + .solution-more { margin-top: 20px; }

@media (max-width: 1000px) {
  .shot-spec li { flex: 1 1 50%; white-space: normal; }
  .shot-spec li:nth-child(2n) { border-right: 0; }
  .shot-spec li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .target-matrix > div { grid-template-columns: 1fr; gap: 4px; }
}