/* «منظومة واحدة» (04-system) — System Canvas styles. Every colour, radius, space and type size comes
   from css/tokens.css (generated from DESIGN.md); the only derived values are the floating-panel
   shadow and the dialog scrim, both mixed from the ink token. */

/* ---------- fonts ---------- */
@font-face { font-family: "Thmanyah Sans"; src: url("../shared/fonts/thmanyah/thmanyahsans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../shared/fonts/thmanyah/thmanyahsans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../shared/fonts/thmanyah/thmanyahsans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../shared/fonts/plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+21B5, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("../shared/fonts/plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+21B5, U+FEFF, U+FFFD; }

/* ---------- derived values ---------- */
:root {
  --shadow-float: 0 12px 32px -8px color-mix(in srgb, var(--color-ink) 10%, transparent);
  --scrim: color-mix(in srgb, var(--color-ink) 40%, transparent);
  --dots: radial-gradient(var(--color-dot) 1px, transparent 1px);
  --node: var(--space-control);
  --hub: 92px;
  --gutter: var(--space-gutter);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--space-bar) + var(--space-md)); }
body {
  font-family: var(--font-thmanyah-sans);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-ink);
  background-color: var(--color-canvas);
  background-image: var(--dots);
  background-size: var(--space-grid) var(--space-grid);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: var(--color-primary-tint); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sys-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { background: var(--color-inverse); color: var(--color-on-inverse); border-radius: var(--radius-md); font-weight: 500; text-decoration: none; }

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

/* Text that sits straight on the canvas gets a canvas-coloured plate so the dot grid stops behind it. */
.plate { background-color: var(--color-canvas); outline: var(--space-sm) solid var(--color-canvas); }

.h2 {
  font-size: clamp(var(--text-headline-sm), 1.6vw + 1rem, var(--text-headline));
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  max-width: 22em;
}
.lead {
  font-size: clamp(var(--text-title-sm), 0.5vw + 0.95rem, var(--text-body-lg));
  line-height: 1.75;
  color: var(--color-ink-muted);
  max-width: 38em;
  text-wrap: pretty;
}
.body-text { color: var(--color-ink-muted); max-width: 38em; }
:lang(en) .hero__title, :lang(en) .h2 { letter-spacing: -0.02em; }

.frame-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink-subtle);
}
.frame-name .icon { width: 15px; height: 15px; }

.section-head { display: grid; gap: var(--space-sm); justify-items: start; margin-block-end: var(--space-xxl); max-width: 46rem; }
.section-head .frame-name { margin-block-end: 0; }

.frame {
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-lg), 3.4vw, var(--space-xxl));
}
.frame__head { display: grid; gap: var(--space-sm); max-width: 46rem; margin-block-end: var(--space-xl); }
.frame__head--row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-xxl); }

.id-chip {
  display: inline-block;
  font-family: var(--font-ibm-plex-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink-muted);
  background: var(--color-panel-2);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-tint);
  color: var(--color-primary-ink);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.keys { display: inline-flex; gap: 3px; direction: ltr; }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-family: var(--font-ibm-plex-mono);
  font-size: var(--text-mono-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink-muted);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
}
.status-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-success); }
.check-list { display: grid; gap: var(--space-xs); }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-body-sm); line-height: 1.65; color: var(--color-ink-muted); }
.check-list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--color-ink); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-height: var(--space-control);
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-hairline-strong);
  text-underline-offset: 5px;
}
.text-link:hover { text-decoration-color: var(--color-primary); }
.text-link .icon { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--space-control);
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-button);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--secondary { background: var(--color-panel); color: var(--color-ink); border-color: var(--color-hairline-strong); }
.btn--secondary:hover { background: var(--color-panel-2); }
.btn--dark { background: var(--color-inverse); color: var(--color-on-inverse); }
.btn--dark:hover { background: var(--color-inverse-hover); }
.btn--lg { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-body); }
.btn--block { width: 100%; }
.btn:disabled { background: var(--color-panel-2); color: var(--color-ink-subtle); border-color: var(--color-hairline); cursor: not-allowed; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--space-control);
  height: var(--space-control);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink);
}
.icon-btn:hover { background: var(--color-panel-2); }
.add-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--space-control);
  padding: 0 14px 0 12px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-full);
  background: var(--color-panel);
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.add-btn .icon { width: 16px; height: 16px; color: var(--color-ink-muted); }
.add-btn:hover { border-color: var(--color-ink-subtle); }
.add-btn[aria-pressed="true"] { background: var(--color-primary-tint); border-color: var(--color-primary); }
.add-btn[aria-pressed="true"] .icon { color: var(--color-primary-ink); }

/* ---------- selection chrome: 1px red box + four square handles ---------- */
.gnode__chip::after,
.tile::after,
.component::after,
.cnode::after,
.preview::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  background:
    linear-gradient(var(--color-panel) 0 0) top 1px left 1px / 5px 5px no-repeat,
    linear-gradient(var(--color-panel) 0 0) top 1px right 1px / 5px 5px no-repeat,
    linear-gradient(var(--color-panel) 0 0) bottom 1px left 1px / 5px 5px no-repeat,
    linear-gradient(var(--color-panel) 0 0) bottom 1px right 1px / 5px 5px no-repeat,
    linear-gradient(var(--color-primary) 0 0) top left / 7px 7px no-repeat,
    linear-gradient(var(--color-primary) 0 0) top right / 7px 7px no-repeat,
    linear-gradient(var(--color-primary) 0 0) bottom left / 7px 7px no-repeat,
    linear-gradient(var(--color-primary) 0 0) bottom right / 7px 7px no-repeat,
    linear-gradient(var(--color-primary) 0 0) top 3px left 3px / calc(100% - 6px) var(--sel-w, 1px) no-repeat,
    linear-gradient(var(--color-primary) 0 0) bottom 3px left 3px / calc(100% - 6px) var(--sel-w, 1px) no-repeat,
    linear-gradient(var(--color-primary) 0 0) top 3px left 3px / var(--sel-w, 1px) calc(100% - 6px) no-repeat,
    linear-gradient(var(--color-primary) 0 0) top 3px right 3px / var(--sel-w, 1px) calc(100% - 6px) no-repeat;
}

/* ---------- header (panel bar) ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-hairline);
}
.bar__inner { position: relative; display: flex; align-items: center; gap: var(--space-md); height: var(--space-bar); }
.bar__brand { display: inline-flex; flex: none; border-radius: var(--radius-xs); }
.bar__brand img { height: 34px; width: auto; }
.bar__nav { flex: 1 1 auto; min-width: 0; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > li { display: flex; align-items: center; min-width: 0; }
/* Owner-written labels (up to 22 characters each) may outgrow the row: they shrink and end in an ellipsis instead of pushing the header tools off screen. */
.nav__link {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--space-control);
  min-height: var(--space-control);
  padding: 0 10px;
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { color: var(--color-ink); background: var(--color-panel-2); }
.nav__link.is-active { color: var(--color-ink); background: var(--color-panel-2); }
.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: var(--space-control);
  margin-inline-start: -8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-subtle);
}
.nav__toggle .icon { width: 16px; height: 16px; transition: transform 0.15s; }
.nav__toggle:hover { color: var(--color-ink); }
.nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.bar__tools { display: flex; align-items: center; gap: var(--space-xs); margin-inline-start: auto; }
.cmdk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 172px;
  height: var(--space-control);
  padding-inline: var(--space-sm) var(--space-xs);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-panel-2);
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}
.cmdk-btn .keys { margin-inline-start: auto; }
.cmdk-btn:hover { border-color: var(--color-hairline-strong); color: var(--color-ink); }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--space-control);
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  color: var(--color-ink);
  font-size: var(--text-body-sm);
  font-weight: 500;
}
.lang-btn:hover { background: var(--color-panel-2); }
.lang-btn .icon { width: 18px; height: 18px; color: var(--color-ink-muted); }
.bar__menu { display: none; }
/* theme toggle and logo swap (spec §3.3): keyed on data-theme, which the boot script sets before first paint */
.theme-btn { border-color: var(--color-hairline-strong); background: var(--color-panel); }
.theme-btn:hover { background: var(--color-panel-2); }
.theme-btn .icon { width: 18px; height: 18px; color: var(--color-ink-muted); }
.theme-btn__sun, .theme-logo--dark { display: none; }
:root[data-theme="dark"] .theme-btn__moon, :root[data-theme="dark"] .theme-logo--light { display: none; }
:root[data-theme="dark"] .theme-btn__sun { display: inline-block; }
:root[data-theme="dark"] .theme-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn__moon, :root:not([data-theme]) .theme-logo--light { display: none; }
  :root:not([data-theme]) .theme-btn__sun { display: inline-block; }
  :root:not([data-theme]) .theme-logo--dark { display: block; }
}

/* mega panels */
.mega {
  position: absolute;
  top: calc(100% + var(--space-xs));
  inset-inline: var(--gutter);
  z-index: 45;
  display: none;
  padding: var(--space-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.mega.is-open { display: block; }
.mega__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-sm); }
.mega__title { font-size: var(--text-label); font-weight: 500; color: var(--color-ink-subtle); }
.mega__title--sub { margin-block: var(--space-lg) var(--space-xs); }
.mega__all { display: inline-flex; align-items: center; gap: var(--space-xxs); min-height: var(--space-control); font-size: var(--text-label); font-weight: 500; color: var(--color-ink); text-decoration: none; }
.mega__all:hover { color: var(--color-primary-ink); }
.mega__all .icon { width: 16px; height: 16px; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-md); }
.mega__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 60px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  text-decoration: none;
}
.mega__link:hover { background: var(--color-panel-2); }
.mega__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-panel); color: var(--color-ink-muted); }
.mega__text { display: grid; min-width: 0; }
.mega__name { font-size: var(--text-body-sm); font-weight: 700; line-height: 1.5; }
.mega__sum { font-size: var(--text-label); line-height: 1.5; color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega__code { font-family: var(--font-ibm-plex-mono); font-size: var(--text-mono-sm); color: var(--color-ink-subtle); }
.mega__agencies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.mega__link--agency { border: 1px solid var(--color-hairline); }
.mega__systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--space-sm); }
.mega__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--space-control);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-body-sm);
  text-decoration: none;
}
.mega__row:hover { background: var(--color-panel-2); }
.mega__row .icon { width: 18px; height: 18px; color: var(--color-ink-muted); }
.mega__row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* drawer (layers panel) */
.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: min(360px, calc(100% - 48px));
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid var(--color-hairline);
  background: var(--color-panel);
  color: var(--color-ink);
}
.drawer[open] { display: flex; flex-direction: column; }
.drawer::backdrop { background: var(--scrim); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-hairline); }
.drawer__title { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-label); font-weight: 500; color: var(--color-ink-subtle); }
.layers { display: grid; gap: 2px; padding: var(--space-xs); overflow-y: auto; }
.layer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--space-control);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
}
.layer .icon { width: 16px; height: 16px; color: var(--color-ink-subtle); }
.layer:hover { background: var(--color-panel-2); }
.layer.is-active { background: var(--color-primary-tint); }
.layer.is-active .icon { color: var(--color-primary-ink); }
.layer--sub { padding-inline-start: var(--space-xl); font-weight: 400; color: var(--color-ink-muted); }
.drawer__foot { display: grid; gap: var(--space-xs); margin-top: auto; padding: var(--space-md); border-top: 1px solid var(--color-hairline); }

/* ---------- hero: the live node graph ---------- */
.hero { padding-block: var(--space-xxl) var(--space-section); overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xxl); align-items: center; }
.hero__copy { display: grid; gap: var(--space-xl); justify-items: start; }
.hero__title {
  font-size: clamp(var(--text-display-sm), 3vw + 1rem, var(--text-display));
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  max-width: 11em;
}
.hero__lead {
  margin-top: var(--space-lg);
  font-size: clamp(var(--text-title-sm), 0.5vw + 0.95rem, var(--text-body-lg));
  color: var(--color-ink-muted);
  max-width: 32em;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__search { margin-top: calc(-1 * var(--space-sm)); }
.search-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--space-control);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
}
.search-hint > .icon { width: 18px; height: 18px; }
.search-hint:hover > span:not(.keys) { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }

.hero__graph { justify-self: end; width: 100%; max-width: 640px; margin: 0; }
.hero__graph > .frame-name { margin-block-end: var(--space-lg); }
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.stage__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.edge { fill: none; stroke: var(--color-hairline-strong); stroke-width: 1; transition: stroke 0.2s, opacity 0.2s; }
.edge-flow {
  fill: none;
  stroke: var(--color-ink-subtle);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  opacity: 0.6;
  animation: edge-flow 1.6s linear infinite;
  transition: stroke 0.2s, opacity 0.2s;
}
@keyframes edge-flow { to { stroke-dashoffset: -12; } }
.stage.has-active .edge:not(.is-active),
.stage.has-active .edge-flow:not(.is-active) { opacity: 0.3; }
.edge.is-active { stroke: var(--color-primary); stroke-width: 1.5; }
.edge-flow.is-active { stroke: var(--color-primary); opacity: 1; }
.stage.is-paused .edge-flow { animation-play-state: paused; }

.stage__nodes { position: absolute; inset: 0; }
.gnode { position: absolute; left: var(--x); top: var(--y); z-index: 1; transform: translate(-50%, -50%); }
.gnode:hover, .gnode:focus-within { z-index: 3; }
.gnode__link { position: relative; display: block; border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; }
.gnode__link:focus-visible { outline: none; }
.gnode__chip {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.15s;
}
.gnode__chip .icon { width: 20px; height: 20px; }
.gnode--service .gnode__chip { border-radius: var(--radius-full); }
.gnode--product .gnode__chip {
  display: flex;
  gap: 10px;
  width: auto;
  height: 50px;
  padding-inline: var(--space-md) 18px;
}
.gnode__name { font-size: var(--text-body-sm); font-weight: 700; line-height: 1; white-space: nowrap; }
[data-graph][data-compact] .gnode--product .gnode__chip { width: 52px; height: 36px; padding: 0; justify-content: center; }
[data-graph][data-compact] .gnode--product .gnode__name { display: none; }
.gnode--hub .gnode__chip {
  width: var(--hub);
  height: var(--hub);
  gap: 6px;
  align-content: center;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.gnode__mark { width: 40px; height: 33px; }
.gnode__hub-name { font-size: var(--text-label); font-weight: 700; line-height: 1; }
.gnode__code {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0 4px;
  background: var(--color-canvas);
  font-family: var(--font-ibm-plex-mono);
  font-size: var(--text-mono-sm);
  line-height: 1.4;
  color: var(--color-ink-subtle);
  white-space: nowrap;
  pointer-events: none;
}
.gnode__link:hover .gnode__chip,
.gnode__link:focus-visible .gnode__chip { border-color: var(--color-primary); }
.gnode__link:hover .gnode__code,
.gnode__link:focus-visible .gnode__code { color: var(--color-ink); }
.gnode__link:hover .gnode__chip::after,
.gnode__link:focus-visible .gnode__chip::after,
.gnode.is-visited .gnode__chip::after { opacity: 1; }
.gnode__link:focus-visible .gnode__chip::after { --sel-w: 2px; }

.tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: min(264px, 74%);
  padding: var(--space-md);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
}
.tip.is-on { opacity: 1; visibility: visible; }
.tip__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-label); color: var(--color-ink-subtle); }
.tip__title { margin-top: var(--space-xs); font-size: var(--text-title-sm); font-weight: 700; line-height: 1.45; }
.tip__text {
  display: -webkit-box;
  margin-top: var(--space-xxs);
  overflow: hidden;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.tip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--text-label);
  font-weight: 500;
}

.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  offset-rotate: 0deg;
  offset-anchor: 4px 4px;
  offset-distance: 0%;
}
.cursor__arrow { display: block; width: 22px; height: 22px; fill: var(--color-primary); stroke: var(--color-panel); stroke-width: 1.4; stroke-linejoin: round; }
.cursor__label {
  position: absolute;
  left: 16px;
  top: 20px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xxl); font-size: var(--text-label); color: var(--color-ink-muted); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend__swatch { width: 12px; height: 12px; border: 1px solid var(--color-ink-subtle); border-radius: 3px; background: var(--color-panel); }
.legend__item--hub .legend__swatch { background: var(--color-primary); border-color: var(--color-primary); }
.legend__item--product .legend__swatch { width: 22px; }
.legend__item--service .legend__swatch { border-radius: var(--radius-full); }
.legend__count { font-family: var(--font-ibm-plex-mono); font-size: var(--text-mono-sm); color: var(--color-ink-muted); background: var(--color-panel-2); padding: 0 5px; border-radius: var(--radius-xs); }
.legend__hint { flex-basis: 100%; color: var(--color-ink-subtle); }

/* ---------- about: canvas notes ---------- */
.about { padding-block: 0 var(--space-section); }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xxxl); align-items: center; }
.about__copy { display: grid; gap: var(--space-md); justify-items: start; }
.about__copy .frame-name { margin-block-end: 0; }
.notes { position: relative; padding-block: var(--space-md) calc(var(--space-xxl) + var(--space-md)); }
.notes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xxl) var(--space-xxxl); }
.note {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 200px;
  padding: var(--space-lg);
  background: var(--color-primary-tint);
  border-radius: var(--radius-xs);
}
.note:nth-child(even) { translate: 0 var(--space-xxl); }
.note__title { font-size: var(--text-title); font-weight: 700; line-height: 1.45; }
.note__text { font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); }
.connector { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.connector__path { fill: none; stroke: var(--color-ink-subtle); stroke-width: 1.5; }
.connector__end { fill: var(--color-panel); stroke: var(--color-ink-subtle); stroke-width: 1.5; }

/* ---------- process: frames joined like a prototype flow ---------- */
.process { padding-block: 0 var(--space-section); }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xxl); }
.flow__step { display: grid; gap: var(--space-sm); align-content: start; }
.flow__name { display: inline-flex; align-items: center; gap: var(--space-xs); justify-self: start; font-size: var(--text-label); line-height: 1.5; color: var(--color-ink-subtle); }
.flow__num { font-family: var(--font-ibm-plex-mono); font-size: var(--text-mono); font-weight: 500; color: var(--color-ink-muted); }
.flow__start {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: 0 var(--space-xs) 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  font-size: var(--text-label);
  font-weight: 500;
}
.flow__start .icon { width: 12px; height: 12px; fill: currentColor; }
.flow__frame {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-height: 180px;
  padding: var(--space-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
.flow__title { font-size: var(--text-title); font-weight: 700; line-height: 1.45; }
.flow__text { font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); }
.flow__link {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(100% + 1px);
  width: calc(var(--space-xxl) - 2px);
  height: 1.5px;
  background: var(--color-ink-subtle);
}
.flow__link::before {
  content: "";
  position: absolute;
  top: -3.5px;
  inset-inline-start: -4px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-panel);
  border: 1.5px solid var(--color-ink-subtle);
}
.flow__link .icon { position: absolute; top: -8px; inset-inline-end: -6px; width: 17px; height: 17px; color: var(--color-ink-subtle); stroke-width: 2; }

/* ---------- services: tool palette + preview ---------- */
.services, .products, .stack, .clients, .blog, .careers, .contact { padding-block: 0 var(--space-section); }
.tools { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--space-lg); }
.tools__palette {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--space-xxs);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
.tool {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 56px;
  padding: 6px var(--space-sm) 6px 6px;
  border-radius: var(--radius-xs);
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}
[dir="rtl"] .tool { padding: 6px 6px 6px var(--space-sm); }
.tool:hover { background: var(--color-panel-2); color: var(--color-ink); }
.tool.is-active { background: var(--color-panel-2); color: var(--color-ink); }
.tool__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-panel); border: 1px solid var(--color-hairline); color: var(--color-ink-muted); }
.tool.is-active .tool__icon { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.tool__code { font-family: var(--font-ibm-plex-mono); font-size: var(--text-mono-sm); color: var(--color-ink-subtle); }
.tool.is-active .tool__code { color: var(--color-ink-muted); }
.tools__canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(var(--space-lg), 4vw, var(--space-xxl));
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
  background-image: var(--dots);
  background-size: var(--space-grid) var(--space-grid);
}
.tools__preview { width: 100%; max-width: 580px; }
.preview { position: relative; display: grid; gap: var(--space-sm); padding: var(--space-xl); background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.preview::after { opacity: 1; }
.preview__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }
.preview__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-panel-2); color: var(--color-ink); }
.preview__icon .icon { width: 18px; height: 18px; }
.preview__title { font-size: var(--text-headline-sm); font-weight: 700; line-height: 1.35; }
.preview__summary { color: var(--color-ink-muted); }
.preview__list-title { margin-top: var(--space-xs); font-size: var(--text-label); font-weight: 500; color: var(--color-ink-subtle); }
.preview__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
.preview__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-hairline); }
.preview__actions .btn { white-space: normal; text-align: center; } /* long English labels wrap instead of widening the preview */

/* ---------- products: component library ---------- */
.lib-group + .lib-group { margin-top: var(--space-xxl); }
.lib-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  margin-block-end: var(--space-lg);
  padding-block-end: var(--space-sm);
  border-bottom: 1px solid var(--color-hairline);
}
.lib-group__title { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-title-sm); font-weight: 700; }
.lib-group__title .icon { width: 18px; height: 18px; color: var(--color-ink-muted); }
.lib-group__note { font-size: var(--text-body-sm); color: var(--color-ink-muted); max-width: 44em; }
.featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
/* A fourth tile (the certified partner) changes the count, not the three-tile layout: two by two from the tablet breakpoint, four across at the widest, one column on phones. */
@media (min-width: 600px) { .featured:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1320px) { .featured:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.component { position: relative; display: grid; grid-template-rows: auto auto 1fr; background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.component:hover::after { opacity: 1; }
.component__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
}
.component__glyph { width: 16px; height: 16px; color: var(--color-ink-muted); }
.component__name { font-weight: 700; font-size: var(--text-body); line-height: 1.4; }
.component__bar .id-chip { margin-inline-start: auto; }
.component__thumb {
  container-type: inline-size;
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: var(--space-lg);
  background-color: var(--color-canvas);
  background-image: var(--dots);
  background-size: var(--space-grid) var(--space-grid);
  border-bottom: 1px solid var(--color-hairline);
}
.component__body { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); }
.component__sector { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }
.component__sector .icon { width: 16px; height: 16px; }
.component__title { font-size: var(--text-title); font-weight: 700; line-height: 1.45; }
.component__title a { text-decoration: none; }
.component__title a:hover { text-decoration: underline; text-decoration-color: var(--color-hairline-strong); text-underline-offset: 5px; }
.component__audience { font-size: var(--text-body-sm); font-weight: 500; color: var(--color-ink); }
.component__summary { font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); }
.component__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
/* Four tiles in more than one column share their row tracks, so the bars, thumbnails and bodies start level across a row and the actions end level.
   The tile's own row gap is zero: the parent's gap stays between the rows of tiles only. Without subgrid the tiles render as they do with three. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 600px) {
    .featured:has(> :nth-child(4)) > .component { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .featured:has(> :nth-child(4)) .component__bar { align-content: start; }
    .featured:has(> :nth-child(4)) .component__body { grid-template-rows: auto auto auto 1fr auto; align-content: stretch; }
  }
  /* Four across: line one of the bar is glyph, name and ID chip; the badge always takes line two. The bar's two lines are shared rows too, so a name that wraps
     in one tile still leaves every badge on one level. */
  @media (min-width: 1320px) {
    .featured:has(> :nth-child(4)) > .component { grid-row: span 4; }
    .featured:has(> :nth-child(4)) .component__bar { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--space-xs); }
    .featured:has(> :nth-child(4)) .component__bar .badge { grid-column: 1 / -1; justify-self: start; }
  }
}

/* mini UI thumbnails (drawn in HTML from the feature lists) */
.mini { width: 100%; max-width: 440px; padding: var(--space-md); background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.mini__title { display: flex; align-items: center; gap: 6px; margin-block-end: var(--space-md); font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }
.mini__title .icon { width: 16px; height: 16px; }
.journey { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xxs); }
.journey::before { content: ""; position: absolute; top: 18px; inset-inline: 12.5%; height: 1.5px; background: var(--color-hairline-strong); }
.journey__step { position: relative; display: grid; justify-items: center; gap: var(--space-xs); text-align: center; }
.journey__node { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-panel); border: 1px solid var(--color-hairline-strong); color: var(--color-ink-muted); }
.journey__node .icon { width: 18px; height: 18px; }
.journey__step.is-on .journey__node { border-color: var(--color-ink); color: var(--color-ink); }
.journey__label { font-size: var(--text-label); line-height: 1.45; color: var(--color-ink-muted); }
/* Four steps side by side need about 350px for the English labels; narrower (the three-card row, phones) they stack along a vertical connector. */
.mini--journey { container-type: inline-size; }
@container (max-width: 359px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .journey::before { top: 18px; bottom: 18px; inset-inline: 17px auto; width: 1.5px; height: auto; }
  .journey__step { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: var(--space-sm); text-align: start; }
}
.mini--school { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-sm); padding: 0; background: none; border: 0; }
.phone { padding: var(--space-sm) var(--space-sm) var(--space-md); background: var(--color-panel); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); }
.phone::before { content: ""; display: block; width: 32px; height: 4px; margin: 0 auto var(--space-sm); border-radius: var(--radius-full); background: var(--color-hairline); }
.phone__title { margin-block-end: var(--space-xs); font-size: var(--text-label); font-weight: 700; }
.phone__rows { display: grid; gap: 6px; }
.phone__rows li { display: flex; align-items: center; gap: 6px; padding: 6px var(--space-xs); border-radius: var(--radius-xs); background: var(--color-panel-2); font-size: var(--text-label); line-height: 1.4; color: var(--color-ink-muted); }
.phone__rows .icon { width: 15px; height: 15px; color: var(--color-ink); }
.phone__rows .status-dot { margin-inline-start: auto; width: 7px; height: 7px; }
.timetable { padding: var(--space-sm); background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.timetable .mini__title { margin-block-end: var(--space-sm); }
.timetable__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.timetable__grid i { display: block; height: 18px; border-radius: 2px; border: 1px solid var(--color-hairline); }
.timetable__grid i.is-set { background: var(--color-panel-2); border-color: var(--color-hairline-strong); }
/* The phone and the timetable side by side need about 280px for the English rows; narrower (the three-card row under 1280px) the phone shows alone, as on phones. */
@container (max-width: 279px) {
  .mini--school { grid-template-columns: minmax(0, 1fr); }
  .timetable { display: none; }
}
.mini__list { display: grid; gap: 6px; font-size: var(--text-label); color: var(--color-ink-muted); }
.mini__list li { display: flex; gap: 6px; }

/* systems library: tiles on one hairline grid */
.library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tile { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-sm); min-height: 250px; padding: var(--space-lg); background: var(--color-panel); }
.tile::after { inset: 3px; }
.tile:hover::after, .tile:has(.tile__link:focus-visible)::after { opacity: 1; }
.tile:has(.tile__link:focus-visible)::after { --sel-w: 2px; }
.tile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.tile__icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); color: var(--color-ink); }
.tile__title { font-size: var(--text-title-sm); font-weight: 700; line-height: 1.5; }
.tile__link { text-decoration: none; }
.tile__link::before { content: ""; position: absolute; inset: 0; }
.tile__link:focus-visible { outline: none; }
.tile__summary { font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); }
.tile__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.tile__more { display: inline-flex; align-items: center; gap: var(--space-xxs); font-size: var(--text-label); font-weight: 500; color: var(--color-ink); }
.tile__more .icon { width: 16px; height: 16px; }
.tile:hover .tile__more { color: var(--color-primary-ink); }
.library__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs) var(--space-xs); margin-top: var(--space-md); color: var(--color-ink-muted); font-size: var(--text-body-sm); }

/* ---------- stack builder ---------- */
.frame--builder { padding: 0; overflow: hidden; }
.builder { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.builder__controls { display: grid; gap: var(--space-lg); align-content: start; padding: clamp(var(--space-lg), 3.4vw, var(--space-xxl)); }
.builder__controls .lead { margin-top: calc(-1 * var(--space-sm)); }
.builder__step { display: grid; gap: var(--space-sm); min-width: 0; margin: 0; padding: 0; border: 0; }
.step-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: 0; font-size: var(--text-body); font-weight: 700; }
.step-title__num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  font-family: var(--font-ibm-plex-mono);
  font-size: var(--text-mono);
}
.step-title__hint { font-size: var(--text-label); font-weight: 400; color: var(--color-ink-subtle); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--space-control);
  padding-inline: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-full);
  background: var(--color-panel);
  color: var(--color-ink-muted);
  font-size: var(--text-body-sm);
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip .icon { width: 18px; height: 18px; color: var(--color-ink-subtle); }
.chip:hover { border-color: var(--color-ink-subtle); color: var(--color-ink); }
.chip[aria-pressed="true"] { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-ink); }
.chip[aria-pressed="true"] .icon { color: var(--color-primary-ink); }
.builder__result {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  border-inline-start: 1px solid var(--color-hairline);
  background-color: var(--color-canvas);
  background-image: var(--dots);
  background-size: var(--space-grid) var(--space-grid);
}
.result__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.result__title { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-title); font-weight: 700; }
.result__title .icon { width: 18px; height: 18px; color: var(--color-ink-muted); }
.result__count { font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }
.result__canvas { height: 224px; }
.result__graph { display: block; width: 100%; height: 100%; overflow: visible; }
.sg-edge { fill: none; stroke: var(--color-ink-subtle); stroke-width: 1.5; }
.sg-edge--empty { stroke: var(--color-hairline-strong); stroke-dasharray: 4 5; }
.sg-slot { fill: var(--color-canvas); stroke: var(--color-hairline-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sg-node { fill: var(--color-panel); stroke: var(--color-hairline-strong); stroke-width: 1; }
.sg-icon { fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.sg-hub { fill: var(--color-primary); }
.sg-mark { color: var(--color-on-primary); }
.sg-edge.is-new { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sg-draw 0.6s ease-out 0.1s forwards; }
.sg-item.is-new { transform-box: fill-box; transform-origin: center; animation: sg-pop 0.3s ease-out both; }
@keyframes sg-draw { to { stroke-dashoffset: 0; } }
@keyframes sg-pop { from { opacity: 0; transform: scale(0.6); } }
.result__empty { font-size: var(--text-body-sm); color: var(--color-ink-muted); }
.result__list { display: grid; gap: 6px; }
.sitem {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 52px;
  padding-inline: var(--space-sm) var(--space-xxs);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.45;
}
.sitem__icon { display: grid; place-items: center; color: var(--color-ink-muted); }
.sitem__icon .icon { width: 18px; height: 18px; }
.sitem__name { min-width: 0; }
.sitem__code { font-family: var(--font-ibm-plex-mono); font-size: var(--text-mono-sm); color: var(--color-ink-subtle); direction: ltr; }
.sitem__remove { display: grid; place-items: center; width: var(--space-control); height: var(--space-control); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-ink-subtle); }
.sitem__remove:hover { background: var(--color-panel-2); color: var(--color-ink); }
.sitem__remove .icon { width: 16px; height: 16px; }
.result__max { font-size: var(--text-label); font-weight: 500; color: var(--color-primary-ink); }
.result__note { font-size: var(--text-label); color: var(--color-ink-subtle); }
.result__empty, .result__max, .result__note, .result__head { background-color: var(--color-canvas); outline: var(--space-xs) solid var(--color-canvas); }

/* ---------- clients: grouped cards with a system filter ---------- */
.clients .section-head { margin-block-end: var(--space-xl); }
.client-filters { margin-block-end: var(--space-xl); }
.client-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.client-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
.client-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-block-end: var(--space-xs); }
.client-card__mono,
.client-card__logo {
  flex: none;
  width: var(--space-control);
  height: var(--space-control);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
.client-card__mono {
  display: grid;
  place-items: center;
  background: var(--color-panel-2);
  color: var(--color-ink);
  font-size: var(--text-title-sm);
  font-weight: 700;
  line-height: 1;
}
.client-card__logo { padding: var(--space-xxs); background: var(--color-logo-plate); object-fit: contain; }
.client-card__name { font-size: var(--text-title-sm); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.client-card__sector { font-size: var(--text-label); font-weight: 500; line-height: 1.5; color: var(--color-ink-subtle); }
.client-card__intro { font-size: var(--text-body-sm); line-height: 1.65; color: var(--color-ink-muted); }
.client-card__foot { margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-hairline); }
.client-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  max-width: 100%;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-panel-2);
  color: var(--color-ink-muted);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.5;
}
.client-tag .icon { flex: none; width: 14px; height: 14px; color: var(--color-ink-subtle); }
.client-group__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-height: var(--space-control);
  margin-top: var(--space-sm);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
}
.client-group__more .icon { width: 16px; height: 16px; }
.client-group__more:hover { color: var(--color-primary-ink); }
.client-empty { color: var(--color-ink-muted); }

/* ---------- blog: the knowledge log ---------- */
.log { display: grid; border-top: 1px solid var(--color-hairline); }
.log__entry {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-xs) var(--space-xl);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}
.log__tags { display: grid; gap: var(--space-xs); justify-items: start; }
.log__slug { font-family: var(--font-ibm-plex-mono); font-size: var(--text-mono); font-weight: 500; color: var(--color-ink-muted); background: var(--color-panel-2); padding: 2px var(--space-xs); border-radius: var(--radius-xs); }
.log__cat { font-size: var(--text-label); font-weight: 500; color: var(--color-ink-subtle); }
.log__title { font-size: var(--text-title); font-weight: 700; line-height: 1.45; }
.log__excerpt { margin-top: var(--space-xxs); font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); max-width: 44em; }
.log__status { display: inline-flex; align-items: center; gap: var(--space-xs); padding-top: 6px; font-size: var(--text-label); font-weight: 500; color: var(--color-ink-subtle); white-space: nowrap; text-decoration: none; }
.log__status.is-live { color: var(--color-ink); }
.blog__all { margin-block-start: var(--space-lg); }

/* ---------- careers: an invite panel ---------- */
.careers__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xxxl); align-items: center; }
.careers__copy { display: grid; gap: var(--space-sm); justify-items: start; }
.careers__copy .frame-name { margin-block-end: 0; }
.invite { display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.invite__label { font-size: var(--text-label); font-weight: 500; color: var(--color-ink-subtle); }
.invite__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.role { display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); font-size: var(--text-body-sm); font-weight: 500; line-height: 1.45; }
.role__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-panel-2); color: var(--color-ink-muted); }
.role__icon .icon { width: 18px; height: 18px; }
.invite__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-hairline); }
.invite__field { display: flex; flex: 1 1 200px; align-items: center; gap: var(--space-xs); min-height: var(--space-control); padding-inline: var(--space-sm); border-radius: var(--radius-md); background: var(--color-panel-2); color: var(--color-ink-muted); font-size: var(--text-body-sm); }
.invite__email { direction: ltr; unicode-bidi: isolate; color: var(--color-ink); font-weight: 500; }

/* ---------- contact: communication nodes + inspector ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-xxl); align-items: start; }
.net { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl) var(--space-xxxl); align-items: center; padding-block: var(--space-lg); }
.net__office { position: relative; z-index: 1; display: grid; }
.net__nodes { position: relative; z-index: 1; display: grid; gap: var(--space-lg); }
.net__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); font-size: var(--text-body-sm); color: var(--color-ink-muted); }
.net__phones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs) var(--space-sm); }
.net__phone-list { display: inline-flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-sm); }
.net__phone-list a { color: var(--color-ink); font-weight: 500; text-decoration: none; direction: ltr; unicode-bidi: isolate; }
.net__phone-list a:hover { text-decoration: underline; }
.net__social { display: flex; align-items: center; gap: var(--space-xs); }
.cnode {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 68px;
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  text-decoration: none;
}
[dir="rtl"] .cnode { padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); }
.cnode:hover::after { opacity: 1; }
.cnode:focus-visible { outline-offset: 5px; }
.cnode__icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-panel-2); color: var(--color-ink); }
.cnode__icon .icon { width: 20px; height: 20px; }
.cnode--office { align-items: flex-start; }
.cnode--office .cnode__icon { background: var(--color-primary); color: var(--color-on-primary); }
.cnode__body { display: grid; gap: 2px; min-width: 0; }
.cnode__label { font-size: var(--text-body-sm); font-weight: 700; line-height: 1.45; }
.cnode__value { font-size: var(--text-label); line-height: 1.5; color: var(--color-ink-muted); }
.cnode__value--ltr { direction: ltr; unicode-bidi: isolate; }
.social { display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.social a { display: grid; place-items: center; width: var(--space-control); height: var(--space-control); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-panel); color: var(--color-ink-muted); }
.social a:hover { color: var(--color-ink); border-color: var(--color-hairline-strong); }
.social .icon { width: 18px; height: 18px; }

.inspector { background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.inspector__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-hairline); }
.inspector__title { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; font-size: var(--text-body); font-weight: 700; }
.inspector__title .icon { width: 18px; height: 18px; color: var(--color-ink-muted); }
.inspector__route { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-label); color: var(--color-ink-muted); }
.inspector__route .icon { width: 16px; height: 16px; }
.route__value { color: var(--color-ink); font-weight: 500; }
.inspector__body { padding: var(--space-lg); }
.inspector__noscript { padding: var(--space-lg); }

/* lead form (markup generated by core.js) */
.lead-form { display: grid; gap: 18px; }
.form-alert { padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-primary-tint); color: var(--color-primary-ink); font-size: var(--text-body-sm); font-weight: 500; }
.field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { padding: 0; margin-block-end: 6px; }
.field__label { font-size: var(--text-label); font-weight: 500; line-height: 1.5; color: var(--color-ink); }
.field__label > span[aria-hidden="true"] { color: var(--color-primary-ink); }
.field__opt { font-weight: 400; color: var(--color-ink-subtle); }
.field__hint { font-size: var(--text-label); color: var(--color-ink-subtle); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: var(--text-label); font-weight: 500; color: var(--color-primary-ink); }
.field__error .icon { width: 16px; height: 16px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.input {
  width: 100%;
  min-height: var(--space-control);
  padding: 10px var(--space-sm);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: 1.4;
  transition: border-color 0.15s;
}
.input::placeholder { color: var(--color-ink-subtle); }
.input:hover { border-color: var(--color-ink-subtle); }
.input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.input[aria-invalid="true"] { border-color: var(--color-primary); }
.select-wrap { position: relative; }
.select { appearance: none; padding-inline-end: 40px; }
.select-wrap > .icon { position: absolute; top: 50%; inset-inline-end: var(--space-sm); width: 18px; height: 18px; transform: translateY(-50%); color: var(--color-ink-subtle); pointer-events: none; }
.textarea { min-height: 112px; resize: vertical; }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xxs); padding: var(--space-xxs); border-radius: var(--radius-md); background: var(--color-panel-2); }
.segmented__opt { position: relative; }
.segmented__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented__opt span { display: grid; place-items: center; min-height: 36px; padding-inline: var(--space-xs); border: 1px solid transparent; border-radius: var(--radius-xs); font-size: var(--text-body-sm); font-weight: 500; color: var(--color-ink-muted); text-align: center; }
.segmented__opt input:checked + span { background: var(--color-panel); border-color: var(--color-hairline-strong); color: var(--color-ink); }
.segmented__opt input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.form-stack { display: grid; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-panel-2); }
.form-stack__list { display: flex; flex-wrap: wrap; gap: 6px; }
.form-stack__list li { padding: 3px 10px; border: 1px solid var(--color-hairline); border-radius: var(--radius-full); background: var(--color-panel); font-size: var(--text-label); font-weight: 500; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.form-note { flex: 1 1 220px; font-size: var(--text-label); color: var(--color-ink-subtle); }
.form-success { display: grid; gap: var(--space-sm); }
.form-success:focus { outline: none; }
.form-success__title { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-title); font-weight: 700; }
.form-success__title .icon { width: 22px; height: 22px; }
.form-success__text { color: var(--color-ink-muted); }
.form-success__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.form-success__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--space-control); color: var(--color-ink); font-weight: 500; }

/* ---------- footer ---------- */
.footer { padding-block: var(--space-xxxl) var(--space-lg); background: var(--color-panel); border-top: 1px solid var(--color-hairline); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.footer__logo { width: auto; height: 34px; }
.footer__about { margin-block: var(--space-md); max-width: 30em; font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); }
.footer__title { margin-block-end: var(--space-sm); font-size: var(--text-label); font-weight: 700; color: var(--color-ink); }
.footer__links { display: grid; gap: var(--space-xxs); font-size: var(--text-body-sm); }
.footer__links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-ink-muted); text-decoration: none; line-height: 1.5; }
.footer__links a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.footer__phones { display: grid; gap: var(--space-xxs); }
.footer__phones a { direction: ltr; unicode-bidi: isolate; justify-content: flex-end; }
[dir="ltr"] .footer__phones a { justify-content: flex-start; }
.footer__all { font-weight: 500; }
.footer__group-title { margin-block-start: var(--space-sm); font-size: var(--text-label); font-weight: 500; line-height: 1.5; color: var(--color-ink-subtle); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xxl); padding-top: var(--space-lg); border-top: 1px solid var(--color-hairline); font-size: var(--text-label); color: var(--color-ink-subtle); }
.footer__hint { display: inline-flex; align-items: center; gap: var(--space-xs); }

/* ---------- contact bar (WhatsApp + call) ---------- */
.fab-bar {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 30;
  display: grid;
  overflow: hidden;
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.fab { display: grid; place-items: center; width: 48px; height: 48px; color: var(--color-ink); }
.fab + .fab { border-top: 1px solid var(--color-hairline); }
.fab:hover { background: var(--color-panel-2); color: var(--color-primary-ink); }
.fab:focus-visible { outline-offset: -3px; }
.fab .icon { width: 22px; height: 22px; }

/* ---------- consent (core.js › initConsent): a floating panel between the chat button and the contact bar ---------- */
.consent {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline: 0;
  z-index: 40;
  display: grid;
  gap: var(--space-sm);
  width: min(560px, calc(100% - 2 * (48px + 2 * var(--space-md))));
  margin-inline: auto;
  padding: var(--space-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.consent[hidden] { display: none; }
:root[data-preview-base] .consent { display: none; }
.consent__head { display: flex; align-items: center; gap: var(--space-xs); }
.consent__mark { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary-tint); color: var(--color-primary-ink); }
.consent__mark .icon { width: 16px; height: 16px; }
.consent__title { font-size: var(--text-title-sm); font-weight: 700; line-height: 1.4; }
.consent__text { font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); text-wrap: pretty; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xxs); }
.consent__actions .btn { flex: 1 1 0; }
.footer__consent {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-control);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer__consent:hover { color: var(--color-ink); }
.footer__consent[hidden] { display: none; }
@media (max-width: 599px) {
  .consent { inset-inline: var(--space-sm); inset-block-end: var(--space-sm); width: auto; padding: var(--space-md); }
}

/* ---------- detail dialog ---------- */
.detail {
  width: min(1000px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.detail::backdrop { background: var(--scrim); }
.detail[open] { animation: panel-in 0.18s ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.detail__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-hairline);
}
.detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-label); color: var(--color-ink-muted); }
.detail__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-panel-2); color: var(--color-ink); }
.detail__icon .icon { width: 18px; height: 18px; }
.detail__kicker { font-weight: 500; }
.detail__kicker .icon { display: none; }
.detail__close { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.detail__title { grid-column: 1; font-size: var(--text-headline-sm); font-weight: 700; line-height: 1.35; }
.detail__title:focus { outline: none; }
.detail__sub { display: block; margin-top: 2px; font-size: var(--text-body); font-weight: 500; line-height: 1.5; color: var(--color-ink-muted); }
.detail__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-xl); padding: var(--space-lg); }
.detail__main { display: grid; gap: var(--space-sm); align-content: start; }
.detail__audience { font-weight: 500; }
.detail__summary { font-size: var(--text-title-sm); line-height: 1.75; }
.detail__text { font-size: var(--text-body-sm); line-height: 1.75; color: var(--color-ink-muted); }
.detail__list-title { margin-top: var(--space-xs); font-size: var(--text-body); font-weight: 700; }
.detail__partner { padding-top: var(--space-sm); border-top: 1px solid var(--color-hairline); font-size: var(--text-label); color: var(--color-ink-muted); }
.detail__stack { padding-top: var(--space-xxs); }
.detail__aside { align-self: start; padding: var(--space-lg); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.detail__form-title { font-size: var(--text-title-sm); font-weight: 700; }
.detail__note { margin-block: var(--space-xxs) var(--space-md); font-size: var(--text-label); color: var(--color-ink-muted); }

/* ---------- command palette ---------- */
.cmdk {
  width: min(640px, calc(100% - 32px));
  max-width: none;
  max-height: min(560px, calc(100dvh - 96px));
  margin: 12vh auto auto;
  padding: 0;
  overflow: hidden;
  background: var(--color-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.cmdk[open] { display: flex; flex-direction: column; animation: panel-in 0.14s ease-out; }
.cmdk::backdrop { background: var(--scrim); }
.cmdk__search { display: flex; align-items: center; gap: var(--space-sm); min-height: 60px; padding-inline: var(--space-md); border-bottom: 1px solid var(--color-hairline); }
.cmdk__search:focus-within { border-bottom-color: var(--color-primary); }
.cmdk__search > .icon { width: 20px; height: 20px; color: var(--color-ink-muted); }
.cmdk__input { flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; color: var(--color-ink); font-size: var(--text-title-sm); }
.cmdk__input:focus-visible { outline: none; }
.cmdk__input::placeholder { color: var(--color-ink-subtle); }
.cmdk__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.cmdk__opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 56px;
  padding: 6px var(--space-sm);
  border-radius: var(--radius-xs);
  color: var(--color-ink);
  text-decoration: none;
}
.cmdk__opt[aria-selected="true"] { background: var(--color-panel-2); }
.cmdk__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-panel); color: var(--color-ink-muted); }
.cmdk__icon .icon { width: 18px; height: 18px; }
.cmdk__opt[aria-selected="true"] .cmdk__icon { border-color: var(--color-primary); color: var(--color-primary-ink); }
.cmdk__text { display: grid; min-width: 0; }
.cmdk__title { overflow: hidden; font-size: var(--text-body-sm); font-weight: 500; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__desc { font-weight: 400; color: var(--color-ink-muted); }
.cmdk__kind { font-size: var(--text-label); line-height: 1.4; color: var(--color-ink-subtle); }
.cmdk__enter { visibility: hidden; }
.cmdk__opt[aria-selected="true"] .cmdk__enter { visibility: visible; }
.cmdk__empty { padding: var(--space-lg) var(--space-md); font-size: var(--text-body-sm); color: var(--color-ink-muted); }
.cmdk__foot { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding: 10px var(--space-md); border-top: 1px solid var(--color-hairline); font-size: var(--text-label); color: var(--color-ink-subtle); }
.cmdk__foot > span { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.cmdk__foot > span > span { margin-inline-start: 2px; }

/* ---------- detail pages: /products/<id> (built from the home's components) ---------- */
.detail-hero { padding-block: var(--space-lg) var(--space-section); overflow-x: clip; }
.detail-section { padding-block: 0 var(--space-section); }
.crumbs { display: flex; margin-block-end: var(--space-lg); width: fit-content; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-xs); font-size: var(--text-label); font-weight: 500; line-height: 1.5; color: var(--color-ink-subtle); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.crumbs li + li::before { content: "/"; color: var(--color-hairline-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--space-control); color: var(--color-ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current="page"] { color: var(--color-ink); }
.detail-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-xxl); align-items: center; }
.detail-hero__copy { display: grid; gap: var(--space-xl); justify-items: start; }
/* The product's own component, shown selected: the page is its inspector. */
.component--selected::after { opacity: 1; }
.detail-mark .badge { margin-inline-start: auto; }
.product-mark {
  display: grid;
  place-items: center;
  max-width: 100%;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-logo-plate);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
/* An uploaded mark of any size (a 1080px square partner badge) sits on the plate no taller than the tallest shipped logo allows; it keeps its ratio. */
.product-mark img { display: block; max-width: 100%; height: auto; max-height: var(--space-section); object-fit: contain; }
.product-mark > .icon { width: var(--space-xxl); height: var(--space-xxl); color: var(--color-ink); }
/* The plate stays light in the dark theme, so the glyph is drawn in the canvas colour there (dark on the plate), like ink on paper. */
:root[data-theme="dark"] .product-mark > .icon { color: var(--color-canvas); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .product-mark > .icon { color: var(--color-canvas); } }
/* The credential line in the business-systems group head: its own full row under the title and the note, above the head's hairline. A small plate with the partner's glyph, then the text-link. Quiet, no fill, no red. */
.partner-line { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 0 var(--space-lg); }
.partner-line .text-link { gap: var(--space-xs); font-size: var(--text-label); }
.partner-line .product-mark { padding: var(--space-xxs) var(--space-xs); border-radius: var(--radius-xs); }
.partner-line .product-mark > .icon { width: var(--space-lg); height: var(--space-lg); }
.detail-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl) var(--space-xxl); padding-top: var(--space-xl); border-top: 1px solid var(--color-hairline); }
.detail-label { margin-block-end: var(--space-sm); font-size: var(--text-label); font-weight: 500; line-height: 1.5; color: var(--color-ink-subtle); }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.detail-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xxxl); align-items: start; }
.detail-pair__copy { display: grid; gap: var(--space-sm); justify-items: start; }
.detail-pair__copy .frame-name { margin-block-end: 0; }
.plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); background: var(--color-panel); }
.plan__name { font-size: var(--text-label); font-weight: 500; line-height: 1.5; color: var(--color-ink-subtle); }
.plan__price { font-size: var(--text-title); font-weight: 700; line-height: 1.45; }
.faq { background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.faq__item { display: grid; gap: var(--space-xs); padding: var(--space-lg); }
.faq__item + .faq__item { border-top: 1px solid var(--color-hairline); }
.faq__q { font-size: var(--text-title-sm); font-weight: 700; line-height: 1.5; }
.faq__a { max-width: 44em; font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); }
@media (max-width: 899px) {
  .detail-hero__grid, .detail-split, .detail-pair { grid-template-columns: minmax(0, 1fr); }
  .detail-pair { gap: var(--space-xl); }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .detail-section, .detail-hero { padding-block-end: var(--space-xxxl); }
  .module-grid { grid-template-columns: minmax(0, 1fr); }
  .product-mark { padding: var(--space-md) var(--space-lg); }
  .faq__item { padding: var(--space-md); }
}

/* ---------- responsive ---------- */
@media (max-width: 1320px) {
  .cmdk-btn { min-width: 0; }
  .cmdk-btn__text { display: none; }
  .nav__link { padding-inline: 8px; }
}

/* up to 1279px the eight links, the theme toggle and the English CTA fit only with the search button as a 44px icon (the phone treatment); its aria-label and Ctrl/⌘ K stay */
@media (max-width: 1279px) {
  .cmdk-btn { width: var(--space-control); padding: 0; justify-content: center; }
  .cmdk-btn .keys { display: none; }
}

@media (max-width: 1199px) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-grid; }
  .bar__tools { margin-inline-start: auto; }
  .bar__inner { justify-content: space-between; }
  .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step:nth-child(2) .flow__link { display: none; }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .tools__palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured { grid-template-columns: minmax(0, 1fr); } /* three product cards need ≥1024px side by side */
}

@media (max-width: 899px) {
  :root { --gutter: var(--space-lg); }
  .hero { padding-block-start: var(--space-xl); }
  .hero__grid, .about__grid, .careers__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { gap: var(--space-xxl); }
  .hero__graph { justify-self: center; }
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder__result { border-inline-start: 0; border-top: 1px solid var(--color-hairline); }
  .library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame__head--row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-sm); }
  .log__entry { grid-template-columns: minmax(0, 1fr) auto; }
  .log__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
  .detail__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  :root { --gutter: var(--space-gutter-sm); --node: 32px; --hub: 62px; }
  .section-head { margin-block-end: var(--space-xl); }
  .about, .process, .services, .products, .stack, .blog, .careers, .contact, .clients { padding-block-end: var(--space-xxxl); }
  .hero { padding-block-end: var(--space-xxxl); }
  .bar__inner { gap: var(--space-xs); }
  .bar__brand img { height: 28px; }
  .bar__cta { display: none; }
  .lang-btn { padding-inline: 0; width: var(--space-control); justify-content: center; }
  .lang-btn [data-lang-label] { display: none; }
  .cmdk-btn { width: var(--space-control); padding: 0; justify-content: center; border-color: var(--color-hairline); }
  .cmdk-btn .keys { display: none; }
  .hero__copy { gap: var(--space-lg); }
  .hero__lead { margin-top: var(--space-md); }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__search .keys { display: none; }
  .gnode__chip .icon { width: 16px; height: 16px; }
  .gnode__link::before { content: ""; position: absolute; inset: -6px; }
  .gnode--product .gnode__chip { width: 52px; height: 36px; padding: 0; justify-content: center; }
  .gnode__name, .gnode__code { display: none; }
  .gnode__mark { width: 28px; height: 23px; }
  .gnode__hub-name { font-size: var(--text-mono-sm); }
  .legend { margin-top: var(--space-xl); gap: var(--space-xs) var(--space-md); }
  .cursor__label { font-size: var(--text-mono-sm); }
  .notes__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .note:nth-child(even) { translate: none; }
  .note { min-height: 0; }
  .notes { padding-block: var(--space-xs) 0; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .flow__step .flow__link { display: block; }
  .flow__step:nth-child(2) .flow__link { display: block; }
  .flow__link { top: calc(100% + 1px); inset-inline-start: var(--space-xl); width: 1.5px; height: calc(var(--space-xl) - 2px); }
  .flow__link::before { top: -4px; inset-inline-start: -3.5px; }
  .flow__link .icon { top: auto; bottom: -8px; inset-inline-end: auto; inset-inline-start: -8px; transform: rotate(90deg); }
  [dir="rtl"] .flow__link .icon { transform: rotate(90deg); }
  .flow__step:not(:first-child) .flow__name { display: none; }
  .tools__palette { grid-template-columns: minmax(0, 1fr); }
  .tools__canvas { padding: var(--space-md); }
  .preview { padding: var(--space-lg); }
  .preview__title { font-size: var(--text-title); }
  .preview__list { grid-template-columns: minmax(0, 1fr); }
  .library { grid-template-columns: minmax(0, 1fr); }
  .library .tile:last-child:nth-child(odd) { grid-column: auto; }
  .tile { min-height: 0; }
  .client-grid { grid-template-columns: minmax(0, 1fr); }
  .component__thumb { min-height: 0; padding: var(--space-md); }
  .mini--school { grid-template-columns: minmax(0, 1fr); }
  .timetable { display: none; }
  .invite { padding: var(--space-lg); }
  .invite__roles { grid-template-columns: minmax(0, 1fr); }
  .net { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .net__nodes { padding-inline-start: var(--space-xl); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .inspector__body { padding: var(--space-md); }
  .inspector__head { padding-inline: var(--space-md); }
  .log__entry { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { width: 100%; max-height: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; }
  .detail__body { padding: var(--space-md); }
  .detail__head { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .detail__title { font-size: var(--text-title); }
  .detail__aside { padding: var(--space-md); }
  .cmdk { margin-top: var(--space-md); max-height: calc(100dvh - 32px); }
  .cmdk__foot { display: none; }
}

/* ---------- reduced motion: every non-essential movement stops, content stays ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .edge-flow { animation: none; }
  .sg-edge.is-new, .sg-item.is-new, .detail[open], .cmdk[open], .chat-widget__panel { animation: none; }
  .sg-edge.is-new { stroke-dashoffset: 0; }
}

@media (forced-colors: active) {
  .plate, .result__empty, .result__max, .result__note, .result__head { outline: none; }
}

/* ---------- lead fallbacks (phase 3): one-click email / WhatsApp inside .form-alert when the API cannot take a request ---------- */
.form-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.form-alert__actions .btn { min-height: var(--space-control); font-weight: 500; }

/* ---------- careers dialog (phase 3): same floating panel as the detail dialog, narrower ---------- */
.careers-dialog { width: min(680px, calc(100% - 32px)); }
.careers-dialog .detail__body { padding: var(--space-lg); }

/* ---------- chat widget (phase 4): floating assistant, opposite corner from the contact bar so the two never overlap ---------- */
.chat-widget { position: fixed; inset-block-end: var(--space-md); inset-inline-start: var(--space-md); z-index: 30; }
.chat-widget__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 52px;
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-button);
  font-weight: 500;
  box-shadow: var(--shadow-float);
}
.chat-widget__toggle:hover { background: var(--color-primary-hover); }
.chat-widget__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chat-widget__toggle .icon { width: 20px; height: 20px; }
.chat-widget__panel {
  position: absolute;
  inset-block-end: calc(52px + var(--space-sm));
  inset-inline-start: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100dvh - 120px));
  background: var(--color-panel);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: panel-in 0.18s ease-out;
}
.chat-widget__privacy { margin: 0; padding: var(--space-sm) var(--space-md); font-size: var(--text-label); color: var(--color-ink-subtle); border-bottom: 1px solid var(--color-hairline); }
.chat-widget__messages { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-md); overflow-y: auto; }
.chat-widget__welcome { margin: 0; font-size: var(--text-body-sm); color: var(--color-ink-muted); }
.chat-widget__suggestions.chips { gap: var(--space-xxs); }
.chat-widget__suggestions .chip { font-size: var(--text-label); }
.chat-message { display: grid; }
.chat-message--user { justify-items: end; }
.chat-message--assistant { justify-items: start; }
.chat-message__bubble { margin: 0; max-width: 88%; padding: var(--space-xs) var(--space-sm); font-size: var(--text-body-sm); line-height: 1.65; color: var(--color-ink); white-space: pre-wrap; }
.chat-message--user .chat-message__bubble { background: var(--color-panel-2); border-radius: var(--radius-md); }
.chat-message__bubble p, .chat-message__bubble ul, .chat-message__bubble ol { margin: 0; white-space: normal; }
.chat-message__bubble > * + * { margin-top: var(--space-xs); }
.chat-message__list { display: grid; gap: 2px; padding-inline-start: 1.25em; }
ol.chat-message__list { list-style: decimal; }
ul.chat-message__list { list-style: disc; }
.chat-message__note { margin: 0; font-size: var(--text-label); color: var(--color-ink-muted); }
.chat-widget__typing { margin: 0; font-size: var(--text-label); color: var(--color-ink-subtle); }
.chat-widget__error { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-label); color: var(--color-primary-ink); }
.chat-widget__composer { display: flex; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-hairline); }
.chat-widget__composer .input { flex: 1 1 auto; }
.chat-widget__send { display: grid; place-items: center; width: var(--space-control); height: var(--space-control); flex: none; border: none; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); }
.chat-widget__send:hover { background: var(--color-primary-hover); }
.chat-widget__send:disabled { background: var(--color-panel-2); color: var(--color-ink-subtle); cursor: not-allowed; }
.chat-widget__send .icon { width: 18px; height: 18px; }
.chat-lead-form { display: grid; gap: var(--space-sm); padding: var(--space-sm); background: var(--color-panel-2); border-radius: var(--radius-md); }
.chat-lead-form .field { gap: 4px; }
.chat-lead-form .input { min-height: 40px; }
.chat-lead-form__actions { display: flex; gap: var(--space-xs); }
.chat-lead-form__actions .btn { min-height: 36px; padding: 0 var(--space-md); font-size: var(--text-body-sm); }
.chat-whatsapp { justify-self: start; min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-body-sm); }

/* ---------- error page (phase 6): 404 / 503, standalone (no site content, no runtime); the logo pair swaps with the theme ---------- */
.error-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--space-section) var(--space-gutter-sm); }
.error-page__body { display: grid; justify-items: center; gap: var(--space-lg); max-width: 38em; text-align: center; }
.error-page__brand { display: inline-flex; border-radius: var(--radius-xs); }
.error-page__brand .theme-logo { width: auto; height: var(--space-xxl); }

/* ---------- 404: a page outside «منظومة واحدة» — the home's node graph with that page cut off from the hub ----------
   Built from the hero's own parts (.stage, .gnode, .edge, .edge-flow, selection chrome, .cursor); NotFoundGraph adds the
   drag back to the hub. Red stays on the hub, the active edge, the selection chrome, the cursor and the one CTA. */
.error-page--lost { display: block; padding: var(--space-xxl) 0; }
.nf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xxl); align-items: center; min-height: calc(100dvh - 2 * var(--space-xxl)); }
.nf__copy { display: grid; gap: var(--space-xl); justify-items: start; }
.nf__text .frame-name { margin-block-end: var(--space-md); }
.nf__code { font-family: var(--font-ibm-plex-mono); font-size: var(--text-mono-sm); font-weight: 500; color: var(--color-ink-muted); }
.nf__asked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); max-width: 100%; font-size: var(--text-body-sm); color: var(--color-ink-subtle); }
.nf__path { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; text-decoration-color: var(--color-ink-subtle); }

.nf-graph { justify-self: end; width: 100%; max-width: 560px; margin: 0; }
.nf-stage { touch-action: pan-y; }
.nf-graph__hint { margin-top: var(--space-xl); text-align: center; font-size: var(--text-label); font-weight: 500; color: var(--color-ink-subtle); background-color: var(--color-canvas); outline: var(--space-xs) solid var(--color-canvas); }
.nf-graph__live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* destinations: named pills, like the service nodes */
.gnode--dest .gnode__chip { display: flex; width: auto; padding-inline: var(--space-md); border-radius: var(--radius-full); }

/* the lost page: a dashed pill on a cut edge, grabbed by its whole chip */
.gnode__btn {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-ink-muted);
  font: inherit;
  cursor: grab;
  touch-action: none;
}
.gnode__btn:disabled { cursor: default; }
.gnode__btn:focus-visible { outline: none; }
.gnode--lost.is-dragging .gnode__btn { cursor: grabbing; }
.gnode--lost .gnode__chip {
  display: flex;
  gap: 6px;
  width: auto;
  padding-inline: var(--space-md);
  border-style: dashed;
  border-radius: var(--radius-full);
  font-family: var(--font-ibm-plex-mono);
  font-size: var(--text-body-sm);
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gnode--lost .gnode__code { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.gnode__status { display: none; }
.gnode__btn:not(:disabled):hover .gnode__chip::after,
.gnode__btn:focus-visible .gnode__chip::after,
.gnode--lost.is-dragging .gnode__chip::after { opacity: 1; }
.gnode__btn:focus-visible .gnode__chip::after { --sel-w: 2px; }
.gnode--lost.is-dragging { z-index: 4; }
.gnode--lost.is-dragging .gnode__chip { box-shadow: var(--shadow-float); }
.gnode--lost.is-near .gnode__chip { border-style: solid; border-color: var(--color-primary); }
.gnode--lost.is-connected .gnode__btn { color: var(--color-ink); cursor: default; }
.gnode--lost.is-connected .gnode__chip { border-style: solid; }
.gnode--lost.is-connected .gnode__status { display: inline-block; }
.edge--cut { stroke: var(--color-ink-subtle); stroke-dasharray: 38 24 38; }
.edge--cut.is-active { stroke: var(--color-primary); stroke-width: 1.5; }
.nf-cursor[hidden] { display: none; }

@media (max-width: 899px) {
  .nf { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .nf-graph { justify-self: center; max-width: 480px; }
}
@media (max-width: 599px) {
  .error-page--lost { padding-block: var(--space-xl); }
  .nf { gap: var(--space-xl); }
  .nf .hero__actions .btn { flex: 1 1 auto; }
  /* the home hides node names on phones; here the names are the destinations, so they stay, smaller */
  .nf .gnode__name { display: block; font-size: var(--text-label); }
  .nf .gnode--dest .gnode__chip, .nf .gnode--lost .gnode__chip { padding-inline: var(--space-xs); font-size: var(--text-label); }
  .gnode__btn::before { content: ""; position: absolute; inset: -6px; }
}

/* ---------- staff preview bar (/admin/preview/… only; SiteLayout sets data-preview-base) ----------
   Fixed to the top on the inverse surface so it never reads as part of the page; the page and the sticky header move
   down by its height, so it covers neither the header tools (search, theme, language) nor the bottom chat button and fab-bar. */
:root[data-preview-base] { --preview-bar: var(--space-control); scroll-padding-top: calc(var(--preview-bar) + var(--space-bar) + var(--space-md)); }
:root[data-preview-base] body { padding-top: var(--preview-bar); }
:root[data-preview-base] .bar { top: var(--preview-bar); }
.preview-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--preview-bar, var(--space-control));
  padding-inline: var(--space-gutter-sm);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  font-family: var(--font-thmanyah-sans);
  font-size: var(--text-body-sm);
  line-height: 1.4;
}
.preview-bar__tag { flex: none; padding: 2px var(--space-sm); border: 1px solid currentColor; border-radius: var(--radius-full); font-size: var(--text-label); font-weight: 500; }
.preview-bar__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-bar__back { flex: none; display: inline-flex; align-items: center; gap: var(--space-xxs); min-height: var(--space-control); color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.preview-bar__icon { flex: none; inline-size: 14px; block-size: 14px; }
/* The red ring would sit on the dark inverse fill; the bar's own light text colour stays visible in both themes. */
.preview-bar__back:focus-visible { outline: 2px solid var(--color-on-inverse); outline-offset: -4px; }

/* ---------- blog pages (phase 7): /blog, /blog/<slug> and the English pair ---------- */
/* The index and a post's related list are the home's knowledge log (.log rows) inside one frame; a post is one panel. */
.blog-hero, .post-hero { padding-block-end: var(--space-xxl); }
.blog-filters { margin-block-end: var(--space-md); }
.blog-filters .chip { padding-inline: var(--space-md); text-decoration: none; }
.chip[aria-current="page"] { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-ink); }
.blog-log .log { margin-inline: calc(-1 * var(--space-md)); }
.blog-log > .log:first-child { border-top: 0; }
.blog-entry { position: relative; padding-inline: var(--space-md); transition: background-color 0.15s ease; }
.blog-entry__link { color: var(--color-ink); text-decoration: none; }
/* The title link covers the row, so the whole entry is one 44px+ target with one focus ring. */
.blog-entry__link::after { content: ""; position: absolute; inset: 0; }
.blog-entry__link:focus-visible { outline: none; }
.blog-entry__link:focus-visible::after { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.blog-entry__cover { inline-size: 192px; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--color-panel-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
@media (hover: hover) {
  .blog-entry:hover { background: var(--color-panel-2); }
  .blog-entry:hover .log__slug { background: var(--color-panel); }
  .blog-entry:hover .blog-entry__link { text-decoration: underline; text-decoration-color: var(--color-ink-subtle); text-underline-offset: 4px; }
}
.post-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs) var(--space-sm); font-size: var(--text-label); line-height: 1.5; color: var(--color-ink-subtle); }
.post-facts > * + *::before { content: ""; display: inline-block; inline-size: 1px; block-size: 0.9em; margin-inline-end: var(--space-sm); vertical-align: -0.1em; background: var(--color-hairline-strong); }
.blog-entry .post-facts { margin-block-start: var(--space-sm); }
.blog-empty { display: grid; place-items: center; min-block-size: 12rem; padding: var(--space-xl); text-align: center; color: var(--color-ink-muted); }
.blog-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.blog-pager > :first-child { justify-self: start; }
.blog-pager > :last-child { justify-self: end; }
.blog-pager__status { font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }

.post-hero__copy { max-inline-size: 52rem; }
.post-hero__title { font-size: clamp(var(--text-headline-sm), 1.6vw + 1rem, var(--text-headline)); font-weight: 700; line-height: 1.3; text-wrap: balance; }
:lang(en) .post-hero__title { letter-spacing: -0.02em; }
.post-hero .hero__lead { margin-top: var(--space-md); }
.post-hero__crumb { display: inline-block; max-inline-size: min(32ch, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.post-meta { margin-block-start: var(--space-lg); }
/* The article panel is a 40em reading column (about 70 Arabic characters at body-lg) plus its padding; the author panel sits beside it. */
.post-layout { display: grid; grid-template-columns: minmax(0, calc(var(--text-body-lg) * 40 + 2 * var(--space-xxxl))) minmax(0, 280px); gap: var(--space-xl); align-items: start; padding-block-end: var(--space-section); }
.post-layout--solo { grid-template-columns: minmax(0, calc(var(--text-body-lg) * 40 + 2 * var(--space-xxxl))); }
.post-main { padding: 0; overflow: hidden; }
.post-cover { border-block-end: 1px solid var(--color-hairline); }
.post-cover img { inline-size: 100%; }
.post-body { padding: clamp(var(--space-lg), 4vw, var(--space-xxxl)); }
.post-author { position: sticky; inset-block-start: calc(var(--space-bar) + var(--space-lg)); display: grid; gap: var(--space-xs); justify-items: start; padding: var(--space-lg); background: var(--color-panel); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.post-author__photo { inline-size: 64px; block-size: 64px; margin-block-end: var(--space-xs); object-fit: cover; border: 1px solid var(--color-hairline); border-radius: var(--radius-full); }
.post-author__name { font-size: var(--text-title-sm); font-weight: 700; line-height: 1.5; }
.post-author__bio { font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-ink-muted); }
.post-related__title { margin-block-end: var(--space-lg); font-size: var(--text-title); font-weight: 700; line-height: 1.45; }

/* Reading type: body-lg at a relaxed Arabic line height, headings with more room above than below. */
.prose { font-size: clamp(var(--text-title-sm), 0.5vw + 0.95rem, var(--text-body-lg)); line-height: 1.9; color: var(--color-ink); overflow-wrap: anywhere; }
:lang(en) .prose { line-height: 1.75; }
.prose > * + * { margin-block-start: var(--space-lg); }
.prose h2 { margin-block-start: var(--space-xxl); font-size: var(--text-headline-sm); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.prose h3 { margin-block-start: var(--space-xl); font-size: var(--text-title); font-weight: 700; line-height: 1.45; }
.prose > :is(h2, h3) + * { margin-block-start: var(--space-sm); }
.prose > :first-child { margin-block-start: 0; }
.prose ul { padding-inline-start: var(--space-lg); list-style: disc; }
.prose ol { padding-inline-start: var(--space-lg); list-style: decimal; }
.prose li + li, .prose li > * + * { margin-block-start: var(--space-xs); }
.prose li::marker { color: var(--color-ink-subtle); }
.prose blockquote { padding-inline-start: var(--space-lg); border-inline-start: 2px solid var(--color-hairline-strong); color: var(--color-ink-muted); }
.prose blockquote > * + * { margin-block-start: var(--space-sm); }
.prose strong { font-weight: 700; }
.prose a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-ink-subtle); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; }
.prose a:hover { text-decoration-color: var(--color-primary); }
.post-figure img { border: 1px solid var(--color-hairline); border-radius: var(--radius-md); }
.post-figure figcaption { margin-block-start: var(--space-xs); font-size: var(--text-label); line-height: 1.5; color: var(--color-ink-subtle); }

@media (max-width: 899px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-author { position: static; }
}
@media (max-width: 599px) {
  .blog-entry { grid-template-columns: minmax(0, 1fr); }
  .blog-entry__cover { grid-row: 1; inline-size: 100%; }
  .blog-pager { grid-template-columns: 1fr 1fr; }
  .blog-pager__status { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .post-layout { padding-block-end: var(--space-xxxl); }
}