/* =========================================================================
   Throughline CX — marketing site design system
   "Mission control": precise, authoritative, calm.

   Design language
   - Light "instrument paper" base for legibility of dense, technical copy.
   - Dark "console" insets for moments of telemetry / live state.
   - One signal accent (amber) reserved for active/live state and emphasis.
   - IBM Plex Sans (engineered, neutral) + IBM Plex Mono (telemetry labels).
   - Hairline grid, mono section indices, the "throughline" connector motif.
   No gradient heroes, no AI-dashboard glow, no emoji, no exclamation marketing.
   ========================================================================= */

/* ---- 1. Tokens --------------------------------------------------------- */
:root {
  /* Paper (light base) */
  --paper:        #f4f3ef;
  --paper-2:      #eceae2;   /* recessed panel on paper */
  --paper-3:      #e3e1d8;   /* deeper panel / table zebra */

  /* Ink (text on paper) */
  --ink:          #15181c;
  --ink-2:        #3b424a;
  --ink-3:        #585f67;   /* muted labels — ≥4.5:1 on all paper tints */
  --line:         rgba(21, 24, 28, .14);
  --line-2:       rgba(21, 24, 28, .26);
  --field-border: #808487;   /* ≥3:1 on paper for input boundaries (WCAG 1.4.11) */

  /* Console (dark insets) */
  --console:      #0d1116;
  --console-2:    #141a21;   /* raised panel */
  --console-3:    #1c242d;   /* raised + */
  --console-line: rgba(233, 236, 239, .14);
  --console-line-2: rgba(233, 236, 239, .26);
  --field-border-console: #6a717a;   /* ≥3:1 on console-2 for input boundaries */
  --on-console:   #e9ecef;
  --on-console-2: #aab2bb;
  --on-console-3: #79828c;

  /* Signal — the single accent. Amber = active / live / attention. */
  --signal:        #b5701a;  /* mid amber */
  --signal-ink:    #875010;  /* text-safe amber on paper (AA normal text) */
  --signal-bright: #e6a945;  /* amber on dark console */
  --signal-wash:   rgba(181, 112, 26, .10);

  /* Status (used sparingly, never as fake live metrics) */
  --live:         #5aa06a;   /* "in path" / operational dot on console */

  /* Focus — overridden inside .console contexts */
  --focus:        #15181c;

  /* Type */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono",
          Menlo, Consolas, monospace;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* Fluid type scale (1.20 minor-third-ish, widened at display sizes) */
  --fs-micro:  .75rem;                              /* 12 */
  --fs-mono:   .8125rem;                            /* 13 */
  --fs-small:  .9375rem;                            /* 15 */
  --fs-body:   1.0625rem;                           /* 17 */
  --fs-lead:   clamp(1.18rem, 1.05rem + .55vw, 1.4rem);
  --fs-h4:     clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --fs-h3:     clamp(1.35rem, 1.15rem + .9vw, 1.85rem);
  --fs-h2:     clamp(1.8rem, 1.4rem + 1.7vw, 2.9rem);
  --fs-h1:     clamp(2.4rem, 1.7rem + 3.1vw, 4.7rem);

  /* Spacing */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Structure */
  --maxw: 1200px;
  --maxw-text: 68ch;
  --radius: 4px;       /* restrained, near-square — instrument, not bubbly */
  --radius-lg: 8px;
  --header-h: 64px;

  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---- 2. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv05", "tnum" 0;
  overflow-x: clip; /* safety net; root causes are fixed individually */
}
img, svg, video { display: block; max-width: 100%; }
svg { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) { outline: none; }
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Skip-link target is focused programmatically; don't ring the whole region */
#main:focus { outline: none; }
::selection { background: var(--signal); color: #fff; }
::-moz-selection { background: var(--signal); color: #fff; }
hr { border: 0; border-top: 1px solid var(--line); }

/* ---- 3. Typography ----------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -.026em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); letter-spacing: -.018em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }
p  { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -.008em;
  max-width: 60ch;
}
.measure { max-width: var(--maxw-text); }
.prose p + p { margin-top: var(--s-4); }
.prose p { color: var(--ink-2); max-width: 64ch; }

/* Inline code (excludes code inside .code > pre) */
:not(pre) > code {
  font-family: var(--mono);
  font-size: .9em;
  padding: .08em .36em;
  border-radius: 3px;
  background: var(--paper-3);
  color: var(--ink);
  overflow-wrap: break-word;
}
.console :not(pre) > code { background: var(--console-3); color: var(--on-console); }

/* Eyebrow / mono label — the telemetry voice */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--line-2);
  display: inline-block;
}
.eyebrow--bare::before { display: none; }
.eyebrow .idx { color: var(--signal-ink); }

a.link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: color .15s var(--ease), background-size .2s var(--ease);
}
a.link:hover { color: var(--signal-ink); }
a.link--arrow::after {
  content: " \2192";
  font-family: var(--mono);
  white-space: nowrap;
}

/* ---- 4. Layout primitives --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.container--narrow { max-width: 880px; }

section { position: relative; }
.section {
  padding-block: clamp(3.5rem, 7vw, 7rem);
}
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section + .section { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.cluster.u-center { justify-content: center; }
/* Centered context: width-capped text/headings actually center in the container */
.u-center > .lead, .u-center > .measure, .u-center > h2 { margin-inline: auto; }

/* minmax(0,1fr) + min-width:0 children prevent grid blowout from
   scrollable content (pre/code, tables) on narrow viewports. */
.grid { display: grid; gap: var(--gap, var(--s-5)); grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .eyebrow { margin-bottom: var(--s-4); }
.section-head h2 + p { margin-top: var(--s-4); }

/* ---- 5. Dark console context ------------------------------------------ */
.console {
  --focus: var(--signal-bright);
  background: var(--console);
  color: var(--on-console);
}
.console h1, .console h2, .console h3, .console h4 { color: var(--on-console); }
.console .lead { color: var(--on-console-2); }
.console .prose p { color: var(--on-console-2); }
.console .eyebrow { color: var(--on-console-3); }
.console .eyebrow::before { background: var(--console-line-2); }
.console .eyebrow .idx { color: var(--signal-bright); }
.console .section + .section,
.console.section + .section { border-color: var(--console-line); }
.console a.link:hover { color: var(--signal-bright); }
.console hr { border-color: var(--console-line); }

/* ---- 6. Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .72rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease), transform .05s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn .arrow { font-family: var(--mono); transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.console .btn--primary { background: var(--on-console); color: var(--console); border-color: var(--on-console); }
.console .btn--primary:hover { background: #fff; }
.console .btn--ghost { color: var(--on-console); border-color: var(--console-line-2); }
.console .btn--ghost:hover { border-color: var(--on-console); }

/* ---- 7. Header / nav --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
}
.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  list-style: none;
}
.nav__links a {
  position: relative;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--ink-2);
  letter-spacing: -.005em;
  transition: color .15s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"] { font-weight: 500; }
.nav__right { display: none; align-items: center; gap: var(--s-4); }
@media (min-width: 940px) {
  .nav__links, .nav__right { display: flex; }
}

/* Wordmark — Through + line + small cx */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.wordmark .wm-through { font-weight: 600; }
.wordmark .wm-line { font-weight: 400; color: var(--ink-2); }
.wordmark .wm-cx {
  font-family: var(--mono);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--signal-ink);
  margin-left: .35em;
  transform: translateY(-.15em);
}
.console .wordmark { color: var(--on-console); }
.console .wordmark .wm-line { color: var(--on-console-2); }
.console .wordmark .wm-cx { color: var(--signal-bright); }

/* Logomark (v-050 platform-rise) */
.wm-mark { height: 1.5em; width: auto; align-self: center; margin-right: .5rem; flex: none; color: inherit; }
.wm-amber { fill: var(--signal); }
.site-footer .wm-amber, .console .wm-amber { fill: var(--signal-bright); }

/* The wordmark is the way back to the landing page (no "Home" tab by design):
   surface that affordance on hover and keyboard focus — underline the word and
   brighten the signal node. Color-only; nothing layout/motion to gate. */
.wordmark .wm-amber { transition: fill .15s var(--ease); }
.wordmark:hover .wm-through,
.wordmark:hover .wm-line,
.wordmark:focus-visible .wm-through,
.wordmark:focus-visible .wm-line {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.wordmark:hover .wm-amber,
.wordmark:focus-visible .wm-amber { fill: var(--signal-bright); }

/* Mobile nav toggle */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .45rem .6rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (min-width: 940px) { .nav__toggle { display: none; } }
.nav__toggle .bars { display: inline-block; width: 16px; height: 10px; position: relative; }
.nav__toggle .bars::before, .nav__toggle .bars::after,
.nav__toggle .bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav__toggle .bars::before { top: 0; }
.nav__toggle .bars span { top: 4px; }
.nav__toggle .bars::after { top: 8px; }

/* Mobile menu panel */
.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; padding: var(--s-3) 0; }
.mobile-menu li + li { border-top: 1px solid var(--line); }
.mobile-menu a {
  display: block;
  padding: var(--s-3) clamp(1.25rem, 5vw, 3rem);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-small);
}
.mobile-menu a[aria-current="page"] { color: var(--signal-ink); }
.mobile-menu .mm-cta { padding: var(--s-4) clamp(1.25rem, 5vw, 3rem); }
@media (min-width: 940px) { .mobile-menu { display: none !important; } }

/* Skip link */
.skip-link {
  position: absolute; left: var(--s-4); top: -60px;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: var(--radius); z-index: 100;
  font-family: var(--mono); font-size: var(--fs-mono); text-decoration: none;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* ---- 8. Status / telemetry components --------------------------------- */
.statusline {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-family: var(--mono); font-size: var(--fs-mono);
  color: var(--ink-3); letter-spacing: .02em;
}
.statusline .st { display: inline-flex; align-items: center; gap: var(--s-2); }
.statusline .st b { color: var(--ink); font-weight: 500; }
.console .statusline { color: var(--on-console-3); }
.console .statusline .st b { color: var(--on-console); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot--live { background: var(--live); }
.dot--signal { background: var(--signal); }
.dot--pulse { position: relative; }
.dot--pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .5;
  animation: pulse 2.4s var(--ease) infinite;
}
.dot--live.dot--pulse { color: var(--live); }
@keyframes pulse {
  0% { transform: scale(.7); opacity: .6; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dot--pulse::after { animation: none; }
}

/* Maturity tags — the honesty convention */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-3);
  white-space: nowrap;
}
.tag--today { color: var(--ink); border-color: var(--ink); }
.tag--today .dot { background: var(--live); }
.tag--trajectory { color: var(--signal-ink); border-color: color-mix(in srgb, var(--signal) 55%, transparent); }
.tag--trajectory .dot { background: var(--signal); }
.console .tag { color: var(--on-console-3); border-color: var(--console-line-2); }
.console .tag--today { color: var(--on-console); border-color: var(--on-console-2); }
.console .tag--trajectory { color: var(--signal-bright); border-color: color-mix(in srgb, var(--signal-bright) 50%, transparent); }

/* ---- 9. Cards ---------------------------------------------------------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  background: var(--paper);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.card--panel { background: var(--paper-2); border-color: transparent; }
.card__idx { font-family: var(--mono); font-size: var(--fs-mono); color: var(--signal-ink); letter-spacing: .06em; }
.card h3, .card h4 { letter-spacing: -.01em; font-size: var(--fs-h4); }
.card p { color: var(--ink-2); font-size: var(--fs-small); }
.card--link:hover { border-color: var(--ink); }
.console .card { background: var(--console-2); border-color: var(--console-line); }
.console .card--panel { background: var(--console-2); }
.console .card p { color: var(--on-console-2); }
.console .card__idx { color: var(--signal-bright); }

.feature { display: flex; flex-direction: column; gap: var(--s-2); }
.feature .ic { color: var(--signal-ink); }
.console .feature .ic { color: var(--signal-bright); }
.feature h3, .feature h4 { font-size: 1.02rem; letter-spacing: -.008em; }
.feature p { color: var(--ink-2); font-size: var(--fs-small); }
.console .feature p { color: var(--on-console-2); }

/* ---- 10. The throughline motif ---------------------------------------- */
.throughline { display: grid; gap: var(--s-4); }
.tl-track {
  display: grid;
  gap: var(--s-4);
  position: relative;
}
@media (min-width: 860px) {
  .tl-track { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
}
.tl-node {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--paper);
  z-index: 1;
}
.console .tl-node { background: var(--console-2); border-color: var(--console-line); }
.tl-node .tl-idx {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em;
  color: var(--signal-ink); text-transform: uppercase;
}
.console .tl-node .tl-idx { color: var(--signal-bright); }
.tl-node h3, .tl-node h4 { margin-top: var(--s-3); font-size: 1.05rem; }
.tl-node p { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); }
.console .tl-node p { color: var(--on-console-2); }
/* connector */
.tl-node::after {
  content: "";
  position: absolute;
  background: var(--line-2);
  z-index: 0;
}
@media (max-width: 859px) {
  .tl-node::after { left: 50%; bottom: calc(-1 * var(--s-4) - 1px); width: 1px; height: var(--s-4); transform: translateX(-.5px); }
  .tl-node:last-child::after { display: none; }
}
@media (min-width: 860px) {
  .tl-node::after { top: 50%; right: calc(-1 * var(--s-2)); width: var(--s-2); height: 1px; }
  .tl-node:last-child::after { display: none; }
  .console .tl-node::after { background: var(--console-line-2); }
}
.tl-node .tl-arrow {
  position: absolute; color: var(--signal); font-family: var(--mono);
  font-size: .8rem; line-height: 1; z-index: 2;
}
@media (max-width: 859px) {
  .tl-node .tl-arrow { left: 50%; bottom: calc(-1 * var(--s-4) - 4px); transform: translateX(-50%); }
  .tl-node:last-child .tl-arrow { display: none; }
}
@media (min-width: 860px) {
  .tl-node .tl-arrow { top: 50%; right: calc(-1 * var(--s-2) - 3px); transform: translate(50%, -50%); }
  .tl-node:last-child .tl-arrow { display: none; }
}

/* ---- 11. Console "run" diagram (illustrative, not a screenshot) ------- */
.runview {
  border: 1px solid var(--console-line);
  border-radius: var(--radius-lg);
  background: var(--console-2);
  overflow: hidden;
  font-family: var(--mono);
  color: var(--on-console);
  max-width: 100%;
}
.runview__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; min-width: 0;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--console-line);
  font-size: var(--fs-mono);
  color: var(--on-console-2);
}
.runview__bar .label { color: var(--on-console); letter-spacing: .02em; }
.runview__body { padding: var(--s-4); display: grid; gap: var(--s-3); }
.runrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-3);
  font-size: var(--fs-mono);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--console);
  min-width: 0;
}
.runrow > * { min-width: 0; }
.runrow .k { color: var(--on-console-2); overflow-wrap: anywhere; }
.runrow .v { color: var(--on-console); text-align: right; overflow-wrap: anywhere; }
.runrow--gate { border-color: color-mix(in srgb, var(--live) 40%, transparent); }
.runrow--skip { color: var(--on-console-3); }
.runview__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--console-line);
  font-size: var(--fs-mono); color: var(--on-console-3);
}
.runview__foot b { color: var(--on-console); font-weight: 500; }
.meter { height: 4px; background: var(--console-3); border-radius: 999px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--signal-bright); border-radius: 999px; }

/* ---- 12. Spec list / definition rows ---------------------------------- */
.spec { border-top: 1px solid var(--line); }
.spec > div {
  display: grid; gap: var(--s-1) var(--s-5);
  grid-template-columns: 1fr;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .spec > div { grid-template-columns: 220px 1fr; align-items: baseline; }
}
.spec dt, .spec .k {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .04em; color: var(--ink); text-transform: uppercase;
}
.spec dd, .spec .v { color: var(--ink-2); font-size: var(--fs-small); }
.console .spec { border-color: var(--console-line); }
.console .spec > div { border-color: var(--console-line); }
.console .spec dt, .console .spec .k { color: var(--on-console); }
.console .spec dd, .console .spec .v { color: var(--on-console-2); }

/* ---- 13. Numbered step list ------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.step__n {
  counter-increment: step;
  font-family: var(--mono); font-size: var(--fs-mono);
  color: var(--signal-ink); border: 1px solid var(--line-2);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.console .step__n { color: var(--signal-bright); border-color: var(--console-line-2); }
.step h3, .step h4 { font-size: 1.05rem; }
.step p { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--s-1); }
.console .step p { color: var(--on-console-2); }

/* ---- 14. Code block ---------------------------------------------------- */
.code {
  border: 1px solid var(--console-line);
  border-radius: var(--radius-lg);
  background: var(--console);
  color: var(--on-console);
  overflow: hidden;
}
.code__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--console-line);
  font-family: var(--mono); font-size: var(--fs-mono); color: var(--on-console-3);
}
.code pre { padding: var(--s-4); overflow-x: auto; margin: 0; }
.code code {
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.65;
  color: var(--on-console-2); white-space: pre;
}
.code .tok-key { color: var(--signal-bright); }
.code .tok-str { color: #8fcaa0; }
.code .tok-mut { color: var(--on-console-3); }
.copy-btn {
  background: transparent; border: 1px solid var(--console-line-2);
  color: var(--on-console-2); border-radius: var(--radius);
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .08em;
  text-transform: uppercase; padding: .3rem .55rem; cursor: pointer;
}
.copy-btn:hover { color: var(--on-console); border-color: var(--on-console-2); }

/* ---- 15. Callouts / quotes -------------------------------------------- */
.callout {
  border: 1px solid color-mix(in srgb, var(--signal) 32%, var(--line));
  padding: var(--s-4) var(--s-5);
  background: var(--signal-wash);
  border-radius: var(--radius);
}
.console .callout {
  border-color: color-mix(in srgb, var(--signal-bright) 40%, var(--console-line-2));
  background: color-mix(in srgb, var(--signal-bright) 10%, transparent);
}
.callout .eyebrow { margin-bottom: var(--s-2); }
.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.28; letter-spacing: -.01em; color: var(--ink);
  font-weight: 400;
}
.console .pullquote { color: var(--on-console); }

/* Placeholder — clearly marks where real proof goes */
.placeholder {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 9px,
    rgba(21,24,28,.018) 9px, rgba(21,24,28,.018) 18px);
  color: var(--ink-3);
}
.placeholder .ph-tag {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--signal-ink);
  display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2);
}
.placeholder p { font-size: var(--fs-small); }
.console .placeholder { border-color: var(--console-line-2); color: var(--on-console-3); }
.console .placeholder .ph-tag { color: var(--signal-bright); }

/* ---- 16. Tables -------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 560px; }
table.matrix th, table.matrix td {
  text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.matrix thead th {
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
table.matrix tbody th { font-weight: 600; color: var(--ink); }
table.matrix tr:last-child td, table.matrix tr:last-child th { border-bottom: 0; }
table.matrix .cell-mono { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-2); }

/* ---- 16b. Media / video ------------------------------------------------ */
.video-frame { margin: 0 auto; max-width: 960px; }
.video-frame video {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--console);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  object-fit: contain;
}
.video-fallback { padding: var(--s-6); color: var(--on-console-2); font-size: var(--fs-small); }

/* ---- 17. Forms --------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.field .req { color: var(--signal-ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .85rem;
  border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: var(--fs-small);
  transition: border-color .15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: var(--fs-micro); color: var(--ink-3); }
.form-note {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3);
  letter-spacing: .03em;
}
.form-note a { color: var(--signal-ink); text-decoration: underline; text-underline-offset: 2px; }
.console .form-note a { color: var(--signal-bright); }

/* Forms inside the dark console context (e.g. the request-a-demo form).
   Without these, .field label/.hint inherit ink colors and fail contrast on
   the console background (labels were 1.86:1). */
.console .field label { color: var(--on-console-2); }
.console .field .hint { color: var(--on-console-3); }
.console .field .req { color: var(--signal-bright); }
.console .field input,
.console .field select,
.console .field textarea {
  background: var(--console-2);
  color: var(--on-console);
  border-color: var(--field-border-console);
}
.console .field input::placeholder,
.console .field textarea::placeholder { color: var(--on-console-3); }
.console .field input:focus,
.console .field select:focus,
.console .field textarea:focus {
  border-color: var(--on-console);
  outline-color: var(--signal-bright);
}
.console .form-note { color: var(--on-console-3); }

/* ---- 18. Footer -------------------------------------------------------- */
.site-footer { background: var(--console); color: var(--on-console-2); }
.site-footer a { color: var(--on-console-2); text-decoration: none; }
.site-footer a:hover { color: var(--on-console); }
.footer-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr; padding-block: var(--s-8) var(--s-6);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); } }
.footer-col h3 {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-console-3); margin-bottom: var(--s-4); font-weight: 500;
}
.footer-col ul { list-style: none; display: grid; gap: var(--s-3); }
.footer-col li a { font-size: var(--fs-small); }
.footer-brand .wordmark { color: var(--on-console); margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--fs-small); color: var(--on-console-3); max-width: 38ch; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-5); border-top: 1px solid var(--console-line);
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--on-console-3);
  letter-spacing: .03em;
}
.footer-bottom .statusline { color: var(--on-console-3); }

/* ---- 19. Hero ---------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-top: var(--s-5); }
.hero .lead { margin-top: var(--s-5); }
.hero .cluster { margin-top: var(--s-6); }
.hero__meta { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.console .hero__meta { border-color: var(--console-line); }

/* ---- 19b. Gate band — the bolder "compliance in the path" peak -------- */
.gate-band { padding-block: clamp(4rem, 9vw, 8rem); }
.gate-band h2 { font-size: clamp(2rem, 1.3rem + 2.7vw, 3.6rem); max-width: 20ch; }
.gate-band .runview { box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .55); }

/* ---- 20. Page intro band ---------------------------------------------- */
.page-intro { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-intro h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); margin-top: var(--s-4); }
.page-intro .lead { margin-top: var(--s-5); }
.breadcrumb { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-3); letter-spacing: .04em; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

/* ---- 21. CTA band ------------------------------------------------------ */
.cta-band { padding-block: clamp(3rem, 6vw, 5.5rem); }
.cta-band h2 { max-width: 22ch; }
.cta-band .lead { margin-top: var(--s-4); }
.cta-band .cluster { margin-top: var(--s-6); }

/* ---- 22. Utilities ----------------------------------------------------- */
.u-mono { font-family: var(--mono); }
.u-muted { color: var(--ink-3); }
.console .u-muted { color: var(--on-console-3); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-8 { margin-top: var(--s-8); }
.divider-label {
  display: flex; align-items: center; gap: var(--s-4);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.divider-label::before, .divider-label::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.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;
}

/* ---- 23. Reveal-on-scroll (progressive enhancement) -------------------
   Hidden ONLY when JS is present (html.js); without JS everything shows. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.is-in { transition: none; }
}

/* ---- 24. (removed) The .draw-path hero animation was never used in markup. */

/* ---- 25. One scrollable page: section anchors + active header tab -----
   The product page is one continuous scroll; the header tabs anchor to its
   sections, and scroll-spy marks the tab in view with an amber underline. */
main section[id] { scroll-margin-top: calc(var(--header-h) + 14px); }
.nav__links a[aria-current] { color: var(--ink); }
.nav__links a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px; background: var(--signal); border-radius: 2px;
}
.mobile-menu a[aria-current] { color: var(--signal-ink); }

/* ---- 26. Chips (outcome examples) ------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .02em;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .4rem .8rem;
}
.chip .dot { background: var(--live); }
.console .chip { color: var(--on-console); background: var(--console-2); border-color: var(--console-line); }

/* ---- 27. FAQ (native disclosure) -------------------------------------- */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  font-size: 1.05rem; font-weight: 500; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .mark {
  flex: none; width: 1.4rem; height: 1.4rem; position: relative;
  border: 1px solid var(--line-2); border-radius: 50%;
}
.qa summary .mark::before, .qa summary .mark::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink);
}
.qa summary .mark::before { width: .7rem; height: 1.5px; }
.qa summary .mark::after { width: 1.5px; height: .7rem; transition: transform .2s var(--ease); }
.qa details[open] summary .mark::after { transform: rotate(90deg); opacity: 0; }
.qa details[open] summary { color: var(--signal-ink); }
.qa summary:hover { color: var(--signal-ink); }
.qa .qa-body { padding: 0 0 var(--s-5); color: var(--ink-2); max-width: 70ch; }
.qa .qa-body a { color: var(--signal-ink); }
.qa summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* ---- 28. Landing (campaign) chrome -----------------------------------
   Minimal, focused header/footer for the 3CX landing pages: wordmark, one
   CTA, and a language switch — no site nav, so the page is a single funnel. */
.lp-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  min-height: var(--header-h); padding-block: var(--s-2);
}
/* On narrow viewports the actions (language switch + CTA) wrap below the
   wordmark instead of overflowing and clipping the CTA. */
.lp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 480px) { .lp-actions { gap: var(--s-3); } }

.lang-switch {
  font-family: var(--sans-ar);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0;
  text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: .4rem .7rem; white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.lang-switch:hover { border-color: var(--ink); color: var(--ink); }
.site-footer .lang-switch { color: var(--on-console-2); border-color: var(--console-line-2); }
.site-footer .lang-switch:hover { color: var(--on-console); border-color: var(--on-console); }

.lp-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4) var(--s-6); padding-block: var(--s-7);
}
.lp-foot .wordmark { color: var(--on-console); }
.lp-foot__tag {
  color: var(--on-console-3); font-size: var(--fs-small);
  max-width: 56ch; flex: 1 1 260px;
}

/* ---- 29. Arabic + RTL ------------------------------------------------
   IBM Plex Sans Arabic keeps the one-superfamily voice across scripts. The
   mono/uppercase "telemetry" styling doesn't translate — Arabic has no case
   and tracking breaks the cursive joining — so it's neutralized for Arabic
   text while genuinely-Latin tokens (codes, numbers, the wordmark, the console
   readouts) stay in mono and LTR. */
:root {
  --sans-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, system-ui,
             "Segoe UI", Tahoma, sans-serif;
}

[lang="ar"], [dir="rtl"] { font-family: var(--sans-ar); }
[dir="rtl"] body { line-height: 1.8; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  letter-spacing: normal; line-height: 1.2;
}
[dir="rtl"] .lead { letter-spacing: normal; line-height: 1.85; }

/* Neutralize the telemetry-label treatment for Arabic copy. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .tag,
[dir="rtl"] .chip,
[dir="rtl"] .btn,
[dir="rtl"] .statusline,
[dir="rtl"] .field label,
[dir="rtl"] .field .hint,
[dir="rtl"] .card__idx,
[dir="rtl"] .tl-idx,
[dir="rtl"] .footer-col h3,
[dir="rtl"] .divider-label,
[dir="rtl"] .form-note,
[dir="rtl"] .u-mono {
  font-family: var(--sans-ar);
  letter-spacing: normal;
  text-transform: none;
}

/* Console telemetry and code stay LTR even on an Arabic page. */
[dir="rtl"] .runview, [dir="rtl"] .code { direction: ltr; }

/* Directional bits that use physical offsets. */
[dir="rtl"] .skip-link { left: auto; right: var(--s-4); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-3px); }

/* Mirror the throughline connector + arrow for right-to-left reading. */
@media (min-width: 860px) {
  [dir="rtl"] .tl-node::after { right: auto; left: calc(-1 * var(--s-2)); }
  [dir="rtl"] .tl-node .tl-arrow {
    right: auto; left: calc(-1 * var(--s-2) - 3px);
    transform: translate(-50%, -50%);
  }
}