/* ============================================================================= * VLM Run — Mintlify docs theme * * Mirrors the brand system defined in vlm-run/website * (tailwind.config.ts + app/globals.css + app/layout.tsx). Source of truth * for tokens lives in the website repo's CLAUDE.md "Design Tokens" table — * do not invent new colors here. If a color appears in design that is not * below, add it here first, then use it. * * Scope of this file (per docs theming brief): * - Light mode is the priority; dark mode inherits Mintlify defaults. * - Chrome + typography + components only. Not pixel-perfect parity with * the marketing site. * * Fonts: * - Body → Geist (Google Fonts, configured in docs.json) * - Heading → STK Bureau Serif, self-hosted in /fonts/. * Mintlify loads Book (400) via docs.json fonts.heading.source. * The @font-face block below adds Book-Italic, Medium (500), * SemiBold (600), and Bold (700) so MDX `**bold**` and `*italic*` * inside headings pick up the correct face. * File set mirrors what vlm-run/website registers in app/layout.tsx. * ========================================================================== */ /* ---------------------------------------------------------------------------- * 0a. Geist Mono — used by the website on table headers, first-column * identifiers, and capability cells. Must precede all other rules * because @import is only valid at the top of a stylesheet. * -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap'); /* ---------------------------------------------------------------------------- * 0. Heading font — supplementary weights (Book is loaded by Mintlify itself) * -------------------------------------------------------------------------- */ @font-face { font-family: 'STK Bureau Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/STKBureauSerif-Book-Italic.woff2') format('woff2'); } @font-face { font-family: 'STK Bureau Serif'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/STKBureauSerif-Medium.woff2') format('woff2'); } @font-face { font-family: 'STK Bureau Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/STKBureauSerif-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'STK Bureau Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/STKBureauSerif-Bold.woff2') format('woff2'); } /* ---------------------------------------------------------------------------- * 1. Brand tokens * -------------------------------------------------------------------------- */ :root { /* `--vlm-primary` is the link / underline / active-state blue. We use `primary-mid` (#1F5ACA) — the website's VlmLogo.tsx comment notes this is "the darker blue used by docs.vlm.run". Reads more legibly than the vivid `#1265FF` on long-form documentation pages. The vivid CTA blue remains available below as `--vlm-primary-vivid`. */ --vlm-primary: #1F5ACA; --vlm-primary-hover: #1848A2; --vlm-primary-vivid: #1265FF; --vlm-primary-mid: #1F5ACA; --vlm-primary-dark: #1848A2; --vlm-primary-light: #4D8BFF; --vlm-primary-border: #234D9F; --vlm-primary-tint: #E0EAFA; --vlm-primary-badge: #EEF2F9; /* dialed-down from #E6EDFC for subtler inline-code tint */ --vlm-navy: #102A56; --vlm-navy-dark: #010917; --vlm-navy-mid: #102255; --vlm-muted: #576782; /* Page surface: was #F5FAFF; toned to #FAFCFE so the cool tint does not accumulate against the sidebar chrome and inline tints. */ --vlm-surface: #FAFCFE; --vlm-border: #E1ECFA; /* was #D1E9FF — paler to match lighter surface */ --vlm-dark-border: #182231; --vlm-toc-active: #274275; --vlm-cap-blue: rgb(100, 151, 246); --vlm-cap-green: rgb(185, 246, 100); --vlm-cap-purple: rgb(177, 118, 255); --vlm-shadow-btn: rgba(0, 0, 0, 0.20) 0px -2px 0px 0px inset, rgba(0, 0, 0, 0.20) 0px 1px 2px 0px; } /* ---------------------------------------------------------------------------- * 2. Typography * Mintlify renders Instrument Serif on all h1–h6 once fonts.heading is * set in docs.json. The rules below refine size/letter-spacing to match * the website's display scale (50/48/40/38/32/18 with -0.02em–-0.04em). * -------------------------------------------------------------------------- */ body { color: var(--vlm-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--vlm-navy); letter-spacing: -0.02em; } /* Doc page title — anchored to website's display-lg (48px / 1 / -0.02em) */ h1 { font-size: 2.75rem; /* 44px — slightly tighter than display-lg for docs */ line-height: 1.05; letter-spacing: -0.02em; } h2 { font-size: 1.875rem; /* 30px — matches blog-h2 */ line-height: 1.2; letter-spacing: -0.04em; } h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.03em; } h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.03em; } p, li { color: var(--vlm-muted); letter-spacing: -0.01em; } /* ---------------------------------------------------------------------------- * 3. Links * Brand blue with the same 300ms ease-out feel as the website. * -------------------------------------------------------------------------- */ a { color: var(--vlm-primary); transition: color 200ms ease-out, opacity 200ms ease-out; } a:hover { color: var(--vlm-primary-hover); } /* In-prose links keep an underline for accessibility */ .prose a, article a { text-decoration-color: color-mix(in srgb, var(--vlm-primary) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color 200ms ease-out, color 200ms ease-out; } .prose a:hover, article a:hover { text-decoration-color: var(--vlm-primary); } /* ---------------------------------------------------------------------------- * 4. Primary CTA (top-right "Dashboard" button + any other primary navbar CTA) * Match the website's primary-mid pill: 20px radius, navy border, inset * shadow, hover lift. We target generic "primary button" patterns Mintlify * uses; if a future Mintlify release renames classes, only this block * needs to be retuned. * -------------------------------------------------------------------------- */ #navbar a[href="https://app.vlm.run"], .navbar a[href="https://app.vlm.run"], header a[href="https://app.vlm.run"] { border-radius: 20px !important; border: 1px solid var(--vlm-primary-border) !important; background-color: var(--vlm-primary-mid) !important; color: #fff !important; box-shadow: var(--vlm-shadow-btn); transition: transform 300ms ease-out, box-shadow 300ms ease-out, background-color 300ms ease-out, opacity 300ms ease-out; } #navbar a[href="https://app.vlm.run"]:hover, .navbar a[href="https://app.vlm.run"]:hover, header a[href="https://app.vlm.run"]:hover { transform: translateY(-1px); background-color: var(--vlm-primary-dark) !important; opacity: 0.95; } /* ---------------------------------------------------------------------------- * 5. Sidebar / left navigation * Active item picks up brand blue; everything else stays navy. * -------------------------------------------------------------------------- */ #sidebar a, nav[aria-label="Sidebar"] a { color: var(--vlm-navy); } #sidebar a:hover, nav[aria-label="Sidebar"] a:hover { color: var(--vlm-primary); } #sidebar a[aria-current="page"], #sidebar a[data-active="true"], nav[aria-label="Sidebar"] a[aria-current="page"] { color: var(--vlm-primary) !important; font-weight: 500; } /* ---------------------------------------------------------------------------- * 6. "On this page" — TOC active anchor uses the website's exact value * -------------------------------------------------------------------------- */ #toc a[aria-current="true"], #toc a[data-active="true"], nav[aria-label="On this page"] a[aria-current="true"], nav[aria-label="On this page"] a[data-active="true"] { color: var(--vlm-toc-active) !important; font-weight: 500; } /* ---------------------------------------------------------------------------- * 7. Card (Mintlify + ) * Was: solid #f9f9f9 fill that fought the surface bg. * Now: white card on surface, brand border, hover lift. * -------------------------------------------------------------------------- */ .card, [class*="card"][role="link"], a.card { background-color: #ffffff; border: 1px solid var(--vlm-border); border-radius: 12px; transition: transform 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out; } .card:hover, [class*="card"][role="link"]:hover, a.card:hover { transform: translateY(-1px); border-color: var(--vlm-primary); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--vlm-primary) 20%, transparent); } .card-demo { color: var(--vlm-primary-mid); background-color: var(--vlm-primary-tint); border-color: var(--vlm-primary-tint); } /* ---------------------------------------------------------------------------- * 8. Callouts: , , , , * Mintlify ships these with bg-*-50 / border-*-200 utility patterns. * We re-tint Info/Note/Tip with brand-coherent values. Warning kept stock. * -------------------------------------------------------------------------- */ /* Info / Note — soft brand-blue tint */ .callout-info, [role="note"][data-type="info"], [role="note"][data-type="note"] { background-color: var(--vlm-primary-badge); border-color: var(--vlm-border); color: var(--vlm-navy); } /* Tip — capability-green tint */ .callout-tip, [role="note"][data-type="tip"] { background-color: color-mix(in srgb, var(--vlm-cap-green) 18%, white); border-color: color-mix(in srgb, var(--vlm-cap-green) 45%, white); color: var(--vlm-navy); } /* ---------------------------------------------------------------------------- * 9. Code blocks * Mintlify is doing the Shiki theming via docs.json (github-light / * dark-plus) and already wraps the code block in a bordered, rounded * container (`data-component-part="code-block-root"`). We deliberately * do not add a second border on the inner

, which would otherwise
 *    show as a faint hairline just inside Mintlify's chrome.
 * -------------------------------------------------------------------------- */

pre,
[class*="code-block"] pre {
  border: 0;
  border-radius: 0;
  background: transparent;
}

:not(pre) > code {
  background-color: var(--vlm-primary-badge);
  color: var(--vlm-primary-dark);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875em;
}

/* ----------------------------------------------------------------------------
 * 10. Tables — mirror the website's PricingTable card treatment
 *     (vlm-run/website ▸ components/sections/PricingTable.tsx).
 *
 *     • Outer table reads as a bordered card (1px border, 6px radius,
 *       white body, surface-tinted header row).
 *     • Header cells: Geist Mono, 11px, 0.12em tracking, uppercase, navy.
 *     • First-column body cells: Geist Mono, 13px medium, navy — same
 *       treatment for any cell explicitly aligned center/right (where
 *       the website expects numeric / token-style values).
 *     • Other left-aligned body cells: sans, navy/80, 14px — for prose
 *       columns like "When to use" or "Notes".
 *     • Hairline horizontal separators between rows; no zebra stripes,
 *       no vertical dividers, no border under the last row.
 *
 *     The selectors target raw HTML  the way Mintlify's MDX
 *     emits it (no Mintlify-specific wrapper class is required).
 * -------------------------------------------------------------------------- */

/* The table itself plays the role of the website's wrapping : it
   carries the border, radius, and white background. `border-collapse:
   separate` is required so border-radius actually clips the corners.
   Note: `overflow: hidden` does NOT reliably clip /
   backgrounds in Chrome (table elements form their own layout root),
   so we explicitly round the four corner cells below to keep the
   surface-tint header from bleeding past the rounded outer border. */
table {
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--vlm-border) !important;
  border-radius: 6px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background-color: #ffffff;
  font-size: 0.875rem;        /* text-body-sm (14px) */
  color: var(--vlm-navy);
}

/* Header cells — surface tint applied per ) so the
   corner cells' border-radius can clip the tint to the rounded outer
   border. */
thead th {
  background-color: var(--vlm-surface);
  border: 0 !important;
  border-bottom: 1px solid var(--vlm-border) !important;
  /* 11.2px / 16px — a 20% trim from the previous 14/20, tighter than the
     website's `py-3 px-5` on PricingTable.tsx for a more compact docs
     reading rhythm. `!important` is required because Mintlify's Tailwind
     Typography plugin ships `.prose :where(thead th)` with `padding-top: 0`,
     which beats a plain `thead th` rule on specificity (0,1,0 vs 0,0,2). */
  padding: 0.7rem 1rem !important;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vlm-navy);
  /* Center text within the padded header band so top + bottom breathe
     symmetrically. `bottom` pinned the labels to the divider line. */
  vertical-align: middle;
}

/* Round the four corner cells to match the table's outer border-radius
   so the surface tint and white body don't bleed past the rounded
   outline. (overflow: hidden on 
 (NOT per 
 doesn't clip reliably in Chrome.) */
thead tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

thead tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

/* Multi-row headers (e.g. the rowspan/colspan domain table): the second
   header row sits inside  but should not have its own border.
   `!important` on padding for the same prose-specificity reason as the
   primary `thead th` rule above. */
thead tr + tr th {
  border-bottom: 1px solid var(--vlm-border) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 10.5px;
}

/* Header cells with explicit align attributes still respect them */
thead th[align="left"]   { text-align: left; }
thead th[align="center"] { text-align: center; }
thead th[align="right"]  { text-align: right; }

/* Inline  inside header cells should look like uppercase mono text,
   not a chip — the chip treatment is for body / prose code only. */
thead th code {
  background: transparent !important;
  color: var(--vlm-navy) !important;
  padding: 0 !important;
  font-size: inherit !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Body cells — generous padding, hairline rule between rows */
tbody tr {
  background-color: #ffffff;
}

tbody td {
  border: 0 !important;
  border-bottom: 1px solid var(--vlm-border) !important;
  /* 11.2px / 16px — a 20% trim from the previous 14/20 to match the
     header band's compact rhythm. Tighter than the website's `py-4 px-5`
     because docs body cells are usually single-line prose, not pricing
     tier cards. `!important` for the same prose-specificity reason as
     the `thead th` rule above. */
  padding: 0.7rem 1rem !important;
  vertical-align: middle;     /* center single-line cells; multi-line wraps still anchor cleanly */
  color: var(--vlm-navy);
  line-height: 1.55;
}

/* For multi-line cells (e.g. agent-pricing notes column) we want top
   alignment so the first line lines up with the first col identifier. */
tbody td:has(br),
tbody td:has(ul),
tbody td:has(p) {
  vertical-align: top;
}

tbody td ul {
  margin: 0;
  padding-left: 1.25rem;
}

tbody td li + li {
  margin-top: 0.35em;
}

tbody td li kbd {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--vlm-navy);
  background: transparent;
  border: 1px solid var(--vlm-border);
  padding: 0.05rem 0.3rem;
  margin: 0;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: none !important;
  text-shadow: none;
  filter: none;
  -webkit-box-shadow: none !important;
}

/* Keep inline identifiers (e.g. `document.markdown`,
   `healthcare.phi-redaction`) from breaking mid-token. Scoped to 
   tokens specifically so prose-style first-column cells (like
   "All Redaction & Edit Domains" with a long sub-list) can still wrap.
   The website achieves the same effect by setting explicit column
   widths in its PricingTable component. */
table code {
  white-space: nowrap;
}

/* Drop the bottom rule on the final row so the rounded card stays clean */
tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Slight extra gutter on the first/last columns so content doesn't crowd
   the card edge. Scaled down with the rest of the table padding: 28 →
   22 → 18 across the recent tightening passes. `!important` overrides
   Mintlify's prose `padding-inline-start/end: 0` on first/last cells. */
thead th:first-child,
tbody td:first-child {
  padding-left: 1.125rem !important;     /* 18px */
}

thead th:last-child,
tbody td:last-child {
  padding-right: 1.125rem !important;    /* 18px */
}

/* Tables with rotated/vertical row-header labels in the first column
   (e.g. the agents/introduction model comparison). Rotated text only
   needs ~22px of width so the column padding is cut down sharply on
   both the header and body cells. Scoped via `.rotated-row-headers`
   so normal first-column "key" cells (pricing tables etc.) keep the
   wider gutter. */
.rotated-row-headers thead th:first-child,
.rotated-row-headers tbody td:first-child {
  padding-left: 0.5rem !important;       /* 8px */
  padding-right: 0.5rem !important;      /* 8px */
}

/* Vertical divider between the row-header axis and the data columns —
   body rows only. The header row keeps the seamless top band so the
   tinted thead background reads as one continuous strip across the
   table top. */
.rotated-row-headers tbody td:first-child {
  border-right: 1px solid var(--vlm-border) !important;
}

/* First column gets the navy "key" treatment but stays in the sans
   body font — mono is reserved for column headers and inline 
   identifiers (handled by the rules below). Both selectors are needed
   because rowspan'd row-headers (e.g. agents/introduction comparison)
   shift the opening row's task label into td:nth-child(2); without
   the +td rule that label would lose the medium-weight/navy treatment
   that subsequent rows' first-children get, producing a row-to-row
   visual mismatch. */
tbody td:first-child,
tbody td[rowspan] + td {
  font-weight: 500;
  color: var(--vlm-navy);
}

/* Centered & right-aligned body cells stay in sans for prose, but
   render numeric tokens (single digits, "+2", "1.0×", etc.) at the
   same medium-navy weight so the column rhythm holds. */
tbody td[align="center"],
tbody td[align="right"] {
  font-weight: 500;
  color: var(--vlm-navy);
}

/* Inline  in any cell — including numeric centered cells
   that happen to wrap their value in  — uses the same mono
   face the website applies to identifier-style values. */
table code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
}

/* Honour explicit align attributes coming from the MDX */
td[align="left"]   { text-align: left; }
td[align="center"] { text-align: center; }
td[align="right"]  { text-align: right; }

/* Inline  inside body cells: drop the prose chip background and
   inherit the cell's mono-navy treatment, mirroring how the website's
   PricingTable renders raw identifiers (e.g. `document.*`, `flex`).
   The chipped primary-tint variant is reserved for inline code in
   *prose* (handled by the `:not(pre) > code` rule above). */
tbody td code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-size: inherit !important;
  border-radius: 0 !important;
  font-weight: inherit !important;
}

/* Tables nested inside  bodies (the agent pricing examples)
   should still render as cards, but at a slightly tighter rhythm. */
.accordion table,
[data-accordion-content] table {
  margin: 0.75rem 0;
  font-size: 0.8125rem;       /* 13px */
}

.accordion tbody td,
[data-accordion-content] tbody td,
.accordion thead th,
[data-accordion-content] thead th {
  padding: 0.75rem 1rem !important;      /* 12px 16px */
}

.accordion thead th:first-child,
[data-accordion-content] thead th:first-child,
.accordion tbody td:first-child,
[data-accordion-content] tbody td:first-child {
  padding-left: 1.25rem !important;
}

.accordion thead th:last-child,
[data-accordion-content] thead th:last-child,
.accordion tbody td:last-child,
[data-accordion-content] tbody td:last-child {
  padding-right: 1.25rem !important;
}

/* Gateway /models catalog tables — compact type, wrapped status band, no
   horizontal scroll on the main content column. Scoped via
   `.gateway-models-catalog` wrappers in gateway/models.mdx. */
.gateway-models-catalog table {
  table-layout: fixed;
  width: 100%;
  font-size: 0.8125rem;       /* 13px */
}

.gateway-models-catalog thead th {
  padding: 0.5rem 0.625rem !important;
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.35;
  white-space: normal;
  vertical-align: bottom;
}

.gateway-models-catalog tbody td {
  padding: 0.5rem 0.625rem !important;
  font-size: 0.8125rem;
  line-height: 1.45;
  vertical-align: top;
}

.gateway-models-catalog thead th:first-child,
.gateway-models-catalog tbody td:first-child {
  width: 26%;
  padding-left: 0.75rem !important;
  white-space: normal;
  word-break: break-word;
}

.gateway-models-catalog thead th:nth-child(2),
.gateway-models-catalog tbody td:nth-child(2) {
  width: 4.75rem;
  max-width: 4.75rem;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
  font-size: 0.75rem;         /* 12px */
  line-height: 1.35;
}

.gateway-models-catalog table code {
  white-space: normal;
  word-break: break-word;
  font-size: 0.75rem;         /* 12px */
}

.gateway-models-catalog tbody td:first-child a {
  word-break: break-word;
}

.gateway-models-catalog thead th:last-child,
.gateway-models-catalog tbody td:last-child {
  padding-right: 0.75rem !important;
}

/* Dark mode: drop the white card so Mintlify's stock dark-mode tables
   show through. The chrome above is calibrated for the brand light
   surface; in dark mode we let Mintlify own the look. */
html.dark table {
  background-color: transparent;
  border-color: var(--vlm-dark-border) !important;
}

html.dark thead tr,
html.dark thead tr th,
html.dark tbody tr {
  background-color: transparent;
}

html.dark thead th,
html.dark tbody td {
  color: inherit;
  border-color: var(--vlm-dark-border) !important;
}

/* ----------------------------------------------------------------------------
 * 11. Integration hero — programmatic "VLM Run × " figure
 *
 *     One CSS class for every integration page; replaces per-page
 *     composite images. Pairs the brand backdrop in /assets/blog-backdrop.png
 *     with two square logo tiles (vlm-run on the left, partner on the
 *     right) so adding a new integration is just a 3-line MDX block plus
 *     dropping the partner logo into /assets/integrations/.
 *
 *     Usage in MDX:
 *       
 *         
 *           
 *         
 *         
 *           
 *         
 *       
 * -------------------------------------------------------------------------- */

.integration-hero {
  width: 100%;
  /* 2:1 keeps the backdrop's swirl readable without dominating the
     above-the-fold space — matches the proportions of the existing
     pre-composited integration heroes. */
  aspect-ratio: 1024 / 500;
  background-image: url('/assets/blog-backdrop.png');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--vlm-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  margin: 1.5rem 0 2rem;
  overflow: hidden;
}

.integration-hero-tile {
  /* Tile width is a percentage of the hero so the layout scales with
     the docs content column (which Mintlify resizes between ~720px and
     ~1100px depending on viewport + sidebar state). */
  width: 17.6%;
  aspect-ratio: 1 / 1;
  /* 96% alpha lets the backdrop tone through faintly so the tiles feel
     "set into" the hero rather than stamped on top — softer than a
     flat #ffffff. */
  background-color: rgba(255, 255, 255, 0.96);
  /* 1px hairline using the standard table/card border token instead of
     the heavier 2px primary-light blue. Pairs with a light shadow for
     depth that reads as subtle elevation, not a hard outline. */
  border: 1px solid var(--vlm-border);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(16, 42, 86, 0.04),
    0 4px 12px rgba(31, 90, 202, 0.05);
  overflow: hidden;
}

/* Mintlify wraps every MDX `` in `` →
   `` for click-to-zoom. By default rmiz's
   own CSS sets `display: contents` on both spans (transparent to
   layout). We promote the outer wrapper to a real flex container
   that exactly fills the tile and centres its child.

   Why centre on this wrapper instead of on the tile itself? Putting
   `padding: 12%; display: flex` on `.integration-hero-tile` would
   resolve the percentage padding against the tile's *containing
   block* (the wide `.integration-hero`), not the tile's own width —
   so on a normal-width docs column the padding ends up larger than
   the tile and collapses the inner content area to zero, leaving an
   empty white box. With the flex container moved one level inward,
   the wrapper's containing block is the tile, the 12% padding
   resolves to 12% of the tile width as intended, and the inner
   `` always lands geometrically centred. */
.integration-hero-tile > [data-rmiz] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12%;
  box-sizing: border-box;
}

/* `[data-rmiz-content]` stays at rmiz's default `display: contents`
   so the `` is a direct flex child of `[data-rmiz]`. Forcing
   `width / height: 100%` makes the img fill the wrapper's 76% × 76%
   content area, and `object-fit: contain` then renders each SVG's
   content inside that square while preserving its intrinsic aspect
   ratio (leftover space is distributed evenly above/below or
   left/right). Net result: every logo, regardless of aspect ratio,
   lands geometrically centred inside the tile. */
.integration-hero-tile img,
.integration-hero-tile svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The vlm-run mark reads visually heavier than the partner wordmarks
   (squarer aspect, denser strokes) so it sits ~20% smaller than the
   partner logo by widening its tile padding from 12% to 20%. The
   `:has()` selector targets only the tile whose img has alt="VLM Run"
   so we don't have to add a modifier class to every integration MDX. */
.integration-hero-tile:has(img[alt="VLM Run"]) > [data-rmiz] {
  padding: 20%;
}

.platform-figure {
  position: relative;
  border: 1px solid var(--vlm-border);
  border-radius: 8px;
  padding: 3.5% 3% 3.5%;
  margin: 1.5rem 0 2rem;
  overflow: hidden;
  background-color: #ffffff;
}

.platform-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/images/platform-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Lift the screenshot above the backdrop layer. */
.platform-figure > [data-rmiz] {
  display: block;
  position: relative;
  z-index: 1;
}

.platform-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--vlm-border);
  box-shadow:
    0 1px 2px rgba(16, 42, 86, 0.10),
    0 12px 32px rgba(31, 90, 202, 0.14);
}

.platform-card-grid .card img,
.platform-card-grid [class*="card"][role="link"] img {
  background-color: #ffffff;
  background-image: url('/images/platform-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 14px;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
  border: 1px solid var(--vlm-border);
  border-bottom: 0;
  box-shadow: 0 1px 2px rgba(16, 42, 86, 0.05);
}

/* ----------------------------------------------------------------------------
 * 12. Domain catalog tags  (legacy; retuned to capability palette)
 * -------------------------------------------------------------------------- */

.domain-column {
  width: 240px;
  display: inline-block;
}

.function-column {
  width: 240px;
  display: inline-block;
}

.allowed-inputs-column {
  width: 160px;
  display: inline-block;
}

.description-column {
  width: 100%;
  display: inline-block;
}

.tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.9em;
  font-weight: 500;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 4px;
}

/* Document AI — capability green */
.tag-document {
  background: color-mix(in srgb, var(--vlm-cap-green) 22%, white);
  color: #2F6B14;
}

/* Image AI — capability blue */
.tag-image {
  background: color-mix(in srgb, var(--vlm-cap-blue) 22%, white);
  color: var(--vlm-primary-dark);
}

/* Video AI — capability purple */
.tag-video {
  background: color-mix(in srgb, var(--vlm-cap-purple) 22%, white);
  color: #5A2BB8;
}

/* Audio AI — primary-light tint */
.tag-audio {
  background: var(--vlm-primary-badge);
  color: var(--vlm-primary-dark);
}

/* URL inputs — primary-blue tint */
.tag-url {
  background: var(--vlm-primary-badge);
  color: var(--vlm-primary-dark);
}

/* Schema reference — softer purple than video to differentiate */
.tag-ref {
  background: color-mix(in srgb, var(--vlm-cap-purple) 14%, white);
  color: #5A2BB8;
}

/* ----------------------------------------------------------------------------
 * 12. Utility classes ported from website's globals.css
 * -------------------------------------------------------------------------- */

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.shadow-btn {
  box-shadow: var(--vlm-shadow-btn);
}