/* OccamIQ: graphite and steel, with molten orange for the brand signal. */

@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-200.c833796fdabe.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-300.c4557c8a3ca4.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-400.3b646991d300.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-500.0717336fb31f.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-600.8960851d691c.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* One theme: graphite is the anchor, steel the neutral, Molten the signal. */
:root {
  --aluminium: #12161c;
  --aluminium-raised: #1a1f27;
  --ink: #e8ebef;
  --ink-2: #b2bac5;
  --ink-3: #8f99a5;
  --rule: rgba(255, 255, 255, 0.1);
  --rule-strong: rgba(255, 255, 255, 0.22);
  --blue: #7aa4ff;
  --blue-hover: #9cbcff;
  --on-blue: #0b1730;
  --accent: #ff5a1f;
  --accent-hover: #ff7340;
  --accent-ink: #ff7a47;
  --on-accent: #15191e;
  --focus: #ff7a47;

  --plate: #0c0f13;
  --plate-raised: #151a21;
  --plate-ink: #e8ebef;
  --plate-ink-2: #a3acb8;
  --plate-rule: rgba(255, 255, 255, 0.1);
  --plate-blue: #6e9bff;
  --cell: #2a313c;
  --cell-scoped: #3a4453;
  --green: #3fb47c;
  --amber: #e2a63a;
  --red: #e5625c;
  --offline: #5d6673;

  --sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 40%);

  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 48px);
  --radius-plate: 22px;
  --radius-control: 10px;
  --motion: 160ms;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background-color: var(--aluminium);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-kerning: normal;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 20;
  padding: 10px 16px; border-radius: var(--radius-control);
  background: var(--accent); color: var(--on-accent);
}
.skip-link:focus { top: 12px; color: var(--on-accent); }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--accent); }
.org[role="button"]:hover .org__frame, .org[role="button"]:focus-visible .org__frame { stroke: var(--accent); }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

/* Type */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.5rem); line-height: 1.08; }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.lede { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p { max-width: var(--measure); color: var(--ink-2); }
.statement { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.45; color: var(--ink) !important; font-weight: 300; }
.prose--document { max-width: 72ch; }
.prose--document h2 { font-size: 1.5rem; font-weight: 400; margin-top: 2em; }
.prose--document h2:first-child { margin-top: 0; }
.link-strong { font-weight: 500; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 20px;
  border-radius: var(--radius-control); border: 1px solid transparent;
  font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion), transform 80ms;
}
.button:active { transform: translateY(1px); }
.button--primary { background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.button--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.button--quiet { color: var(--ink); border-color: var(--rule-strong); background: transparent; }
.button--quiet:hover { color: var(--ink); border-color: var(--ink-3); background: var(--aluminium-raised); }
.button--attention { background: var(--amber); color: #1d1404; }
.button--attention:hover { background: #f0b752; }
.button[disabled] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--aluminium) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--plate-rule);
  color: var(--plate-ink);
}
.site-header__inner {
  max-width: 1240px; margin-inline: auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--plate-ink); text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--plate-ink); }
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 22px; }
.site-nav ul a { color: var(--plate-ink-2); text-decoration: none; font-size: 0.975rem; padding-block: 6px; }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--plate-ink); }
.site-nav ul a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav__actions { display: flex; align-items: center; gap: 16px; }
.site-nav__actions .button { min-height: 40px; padding: 8px 16px; }
.link-signin { color: var(--plate-ink); text-decoration: none; font-weight: 500; }
.link-signin:hover { color: var(--accent); }
.menu-toggle { display: none; }

@media (max-width: 1100px) {
  .js .menu-toggle {
    display: inline-flex; margin-left: auto; align-items: center; min-height: 44px; padding: 8px 14px;
    background: transparent; border: 1px solid var(--plate-rule); border-radius: var(--radius-control); cursor: pointer; color: var(--plate-ink);
  }
  .site-nav { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 8px; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .site-header:has(.site-nav.is-open) { max-height: 100svh; overflow-y: auto; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 12px 0; border-bottom: 1px solid var(--plate-rule); }
  .site-nav ul a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  .site-nav__actions { justify-content: space-between; }
}

/* Sections */
.section { padding-block: clamp(56px, 6.5vw, 92px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section + .section--tight { border-top: 1px solid var(--rule); }
.section__head { display: grid; gap: 18px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.section__head p { color: var(--ink-2); font-size: 1.125rem; max-width: 56ch; }
.split { display: grid; gap: 28px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split--wide { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
}

/* Facts list */
.facts { display: grid; gap: 0; }
.facts__item { padding: 22px 0; border-top: 1px solid var(--rule-strong); display: grid; gap: 8px; }
.facts__item dt { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.005em; }
.facts__item dd { color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) {
  .facts:not(.facts--stacked) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
}
.facts--stacked .facts__item:first-child { border-top: 0; padding-top: 0; }

/* Inner pages */
.page-hero { padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(32px, 5vw, 64px); }
.page-hero .wrap { display: grid; gap: 22px; }
.page-hero h1 { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 5rem); line-height: 1.04; font-weight: 500; letter-spacing: -0.035em; max-width: 18ch; }
.page-hero + .section { padding-top: clamp(8px, 2vw, 24px); border-top: 0; }
.page-hero--compact h1 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); }
.page-security .section--tight h2, .page-privacy .section--tight h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }

/* Contact */
.contact__grid { display: grid; gap: 48px 72px; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }
.form { display: grid; gap: 22px; max-width: 640px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field legend { font-weight: 500; }
.field legend { padding: 0; margin-bottom: 8px; }
.field__optional, .field__hint { color: var(--ink-3); font-weight: 400; }
.field__hint { font-size: 0.875rem; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control);
  background: var(--aluminium-raised);
  transition: border-color var(--motion), box-shadow var(--motion);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field__error { color: #ff8f87; font-size: 0.9375rem; }
.field--choices { gap: 6px; }
.choice { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; padding-block: 4px; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form__progress { color: var(--ink-3); font-size: 0.9375rem; }
.form__status { padding: 14px 16px; border-radius: var(--radius-control); border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.form__noscript { color: var(--ink-2); }
.form-done { display: grid; gap: 14px; padding: 28px; border-radius: var(--radius-plate); border: 1px solid var(--rule-strong); background: var(--aluminium-raised); max-width: 640px; }
.form-done h2 { font-size: 2rem; }
.form-done:focus { outline: none; }
.contact__aside { display: grid; gap: 16px; align-content: start; padding-top: 4px; }
.contact__aside h2 { font-size: 1.375rem; font-weight: 400; }
.contact__aside h2 + p { margin-top: -4px; }
.contact__aside p { color: var(--ink-2); }
.contact__aside h2:not(:first-child) { margin-top: 20px; }
.contact__aside > div { display: grid; gap: 16px; }
.next-steps { padding-left: 1.25em; color: var(--ink-2); display: grid; gap: 8px; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); color: var(--plate-ink); padding-block: 48px; margin-top: 0; }
.site-footer__inner { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 24px; }
.site-footer__brand { display: flex; gap: 14px; align-items: flex-start; }
.site-footer__brand p { color: var(--plate-ink-2); line-height: 1.45; }
.site-footer__brand strong { color: var(--plate-ink); font-weight: 600; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer ul a { color: var(--plate-ink-2); text-decoration: none; }
.site-footer ul a:hover { color: var(--plate-ink); text-decoration: underline; }
.site-footer__note, .site-footer__copy { color: var(--plate-ink-2); font-size: 0.875rem; }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer__note { grid-column: 1; }
  .site-footer__copy { grid-column: 2; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* Partnerships: the customer's outcome connects the different working models. */
.partner-hero { background: radial-gradient(ellipse at 85% 40%, #242b35, transparent 58%); }
.partner-hero .partner-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.partner-hero__copy { display: grid; gap: 24px; }
.partner-hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.7rem); max-width: 16ch; }
.partner-hero__note { color: var(--ink-3); font-size: .875rem; max-width: 46ch; }
.partner-network { display: grid; justify-items: center; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius-plate); background: var(--sheen); }
.partner-network__input, .partner-network__output { display: grid; gap: 6px; width: 100%; text-align: center; }
.partner-network strong { font-size: 1.25rem; font-weight: 500; }
.partner-network span { color: var(--ink-2); font-size: .875rem; }
.partner-network .partner-network__number { color: var(--accent-ink); font-family: var(--mono); font-size: .75rem; }
.partner-network__platform { display: grid; gap: 8px; justify-items: center; margin-block: 24px; padding-block: 24px; border-block: 1px solid var(--rule-strong); width: 100%; text-align: center; }
.partner-network__platform img { width: 90px; height: 96px; object-fit: contain; margin-bottom: 8px; }
.partner-paths { display: grid; gap: 32px; }
.partner-path { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 2px solid var(--rule-strong); min-width: 0; }
.partner-path h3 { font-size: 1.5rem; font-weight: 500; }
.partner-path__number { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.partner-path p, .partner-path ul { color: var(--ink-2); }
.partner-path ul { list-style: none; display: grid; gap: 8px; margin-block: 8px; }
.partner-path li { padding-left: 20px; position: relative; }
.partner-path li::before { content: '→'; position: absolute; left: 0; color: var(--accent-ink); }
.partner-path > a { margin-top: auto; padding-block: 8px; }
.partner-product__capture { overflow: hidden; border: 1px solid var(--rule-strong); border-radius: 12px; min-width: 0; }
.partner-product__capture img { width: 100%; height: auto; }
.partner-product__capture figcaption { font-size: .875rem; color: var(--ink-2); padding: 14px 18px; }
.partner-steps { list-style: none; display: grid; gap: 32px; counter-reset: none; }
.partner-steps li { display: grid; gap: 14px; border-top: 1px solid var(--rule-strong); padding-top: 20px; align-content: start; }
.partner-steps span { font-family: var(--mono); font-size: .8125rem; color: var(--accent-ink); }
.partner-steps p { color: var(--ink-2); }
.partner-questions h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.partner-faq details { border-top: 1px solid var(--rule-strong); }
.partner-faq details:last-child { border-bottom: 1px solid var(--rule-strong); }
.partner-faq summary { padding: 20px 32px 20px 0; min-height: 48px; cursor: pointer; font-weight: 500; }
.partner-faq p { color: var(--ink-2); padding: 0 0 24px; }
@media (min-width: 760px) {
  .partner-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partner-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1101px) {
  .partner-hero .partner-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 64px; }
  .partner-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* A light canvas gives the explanation a distinct place in the story. */
.surface-light {
  --aluminium: #f5f4f2; --aluminium-raised: #ffffff;
  --ink: #15191e; --ink-2: #505963; --ink-3: #616b76;
  --rule: rgba(21, 25, 30, 0.12); --rule-strong: rgba(21, 25, 30, 0.24);
  --accent-ink: #b83c0a; --focus: #b83c0a;
  background: var(--aluminium); color: var(--ink); color-scheme: light;
}
.section__head--split { max-width: none; align-items: end; }
.section__head--split p { max-width: 48ch; }
@media (min-width: 900px) { .section__head--split { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* The mark keeps its hot-metal arrival, with a readable message alongside it. */
.hero { overflow: clip; background: radial-gradient(ellipse at 77% 35%, #252b34 0, transparent 55%); padding-top: clamp(36px, 5vw, 68px); }
.hero__intro { display: grid; gap: 28px; align-items: center; padding-bottom: clamp(36px, 5vw, 64px); }
.hero__copy { display: grid; gap: 26px; position: relative; z-index: 1; }
.availability { display: inline-flex; align-items: center; gap: 9px; justify-self: start; color: var(--ink-2); text-decoration: none; font-size: 0.875rem; }
.availability span { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.availability:hover { color: var(--ink); }
.hero__title { font-size: clamp(2.65rem, 1.15rem + 4.3vw, 4.7rem); line-height: 1.03; font-weight: 500; letter-spacing: -0.045em; text-wrap: pretty; max-width: 15ch; }
.accent-stop { color: var(--accent); }
.hero .lede { max-width: 44ch; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.2rem); }
.hero__mark { display: none; position: relative; aspect-ratio: 15 / 16; width: 100%; max-width: 440px; justify-self: end; }
.hero__mark img, .hero__mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero__mark canvas { opacity: 0; transition: opacity 600ms ease; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.55)); }
.hero__mark.is-live canvas { opacity: 1; }
.hero__mark.is-live img { visibility: hidden; }
.hero__foundation { display: flex; gap: 16px 48px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-block: 22px; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-2); }
.hero__foundation p { color: var(--ink); font-weight: 500; }
.hero__foundation ul { list-style: none; display: flex; gap: 12px 28px; flex-wrap: wrap; }
@media (min-width: 760px) { .hero__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; } .hero__mark { display: block; } }

/* From intent to evidence: the step rail controls one concrete example. */
.workflow__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--ink-2); font-size: 0.875rem; }
.workflow__sources > span:not(:last-child) { border: 1px solid var(--rule-strong); padding: 5px 14px; border-radius: 999px; }
.workflow__sources-end { margin-left: auto; }
.workflow__sources-end span { margin-left: 10px; font-size: 1.25rem; }
.workflow__workbench { border: 1px solid var(--rule-strong); border-radius: 18px; background: #fff; overflow: clip; }
.workflow__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.workflow__rail button { display: flex; align-items: center; text-align: left; gap: 12px; border: 0; border-right: 1px solid var(--rule); background: #eeece9; padding: 22px 18px; cursor: pointer; font-size: 1.0625rem; font-weight: 500; box-shadow: inset 0 -3px transparent; }
.workflow__rail button:last-child { border-right: 0; }
.workflow__rail button:hover { background: #e7e4df; }
.workflow__rail button[aria-selected="true"] { background: #fff; box-shadow: inset 0 -3px var(--accent); }
.workflow__rail small { display: block; font-size: 0.75rem; color: var(--ink-3); font-weight: 400; margin-top: 3px; }
.workflow__number { width: 30px; height: 34px; flex: none; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 0.8125rem; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.workflow__rail [aria-selected="true"] .workflow__number { background: var(--accent); color: var(--on-accent); }
.workflow__panel { display: grid; gap: 28px 48px; padding: clamp(22px, 4vw, 44px); align-items: center; }
.workflow__explanation { display: grid; gap: 18px; }
.step-label { font-size: 0.875rem; color: var(--ink-3); }
.workflow__explanation h3 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; max-width: 22ch; }
.workflow__explanation > p:not(.step-label) { color: var(--ink-2); max-width: 42ch; }
.workflow__detail { font-size: 0.875rem; padding-top: 16px; border-top: 1px solid var(--rule); }
.workflow__bottom { padding: 15px clamp(22px, 4vw, 44px); display: flex; gap: 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule); }
.workflow__bottom p { font-size: 0.8125rem; color: var(--ink-3); }
.text-control { background: none; border: 0; padding: 6px 0; font-size: 0.9375rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.text-control:hover { color: var(--accent-ink); }
.text-control span { margin-left: 12px; }
.scene { color: #e8ebef; background: #15191e; border-radius: 12px; min-height: 316px; padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 16px 30px -20px #15191e; color-scheme: dark; }
.scene__top { display: flex; gap: 12px; justify-content: space-between; align-items: center; font-size: 0.8125rem; }
.mini-brand { font-weight: 500; }
.scene__scope { color: #aeb7c2; padding: 3px 9px; border: 1px solid #3d444d; border-radius: 5px; font-size: 0.75rem; }
.scene blockquote { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; letter-spacing: -0.02em; padding-top: 6px; }
.scene__context { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.75rem; color: #b2bac5; }
.scene__context span { padding: 3px 9px; border: 1px solid #39424b; border-radius: 999px; }
.scene__input { padding: 10px 12px; border: 1px solid #48505a; border-radius: 8px; font-size: 0.8125rem; color: #aeb7c2; display: flex; justify-content: space-between; gap: 12px; margin-top: auto; }
.scene__input span { color: var(--accent); font-size: 1.1rem; }
.scene__checks { list-style: none; display: grid; gap: 16px; }
.scene__checks li { display: flex; gap: 12px; align-items: center; }
.scene__checks li > span { color: #8fdcb5; background: #263e34; width: 24px; height: 24px; border-radius: 50%; text-align: center; font-size: 0.875rem; flex: none; }
.scene strong { font-size: 0.9375rem; font-weight: 500; }
.scene small { display: block; color: #aeb7c2; font-size: 0.8125rem; }
.scene__footer { border-top: 1px solid #39424b; padding-top: 14px; color: #aeb7c2; font-size: 0.8125rem; margin-top: auto; }
.scene h4 { font-size: 1.25rem; letter-spacing: -0.02em; font-weight: 500; margin: 0; }
.scene__status { color: #8fdcb5; background: #263e34; font-size: 0.75rem; padding: 3px 9px; border-radius: 999px; }
.scene__status--attention { color: #f4c977; background: #433722; }
.scene__facts { font-size: 0.8125rem; display: grid; gap: 10px; }
.scene__facts div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 12px; }
.scene__facts dt { color: #aeb7c2; }
.scene__approval { border: 1px solid #61533a; color: #f4c977; padding: 10px 12px; border-radius: 7px; font-size: 0.8125rem; }
.scene__approval span { margin-right: 8px; }
.endpoint-grid { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 5px; padding-block: 12px; }
.endpoint { aspect-ratio: 0.86; background: #3fb47c; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.endpoint--failed { background: #e5625c; }.endpoint--offline { background: repeating-linear-gradient(45deg,#5d6673,#5d6673 3px,#313944 3px,#313944 5px); }
.rollout-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); text-align: center; }
.rollout-results dt { font-size: 0.75rem; color: #aeb7c2; }.rollout-results dd { font-size: 1.65rem; font-weight: 500; }
.scene__receipt { text-align: center; }.scene__receipt p { font-size: 0.8125rem; color: #aeb7c2; margin-top: 4px; }
.receipt-glyph { display: inline-grid; place-items: center; width: 36px; height: 36px; background: #263e34; color: #8fdcb5; border-radius: 50%; margin-bottom: 10px; }
.scene__evidence { list-style: none; display: flex; justify-content: center; gap: 6px 12px; flex-wrap: wrap; color: #aeb7c2; font-size: 0.75rem; }
.product-foundation { display: grid; gap: 14px; margin-top: 30px; }
.product-foundation > span { color: var(--ink-3); font-size: 1.25rem; }
.product-foundation strong { font-size: 1rem; font-weight: 500; }.product-foundation p { color: var(--ink-2); font-size: 0.875rem; }
@media (min-width: 760px) { .workflow__panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 418px; } .product-foundation { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 24px; } }
@media (max-width: 1040px) { .workflow__rail button { padding: 18px 10px; gap: 8px; } .workflow__rail small { display: none; } }
@media (max-width: 600px) { .workflow__rail { grid-template-columns: repeat(5,minmax(0,1fr)); } .workflow__rail button { flex-direction: column; padding: 14px 2px; gap: 8px; font-size: 0.8125rem; text-align: center; } .workflow__number { width: 24px; height: 27px; } .workflow__sources-end { width: 100%; margin-top: 4px; } .workflow__bottom { align-items: start; flex-direction: column; gap: 4px; } .scene { padding: 20px; min-height: 300px; } .product-foundation { grid-template-columns: 1fr; gap: 14px; } .product-foundation > span { display: none; } }

/* Real product captures, with deliberate navigation and an optional timed tour. */
.product { background: #1b2129; }
.gallery__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.gallery__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.gallery__tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--ink-2); cursor: pointer; font-size: 0.9375rem; }
.gallery__tabs button:hover { color: var(--ink); }.gallery__tabs [aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.gallery__play { background: none; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 8px 14px; min-height: 40px; white-space: nowrap; cursor: pointer; font-size: 0.8125rem; }
.gallery__play span { margin-right: 5px; }.gallery__play:hover { background: var(--aluminium-raised); }
.gallery__frame { aspect-ratio: 16 / 10; padding: 12px; background: #333b45; border: 1px solid #5b6572; border-radius: 16px; box-shadow: 0 28px 60px -32px #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery__frame img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; background: #1f1f1f; }
.gallery__caption { padding: 24px 0 16px; display: flex; justify-content: space-between; align-items: start; gap: 18px; min-height: 122px; }
.gallery__caption h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 5px; }.gallery__caption p { color: var(--ink-2); font-size: 0.9375rem; max-width: 65ch; }
.gallery__caption a { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; }
.gallery__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--rule-strong); }.gallery__bottom > p { color: var(--ink-3); font-size: 0.8125rem; }
.gallery__controls, .gallery__dots { display: flex; align-items: center; gap: 8px; }.gallery__controls { gap: 14px; }
.round-control { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule-strong); background: transparent; cursor: pointer; }.round-control:hover { background: #333b45; }
.gallery__dots button { position: relative; width: 24px; height: 32px; background: transparent; border: 0; cursor: pointer; padding: 0; }
.gallery__dots button::before { content: ''; position: absolute; width: 6px; height: 6px; top: 13px; left: 9px; border-radius: 50%; background: #8f99a5; transition: background 160ms, transform 160ms; }
.gallery__dots button[aria-pressed="true"]::before { background: var(--accent); transform: scale(1.5); }
@media (max-width: 700px) { .gallery__toolbar { align-items: start; flex-direction: column; } .gallery__tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; } .gallery__tabs button { padding: 10px; font-size: 0.875rem; text-align: left; } .gallery__frame { padding: 5px; border-radius: 9px; } .gallery__caption { flex-direction: column; min-height: 160px; gap: 10px; padding-top: 20px; } .gallery__bottom { flex-direction: column-reverse; align-items: start; gap: 12px; } }

/* Three lasting benefits, with space instead of a grid of cards. */
.advantages__grid { display: grid; gap: 32px; }
.advantages article { display: grid; gap: 16px; border-top: 1px solid var(--rule-strong); padding-top: 26px; align-content: start; }
.advantages svg { width: 32px; height: 32px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.advantages h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }
.advantages p { color: var(--ink-2); font-size: 1rem; max-width: 38ch; }
@media (min-width: 900px) { .advantages__grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; } }
.audience__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.audience__tab { border: 1px solid var(--rule-strong); border-radius: 999px; background: none; cursor: pointer; padding: 9px 18px; min-height: 44px; font-size: 0.9375rem; color: var(--ink-2); }
.audience__tab:hover { color: var(--ink); }.audience__tab[aria-selected="true"] { color: var(--ink); border-color: var(--accent); background: rgba(255,90,31,0.1); }
.audience__panel { display: grid; gap: 28px 64px; min-height: 280px; }.audience__panel h3 { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.035em; margin-bottom: 20px; }
.audience__panel p { color: var(--ink-2); max-width: 45ch; }
.audience__list { display: grid; gap: 0; }.audience__list div { border-top: 1px solid var(--rule-strong); padding: 14px 0; }.audience__list dt { font-weight: 500; }.audience__list dd { color: var(--ink-2); font-size: 0.9375rem; margin-top: 4px; }
.trust__grid { display: grid; gap: 40px 72px; }.trust h2 { margin-bottom: 22px; }.trust .lede { font-size: 1.125rem; margin-bottom: 26px; }
.trust__facts { display: grid; gap: 0; }.trust__facts div { border-top: 1px solid var(--rule-strong); padding: 17px 0; }.trust__facts dt { font-weight: 500; }.trust__facts dd { color: var(--ink-2); margin-top: 5px; font-size: 0.9375rem; }
@media (min-width: 900px) { .audience__panel, .trust__grid { grid-template-columns: 1fr 1fr; } }
.direction__grid { display: grid; gap: 28px; }.direction article { display: grid; gap: 14px; border-top: 1px solid var(--rule-strong); padding-top: 20px; align-content: start; }.direction__label { font-size: 0.8125rem; color: var(--ink-3); }.direction h3 { font-weight: 500; font-size: 1.25rem; }.direction article p { color: var(--ink-2); font-size: 0.9375rem; max-width: 38ch; }
@media (min-width: 900px) { .direction__grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px; } }
.partner { background: var(--accent); color: var(--on-accent); padding-block: clamp(40px, 5vw, 64px); }.partner__inner { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; justify-content: space-between; }.partner h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.08; font-weight: 500; }.partner p { margin-top: 18px; }.partner__actions { display: grid; gap: 16px; justify-items: start; }.partner__actions > a:not(.button) { color: var(--on-accent); font-size: 0.9375rem; }.button--dark { background: #15191e; color: #fff; }.button--dark:hover { background: #2b323b; color: #fff; }.button--dark span { margin-left: 22px; }
.no-js [role="tablist"], .no-js .gallery__controls, .no-js .gallery__play, .no-js [data-workflow-next] { display: none; }
html:not(.js) [role="tablist"], html:not(.js) .gallery__controls, html:not(.js) .gallery__play, html:not(.js) [data-workflow-next] { display: none; }
html:not(.js) .workflow__panel[hidden], html:not(.js) .gallery__slide[hidden], html:not(.js) .audience__panel[hidden] { display: grid !important; }
html:not(.js) .workflow__panel + .workflow__panel, html:not(.js) .gallery__slide + .gallery__slide, html:not(.js) .audience__panel + .audience__panel { margin-top: 24px; border-top: 1px solid var(--rule); }
@media (max-width: 374px) { .hero__title { font-size: 2.4rem; }.hero__foundation ul { display: grid; gap: 6px; }.scene__top { flex-wrap: wrap; }.scene__facts div { grid-template-columns: 76px minmax(0,1fr); }.gallery__tabs button { padding-inline: 8px; } }

.site-nav ul a.is-current { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.contact__example { padding: 22px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--aluminium-raised); margin-top: 8px; }
.contact__example h2 { margin-bottom: 12px; }
.contact__example p { font-size: 0.9375rem; }
.demo-topics { padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.contact__signin { border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 12px; font-size: 0.875rem; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; column-gap: 18px; }.form > :nth-child(n+6), .form__status { grid-column: 1 / -1; } }
@media (max-width: 880px) { .site-nav ul a.is-current { box-shadow: inset 3px 0 var(--accent); padding-left: 12px; } }

@media (max-width: 759px) {
  .hero__intro { position: relative; }
  .hero__copy .availability { max-width: calc(100% - 94px); min-height: 76px; }
  .hero__mark { display: block; position: absolute; width: 76px; right: var(--gutter); top: 0; }
}