/* ==========================================================================
   ZircoMedia product mockups
   Framed app windows with dense, sortable data tables. Every figure in here is
   synthetic sample data built to demonstrate what we ship. No customer data.
   ========================================================================== */

/* --- Frame ---------------------------------------------------------------- */
.mk {
  border: 1px solid var(--rule);
  background: #12112f;
  overflow: hidden;
  --mk-line: rgba(236, 235, 245, .10);
  --mk-alt: rgba(255, 255, 255, .022);
}
.section--paper .mk {
  background: var(--paper-card);
  border-color: var(--rule-ink);
  --mk-line: rgba(20, 19, 46, .11);
  --mk-alt: rgba(20, 19, 46, .025);
  color: var(--fg-ink);
}

.mk__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--mk-line);
  background: var(--mk-alt);
  flex-wrap: wrap;
}
.mk__eyebrow {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: block;
  margin-bottom: .1rem;
}
.section--paper .mk__eyebrow { color: var(--fg-ink-dim); }
.mk__title { font-family: var(--f-body); font-size: .8125rem; font-weight: 600; margin: 0; letter-spacing: -.005em; }

.mk__tabs { display: flex; gap: 1.15rem; margin-left: auto; flex-wrap: wrap; }
.mk__tab {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .25rem 0;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.mk__tab:hover { color: var(--fg); }
.section--paper .mk__tab:hover { color: var(--fg-ink); }
.mk__tab[aria-selected='true'] { color: var(--zm-violet-txt); border-bottom-color: var(--zm-violet-txt); }
.section--paper .mk__tab[aria-selected='true'] { color: var(--zm-violet); border-bottom-color: var(--zm-violet); }

.mk__body { padding: .9rem; }
.mk__pad0 { padding: 0; }
.mk__note {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: .6rem .9rem;
  border-top: 1px solid var(--mk-line);
  display: flex;
  gap: .5rem;
  align-items: center;
}
.section--paper .mk__note { color: var(--fg-ink-dim); }
.mk__note::before { content: ''; width: 6px; height: 6px; background: var(--zm-violet-txt); flex: none; }

/* --- Filter bar ----------------------------------------------------------- */
.mk__filters {
  display: flex;
  gap: .75rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--mk-line);
  align-items: center;
  flex-wrap: wrap;
}
.mk__filters label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.section--paper .mk__filters label { color: var(--fg-ink-dim); }
.mk__filters select, .mk__filters input {
  font-family: var(--f-body);
  font-size: .75rem;
  /* Not `inherit`: that picks up the muted label colour, which measured 4.42:1
     against the control's own background and failed AA. The chosen value should
     read stronger than its label regardless. */
  color: var(--fg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--mk-line);
  padding: .3rem .5rem;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
}
.section--paper .mk__filters select, .section--paper .mk__filters input { background: #fff; color: var(--fg-ink); }
.section--paper .fb__field input, .section--paper .fb__field select, .section--paper .fb__field textarea { background: #fff; }
.mk__filters select:focus, .mk__filters input:focus { border-color: var(--zm-violet-txt); outline: none; }
.mk__count { margin-left: auto; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .08em; color: var(--fg-mute); }
.section--paper .mk__count { color: var(--fg-ink-dim); }

/* --- Dense data table ----------------------------------------------------- */
.mk__scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .75rem; }
.tbl th, .tbl td { padding: .5rem .7rem; border-bottom: 1px solid var(--mk-line); white-space: nowrap; }
.tbl thead th {
  text-align: left;
  background: var(--mk-alt);
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  position: sticky;
  top: 0;
  z-index: 1;
}
.section--paper .tbl thead th { color: var(--fg-ink-dim); }
.tbl th[data-sort] { cursor: pointer; user-select: none; }
.tbl th[data-sort]:hover { color: var(--fg); }
.section--paper .tbl th[data-sort]:hover { color: var(--fg-ink); }
.tbl th[aria-sort] { color: var(--zm-violet-txt); }
.section--paper .tbl th[aria-sort] { color: var(--zm-violet); }
.tbl th[data-sort]::after { content: '\2195'; opacity: .28; margin-left: .35rem; font-size: .7em; }
.tbl th[aria-sort='ascending']::after { content: '\2191'; opacity: 1; }
.tbl th[aria-sort='descending']::after { content: '\2193'; opacity: 1; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: rgba(105, 77, 255, .10); }
.section--paper .tbl tbody tr:hover { background: rgba(73, 36, 212, .06); }
.tbl tbody tr[aria-selected='true'] { background: rgba(105, 77, 255, .16); }
.num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num--neg { color: #ff8f8f; }
.section--paper .num--neg { color: #b02525; }
.num--bold { font-weight: 700; }
.tbl tfoot td {
  background: var(--mk-alt);
  font-family: var(--f-mono);
  font-size: .6875rem;
  border-bottom: 0;
  border-top: 1px solid var(--rule);
  font-weight: 600;
}

/* --- Pills ---------------------------------------------------------------- */
.pill {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .16rem .42rem;
  border: 1px solid currentColor;
  line-height: 1.4;
}
.pill--ok    { color: #5fd39a; }
.pill--warn  { color: #ffc46b; }
.pill--bad   { color: #ff8f8f; }
.pill--info  { color: var(--zm-violet-txt); }
.pill--mute  { color: var(--fg-mute); }
.section--paper .pill--ok   { color: #10744a; }
.section--paper .pill--warn { color: #8a5a00; }
.section--paper .pill--bad  { color: #b02525; }
.section--paper .pill--info { color: var(--zm-violet); }
.section--paper .pill--mute { color: var(--fg-ink-dim); }

/* --- Sparkline ------------------------------------------------------------ */
.spark { display: block; width: 68px; height: 20px; overflow: visible; }
.spark path { fill: none; stroke: var(--zm-violet-txt); stroke-width: 1.5; }
.section--paper .spark path { stroke: var(--zm-violet); }
.spark .spark__area { fill: rgba(105, 77, 255, .16); stroke: none; }

/* --- Tooltip -------------------------------------------------------------- */
[data-tip] { position: relative; }
.tip {
  position: fixed;
  z-index: 500;
  max-width: 22rem;
  background: #06051a;
  color: #ecebf5;
  border: 1px solid rgba(105, 77, 255, .5);
  padding: .55rem .7rem;
  font-size: .75rem;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .13s, transform .13s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.tip.is-on { opacity: 1; transform: none; }
.tip__k {
  display: block;
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zm-violet-txt);
  margin-bottom: .2rem;
}

/* --- Split view (ticket, CRM) --------------------------------------------- */
.mk__split { display: grid; }
@media (min-width: 54rem) { .mk__split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.mk__list { border-bottom: 1px solid var(--mk-line); max-height: 26rem; overflow-y: auto; }
@media (min-width: 54rem) { .mk__list { border-bottom: 0; border-right: 1px solid var(--mk-line); } }
.mk__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mk-line);
  padding: .7rem .8rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background .12s;
}
.mk__item:hover { background: rgba(105, 77, 255, .09); }
.section--paper .mk__item:hover { background: rgba(73, 36, 212, .05); }
.mk__item[aria-selected='true'] { background: rgba(105, 77, 255, .16); box-shadow: inset 2px 0 0 var(--zm-violet-txt); }
.section--paper .mk__item[aria-selected='true'] { background: rgba(73, 36, 212, .08); box-shadow: inset 2px 0 0 var(--zm-violet); }
.mk__item-top { display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; }
.mk__ref { font-family: var(--f-mono); font-size: .625rem; color: var(--fg-mute); letter-spacing: .06em; }
.section--paper .mk__ref { color: var(--fg-ink-dim); }
.mk__subj { font-size: .8125rem; font-weight: 600; margin: .2rem 0 .3rem; line-height: 1.3; white-space: normal; }
.mk__meta { font-size: .6875rem; color: var(--fg-dim); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.section--paper .mk__meta { color: var(--fg-ink-dim); }

.mk__detail { padding: .9rem; min-height: 20rem; }
.mk__dhead { border-bottom: 1px solid var(--mk-line); padding-bottom: .75rem; margin-bottom: .85rem; }
.mk__kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .75rem; }
.mk__kv dt { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); align-self: center; }
.section--paper .mk__kv dt { color: var(--fg-ink-dim); }
.mk__kv dd { margin: 0; }

/* Conversation lanes */
.lane { display: grid; gap: .6rem; margin-top: .85rem; }
.msg { border: 1px solid var(--mk-line); border-left-width: 2px; padding: .6rem .7rem; font-size: .8125rem; }
.msg--ext { border-left-color: var(--zm-violet-txt); }
.msg--int { border-left-color: #ffc46b; background: rgba(255, 196, 107, .05); }
.msg__h {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: .35rem;
}
.section--paper .msg__h { color: var(--fg-ink-dim); }
.msg p { margin: 0; line-height: 1.5; }

/* --- Segmented control ---------------------------------------------------- */
.seg { display: inline-flex; border: 1px solid var(--mk-line); }
.seg button {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: 0;
  color: var(--fg-mute);
  padding: .35rem .6rem;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.seg button + button { border-left: 1px solid var(--mk-line); }
.seg button[aria-pressed='true'] { background: var(--zm-violet); color: #fff; }

/* --- Pipeline (CRM) ------------------------------------------------------- */
.pipe { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.pipe__col { border: 1px solid var(--mk-line); padding: .55rem; }
.pipe__h {
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.section--paper .pipe__h { color: var(--fg-ink-dim); }
.deal {
  border: 1px solid var(--mk-line);
  padding: .45rem .55rem;
  margin-bottom: .4rem;
  cursor: grab;
  transition: background .12s, transform .12s, border-color .12s;
}
.deal:hover { background: rgba(105, 77, 255, .12); border-color: var(--zm-violet-txt); transform: translateY(-1px); }
.deal__n { font-size: .75rem; font-weight: 600; }
.deal__v { font-family: var(--f-mono); font-size: .6875rem; color: var(--fg-dim); }
.section--paper .deal__v { color: var(--fg-ink-dim); }

/* --- Form builder --------------------------------------------------------- */
.fb { display: grid; gap: .9rem; }
@media (min-width: 50rem) { .fb { grid-template-columns: 11rem minmax(0, 1fr); } }
.fb__palette { display: grid; gap: .35rem; align-content: start; }
.fb__chip {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  border: 1px dashed var(--mk-line);
  background: none;
  color: var(--fg-dim);
  padding: .4rem .55rem;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.fb__chip:hover { border-style: solid; border-color: var(--zm-violet-txt); color: var(--fg); background: rgba(105, 77, 255, .1); }
.section--paper .fb__chip { color: var(--fg-ink-dim); }
.fb__canvas { border: 1px solid var(--mk-line); padding: .8rem; min-height: 14rem; display: grid; gap: .7rem; align-content: start; }
.fb__field { display: grid; gap: .3rem; position: relative; }
.fb__field label { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }
.section--paper .fb__field label { color: var(--fg-ink-dim); }
.fb__field input, .fb__field select, .fb__field textarea {
  font: inherit;
  font-size: .8125rem;
  padding: .45rem .55rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--mk-line);
  color: inherit;
  border-radius: 0;
}
.section--paper .fb__field input, .section--paper .fb__field select, .section--paper .fb__field textarea { background: #fff; }
.fb__del {
  position: absolute; top: 0; right: 0;
  background: none; border: 0; color: var(--fg-mute);
  font-family: var(--f-mono); font-size: .6875rem; cursor: pointer; padding: 0 .2rem;
}
.fb__del:hover { color: #ff8f8f; }
.fb__sig { border: 1px dashed var(--mk-line); height: 4.5rem; position: relative; cursor: crosshair; touch-action: none; }
.fb__sig canvas { width: 100%; height: 100%; display: block; }
.fb__sig-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-mute); pointer-events: none;
}
.fb__empty { font-family: var(--f-mono); font-size: .6875rem; color: var(--fg-mute); letter-spacing: .06em; }

/* --- Device frame --------------------------------------------------------- */
.dev { display: grid; gap: 1.2rem; justify-items: center; }
@media (min-width: 48rem) { .dev { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; } }
.dev__frame {
  width: 15rem;
  border: 1px solid var(--rule);
  border-radius: 1.6rem;
  padding: .5rem;
  background: #0a0920;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  flex: none;
}
.dev__screen { border-radius: 1.15rem; overflow: hidden; background: #12112f; height: 26rem; display: flex; flex-direction: column; }
.dev__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .8rem .35rem;
  font-family: var(--f-mono); font-size: .5625rem; color: var(--fg-mute); letter-spacing: .06em;
}
.dev__view { flex: 1; overflow-y: auto; padding: .6rem .7rem; }
.dev__view[hidden] { display: none; }
.dev__tabbar { display: flex; border-top: 1px solid var(--mk-line); }
.dev__tabbar button {
  flex: 1; background: none; border: 0; cursor: pointer;
  padding: .55rem .2rem;
  font-family: var(--f-mono); font-size: .5rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-mute); display: grid; gap: .18rem; justify-items: center;
  transition: color .12s;
}
.dev__tabbar button[aria-selected='true'] { color: var(--zm-violet-txt); }
.dev__tabbar svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.dev__card { border: 1px solid var(--mk-line); padding: .5rem .55rem; margin-bottom: .45rem; }
.dev__card .dev__ct { font-family: var(--f-body); font-size: .75rem; font-weight: 600; margin: 0 0 .2rem; letter-spacing: 0; }
.dev__card p { margin: 0; font-size: .6875rem; color: var(--fg-dim); line-height: 1.4; }
.dev__big { font-family: var(--f-mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }

/* --- API explorer --------------------------------------------------------- */
.api { display: grid; gap: 0; }
@media (min-width: 52rem) { .api { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); } }
.api__list { border-bottom: 1px solid var(--mk-line); max-height: 24rem; overflow-y: auto; }
@media (min-width: 52rem) { .api__list { border-bottom: 0; border-right: 1px solid var(--mk-line); } }
.api__ep {
  display: flex; gap: .5rem; align-items: center; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--mk-line);
  padding: .5rem .7rem; cursor: pointer; color: inherit;
  font-family: var(--f-mono); font-size: .6875rem; text-align: left;
  transition: background .12s;
}
.api__ep:hover { background: rgba(105, 77, 255, .1); }
.api__ep[aria-selected='true'] { background: rgba(105, 77, 255, .17); box-shadow: inset 2px 0 0 var(--zm-violet-txt); }
.verb {
  font-size: .5625rem; letter-spacing: .08em; padding: .12rem .3rem;
  border: 1px solid currentColor; flex: none; width: 3.1rem; text-align: center;
}
.verb--get { color: #5fd39a; }
.verb--post { color: var(--zm-violet-txt); }
.verb--del { color: #ff8f8f; }
.api__path { overflow: hidden; text-overflow: ellipsis; }
.api__panel { padding: .9rem; }
.code {
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.6;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--mk-line);
  padding: .7rem .8rem;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
  tab-size: 2;
}
.section--paper .code { background: rgba(20, 19, 46, .04); }
.code .k { color: var(--zm-violet-txt); }
.code .s { color: #5fd39a; }
.code .n { color: #ffc46b; }
.code .c { color: var(--fg-mute); }
.api__status { display: flex; gap: .6rem; align-items: center; margin: .7rem 0 .4rem; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .08em; color: var(--fg-mute); }
.api__ms { margin-left: auto; }

/* --- Integrations grid ---------------------------------------------------- */
.intg { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.intg__c {
  border: 1px solid var(--mk-line);
  padding: .7rem .7rem .6rem;
  display: grid;
  gap: .3rem;
  cursor: default;
  transition: border-color .14s, background .14s, transform .14s;
}
.intg__c:hover, .intg__c:focus-visible {
  border-color: var(--brand, var(--zm-violet-txt));
  background: rgba(105, 77, 255, .09);
  transform: translateY(-2px);
}
.intg__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .1rem; }
/* Marks sit muted by default and take their own brand colour on hover. Colour
   is an accent, not a wall of logos implying endorsement. */
.intg__i {
  width: 20px; height: 20px; display: block;
  fill: var(--fg-mute);
  transition: fill .16s, transform .16s;
}
.section--paper .intg__i { fill: var(--fg-ink-dim); }
.intg__c:hover .intg__i, .intg__c:focus-visible .intg__i {
  fill: var(--brand, var(--zm-violet-txt));
  transform: scale(1.06);
}
.intg__n { font-size: .8125rem; font-weight: 600; }
.intg__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot--live { background: #5fd39a; box-shadow: 0 0 0 3px rgba(95, 211, 154, .18); }
.dot--sync { background: #ffc46b; box-shadow: 0 0 0 3px rgba(255, 196, 107, .18); }
.dot--idle { background: var(--fg-mute); }
.intg__d { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); }
.section--paper .intg__d { color: var(--fg-ink-dim); }

/* --- Stat strip ----------------------------------------------------------- */
.stats { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.stat { border: 1px solid var(--mk-line); padding: .6rem .7rem; }
.stat__k { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }
.section--paper .stat__k { color: var(--fg-ink-dim); }
.stat__v { font-family: var(--f-mono); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-top: .2rem; }
.stat__d { font-family: var(--f-mono); font-size: .625rem; }
.up { color: #5fd39a; }
.down { color: #ff8f8f; }
.section--paper .up { color: #10744a; }
.section--paper .down { color: #b02525; }

/* --- Light-section corrections -------------------------------------------- */
/* The syntax and verb colours are tuned for the dark canvas; on the light
   "paper" sections they need darker equivalents to stay legible. */
.section--paper .code .k { color: #4924d4; }
.section--paper .code .s { color: #0f6b45; }
.section--paper .code .n { color: #8a5a00; }
.section--paper .code .c { color: var(--fg-ink-dim); }
.section--paper .verb--get { color: #0f6b45; }
.section--paper .verb--post { color: var(--zm-violet); }
.section--paper .verb--del { color: #b02525; }
.section--paper .api__status { color: var(--fg-ink-dim); }
.section--paper .fb__empty,
.section--paper .mk__count { color: var(--fg-ink-dim); }
.section--paper .num--neg { color: #b02525; }
.section--paper .msg--int { background: rgba(255, 196, 107, .10); border-left-color: #8a5a00; }
.section--paper .dev__frame { background: #12112f; }
.mk__subj--lg { font-size: 1rem; }
.fb__field .fb__lbl {
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-mute);
}
.section--paper .fb__field .fb__lbl { color: var(--fg-ink-dim); }

/* Sample-data disclaimer under the platform hero. */
.disclaimer {
  max-width: 62ch;
  color: var(--fg-mute);
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  line-height: 1.6;
}

/* Classes replacing styles the scripts used to write inline. The site's CSP
   forbids inline style attributes, including ones injected via innerHTML. */
.num--l { text-align: left; }
.mt-08 { margin-top: .8rem; }
.fb__check {
  display: flex; gap: .4rem; align-items: center;
  font-size: .8125rem; text-transform: none; letter-spacing: 0;
}
.api__desc { margin: 0 0 .6rem; font-size: .8125rem; }
.btn--xs { padding: .45rem .8rem; font-size: .6875rem; }
.fb__sig-hint.is-off { display: none; }

/* Cap the hero console table so it does not run the page long. The mask makes
   the cut read as "more below" rather than as a row sliced in half. */
.mk__scroll--cap {
  max-height: 21rem;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent);
}

/* Hero console panes are shorter than the full platform-page versions. */
.hero .mk__list, .hero .api__list { max-height: 19rem; }
.hero .mk__detail { min-height: 16rem; }

/* Category filter for the integrations grid. */
.seg--wrap { flex-wrap: wrap; border: 0; gap: .35rem; display: flex; }
.seg--wrap button {
  border: 1px solid var(--mk-line);
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}
.seg--wrap button + button { border-left: 1px solid var(--mk-line); }
.seg__n { opacity: .6; font-size: .9em; }
.seg--wrap button[aria-pressed='true'] .seg__n { opacity: .85; }
.section--paper .seg--wrap button { color: var(--fg-ink-dim); }
.section--paper .seg--wrap button[aria-pressed='true'] { color: #fff; }

/* Trademark note under the integration grid. */
.tm {
  font-family: var(--f-mono);
  font-size: .625rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--fg-mute);
  margin: .9rem 0 0;
  max-width: 74ch;
}
.section--paper .tm { color: var(--fg-ink-dim); }

/* --- Tech strip ------------------------------------------------------------ */
/* A row of brand marks naming what a thing is built on or connects to. Muted by
   default, each taking its own colour on hover, same rule as the grid. */
.tech { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
/* Chips sit in their active state by default: brand-tinted border, a wash of
   the brand colour, and the mark in full colour. Hover lifts and brightens. */
.tech li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid color-mix(in srgb, var(--brand, #6a4dff) 42%, transparent);
  background: color-mix(in srgb, var(--brand, #6a4dff) 11%, transparent);
  padding: .38rem .65rem .38rem .52rem;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: help;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.section--paper .tech li { color: var(--fg-ink); }
.tech li:hover, .tech li:focus-visible {
  border-color: var(--brand, #6a4dff);
  background: color-mix(in srgb, var(--brand, #6a4dff) 20%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand, #6a4dff) 22%, transparent);
}
.tech__i {
  width: 15px; height: 15px; flex: none; display: block;
  fill: var(--brand, #6a4dff);
  transition: transform .15s;
}
.tech li:hover .tech__i { transform: scale(1.1); }

/* Same treatment for the integration cards: active, not muted. */
.intg__c { background: color-mix(in srgb, var(--brand, #6a4dff) 7%, transparent); }
.intg__c:hover, .intg__c:focus-visible {
  background: color-mix(in srgb, var(--brand, #6a4dff) 15%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand, #6a4dff) 18%, transparent);
}
.intg__i { fill: var(--brand, #6a4dff); }
.section--paper .intg__i { fill: var(--brand, #4924d4); }

/* Ask-your-data */
.ask__field { flex: 1 1 22rem; }
.ask__field input { width: 100%; }
.ask__lbl {
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute); margin: 0 0 .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.section--paper .ask__lbl { color: var(--fg-ink-dim); }
.ask__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ask__chips .fb__chip { text-transform: none; letter-spacing: .01em; font-size: .6875rem; }

/* --- Rotating wireframe marks ---------------------------------------------- */
/* One per discipline. Rendered as real geometry by disciplines3d.js, so they
   stay crisp at any density and can respond to hover on the row. */
.solid {
  display: block;
  width: clamp(76px, 8.5vw, 116px);
  aspect-ratio: 1;
  margin: 0;
  position: relative;
}
.solid canvas { width: 100%; height: 100%; display: block; }
/* A faint well behind the mark so it reads as an object, not stray lines. */
.solid::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105, 77, 255, .22), transparent 70%);
  opacity: .75;
  transition: opacity .3s;
}
.index__row:hover .solid::before { opacity: 1; }

/* The rows gain a mark column on wider screens. The mark and its number share
   one grid cell, so the row keeps its three-column shape. */
.index__mark { display: grid; gap: .35rem; justify-items: start; }
.index__mark .index__n { grid-row: 2; }
@media (min-width: 52rem) {
  /* Rows carrying a mark align to the top and sit tighter. Baseline alignment
     against a 190px canvas was leaving well over 100px of dead space per row. */
  .index__row:has(.solid) {
    grid-template-columns: 8rem minmax(0, 13rem) minmax(0, 1fr);
    align-items: start;
    padding-block: 1.6rem;
    column-gap: 1.75rem;
  }
  .index__row:has(.solid) .index__t { margin-top: -.15rem; }
}
@media (max-width: 51.99rem) {
  .solid { width: 76px; }
  .index__mark { grid-auto-flow: column; align-items: center; gap: .7rem; }
  .index__mark .index__n { grid-row: auto; }
}

/* Section-level spacing is already tight; the utility margins inside sections
   were stacking on top of it and reintroducing the gap. */
.section .mk.mt-3 { margin-top: 1.5rem; }
.section .index.mt-3 { margin-top: 1.5rem; }
.section .index.mt-35 { margin-top: 1.75rem; }
.section .figure.mt-35 { margin-top: 1.75rem; }

/* --- Pills and tags over footage ------------------------------------------
   With the landing page sitting on a moving backdrop, small outlined chips had
   nothing behind them and their thin type broke up over bright frames. They now
   carry their own translucent backing everywhere, so they read on flat canvas
   and over video alike. */
.pill {
  background: rgba(9, 8, 28, .62);
  backdrop-filter: blur(6px);
}
.section--paper .pill { background: rgba(255, 255, 255, .72); }

.tags li {
  background: rgba(9, 8, 28, .58);
  backdrop-filter: blur(6px);
  border-color: rgba(236, 235, 245, .22);
  color: var(--fg);
}
.section--paper .tags li { background: rgba(255, 255, 255, .7); color: var(--fg-ink); }

/* Same for the small mono labels that sit loose on the page. */
.index__n, .kicker { text-shadow: 0 1px 10px rgba(6, 5, 20, .75); }