/* Dark mode removed 2026-08-23. It was unreachable (nothing ever set
   data-theme="dark": no toggle, no prefers-color-scheme handling) and it
   could not work as written - several surfaces are hard-coded light values
   in inline component styles, so forcing it on produced 56 WCAG AA contrast
   failures, as low as 1.09:1. Deleted rather than left as a trap; a real
   dark mode needs the inline surfaces tokenised first. */
/* OnboardIQ — design tokens & base styles
   ---------------------------------------- */

:root {
  /* Paper: warm off-white system (low-saturation) */
  --paper-50:  #FBF9F4;
  --paper-100: #F4F1EA;
  --paper-200: #ECE7DC;
  --paper-300: #DDD6C6;
  --paper-400: #C5BDA9;

  /* Ink: warm near-black */
  --ink-900: #16140F;
  --ink-800: #25221C;
  --ink-700: #3D3930;
  --ink-600: #413D35;  /* WCAG AAA: 8.76:1 on paper-200 #ECE7DC (was 5.9:1) */
  --ink-500: #4A463D;   /* tertiary. WCAG AAA: 7.62:1 on paper-200 #ECE7DC, the tightest
                           surface this token lands on (AA-only #6A6456 was 5.03 there). */
  --ink-400: #A5A091;
  --ink-300: #C2BEB3;

  /* Accent: industrial amber (credential / safety / torque) */
  --amber-700: #684811;
  --amber-600: #B07B1F;
  --amber-500: #D49A3A;   /* primary accent */
  --amber-400: #E2B25F;
  --amber-200: #F1DAA1;
  --amber-100: #F8ECCB;
  --amber-50:  #FCF6E4;

  /* Support: muted slate-teal */
  --slate-700: #2F3D49;
  --slate-600: #475866;
  --slate-500: #647686;
  --slate-300: #B6C0CA;
  --slate-100: #E2E7EC;

  /* Status family (distinct from accent) */
  --green-700: #1F4D38;
  --green-500: #3F7A5A;
  --green-100: #DCE9DF;
  --red-700:   #6F1F2C;
  --red-500:   #98353F;
  --red-100:   #ECD6D8;
  --blue-700:  #1F3D5E;
  --blue-500:  #3D5878;
  --blue-100:  #D7DEE9;

  /* Type stack */
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "IBM Plex Serif", "New York", Georgia, serif;

  /* Radii — restrained, slightly squared */
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Shadows — subtle, paper-on-paper, never glow */
  --shadow-1: 0 1px 0 rgba(22,20,15,.04), 0 1px 2px rgba(22,20,15,.05);
  --shadow-2: 0 1px 0 rgba(22,20,15,.04), 0 2px 8px rgba(22,20,15,.06), 0 8px 24px rgba(22,20,15,.06);
  --shadow-3: 0 12px 40px rgba(22,20,15,.12), 0 2px 8px rgba(22,20,15,.06);

  /* Spacing — 4px grid */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
}

/* Base resets within the canvas */
.oiq, .oiq * {
  box-sizing: border-box;
}
.oiq {
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--paper-100);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type scale ---------- */
.oiq-display {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.oiq-mono {
  font-family: var(--mono);
  font-feature-settings: "zero", "ss01";
}
.oiq-serif {
  font-family: var(--serif);
}
.oiq-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
  font-weight: 500;
}
.oiq-tabular {
  font-variant-numeric: tabular-nums;
}

/* Default link */
.oiq a { color: inherit; text-underline-offset: 2px; }

/* Subtle grid for diagrams */
.oiq-grid-bg {
  background-image:
    linear-gradient(to right, rgba(22,20,15,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,20,15,.045) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Status dot */
.oiq-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; vertical-align: 0;
}

/* Subtle stripe for unfinished bars / progress empty */
.oiq-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    rgba(22,20,15,.06) 4px 5px
  );
}

/* Custom scrollbar inside canvas content */
.oiq ::-webkit-scrollbar { width: 10px; height: 10px; }
.oiq ::-webkit-scrollbar-thumb { background: rgba(22,20,15,.18); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.oiq ::-webkit-scrollbar-track { background: transparent; }

/* Density modifier */
.oiq[data-density="compact"]  { --row-h: 32px; --pad-y: 6px; }
.oiq[data-density="regular"]  { --row-h: 40px; --pad-y: 10px; }
.oiq[data-density="comfy"]    { --row-h: 52px; --pad-y: 14px; }

/* Accent swaps (curated) */
.oiq[data-accent="amber"] {
  --accent-700: #684811; --accent-600: #B07B1F; --accent-500: #D49A3A;
  --accent-400: #E2B25F; --accent-200: #F1DAA1; --accent-100: #F8ECCB;
  --accent-50:  #FCF6E4;
}
.oiq[data-accent="verdigris"] {
  --accent-700: #1F4A3F; --accent-600: #2A5E51; --accent-500: #75AB9B; /* 600 darkened (paper text 6.41 -> 7.08:1); 500 lightened (ink-900 text on it 3.85 -> 5.79:1, WCAG 1.4.3) */
  /* accent-400 lightened for WCAG AAA: it is used as small text on the
     #16140F closer AND as that button's fill under dark text. 6.37:1 both
     ways before; 7.07:1 both ways now. */
  --accent-400: #93B9AF; --accent-200: #B5D2C8; --accent-100: #D6E5DF;
  --accent-50:  #E9F0EC;
}
.oiq[data-accent="oxblood"] {
  --accent-700: #5C1A24; --accent-600: #7A2530; --accent-500: #98353F;
  --accent-400: #B65762; --accent-200: #DEB1B6; --accent-100: #ECD0D3;
  --accent-50:  #F4E0E2;
}
/* Default if no accent set. BRAND.md §Palette makes Verdigris the primary accent
   and reserves Amber for warnings "used sparingly", so an element that forgets
   data-accent must not silently become an amber-branded surface. It is also the
   WCAG fix: amber --accent-600 #B07B1F is 3.50:1 on --paper-50, below AA 4.5:1
   for normal text, while verdigris --accent-600 #2A5E51 is 7.08:1 (AAA).
   Asserted by tests/contrast-zoom.test.mjs (OIQ-A11Y-004). */
.oiq:not([data-accent]) {
  --accent-700: #1F4A3F; --accent-600: #2A5E51;
  --accent-500: #75AB9B; --accent-400: #93B9AF;
  --accent-200: #B5D2C8; --accent-100: #D6E5DF;
  --accent-50:  #E9F0EC;
}

/* ─── DARK MODE — not a recolor.
   Dark uses a different hierarchy: heavier surface contrast (3 elevations
   instead of paper's 2), lighter type weights (text is 400/500, never 600
   for body), and the accent moves up a step (–400 instead of –500). */






/* Shadows tone down on dark */


/* Focus ring (single, consistent) */
.oiq :focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

/* WCAG 2.4.7 Focus Visible: a few controls are built with an inline
   `all: unset` reset, and an inline style beats the stylesheet rule above,
   so those buttons rendered with no focus indicator at all. `.oiq-focusable`
   marks them and wins back the ring. */
.oiq .oiq-focusable:focus-visible,
.oiq-focusable:focus-visible {
  outline: 2px solid var(--amber-500) !important;
  outline-offset: 3px !important;
  border-radius: var(--r-1);
}

/* WCAG 2.4.1 Bypass Blocks: visually hidden until focused. */
.oiq-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink-900, #16140f);
  color: var(--paper-50, #FBF9F4);
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.oiq-skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
}
input:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}
/* the skip target must not paint its own ring when focused programmatically */
.oiq main[id="main"]:focus { outline: none; }

/* 2026-05-16: marketing pages have a handful of grid layouts with fixed-width
   columns (e.g., 260px + 1fr) and content blocks that overflow viewport on
   sub-768px mobile. Per-section responsive grids are the proper fix but
   require touching every section. As an immediate fix, clip horizontal
   overflow at the document level so the marketing pages don't horizontal-
   scroll on iPhone 13 (390px). overflow-x: clip (rather than hidden) avoids
   creating a scroll container so internal scroll regions still work. */
html, body { overflow-x: clip; }

/* ─── Mobile responsive pass · 2026-05-22 ──────────────────────────────────
 *
 * Bridge selectors for the marketing home + footer grids.
 * Pattern ported from ITC website mobile-system.css + OpsTicket Shell.tsx.
 * Targets: 390x844 (iPhone 14), 375x667 (iPhone SE), 414x896 (iPhone 11).
 * Breakpoint: 820px (matches oiq-nav-desktop-links/ctas media rule in Nav JSX).
 *
 * Selectors are scoped to .oiq to avoid colliding with admin shell.
 */

@media (max-width: 820px) {

  /* --- Responsive home family ------------------------------------------ */
  .oiq-responsive-home .oiq-home-hero-grid,
  .oiq-responsive-home .oiq-home-clearance-grid,
  .oiq-responsive-home .oiq-home-itc-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  .oiq-responsive-home .oiq-home-annotation-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .oiq-responsive-home .oiq-responsive-actions {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-home .oiq-responsive-section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .oiq-responsive-home .oiq-home-spec-card,
  .oiq-responsive-home .oiq-home-spec-row > *,
  .oiq-responsive-home .oiq-home-queue-row > *,
  .oiq-responsive-home .oiq-home-capability-row > * {
    min-width: 0 !important;
  }

  .oiq-responsive-home .oiq-home-spec-row {
    grid-template-columns: 24px 14px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .oiq-responsive-home .oiq-home-spec-status {
    grid-column: 3 !important;
    justify-self: start !important;
    flex-wrap: wrap !important;
  }

  .oiq-responsive-home .oiq-home-queue-row {
    grid-template-columns: 10px minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    align-items: start !important;
  }

  .oiq-responsive-home .oiq-home-queue-meta,
  .oiq-responsive-home .oiq-home-queue-row [data-queue-owner] {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .oiq-responsive-home .oiq-home-capability-row {
    grid-template-columns: 40px 28px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .oiq-responsive-home .oiq-home-capability-link {
    grid-column: 3 !important;
    text-align: left !important;
  }

  .oiq-responsive-home .oiq-home-founder-photo {
    max-width: 280px !important;
    width: 100% !important;
  }

  .oiq-responsive-home .oiq-home-suite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .oiq-responsive-home .oiq-home-suite-grid > * {
    border-bottom: 1px solid var(--paper-300) !important;
  }

  .oiq-responsive-home .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-home .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-home .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive pricing family --------------------------------------- */
  .oiq-responsive-pricing .oiq-pricing-plan-grid,
  .oiq-responsive-pricing .oiq-pricing-calculator-grid,
  .oiq-responsive-pricing .oiq-pricing-calculator-cells,
  .oiq-responsive-pricing .oiq-pricing-govcon-grid,
  .oiq-responsive-pricing .oiq-pricing-govcon-factors,
  .oiq-responsive-pricing .oiq-pricing-trust-grid,
  .oiq-responsive-pricing .oiq-pricing-trust-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-pricing .oiq-pricing-plan-card {
    border-left: none !important;
    border-top: 1px solid var(--paper-300) !important;
    padding: 24px !important;
  }

  .oiq-responsive-pricing .oiq-pricing-plan-card:first-child {
    border-top: none !important;
  }

  .oiq-responsive-pricing .oiq-pricing-comparison {
    overflow: visible !important;
  }

  .oiq-responsive-pricing .oiq-pricing-comparison-header {
    display: none !important;
  }

  .oiq-responsive-pricing .oiq-pricing-comparison-row {
    grid-template-columns: minmax(0, 1fr) !important;
    border-top: 1px solid var(--paper-300) !important;
  }

  .oiq-responsive-pricing .oiq-pricing-comparison-row > :first-child {
    background: var(--paper-100) !important;
    font-weight: 500 !important;
  }

  .oiq-responsive-pricing .oiq-pricing-comparison-cell {
    border-left: none !important;
    border-top: 1px solid var(--paper-200) !important;
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  .oiq-responsive-pricing .oiq-pricing-comparison-cell::before {
    color: var(--ink-500);
    content: attr(data-plan);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .oiq-responsive-pricing .oiq-responsive-actions {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-pricing .oiq-responsive-section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .oiq-responsive-pricing .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-pricing .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-pricing .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive features family -------------------------------------- */
  .oiq-responsive-features .oiq-features-hero-content {
    padding: 64px 16px 48px !important;
  }

  .oiq-responsive-features .oiq-features-group {
    padding: 48px 16px !important;
  }

  .oiq-responsive-features .oiq-features-group-grid,
  .oiq-responsive-features .oiq-features-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .oiq-responsive-features .oiq-features-group-rail {
    position: static !important;
  }

  .oiq-responsive-features .oiq-features-card {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 24px !important;
  }

  .oiq-responsive-features .oiq-features-card-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .oiq-responsive-features .oiq-features-card-footer > * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .oiq-responsive-features .oiq-features-cta {
    padding: 56px 16px !important;
  }

  .oiq-responsive-features .oiq-responsive-actions {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-features .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-features .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-features .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive templates family ------------------------------------ */
  .oiq-responsive-templates,
  .oiq-responsive-templates main,
  .oiq-responsive-templates section,
  .oiq-responsive-templates section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-templates .oiq-templates-hero,
  .oiq-responsive-templates .oiq-templates-catalog,
  .oiq-responsive-templates .oiq-templates-cta {
    padding: 48px 16px !important;
  }

  .oiq-responsive-templates .oiq-templates-grid,
  .oiq-responsive-templates .oiq-templates-cta-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-templates .oiq-templates-cta-card {
    gap: 28px !important;
    padding: 24px !important;
  }

  .oiq-responsive-templates main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-templates .oiq-templates-cta-actions {
    align-items: flex-start !important;
  }

  .oiq-responsive-templates .oiq-templates-cta-actions > a {
    white-space: normal !important;
  }

  .oiq-responsive-templates .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-templates .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-templates .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive integrations family --------------------------------- */
  .oiq-responsive-integrations,
  .oiq-responsive-integrations main,
  .oiq-responsive-integrations main > section,
  .oiq-responsive-integrations main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-integrations main > section {
    padding: 48px 16px !important;
  }

  .oiq-responsive-integrations .oiq-integrations-hero-grid,
  .oiq-responsive-integrations .oiq-integrations-category-grid,
  .oiq-responsive-integrations .oiq-integrations-rigor-grid,
  .oiq-responsive-integrations .oiq-integrations-cta-card,
  .oiq-responsive-integrations .oiq-editorial-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-integrations .oiq-integrations-actions {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-integrations .oiq-integrations-categories-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .oiq-responsive-integrations .oiq-integrations-category-card {
    min-width: 0 !important;
    padding: 24px !important;
  }

  .oiq-responsive-integrations .oiq-integrations-adapter-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .oiq-responsive-integrations .oiq-integrations-cta-card {
    gap: 28px !important;
    padding: 24px !important;
  }

  .oiq-responsive-integrations .oiq-integrations-cta-actions {
    align-items: flex-start !important;
  }

  .oiq-responsive-integrations .oiq-integrations-cta-actions > a {
    white-space: normal !important;
  }

  .oiq-responsive-integrations main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-integrations .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-integrations .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-integrations .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive resources family ------------------------------------ */
  .oiq-responsive-resources,
  .oiq-responsive-resources main,
  .oiq-responsive-resources main > section,
  .oiq-responsive-resources main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-resources main > section {
    padding: 48px 16px !important;
  }

  .oiq-responsive-resources .oiq-resources-available-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .oiq-responsive-resources .oiq-resources-available-grid,
  .oiq-responsive-resources .oiq-resources-planned-row,
  .oiq-responsive-resources .oiq-resources-cta-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-resources .oiq-resources-available-card {
    min-width: 0 !important;
    padding: 24px !important;
  }

  .oiq-responsive-resources .oiq-resources-card-head,
  .oiq-responsive-resources .oiq-resources-card-actions {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-resources .oiq-resources-planned-head {
    display: none !important;
  }

  .oiq-responsive-resources .oiq-resources-planned-row {
    gap: 6px !important;
    padding: 18px !important;
  }

  .oiq-responsive-resources .oiq-resources-cta-card {
    gap: 28px !important;
    padding: 24px !important;
  }

  .oiq-responsive-resources .oiq-resources-cta-actions {
    align-items: flex-start !important;
  }

  .oiq-responsive-resources .oiq-resources-cta-actions > a {
    white-space: normal !important;
  }

  .oiq-responsive-resources main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-resources .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-resources .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-resources .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive compare family -------------------------------------- */
  .oiq-responsive-compare,
  .oiq-responsive-compare main,
  .oiq-responsive-compare main > section,
  .oiq-responsive-compare main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-compare main > section {
    padding: 48px 16px !important;
  }

  .oiq-responsive-compare [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-compare [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-compare [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-compare [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .oiq-responsive-compare main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-compare .oiq-compare-integration-callout {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .oiq-responsive-compare .oiq-compare-integration-copy {
    flex: none !important;
    width: 100% !important;
  }

  .oiq-responsive-compare main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-compare main img {
    max-width: 100% !important;
  }

  .oiq-responsive-compare .oiq-compare-table {
    overflow: visible !important;
  }

  .oiq-responsive-compare .oiq-compare-table-head {
    display: none !important;
  }

  .oiq-responsive-compare .oiq-compare-table-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 18px !important;
  }

  .oiq-responsive-compare .oiq-compare-table-row [data-compare-label] {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  .oiq-responsive-compare .oiq-compare-table-row [data-compare-label]::before {
    color: var(--ink-500);
    content: attr(data-compare-label);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .oiq-responsive-compare .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-compare .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-compare .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive about family ---------------------------------------- */
  .oiq-responsive-about,
  .oiq-responsive-about main,
  .oiq-responsive-about main > section,
  .oiq-responsive-about main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-about main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-about [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-about [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-about [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-about [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .oiq-responsive-about main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-about h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-about h2.oiq-display {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .oiq-responsive-about .oiq-about-suite-grid {
    overflow: visible !important;
  }

  .oiq-responsive-about .oiq-about-suite-card {
    border-left: 0 !important;
    border-top: 1px solid var(--paper-300) !important;
  }

  .oiq-responsive-about .oiq-about-suite-card:first-child {
    border-top: 0 !important;
  }

  .oiq-responsive-about .oiq-about-rail-mark {
    padding: 28px 0 0 !important;
    text-align: left !important;
  }

  .oiq-responsive-about .oiq-about-section-label {
    margin-top: 8px !important;
  }

  .oiq-responsive-about main blockquote {
    flex-direction: column !important;
    padding: 24px 20px !important;
  }

  .oiq-responsive-about main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-about main img {
    height: auto;
    max-width: 100% !important;
  }

  .oiq-responsive-about .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-about .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-about .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive partners family ------------------------------------- */
  .oiq-responsive-partners,
  .oiq-responsive-partners main,
  .oiq-responsive-partners main > section,
  .oiq-responsive-partners main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-partners main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-partners [style*="grid-template-columns"]:not([style*="140px"]):not([style*="24px"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-partners [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-partners [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-partners [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .oiq-responsive-partners main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-partners main [style*="padding: 56px"] {
    padding: 24px !important;
  }

  .oiq-responsive-partners h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-partners h2.oiq-display {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .oiq-responsive-partners main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-partners main img {
    height: auto;
    max-width: 100% !important;
  }

  .oiq-responsive-partners .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-partners .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-partners .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive stub family ----------------------------------------- */
  .oiq-responsive-stub, .oiq-responsive-stub main, .oiq-responsive-stub section, .oiq-responsive-stub section > div { max-width: 100% !important; }
  .oiq-responsive-stub section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-stub [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-stub [style*="grid-column"] { grid-column: auto !important; }
  .oiq-responsive-stub [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-stub main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-stub h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-stub main *, .oiq-responsive-stub footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-stub .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-stub .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-stub .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive auth family ----------------------------------------- */
  .oiq-responsive-auth { grid-template-columns: minmax(0, 1fr) !important; max-width: 100% !important; }
  .oiq-responsive-auth > *, .oiq-responsive-auth form, .oiq-responsive-auth form > * { box-sizing: border-box; min-width: 0; max-width: 100% !important; overflow-wrap: anywhere; }
  .oiq-responsive-auth [style*="padding: 56px"] { padding: 32px 20px !important; }
  .oiq-responsive-auth [style*="padding: 48px"] { padding: 28px 20px !important; }
  .oiq-responsive-auth [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-auth [style*="white-space: nowrap"] { white-space: normal !important; }
  .oiq-responsive-auth [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-auth input, .oiq-responsive-auth select, .oiq-responsive-auth textarea { box-sizing: border-box; width: 100% !important; }
  .oiq-responsive-auth h1.oiq-display, .oiq-responsive-auth h2.oiq-display { font-size: clamp(34px, 10vw, 48px) !important; }

  /* --- Responsive MSA family ------------------------------------------ */
  .oiq-responsive-msa, .oiq-responsive-msa main, .oiq-responsive-msa section, .oiq-responsive-msa section > div { max-width: 100% !important; }
  .oiq-responsive-msa section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-msa [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-msa [style*="grid-column"] { grid-column: auto !important; }
  .oiq-responsive-msa [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-msa main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-msa h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-msa main *, .oiq-responsive-msa footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-msa .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-msa .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-msa .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive help family ----------------------------------------- */
  .oiq-responsive-help, .oiq-responsive-help main, .oiq-responsive-help section, .oiq-responsive-help section > div { max-width: 100% !important; }
  .oiq-responsive-help section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-help [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-help [style*="grid-column"] { grid-column: auto !important; }
  .oiq-responsive-help [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-help main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-help h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-help main *, .oiq-responsive-help footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-help .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-help .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-help .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive white-label family ---------------------------------- */
  .oiq-responsive-white-label, .oiq-responsive-white-label main, .oiq-responsive-white-label section, .oiq-responsive-white-label section > div { max-width: 100% !important; }
  .oiq-responsive-white-label section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-white-label [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-white-label [style*="grid-column"] { grid-column: auto !important; }
  .oiq-responsive-white-label [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-white-label main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-white-label h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-white-label main *, .oiq-responsive-white-label footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-white-label .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-white-label .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-white-label .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive vault + signatures family --------------------------- */
  .oiq-responsive-vault-signatures, .oiq-responsive-vault-signatures main, .oiq-responsive-vault-signatures section, .oiq-responsive-vault-signatures section > div { max-width: 100% !important; }
  .oiq-responsive-vault-signatures section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-vault-signatures [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-vault-signatures [style*="grid-column"] { grid-column: auto !important; }
  .oiq-responsive-vault-signatures [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-vault-signatures main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-vault-signatures h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-vault-signatures main *, .oiq-responsive-vault-signatures footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-vault-signatures .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-vault-signatures .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-vault-signatures .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive compliance family ----------------------------------- */
  .oiq-responsive-compliance, .oiq-responsive-compliance main, .oiq-responsive-compliance section, .oiq-responsive-compliance section > div { max-width: 100% !important; }
  .oiq-responsive-compliance section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-compliance [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-compliance [style*="grid-column"] { grid-column: auto !important; }
  .oiq-responsive-compliance [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-compliance main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-compliance h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-compliance main *, .oiq-responsive-compliance footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-compliance .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-compliance .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-compliance .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive developer family ------------------------------------ */
  .oiq-responsive-developer, .oiq-responsive-developer main, .oiq-responsive-developer section, .oiq-responsive-developer section > div { max-width: 100% !important; }
  .oiq-responsive-developer section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-developer [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-developer [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-developer main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-developer h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-developer main *, .oiq-responsive-developer footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-developer pre { overflow: visible !important; white-space: pre-wrap !important; }
  .oiq-responsive-developer .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-developer .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-developer .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive demo family ----------------------------------------- */
  .oiq-responsive-demo, .oiq-responsive-demo main, .oiq-responsive-demo section, .oiq-responsive-demo section > div { max-width: 100% !important; }
  .oiq-responsive-demo section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-demo [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-demo [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-demo main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-demo h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-demo main *, .oiq-responsive-demo footer * { box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-demo input, .oiq-responsive-demo select, .oiq-responsive-demo textarea { width: 100% !important; }
  .oiq-responsive-demo .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-demo .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-demo .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive API family ------------------------------------------ */
  .oiq-responsive-api,
  .oiq-responsive-api main,
  .oiq-responsive-api section,
  .oiq-responsive-api section > div { max-width: 100% !important; }
  .oiq-responsive-api section[style*="padding"] { padding: 48px 16px !important; }
  .oiq-responsive-api [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oiq-responsive-api [style*="min-width"] { min-width: 0 !important; }
  .oiq-responsive-api main [style*="display: flex"] { flex-wrap: wrap !important; }
  .oiq-responsive-api h1.oiq-display { font-size: clamp(38px, 11vw, 54px) !important; }
  .oiq-responsive-api main *, .oiq-responsive-api footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .oiq-responsive-api pre { overflow: visible !important; white-space: pre-wrap !important; }
  .oiq-responsive-api table { table-layout: fixed !important; width: 100% !important; }
  .oiq-responsive-api th, .oiq-responsive-api td { padding: 8px 5px !important; white-space: normal !important; width: auto !important; }
  .oiq-responsive-api .oiq-responsive-footer-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .oiq-responsive-api .oiq-responsive-footer-bottom > [style*="flex: 1"] { display: none !important; }
  .oiq-responsive-api .oiq-responsive-footer-links { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* --- Responsive security family ------------------------------------- */
  .oiq-responsive-security,
  .oiq-responsive-security #root,
  .oiq-responsive-security section,
  .oiq-responsive-security section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-security section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-security [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-security [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-security [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-security [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-security h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-security #root *,
  .oiq-responsive-security footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-security .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-security .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-security .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive press family ---------------------------------------- */
  .oiq-responsive-press,
  .oiq-responsive-press main,
  .oiq-responsive-press main > section,
  .oiq-responsive-press main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-press main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-press [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-press [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-press [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-press main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-press h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-press main *,
  .oiq-responsive-press footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-press .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-press .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-press .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive changelog family ------------------------------------ */
  .oiq-responsive-changelog,
  .oiq-responsive-changelog main,
  .oiq-responsive-changelog main > section,
  .oiq-responsive-changelog main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-changelog main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-changelog [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-changelog [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-changelog main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-changelog h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-changelog main *,
  .oiq-responsive-changelog footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-changelog .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-changelog .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-changelog .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive status family --------------------------------------- */
  .oiq-responsive-status,
  .oiq-responsive-status main,
  .oiq-responsive-status main > section,
  .oiq-responsive-status main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-status main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-status [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-status [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-status [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .oiq-responsive-status main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-status h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-status main *,
  .oiq-responsive-status footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-status .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-status .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-status .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive docs family ----------------------------------------- */
  .oiq-responsive-docs,
  .oiq-responsive-docs main,
  .oiq-responsive-docs main > section,
  .oiq-responsive-docs main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-docs main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-docs [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-docs [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-docs main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-docs h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-docs main *,
  .oiq-responsive-docs footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-docs .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-docs .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-docs .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive contact family -------------------------------------- */
  .oiq-responsive-contact,
  .oiq-responsive-contact main,
  .oiq-responsive-contact main > section,
  .oiq-responsive-contact main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-contact main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-contact [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-contact [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-contact main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-contact h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-contact main *,
  .oiq-responsive-contact footer * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-contact main input,
  .oiq-responsive-contact main select,
  .oiq-responsive-contact main textarea {
    width: 100% !important;
  }

  .oiq-responsive-contact .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-contact .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-contact .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive why family ------------------------------------------ */
  .oiq-responsive-why,
  .oiq-responsive-why main,
  .oiq-responsive-why main > section,
  .oiq-responsive-why main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-why main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-why [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-why [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-why [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-why main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-why h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-why main *,
  .oiq-responsive-why footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-why main img {
    height: auto;
    max-width: 100% !important;
  }

  .oiq-responsive-why .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-why .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-why .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive trust family ---------------------------------------- */
  .oiq-responsive-trust,
  .oiq-responsive-trust main,
  .oiq-responsive-trust main > section,
  .oiq-responsive-trust main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-trust main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-trust [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-trust [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-trust [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-trust main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-trust h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-trust main *,
  .oiq-responsive-trust footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-trust .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-trust .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-trust .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive blog family ----------------------------------------- */
  .oiq-responsive-blog,
  .oiq-responsive-blog main,
  .oiq-responsive-blog main > section,
  .oiq-responsive-blog main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-blog main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-blog [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-blog [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-blog [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-blog [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .oiq-responsive-blog main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-blog main [style*="padding: 48px"] {
    padding: 24px !important;
  }

  .oiq-responsive-blog h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-blog h2.oiq-display {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  .oiq-responsive-blog main *,
  .oiq-responsive-blog footer * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-blog main pre {
    overflow: visible !important;
    white-space: pre-wrap !important;
  }

  .oiq-responsive-blog main input {
    width: 100% !important;
  }

  .oiq-responsive-blog .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-blog .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-blog .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive careers family -------------------------------------- */
  .oiq-responsive-careers,
  .oiq-responsive-careers main,
  .oiq-responsive-careers main > section,
  .oiq-responsive-careers main > section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-careers main > section[style*="padding"] {
    padding: 48px 16px !important;
  }

  .oiq-responsive-careers [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-careers [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-careers [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .oiq-responsive-careers main [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-careers main [style*="padding: 48px"] {
    padding: 24px !important;
  }

  .oiq-responsive-careers h1.oiq-display {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .oiq-responsive-careers h2.oiq-display {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .oiq-responsive-careers .oiq-careers-work-row {
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  .oiq-responsive-careers .oiq-careers-role-table {
    overflow: visible !important;
  }

  .oiq-responsive-careers .oiq-careers-role-head {
    display: none !important;
  }

  .oiq-responsive-careers .oiq-careers-role-row {
    gap: 10px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  .oiq-responsive-careers .oiq-careers-role-row [data-careers-label]:not(.oiq-careers-status-cell) {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .oiq-responsive-careers .oiq-careers-status-cell {
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .oiq-responsive-careers .oiq-careers-status-cell::before {
    flex: 0 0 82px;
    margin-right: 4px;
  }

  .oiq-responsive-careers .oiq-careers-role-row [data-careers-label]::before {
    color: var(--ink-500);
    content: attr(data-careers-label);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .oiq-responsive-careers main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-careers .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-careers .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-careers .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Responsive industries family ----------------------------------- */
  .oiq-responsive-industries,
  .oiq-responsive-industries main,
  .oiq-responsive-industries section,
  .oiq-responsive-industries section > div {
    max-width: 100% !important;
  }

  .oiq-responsive-industries section {
    padding: 48px 16px !important;
  }

  .oiq-responsive-industries [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oiq-responsive-industries [style*="grid-column"] {
    grid-column: auto !important;
  }

  .oiq-responsive-industries .oiq-industries-actions {
    flex-wrap: wrap !important;
  }

  .oiq-responsive-industries [style*="min-width"] {
    min-width: 0 !important;
  }

  .oiq-responsive-industries [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .oiq-responsive-industries .oiq-industries-pass-arrow {
    min-height: 24px;
    transform: rotate(90deg);
  }

  .oiq-responsive-industries [style*="padding: 48px"],
  .oiq-responsive-industries [style*="padding: 36px"],
  .oiq-responsive-industries [style*="padding: 32px"] {
    padding: 24px !important;
  }

  .oiq-responsive-industries main * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .oiq-responsive-industries main img {
    max-width: 100% !important;
  }

  .oiq-responsive-industries .oiq-responsive-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .oiq-responsive-industries .oiq-responsive-footer-bottom > [style*="flex: 1"] {
    display: none !important;
  }

  .oiq-responsive-industries .oiq-responsive-footer-links {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* --- Hero section: 2-column grid -> 1-column --- */
  .oiq [style*="gridTemplateColumns: '1.05fr 0.95fr'"],
  .oiq [style*="grid-template-columns: 1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero h1 font size clamp */
  .oiq .oiq-display {
    word-break: break-word;
  }

  /* --- Footer top-row: 7-col grid (1.3fr + 6x1fr) -> 2-col --- */
  .oiq [style*="gridTemplateColumns: '1.3fr repeat(6, 1fr)'"],
  .oiq [style*="grid-template-columns: 1.3fr repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Footer bottom-row flex -> wrap */
  .oiq [style*="display: flex"][style*="alignItems: center"][style*="gap: 16"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Suite map 6-col grid -> 3-col */
  .oiq [style*="gridTemplateColumns: 'repeat(6, 1fr)'"],
  .oiq [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 2-column side-by-side grids used in feature / customers sections */
  .oiq [style*="gridTemplateColumns: '1fr 1fr'"],
  .oiq [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Customers "evaluate the product" CTA row (1.4fr auto): stack + reduce
     padding so the nowrap CTA button fits within the mobile viewport. */
  .oiq-cust-eval {
    grid-template-columns: 1fr !important;
    padding: 28px !important;
    gap: 24px !important;
  }

  /* Left/right asymmetric grids (.95fr / .88fr pairs etc.) */
  .oiq [style*="gridTemplateColumns: '0.88fr 1.12fr'"],
  .oiq [style*="grid-template-columns: 0.88fr 1.12fr"],
  .oiq [style*="gridTemplateColumns: '1.12fr 0.88fr'"],
  .oiq [style*="grid-template-columns: 1.12fr 0.88fr"],
  .oiq [style*="gridTemplateColumns: '0.9fr 1.1fr'"],
  .oiq [style*="grid-template-columns: 0.9fr 1.1fr"],
  .oiq [style*="gridTemplateColumns: '1fr 0.82fr'"],
  .oiq [style*="grid-template-columns: 1fr 0.82fr"],
  .oiq [style*="gridTemplateColumns: '1.05fr 1fr'"],
  .oiq [style*="grid-template-columns: 1.05fr 1fr"],
  .oiq [style*="gridTemplateColumns: '0.95fr 1.05fr'"],
  .oiq [style*="grid-template-columns: 0.95fr 1.05fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tight inner padding on sections at 390px */
  .oiq section[style*="padding: '72px 24px"] {
    padding: 40px 16px !important;
  }
  .oiq section[style*="padding: '96px 24px"] {
    padding: 48px 16px !important;
  }

  /* Large display headline font-size clamp */
  .oiq h1.oiq-display {
    font-size: clamp(36px, 10vw, 72px) !important;
  }
  .oiq h2.oiq-display {
    font-size: clamp(28px, 8vw, 56px) !important;
  }

  /* Print + reduced-motion safety */
  @media print {
    .oiq-nav-drawer, .oiq-nav-hamburger { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .oiq-nav-drawer { transition: none !important; }
  }
}

/* Dark-mode safety: drawer inherits paper-50 surface in light mode */




@media (max-width: 719px) {
  .oiq-dashboard-page-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .oiq-dashboard-page-actions {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box;
    width: calc(100% - 4px) !important;
  }

  .oiq-dashboard-page-actions > * {
    max-width: 100%;
  }

  [data-auditor-shell] [style*="grid-template-columns: 160px 1fr 200px"],
  [data-auditor-shell] [style*="grid-template-columns: 1.5fr 1fr 200px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-auditor-shell] [style*="grid-template-columns: 160px 1fr 200px"] > :last-child,
  [data-auditor-shell] [style*="grid-template-columns: 1.5fr 1fr 200px"] > :last-child {
    width: auto !important;
    text-align: left !important;
  }
}