/* OMEX marketing sites — shared design system.
   Identical in OMEX-Website (omexsuite.com) and OMEX-Connect-Website; change it in OMEX-Website and
   run scripts/sync-shared.mjs so the two sites never drift. */

:root {
  --navy-950: #030b22;
  --navy-900: #061535;
  --navy-800: #0b2050;
  --brand-navy: #011e58;
  --blue-700: #0046c4;
  --blue-600: #0057e6;
  --blue-500: #0064f8;
  --blue-300: #7fb0ff;
  --blue-100: #dbe7ff;
  --blue-50: #eef4ff;

  --ink: #0b1530;
  --ink-soft: #343e5c;
  --ink-muted: #5a6380;
  --ink-faint: #8c93a8;
  --hairline: #e3e7ee;
  --hairline-strong: #cbd2de;
  --canvas: #ffffff;
  --canvas-muted: #f5f7fa;
  --canvas-sunken: #eceff4;

  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.78);
  --on-dark-muted: rgba(255, 255, 255, 0.6);
  --on-dark-hairline: rgba(255, 255, 255, 0.12);

  --success-fg: #0f7a55; --success-bg: #e6f5ee;
  --warning-fg: #9a5800; --warning-bg: #fdf2df;
  --danger-fg: #b42318;  --danger-bg: #fdecea;
  --info-fg: #0050d6;    --info-bg: #eaf1ff;
  --neutral-fg: #4a5368; --neutral-bg: #eef0f4;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter Tight', var(--font-sans);
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(11, 21, 48, 0.06);
  --shadow-menu: 0 1px 2px rgba(11, 21, 48, 0.04), 0 24px 48px -16px rgba(11, 21, 48, 0.18);
  --shadow-window: 0 1px 2px rgba(11, 21, 48, 0.06), 0 16px 32px -12px rgba(11, 21, 48, 0.16), 0 48px 96px -32px rgba(11, 21, 48, 0.24);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --container: 1240px;
  --gutter: 32px;
  --header-h: 72px;
  --section-y: 120px;
}

@media (max-width: 1024px) { :root { --section-y: 96px; } }
@media (max-width: 720px)  { :root { --gutter: 20px; --section-y: 72px; --header-h: 64px; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--blue-100); color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */

.display-1, .display-2, .title-1, .title-2, .title-3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
.display-1 { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.02; font-weight: 600; letter-spacing: -0.032em; }
.display-2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.026em; }
.title-1 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.title-2 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.014em; }
.title-3 { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.008em; }
.lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.body-muted { color: var(--ink-muted); }
.small { font-size: 15px; line-height: 1.55; }
.kicker { display: block; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--blue-600); margin-bottom: 16px; }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn--primary { background: var(--blue-600); color: #fff; border-color: var(--blue-700); }
.btn--primary:hover { background: var(--blue-700); }
.btn--secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline-strong); }
.btn--secondary:hover { border-color: var(--ink-faint); background: var(--canvas-muted); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--canvas-muted); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--blue-50); }
.btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.btn--outline-light:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--blue-600);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow--light { color: #fff; }
.external-icon { width: 12px; height: 12px; opacity: 0.7; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- Product family bar ---------- */

.family-bar { background: var(--navy-950); color: var(--on-dark-soft); font-size: 13px; position: relative; z-index: 31; }
.family-bar__inner { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.family-bar__products, .family-bar__links { display: flex; align-items: center; height: 100%; }
.family-bar__products a, .family-bar__links a {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px;
  color: var(--on-dark-muted); font-weight: 500; transition: color 0.15s var(--ease);
}
.family-bar__products a:first-child { padding-left: 0; }
.family-bar__links a:last-child { padding-right: 0; }
.family-bar a:hover { color: #fff; }
.family-bar__products a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--blue-500); }
.family-bar__label { color: var(--on-dark-muted); padding-right: 14px; margin-right: 2px; border-right: 1px solid var(--on-dark-hairline); }
@media (max-width: 720px) { .family-bar__label, .family-bar__links a:not(:last-child) { display: none; } }

/* ---------- Header and primary navigation ---------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.site-header[data-scrolled], .site-header.is-menu-open { border-bottom-color: var(--hairline); }
.site-header__inner { display: flex; align-items: center; height: var(--header-h); gap: 40px; }
.site-header__brand { flex-shrink: 0; display: flex; align-items: center; }
.site-header__brand img { height: 36px; width: auto; }
.site-header__brand--connect img { height: 38px; }

.primary-nav { display: flex; align-items: center; flex: 1; gap: 24px; }
.primary-nav__list { display: flex; align-items: center; gap: 4px; flex: 1; }
.primary-nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: var(--radius); font-size: 15px; font-weight: 500; color: var(--ink-soft);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.primary-nav__link:hover, .primary-nav__link[aria-expanded='true'] { color: var(--ink); background: var(--canvas-muted); }
.primary-nav__link[aria-current='page'] { color: var(--ink); }
.primary-nav__link .chevron { width: 10px; height: 10px; transition: transform 0.2s var(--ease); }
.primary-nav__link[aria-expanded='true'] .chevron { transform: rotate(180deg); }
.primary-nav__actions { display: flex; align-items: center; gap: 8px; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--canvas); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-menu);
}
.mega[hidden] { display: none; }
.mega__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 40px; padding-block: 36px 40px; }
.mega__group h2 { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin-bottom: 14px; }
.mega__group ul { display: grid; gap: 2px; }
.mega__group a {
  display: block; margin-inline: -10px; padding: 7px 10px; border-radius: var(--radius);
  font-size: 15px; font-weight: 500; color: var(--ink); transition: background-color 0.15s var(--ease);
}
.mega__group a:hover { background: var(--canvas-muted); }
.mega__feature {
  display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius-md);
  background: var(--navy-900); color: var(--on-dark-soft); font-size: 15px; line-height: 1.5;
}
.mega__feature img { height: 30px; width: auto; align-self: flex-start; }
.mega__feature p { flex: 1; }
.mega__footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 24px; margin-top: -8px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-muted); }

.nav-toggle { display: none; align-items: center; gap: 10px; margin-left: auto; height: 40px; padding: 0 12px; border-radius: var(--radius); font-size: 15px; font-weight: 600; }
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5.25px; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 1080px) {
  /* A backdrop filter would make the header the containing block of the fixed menu panel. */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--canvas); }
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: var(--nav-top, 108px) 0 0 0; z-index: 29;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--canvas); overflow-y: auto; padding: 8px var(--gutter) 32px;
    border-top: 1px solid var(--hairline);
  }
  .primary-nav:not(.is-open) { display: none; }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; flex: none; }
  .primary-nav__list > li { border-bottom: 1px solid var(--hairline); }
  .primary-nav__link { width: 100%; height: 56px; padding: 0; justify-content: space-between; font-size: 17px; color: var(--ink); border-radius: 0; }
  .primary-nav__link:hover, .primary-nav__link[aria-expanded='true'] { background: none; }
  .mega { position: static; border: 0; box-shadow: none; }
  .mega__inner { grid-template-columns: 1fr 1fr; gap: 24px; padding: 4px 0 24px; }
  .mega__feature, .mega__footer { grid-column: 1 / -1; }
  .mega__footer { margin-top: 0; padding-top: 16px; }
  .primary-nav__actions { flex-direction: column; align-items: stretch; padding-top: 24px; }
  .primary-nav__actions .btn { height: 48px; }
}
@media (max-width: 520px) { .mega__inner { grid-template-columns: 1fr; } }
body.nav-open { overflow: hidden; }

/* ---------- Sections ---------- */

.section { padding-block: var(--section-y); }
.section--muted { background: var(--canvas-muted); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--rule { border-top: 1px solid var(--hairline); }
.section--dark { background: var(--navy-950); color: var(--on-dark-soft); }
.section--dark .display-1, .section--dark .display-2, .section--dark .title-1,
.section--dark .title-2, .section--dark .title-3 { color: #fff; }
.section--dark .lead { color: var(--on-dark-soft); }
.section--dark .kicker { color: var(--blue-300); }

.section-head { max-width: 760px; margin-bottom: 64px; }
.section-head .lead { margin-top: 20px; }
.section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.section-head--split .lead { margin-top: 0; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: 1fr; } .section-head { margin-bottom: 48px; } }

/* ---------- Hero ---------- */

.hero { position: relative; padding-block: 88px 0; background: var(--canvas-muted); overflow: hidden; border-bottom: 1px solid var(--hairline); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
/* The contained hero gives the window every pixel the copy does not need, so the whole
   screen fits between the gutters instead of running off the right edge. The headline is
   sized to the narrower column so that "Delivered at 14:32." still lands on one line. */
.hero__grid--contained { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 48px; }
.hero__grid--contained .display-1 { font-size: clamp(38px, 3.9vw, 54px); }
.hero__copy { padding-bottom: 96px; }
.hero__copy .lead { margin-top: 24px; max-width: 540px; }
.hero__copy .actions { margin-top: 40px; }
/* The window runs off the right edge of the viewport, wherever the container ends. */
.hero__note { margin-top: 20px; font-size: 14px; color: var(--ink-muted); }
.hero__visual { --bleed: calc((100vw - min(100vw, var(--container) + var(--gutter) * 2)) / 2 + var(--gutter) + 72px); position: relative; align-self: end; margin-right: calc(-1 * var(--bleed)); padding-top: 8px; }
.hero__visual .ui { border-right: 0; border-top-right-radius: 0; }
.hero__visual .ui { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.hero__device { position: absolute; left: -48px; bottom: 32px; z-index: 2; }
/* Contained hero: one complete screen inside the page, nothing sliced by the viewport edge.
   The bleeding hero above is still used where a handheld sits over the window; both modes
   live here because the stylesheet is shared between the two marketing sites. */
.hero__visual--contained { margin-right: 0; }
.hero__visual--contained .ui { border-right: 1px solid var(--hairline-strong); border-top-right-radius: var(--radius-lg); }

/* Dark hero. The pale version read as an empty grey band: the brand only showed up in one
   button. This is the same navy and grid the share card is drawn on, which puts the product
   window where it belongs — the brightest thing on the screen. Scoped to a modifier because
   the light hero above is still what Connect uses. */
.hero--dark { background: radial-gradient(128% 118% at 6% 0%, var(--navy-800) 0%, var(--navy-900) 44%, var(--navy-950) 100%); border-bottom: 0; }
.hero--dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(85% 78% at 16% 6%, #000 0%, transparent 70%);
  mask-image: radial-gradient(85% 78% at 16% 6%, #000 0%, transparent 70%);
}
.hero--dark .hero__grid { position: relative; z-index: 1; }
.hero--dark .display-1 { color: #fff; }
.hero--dark .lead { color: var(--on-dark-soft); }
.hero--dark .ui { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 48px 96px -28px rgba(0, 0, 0, 0.6); }
@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__copy { padding-bottom: 0; max-width: 680px; }
  .hero__visual { margin-left: 64px; }
}
@media (max-width: 720px) {
  .hero { padding-top: 56px; }
  .hero__visual { margin-left: 0; }
  .hero__device { display: none; }
}

.page-hero { padding-block: 96px 80px; background: var(--canvas-muted); border-bottom: 1px solid var(--hairline); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.page-hero .lead { margin-top: 24px; max-width: 620px; }
.page-hero__aside { font-size: 15px; color: var(--ink-muted); padding-left: 24px; border-left: 1px solid var(--hairline-strong); }
.page-hero__aside .actions { margin-top: 20px; }
@media (max-width: 900px) { .page-hero { padding-block: 64px 56px; } .page-hero__grid { grid-template-columns: 1fr; } }

/* ---------- Fact strip under the hero ---------- */

.strip { border-bottom: 1px solid var(--hairline); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts > div { padding: 32px 32px 32px 0; }
.facts > div + div { padding-left: 32px; border-left: 1px solid var(--hairline); }
.facts dt { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.facts dd { margin-top: 4px; font-size: 15px; color: var(--ink-muted); }
@media (max-width: 1024px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div, .facts > div + div { padding: 20px 0; border-left: 0; }
  .facts > div + div { border-top: 1px solid var(--hairline); }
}

/* ---------- Capability map ---------- */

.map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.map__cell { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--canvas); transition: background-color 0.2s var(--ease); }
.map__cell:hover { background: #fbfcfd; }
.map__cell p { font-size: 15px; color: var(--ink-muted); }
/* What the area gets you, then what it covers. A cell leads with the result, not a tag list. */
.map__cell .map__result { font-size: 17px; line-height: 1.45; color: var(--ink); }
.map__cell .map__covers { font-size: 14px; color: var(--ink-muted); }
.map__cell .link-arrow { margin-top: auto; padding-top: 16px; }
@media (max-width: 1024px) { .map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .map { grid-template-columns: 1fr; } .map__cell { padding: 24px; } }

/* ---------- Process tabs ---------- */

.tabs__list { display: flex; gap: 8px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; margin-bottom: 56px; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative; flex-shrink: 0; padding: 16px 4px; margin-right: 24px;
  font-size: 16px; font-weight: 500; color: var(--ink-muted); transition: color 0.15s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected='true'] { color: var(--ink); font-weight: 600; }
.tabs__tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-600); }
.tabs__panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.tabs__panel[hidden] { display: none; }
.tabs__panel .lead { margin-top: 16px; }
.js .tabs__panel:not([hidden]) { animation: panel-in 0.4s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .tabs__panel { grid-template-columns: 1fr; gap: 40px; } }

.timeline { margin-top: 32px; display: grid; }
.timeline li { position: relative; padding: 0 0 22px 28px; font-size: 15px; color: var(--ink-muted); }
.timeline li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--canvas); border: 1.5px solid var(--blue-600); }
.timeline li::after { content: ''; position: absolute; left: 7.25px; top: 20px; bottom: 0; width: 1px; background: var(--hairline-strong); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline strong { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* ---------- Cards: industries, audiences ---------- */

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .card-grid, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid, .card-grid--2, .card-grid--4 { grid-template-columns: 1fr; } }

.photo-card { display: flex; flex-direction: column; gap: 20px; }
.photo-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--canvas-sunken); }
.photo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.photo-card:hover .photo-card__media img { transform: scale(1.03); }
.photo-card p { margin-top: 8px; font-size: 15px; color: var(--ink-muted); }
.photo-card .link-arrow { margin-top: 12px; }

/* Compact operational panel used in card grids, in place of photography. */
.tile {
  display: flex; flex-direction: column; height: 100%; padding: 22px 24px;
  border-radius: var(--radius-lg); color: var(--on-dark); overflow: hidden;
  background: radial-gradient(135% 120% at 10% 0%, var(--navy-800) 0%, var(--navy-900) 52%, var(--navy-950) 100%);
}
.tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; }
.tile__top em { font-style: normal; font-size: 12px; color: var(--on-dark-muted); }
.tile__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px 0; min-height: 0; }
.tile__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 13px; color: var(--on-dark-soft); }
.tile__bar > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__bar > b { grid-area: 1 / 2; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--on-dark); }
.tile__bar > i { grid-area: 2 / 1 / 3 / 3; display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.tile__bar u { display: block; height: 100%; border-radius: 999px; background: var(--blue-500); text-decoration: none; }
.tile__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--on-dark-soft); }
.tile__row b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--on-dark); }
.tile__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; border-top: 1px solid var(--on-dark-hairline); }
.tile__stats dt { font-size: 12px; color: var(--on-dark-muted); }
.tile__stats dd { margin-top: 2px; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tile__stats dd.up { color: #7ee2b8; }
.tile__stats dd.warn { color: #fbc96b; }

/* Somewhere for a handheld to stand on its own, rather than over the top of an app window. */
.device-stage { display: grid; place-items: center; padding: 56px 24px; border-radius: var(--radius-lg); background: var(--canvas-sunken); }
@media (max-width: 640px) { .device-stage { padding: 32px 16px; } }

.panel { padding: 40px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); }
.panel .lead { margin-top: 12px; font-size: 17px; }
.panel .actions { margin-top: 32px; }
@media (max-width: 640px) { .panel { padding: 28px 24px; } }

.checklist { display: grid; gap: 12px; margin-top: 28px; }
.checklist li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-soft); }
.checklist li::before {
  content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px;
  border-left: 1.75px solid var(--blue-600); border-bottom: 1.75px solid var(--blue-600); transform: rotate(-45deg);
}
.section--dark .checklist li { color: var(--on-dark-soft); }
.section--dark .checklist li::before { border-color: var(--blue-300); }

/* ---------- Statement band: one line that carries weight, no card, no grid ---------- */

.band { padding: 56px 0; }
.band--rule { border-top: 1px solid var(--hairline); }
.band__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.band__inner > p { max-width: 62ch; font-size: 20px; line-height: 1.5; color: var(--ink-soft); }
.band__inner > p b { font-weight: 600; color: var(--ink); }
.band .actions { flex: none; }
.section--dark .band__inner > p { color: var(--on-dark-soft); }
.section--dark .band__inner > p b { color: var(--on-dark); }
@media (max-width: 860px) {
  .band__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .band__inner > p { font-size: 18px; }
}

/* Full-width photograph between sections. Only ever present when build.mjs found a file. */
.photo-band { display: block; background: var(--canvas-sunken); }
.photo-band img { display: block; width: 100%; height: clamp(260px, 38vw, 520px); object-fit: cover; }

/* ---------- Sealed / opened comparison ---------- */

.cmp {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg);
  background: var(--canvas); box-shadow: var(--shadow-window); overflow: hidden;
}
.cmp__panel { padding: 24px 26px 22px; background: var(--canvas-muted); }
.cmp__panel--open { background: var(--canvas); border-left: 1px solid var(--hairline); }
.cmp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.cmp__head span { font-size: 14px; font-weight: 600; color: var(--ink); }
.cmp__head em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.cmp__rows { padding: 6px 0; }
.cmp__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--hairline); }
.cmp__row:last-child { border-bottom: 0; }
.cmp__row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp__row b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cmp__row.is-lead b { color: var(--success-fg); }
.cmp__row.is-lead { background: var(--success-bg); margin: 0 -26px; padding-left: 26px; padding-right: 26px; }
.cmp__dots { flex: none; width: 46px; height: 6px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--hairline-strong) 0 6px, transparent 6px 12px); }
.cmp__note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
@media (max-width: 560px) {
  .cmp { grid-template-columns: 1fr; }
  .cmp__panel--open { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* ---------- Pricing ---------- */

.price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.price__item { padding: 28px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); }
.price__item h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.price__item p { margin-top: 8px; font-size: 15px; color: var(--ink-muted); }
.price__tag { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--blue-600); margin-bottom: 14px; }
@media (max-width: 860px) { .price { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- FAQ ---------- */

.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--hairline-strong); }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline-strong); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 13px; height: 13px; margin-top: 7px;
  background: currentColor; transition: transform 0.2s var(--ease);
  -webkit-mask: var(--plus) center / contain no-repeat; mask: var(--plus) center / contain no-repeat;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue-600); }
.faq summary:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 4px; }
.faq details > p { padding: 0 64px 26px 0; margin-top: -4px; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.faq details > p a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .faq details > p { padding-right: 0; } }

/* ---------- Feature grid ---------- */

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.feature { padding-top: 24px; border-top: 1px solid var(--hairline-strong); }
.feature p { margin-top: 8px; font-size: 15px; color: var(--ink-muted); }
.section--dark .feature { border-top-color: var(--on-dark-hairline); }
.section--dark .feature p { color: var(--on-dark-muted); }
@media (max-width: 1024px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Numbered steps ---------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.step { counter-increment: step; position: relative; padding: 0 32px 0 0; }
.step::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: 20px; padding-bottom: 20px;
  font-family: var(--font-mono); font-size: 13px; color: var(--blue-600); border-bottom: 1px solid var(--hairline-strong);
}
.step__when { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--blue-600); }
.step p { margin-top: 8px; font-size: 15px; color: var(--ink-muted); }
.section--dark .step::before { color: var(--blue-300); border-bottom-color: var(--on-dark-hairline); }
.section--dark .step p { color: var(--on-dark-muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { padding-right: 0; } }

/* ---------- Split rows (text + media) ---------- */

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--reverse > :first-child { order: 2; }
.split + .split { margin-top: var(--section-y); }
.split .lead { margin-top: 20px; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--canvas-sunken); }
.split__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.split__meta { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-muted); }
.split__meta ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.split__meta li { font-size: 13px; font-weight: 500; color: var(--ink-soft); padding: 4px 10px; border-radius: 999px; background: var(--canvas-muted); border: 1px solid var(--hairline); }
@media (max-width: 1024px) { .split { grid-template-columns: 1fr; gap: 40px; } .split--reverse > :first-child { order: 0; } }

/* ---------- Sub-navigation (in-page) ---------- */

.subnav { position: sticky; top: var(--header-h); z-index: 20; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.subnav ul { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; flex-shrink: 0; padding: 16px 0; font-size: 15px; font-weight: 500; color: var(--ink-muted); box-shadow: inset 0 -2px 0 transparent; transition: color 0.15s var(--ease), box-shadow 0.15s var(--ease); white-space: nowrap; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current='true'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue-600); }

/* ---------- Cross-product band ---------- */

.crossover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.crossover__logo { height: 44px; width: auto; margin-bottom: 32px; }
.crossover .lead { margin-top: 20px; }
.crossover .actions { margin-top: 36px; }
@media (max-width: 1024px) { .crossover { grid-template-columns: 1fr; gap: 56px; } }

/* ---------- Closing call to action ---------- */

.cta { padding-block: 96px; border-top: 1px solid var(--hairline); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; }
.cta .lead { margin-top: 20px; max-width: 560px; }
.cta .actions { justify-content: flex-end; }
@media (max-width: 900px) { .cta { padding-block: 72px; } .cta__inner { grid-template-columns: 1fr; } .cta .actions { justify-content: flex-start; } }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-950); color: var(--on-dark-muted); font-size: 15px; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding-block: 72px 56px; }
.site-footer__brand img { height: 36px; width: auto; }
.site-footer__brand p { margin-top: 20px; max-width: 300px; line-height: 1.55; }
.site-footer h2 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.site-footer ul { display: grid; gap: 10px; }
.site-footer a { transition: color 0.15s var(--ease); display: inline-flex; align-items: center; gap: 6px; }
.site-footer a:hover { color: #fff; }
.site-footer__family { margin-top: 28px; display: flex; flex-direction: column; gap: 4px; }
.site-footer__family span { font-size: 13px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 24px 32px; border-top: 1px solid var(--on-dark-hairline); font-size: 13px; }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 1024px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }

/* ---------- Forms ---------- */

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form__field { display: grid; gap: 8px; }
.form__field--full { grid-column: 1 / -1; }
.form label { font-size: 14px; font-weight: 600; color: var(--ink); }
.form label .optional { font-weight: 400; color: var(--ink-faint); }
.form input, .form select, .form textarea {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--hairline-strong); background: var(--canvas); color: var(--ink);
  font: inherit; font-size: 16px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form textarea { height: auto; min-height: 132px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.form select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235a6380' stroke-width='1.5'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink-faint); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100); }
.form input[aria-invalid='true'], .form select[aria-invalid='true'], .form textarea[aria-invalid='true'] { border-color: var(--danger-fg); }
.form__error { font-size: 13px; color: var(--danger-fg); }
.form__error:empty { display: none; }
.form__footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.form__legal { font-size: 13px; color: var(--ink-muted); max-width: 380px; }
.form__status { grid-column: 1 / -1; padding: 14px 16px; border-radius: var(--radius); font-size: 15px; }
.form__status[hidden] { display: none; }
.form__status--success { background: var(--success-bg); color: var(--success-fg); }
.form__status--error { background: var(--danger-bg); color: var(--danger-fg); }
.form__status--error a { text-decoration: underline; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.contact__aside .lead { margin-top: 20px; }
.contact__aside .timeline { margin-top: 40px; }
.contact__note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--ink-muted); }
.contact__note a { color: var(--blue-600); font-weight: 600; }
@media (max-width: 1024px) { .contact { grid-template-columns: 1fr; gap: 56px; } }

/* ---------- Choice cards (registration journeys) ---------- */

.choices { display: grid; gap: 12px; }
.choice {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 16px;
  padding: 20px 24px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--canvas);
  cursor: pointer; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.choice:hover { border-color: var(--ink-faint); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__dot { grid-row: 1 / span 3; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--hairline-strong); background: var(--canvas); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.choice__title { font-size: 17px; font-weight: 600; color: var(--ink); }
.choice__text { font-size: 15px; color: var(--ink-muted); }
.choice__helper { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
.choice:has(input:checked) { border-color: var(--blue-600); background: var(--blue-50); box-shadow: 0 0 0 1px var(--blue-600); }
.choice:has(input:checked) .choice__dot { border-color: var(--blue-600); box-shadow: inset 0 0 0 5px var(--blue-600); }
.choice:has(input:focus-visible) { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.choice:has(input:disabled) { cursor: not-allowed; background: var(--canvas-muted); border-color: var(--hairline); }
.choice:has(input:disabled) .choice__title { color: var(--ink-muted); }
.choice:has(input:disabled) .choice__dot { opacity: 0.4; }
.choice__badge { grid-column: 2; justify-self: start; margin-top: 8px; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-fg); }

.register { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.register__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.register__aside .timeline { margin-top: 24px; }
.register__note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-muted); }
.register__paths { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.register__step { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--blue-600); margin-bottom: 12px; }
@media (max-width: 1024px) {
  .register, .register__paths { grid-template-columns: 1fr; gap: 40px; }
  .register__aside { position: static; }
}

/* ---------- Reveal on scroll ---------- */

/* Scoped to .reveal, which omex-web.js sets just before it starts observing, so
   content stays visible if the script is blocked, fails or never arrives. */
.reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.reveal [data-reveal-delay='1'] { transition-delay: 0.08s; }
.reveal [data-reveal-delay='2'] { transition-delay: 0.16s; }
.reveal [data-reveal-delay='3'] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .tabs__panel:not([hidden]) { animation: none; }
}

/* =====================================================================
   Product mock-ups — HTML renderings of real OMEX screens.
   Sized by container queries so they read correctly at any width.
   ===================================================================== */

.ui {
  container-type: inline-size;
  position: relative; overflow: hidden;
  background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-window);
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45; color: var(--ink);
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  user-select: none;
}
.ui__top { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.ui__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px; color: var(--ink); width: 160px; flex-shrink: 0; }
.ui__brand img { width: 18px; height: auto; }
.ui__crumb { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__crumb b { color: var(--ink); font-weight: 600; }
.ui__crumb i { font-style: normal; color: var(--ink-faint); padding: 0 6px; }
.ui__search { margin-left: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 260px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--radius); background: var(--canvas-muted); border: 1px solid var(--hairline); color: var(--ink-faint); white-space: nowrap; }
.ui__search kbd { font-family: var(--font-sans); font-size: 10.5px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--hairline-strong); background: var(--canvas); color: var(--ink-muted); }
.ui__avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--blue-50); color: var(--blue-700); font-weight: 600; font-size: 10.5px; }
.ui__body { display: flex; min-height: 0; }
.ui__rail { width: 176px; flex-shrink: 0; padding: 14px 10px; background: var(--navy-900); color: rgba(255, 255, 255, 0.62); display: grid; align-content: start; gap: 1px; }
.ui__rail span { display: block; padding: 6px 10px; border-radius: 5px; white-space: nowrap; }
.ui__rail span.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 500; }
.ui__rail em { display: block; font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, 0.38); padding: 12px 10px 4px; }
.ui__rail em:first-child { padding-top: 2px; }
.ui__main { flex: 1; min-width: 0; padding: 20px 22px 22px; }
.ui__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ui__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.ui__sub { margin-top: 2px; color: var(--ink-muted); }
.ui__actions { display: flex; gap: 6px; flex-shrink: 0; }
.ui__btn { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 4px; font-weight: 500; white-space: nowrap; border: 1px solid var(--hairline-strong); background: var(--canvas); }
.ui__btn--primary { background: var(--blue-600); border-color: var(--blue-700); color: #fff; }
.ui__facts { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.ui__fact { padding: 12px 14px; }
.ui__fact + .ui__fact { border-left: 1px solid var(--hairline); }
.ui__fact dt { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__fact dd { margin-top: 4px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.ui__fact small { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-faint); }
.ui__fact small.up { color: var(--success-fg); }
.ui__fact small.warn { color: var(--warning-fg); }
.ui__stages { display: flex; margin-top: 18px; }
.ui__stage { flex: 1; position: relative; padding-top: 14px; color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }
.ui__stage::before { content: ''; position: absolute; top: 0; left: 0; right: 4px; height: 4px; border-radius: 2px; background: var(--canvas-sunken); }
.ui__stage.is-done { color: var(--ink-soft); }
.ui__stage.is-done::before { background: var(--blue-600); }
.ui__stage.is-current { color: var(--ink); font-weight: 600; }
.ui__stage.is-current::before { background: linear-gradient(90deg, var(--blue-600) 50%, var(--blue-100) 50%); }
.ui__toolbar { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.ui__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hairline-strong); color: var(--ink-soft); white-space: nowrap; }
.ui__chip b { font-weight: 600; color: var(--ink); }
.ui__chip.is-on { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
.ui__chip.is-on b { color: var(--blue-700); }
.ui__toolbar .ui__filter { margin-left: auto; color: var(--ink-faint); }
.ui__table { width: 100%; margin-top: 12px; border-collapse: collapse; table-layout: auto; }
.ui__table th { text-align: left; font-weight: 500; color: var(--ink-muted); background: var(--canvas-muted); padding: 8px 10px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.ui__table td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ui__table tr.is-selected td { background: var(--blue-50); }
.ui__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui__table .id { font-family: var(--font-mono); font-size: 11.5px; color: var(--blue-700); }
.ui__table .muted { color: var(--ink-muted); }
.ui__table tr:last-child td { border-bottom: 0; }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.pill--success { background: var(--success-bg); color: var(--success-fg); }
.pill--warning { background: var(--warning-bg); color: var(--warning-fg); }
.pill--danger { background: var(--danger-bg); color: var(--danger-fg); }
.pill--info { background: var(--info-bg); color: var(--info-fg); }
.pill--neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.ui__lane { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas-muted); }
.ui__lane-stop { min-width: 0; }
.ui__lane-stop b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ui__lane-stop span { color: var(--ink-muted); white-space: nowrap; }
.ui__lane-line { flex: 1; position: relative; height: 1px; background: var(--hairline-strong); min-width: 40px; }
.ui__lane-line::before, .ui__lane-line::after { content: ''; position: absolute; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--blue-600); background: var(--canvas); }
.ui__lane-line::before { left: 0; }
.ui__lane-line::after { right: 0; background: var(--blue-600); }
.ui__lane-line span { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 11px; color: var(--ink-muted); background: var(--canvas-muted); padding: 0 6px; white-space: nowrap; }
.ui__deadline { color: var(--warning-fg); font-weight: 600; }

@container (max-width: 760px) {
  .ui__rail { display: none; }
  .ui__search { display: none; }
  .ui__avatar { margin-left: auto; }
  .ui__brand { width: auto; }
  [data-hide~='md'] { display: none; }
  .ui__facts[style*='--cols:4'] { --cols: 2 !important; }
  .ui__facts[style*='--cols:4'] .ui__fact:nth-child(3) { border-left: 0; }
  .ui__facts[style*='--cols:4'] .ui__fact:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}
@container (max-width: 480px) {
  [data-hide~='sm'] { display: none; }
  .ui__main { padding: 16px; }
  .ui__actions .ui__btn:not(.ui__btn--primary) { display: none; }
  .ui__stage { font-size: 0; }
  .ui__crumb { display: none; }
  .ui__facts { --cols: 2 !important; }
  .ui__facts .ui__fact:nth-child(3) { border-left: 0; }
  .ui__facts .ui__fact:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .ui__facts .ui__fact:nth-child(3):last-child { grid-column: 1 / -1; }
  .ui__table th, .ui__table td { padding-inline: 7px; }
  .ui__lane-line span { display: none; }
  .ui__lane-stop span { white-space: normal; }
}
@container (max-width: 400px) {
  [data-hide~='xs'] { display: none; }
}

/* The hero window keeps its menu rail and its search below the shared 760px breakpoint: it is
   the first screen a visitor sees, and an ERP without its menu does not read as an ERP. Under
   560px the column really is too narrow for both, and the rules above take over again. */
@container (min-width: 560px) and (max-width: 760px) {
  .hero__visual--contained .ui__rail { display: grid; }
  .hero__visual--contained .ui__search { display: flex; }
}

/* Handheld device (OMEX Mobile / RF) */
.device {
  width: 232px; padding: 9px; border-radius: 34px; background: #0a1022;
  box-shadow: 0 0 0 1px rgba(11, 21, 48, 0.4), 0 24px 48px -12px rgba(11, 21, 48, 0.45);
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.4; color: var(--ink); font-feature-settings: 'tnum';
  user-select: none;
}
.device__screen { border-radius: 26px; overflow: hidden; background: var(--canvas-muted); }
.device__bar { display: flex; justify-content: space-between; padding: 10px 18px 6px; font-size: 10.5px; font-weight: 600; background: var(--navy-900); color: #fff; }
.device__head { padding: 6px 16px 14px; background: var(--navy-900); color: #fff; }
.device__head small { display: block; color: rgba(255, 255, 255, 0.6); font-size: 10.5px; }
.device__head b { font-size: 15px; font-weight: 600; }
.device__progress { margin-top: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.device__progress span { display: block; height: 100%; background: var(--blue-500); }
.device__body { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.device__card { padding: 10px 12px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--hairline); }
.device__card.is-current { border-color: var(--blue-600); box-shadow: 0 0 0 2px var(--blue-100); }
.device__row { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.device__row > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.device__row b { font-weight: 600; }
.device__row span { color: var(--ink-muted); }
.device__scan { margin-top: 8px; height: 30px; border-radius: 7px; border: 1px solid var(--blue-600); display: grid; place-items: center; white-space: nowrap; overflow: hidden; padding: 0 8px; color: var(--blue-700); font-weight: 600; background: var(--blue-50); }
.device__cta { margin: 0 12px 14px; height: 36px; border-radius: 9px; background: var(--blue-600); color: #fff; display: grid; place-items: center; font-weight: 600; }
.device__done { color: var(--success-fg); font-weight: 600; }