/* ═══════════════════════════════════════════════════════════════════
   WEB-IR PRELOGIN - aggressive B&W overrides for ir-site.css selectors
   "ultra travaillé": hairlines, corner crops, monospaced everything,
   hard offset shadows, inline-style nukers.
═══════════════════════════════════════════════════════════════════ */

/* ─── Neutralize the orange H1 marker highlight ─── */
body.mlab-pub .hl-mark {
    background: none !important;
    color: var(--mlab-ink) !important;
    padding: 0 !important;
    position: relative;
    display: inline-block;
}
body.mlab-pub .hl-mark::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.08em;
    height: 0.32em;
    background: var(--mlab-ink);
    opacity: 0.12;
    z-index: -1;
}

/* ─── Kill colored icon backgrounds set via inline style ─── */
body.mlab-pub .mlab-feature-icon,
body.mlab-pub .home-persona-icon,
body.mlab-pub .ir-pipeline-icon,
body.mlab-pub .ir-feature-icon,
body.mlab-pub .docs-card .docs-card-icon {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 6px !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
body.mlab-pub .mlab-feature-icon i,
body.mlab-pub .home-persona-icon i,
body.mlab-pub .ir-pipeline-icon i,
body.mlab-pub .ir-feature-icon i,
body.mlab-pub .docs-card .docs-card-icon i {
    color: var(--mlab-ink) !important;
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.75 !important;
}

/* ─── inline-coded <code>/<strong> in cards: kill rose/blue, force ink ─── */
/* Any inline <code> on a public page, whatever wraps it. Listing the parents
   one by one missed <dd>, <td> and <h5>, and Bootstrap's pink then leaked
   through. `:not(pre) >` keeps real code blocks out of it. */
body.mlab-pub :not(pre) > code {
    font-family: var(--mlab-font-mono);
    color: var(--mlab-ink) !important;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--mlab-ink) !important;
    border-radius: 4px;
    padding: 0.05em 0.4em;
    font-size: 0.85em;
    font-weight: 600;
}

/* ═══ grid-1px container - close the outer rounded look, hard edges ═══ */
body.mlab-pub .grid-1px {
    background: var(--mlab-ink) !important;
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 var(--mlab-ink);
    gap: 1px !important;
    overflow: hidden;
}
body.mlab-pub .grid-1px > .grid-cell {
    background: var(--mlab-paper) !important;
    border: 0 !important;
    transition: background 0.15s ease;
    position: relative;
}
/* Hover fill must stay OPAQUE: the cell sits on the black grid-1px
   backdrop (the 1px gap colour), so a translucent tint alone would let
   that black show through and turn the whole cell black. Layer the tint
   over the paper fill instead. */
body.mlab-pub .grid-1px > .grid-cell:hover {
    background: linear-gradient(rgba(0,0,0,0.035), rgba(0,0,0,0.035)), var(--mlab-paper) !important;
}
html[data-bs-theme=dark] body.mlab-pub .grid-1px > .grid-cell:hover {
    background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), var(--mlab-paper) !important;
}
body.mlab-pub .grid-1px .mlab-feature-card {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 1.6rem 1.4rem !important;
}
body.mlab-pub .grid-1px .mlab-feature-card:hover {
    transform: none;
    box-shadow: none !important;
}
/* Corner crop marks on each cell - editorial signature */
body.mlab-pub .grid-1px .grid-cell::before,
body.mlab-pub .grid-1px .grid-cell::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 0 solid var(--mlab-ink);
    opacity: 0.35;
    pointer-events: none;
}
body.mlab-pub .grid-1px .grid-cell::before {
    top: 8px; left: 8px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}
body.mlab-pub .grid-1px .grid-cell::after {
    bottom: 8px; right: 8px;
    border-bottom-width: 1.5px;
    border-right-width: 1.5px;
}

/* ═══ PIPELINE STEPS ═══ */
body.mlab-pub .ir-pipeline {
    background: var(--mlab-paper);
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 var(--mlab-ink);
    overflow: hidden;
    counter-reset: irstep;
    /* mlab-custom.css pads this container by 24px. Inside a bordered card
       whose children carry their own dividers, that padding read as a second
       frame floating in dead white space. The segments run edge to edge; the
       card's own border is the only frame. */
    padding: 0 !important;
}
body.mlab-pub .ir-pipeline-step {
    border-right: 1px solid var(--mlab-ink) !important;
    padding: 1.6rem 1.25rem !important;
    position: relative;
    counter-increment: irstep;
    border-radius: 0 !important;
}
body.mlab-pub .ir-pipeline-step:last-child {
    border-right: 0 !important;
}
body.mlab-pub .ir-pipeline-step:last-child { border-right: 0 !important; }
body.mlab-pub .ir-pipeline-step h6 {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: var(--mlab-ink) !important;
    margin-top: 0.85rem;
}
body.mlab-pub .ir-pipeline-step p {
    color: var(--mlab-ink-3) !important;
    font-size: 0.82rem;
    line-height: 1.55;
}
body.mlab-pub .ir-pipeline-step::before {
    content: "0" counter(irstep);
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-family: var(--mlab-font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--mlab-ink-4);
}

/* ═══ TERMINAL (keep dark - it's a terminal) but harden frame ═══ */
body.mlab-pub .home-terminal {
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 10px !important;
    box-shadow: 6px 6px 0 var(--mlab-ink) !important;
    background: #0a0a0a !important;
}
body.mlab-pub .home-terminal-bar {
    background: #000 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
body.mlab-pub .home-terminal-title {
    font-family: var(--mlab-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5) !important;
}

/* ═══ LOGO STRIP - boxed, mono ═══ */
body.mlab-pub .home-logo-strip {
    border-top: 1px solid var(--mlab-ink) !important;
    border-bottom: 1px solid var(--mlab-ink) !important;
    padding: 1.5rem 1rem;
}
body.mlab-pub .home-logo-strip-item {
    font-family: var(--mlab-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
}
body.mlab-pub .home-logo-strip-item i {
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    stroke-width: 1.75;
}
body.mlab-pub .home-logo-strip-item:hover { color: var(--mlab-ink) !important; }

/* ═══ DASHBOARD MOCKUP ═══ */
body.mlab-pub .home-mockup {
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 12px !important;
    box-shadow: 6px 6px 0 var(--mlab-ink) !important;
    background: var(--mlab-paper) !important;
}
body.mlab-pub .home-mockup-bar {
    background: var(--mlab-paper) !important;
    border-bottom: 1px solid var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.62rem;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
}
body.mlab-pub .home-mockup-side {
    background: var(--mlab-paper) !important;
    border-right: 1px solid var(--mlab-ink) !important;
}
body.mlab-pub .home-mockup-side-eyebrow {
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    font-family: var(--mlab-font-mono);
    font-weight: 600;
    letter-spacing: 0.18em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mlab-hairline);
    margin-bottom: 0.6rem !important;
}
body.mlab-pub .home-mockup-side-item.active {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .home-mockup-side-item.active i { color: var(--mlab-paper) !important; }
body.mlab-pub .home-mockup-side-count {
    color: var(--mlab-ink-3) !important;
    font-family: var(--mlab-font-mono);
}
body.mlab-pub .home-mockup-side-item.active .home-mockup-side-count {
    color: var(--mlab-paper) !important;
    opacity: 0.7;
}
body.mlab-pub .home-mockup-pill {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border-radius: 100px;
}
body.mlab-pub .home-mockup-pill .pulse-dot { background: var(--mlab-paper) !important; }
body.mlab-pub .home-mockup-alert {
    border-top-color: var(--mlab-hairline) !important;
}
/* Severity dots - keep tone via SHAPE not color */
body.mlab-pub .home-mockup-sev {
    width: 10px !important;
    height: 10px !important;
    background: var(--mlab-paper) !important;
    border: 1.5px solid var(--mlab-ink) !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}
body.mlab-pub .home-mockup-sev.high {
    background: var(--mlab-ink) !important;
}
body.mlab-pub .home-mockup-sev.medium {
    background: repeating-linear-gradient(
        45deg,
        var(--mlab-ink) 0 2px,
        var(--mlab-paper) 2px 4px
    ) !important;
}
body.mlab-pub .home-mockup-sev.low {
    background: var(--mlab-paper) !important;
}
body.mlab-pub .home-mockup-alert .src,
body.mlab-pub .home-mockup-alert .when {
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
}
body.mlab-pub .home-mockup-h h6 {
    color: var(--mlab-ink) !important;
    font-weight: 800;
}

/* ═══ MITRE GRID ═══ */
body.mlab-pub .home-mitre {
    padding: 1rem;
    border: 1.5px solid var(--mlab-ink);
    border-radius: 8px;
    background: var(--mlab-paper);
    box-shadow: 4px 4px 0 var(--mlab-ink);
}
body.mlab-pub .home-mitre-cell {
    background: var(--mlab-hairline) !important;
    border-radius: 2px !important;
    box-shadow: inset 0 0 0 1px var(--mlab-hairline);
}
body.mlab-pub .home-mitre-cell.lit-1 { background: rgba(0,0,0,0.18) !important; }
body.mlab-pub .home-mitre-cell.lit-2 { background: rgba(0,0,0,0.4) !important; }
body.mlab-pub .home-mitre-cell.lit-3 { background: rgba(0,0,0,0.7) !important; }
body.mlab-pub .home-mitre-cell.lit-4 { background: var(--mlab-ink) !important; }
html[data-bs-theme=dark] body.mlab-pub .home-mitre-cell.lit-1 { background: rgba(255,255,255,0.2) !important; }
html[data-bs-theme=dark] body.mlab-pub .home-mitre-cell.lit-2 { background: rgba(255,255,255,0.45) !important; }
html[data-bs-theme=dark] body.mlab-pub .home-mitre-cell.lit-3 { background: rgba(255,255,255,0.75) !important; }
html[data-bs-theme=dark] body.mlab-pub .home-mitre-cell.lit-4 { background: var(--mlab-ink) !important; }
body.mlab-pub .home-mitre-legend {
    font-family: var(--mlab-font-mono);
    letter-spacing: 0.18em;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
}

/* ═══ PERSONAS ═══ */
body.mlab-pub .home-persona {
    background: var(--mlab-paper) !important;
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 var(--mlab-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.mlab-pub .home-persona:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--mlab-ink);
}
body.mlab-pub .home-persona-role {
    font-family: var(--mlab-font-mono);
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    letter-spacing: 0.18em;
    font-weight: 600;
}
body.mlab-pub .home-persona h4 {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .home-persona .quote {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
    border-left: 2px solid var(--mlab-ink) !important;
    font-style: italic;
}
body.mlab-pub .home-persona .delivers {
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
}

/* ═══ COMPARISON TABLE ═══ */
body.mlab-pub .home-compare {
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 var(--mlab-ink);
    background: var(--mlab-paper);
}
body.mlab-pub .home-compare thead th {
    background: var(--mlab-paper) !important;
    border-bottom: 1.5px solid var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.62rem;
    font-weight: 600;
}
body.mlab-pub .home-compare td,
body.mlab-pub .home-compare th {
    border-color: var(--mlab-hairline) !important;
}
body.mlab-pub .home-compare .us {
    background: rgba(0,0,0,0.04) !important;
    color: var(--mlab-ink) !important;
}
html[data-bs-theme=dark] body.mlab-pub .home-compare .us { background: rgba(255,255,255,0.05) !important; }
body.mlab-pub .home-compare .y,
body.mlab-pub .home-compare .n,
body.mlab-pub .home-compare .m { color: var(--mlab-ink) !important; }
body.mlab-pub .home-compare .n { opacity: 0.4; }
body.mlab-pub .home-compare .m { opacity: 0.25; }

/* ═══ STATS BLOCK ═══ */
body.mlab-pub .home-stats {
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 var(--mlab-ink);
    background: var(--mlab-paper);
}
body.mlab-pub .home-stat {
    border-right: 1px solid var(--mlab-hairline) !important;
}
body.mlab-pub .home-stat-num {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800;
    letter-spacing: -0.03em;
}
body.mlab-pub .home-stat-label {
    font-family: var(--mlab-font-mono);
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    letter-spacing: 0.18em;
    font-weight: 600;
}

/* ═══ FAQ ═══ */
body.mlab-pub .home-faq-item {
    border-top: 1px solid var(--mlab-ink) !important;
}
body.mlab-pub .home-faq-item:last-child { border-bottom: 1px solid var(--mlab-ink) !important; }
body.mlab-pub .home-faq-q {
    font-weight: 700 !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    padding: 1.25rem 0.25rem !important;
}
body.mlab-pub .home-faq-q i { color: var(--mlab-ink) !important; opacity: 0.6 !important; }
body.mlab-pub .home-faq-item.is-open .home-faq-q i { opacity: 1 !important; }
body.mlab-pub .home-faq-a > div {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}

/* ═══ QUOTE ═══ */
body.mlab-pub .home-quote {
    border-left: 3px solid var(--mlab-ink) !important;
    padding-left: 1.75rem !important;
}
body.mlab-pub .home-quote blockquote {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 500;
    letter-spacing: -0.015em;
}
body.mlab-pub .home-quote-by .who { color: var(--mlab-ink) !important; opacity: 1 !important; }
body.mlab-pub .home-quote-by .role {
    color: var(--mlab-ink-3) !important;
    font-family: var(--mlab-font-mono);
    letter-spacing: 0.18em;
}

/* ═══ LIVE COUNTER (hero sub-line) ═══ */
body.mlab-pub .home-live-counter {
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    font-family: var(--mlab-font-mono);
    letter-spacing: 0.08em;
}
body.mlab-pub .home-live-counter strong { color: var(--mlab-ink) !important; }
body.mlab-pub .home-live-counter a {
    color: var(--mlab-ink) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--mlab-ink) !important;
}

/* ═══ IR CTA (the dark final CTA block) ═══ */
body.mlab-pub .ir-cta {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--mlab-ink);
    padding: 2.5rem 2rem !important;
    overflow: hidden;
    position: relative;
}
body.mlab-pub .ir-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--mlab-paper) 1px, transparent 1px);
    opacity: 0.07;
    background-size: 22px 22px;
    pointer-events: none;
}
body.mlab-pub .ir-cta h3 {
    color: var(--mlab-paper) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}
body.mlab-pub .ir-cta p {
    color: var(--mlab-paper) !important;
    opacity: 0.72;
}
body.mlab-pub .ir-cta .btn-light {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1.5px solid var(--mlab-paper) !important;
    border-radius: 100px !important;
    box-shadow: 3px 3px 0 rgba(128, 128, 128, 0.35);
}
body.mlab-pub .ir-cta .btn-outline-light {
    background: transparent !important;
    color: var(--mlab-paper) !important;
    border: 1.5px solid var(--mlab-paper) !important;
    border-radius: 100px !important;
}
body.mlab-pub .ir-cta .btn-outline-light:hover {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
}

/* ═══ SECTION HEAD subtitle link ═══ */
body.mlab-pub .mlab-section-subtitle {
    color: var(--mlab-ink-2) !important;
    font-size: 0.95rem;
    line-height: 1.6;
}
body.mlab-pub .mlab-section-subtitle a {
    color: var(--mlab-ink) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* ═══ Hero split layout - keep left aligned ═══ */
body.mlab-pub .home-hero-copy h1 {
    text-align: left !important;
    font-family: var(--mlab-font-sans);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.04em;
}
body.mlab-pub .home-hero-copy .lead {
    text-align: left !important;
    color: var(--mlab-ink-2) !important;
}

/* The topbar logo is handled upstream in mlab-prelogin.css: the avatar wrapper
   goes transparent and the light-mode mark is multiplied into the bar. This
   file used to repaint an ink circle behind it, which fought that rule and left
   a 40px logo bursting out of a 24px black disc. Do not reintroduce it. */
body.mlab-pub .app-topbar .logo-text {
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* ═══ Tonal badges - flatten to ink ═══ */
body.mlab-pub .tone-primary,
body.mlab-pub .tone-success,
body.mlab-pub .tone-info,
body.mlab-pub .tone-warning,
body.mlab-pub .tone-danger,
body.mlab-pub .tone-violet { color: var(--mlab-ink) !important; }
body.mlab-pub .badge.bg-primary,
body.mlab-pub .badge.bg-success,
body.mlab-pub .badge.bg-info,
body.mlab-pub .badge.bg-warning,
body.mlab-pub .badge.bg-danger {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border-radius: 4px;
    font-family: var(--mlab-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.2em 0.55em;
}

/* ═══ Pulse-dot global B&W ═══ */
body.mlab-pub .pulse-dot { background: var(--mlab-ink) !important; }

/* ═══ Section spacing tighten ═══ */
body.mlab-pub .mlab-section { padding: 3.5rem 0; }
body.mlab-pub .mlab-section-head { margin-bottom: 2rem; text-align: center; }
body.mlab-pub .mlab-section-head .mlab-section-label { justify-content: center; display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER - full-bleed band, centered inner row (vuln.mlab.sh pattern)
═══════════════════════════════════════════════════════════════════ */
body.mlab-pub footer.footer,
body.mlab-pub .footer {
    background: var(--mlab-paper) !important;
    background-color: var(--mlab-paper) !important;
    border-top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}
body.mlab-pub footer.footer > .container-fluid,
body.mlab-pub .footer > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
/* The full-bleed band */
body.mlab-pub .mlab-footer-full {
    border-top: 1px solid var(--mlab-hairline) !important;
    padding: 3.5rem 2rem 1.5rem !important;
    margin: 2rem 0 0 !important;
    max-width: none !important;
    width: 100% !important;
    position: relative;
}
/* Signature top-left tick */
body.mlab-pub .mlab-footer-full::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 64px;
    height: 1.5px;
    background: var(--mlab-ink);
}
/* Inner row capped + centered so columns don't drift to edges on wide screens */
body.mlab-pub .mlab-footer-full .row {
    max-width: 1280px;
    margin: 0 auto !important;
}
body.mlab-pub .mlab-footer-meta-bar {
    max-width: 1280px;
    margin: 2.5rem auto 0 !important;
}
@media (max-width: 767.98px) {
    body.mlab-pub .mlab-footer-full {
        padding: 2.5rem 1rem 1.25rem !important;
    }
}

/* ═══ MOBILE TOPBAR BRAND ═══
   The Konrix theme hides .logo-topbar under
   html[data-sidenav-size="offcanvas"], which config.js sets on narrow
   viewports. That rule exists for the dashboard shell, where the offcanvas
   sidebar carries the logo instead. A public page has no sidebar, so the
   mobile header was left with a hamburger and no site name at all. */
body.mlab-pub .logo-topbar {
    display: block !important;
    /* Breathing room on the left edge: the mark should not touch the viewport.
       Asymmetric on purpose, the nav that follows brings its own spacing. */
    padding: 0 0.75rem 0 1rem;
}
@media (min-width: 992px) {
    body.mlab-pub .logo-topbar { padding-left: 1.5rem; }
}
@media (max-width: 575.98px) {
    /* Keep the mark, drop the wordmark, so the row still fits the sign-in button. */
    body.mlab-pub .logo-topbar .logo-text { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SURFACE SYSTEM - two levels, not five.

   mlab-custom.css states the intent in a comment: "soft grey canvas,
   pure-white cards that pop". It was not what shipped here, because
   mlab-prelogin.css wires --mlab-paper to --background (#f9f9f9), which is
   also the page colour. Cards therefore painted themselves the exact colour
   of the page they sat on, while a handful of components reached for --card
   (#ffffff) instead. The result was five near-whites - #f9f9f9, #ffffff,
   #f4f5f7, #f3f4f6, #eef1f5 - separated by 1-2% and carrying no meaning.

   Public pages get exactly two surfaces:
     --mlab-canvas  the page. Never used for a card.
     --mlab-paper   every card, panel, table and cell. Never used for the page.

   Structure comes from ink borders and hard offset shadows, which is the
   language this design already speaks. Anything that needs a third level is a
   design bug, not a missing token.
═══════════════════════════════════════════════════════════════════ */
body.mlab-pub {
    --mlab-canvas: #eceef1;
    --mlab-paper:  #ffffff;
    /* background-COLOR, never the shorthand. mlab-prelogin.css paints the
       26px dot grid on this same element via background-image, and the
       shorthand would reset it along with background-size and -attachment. */
    background-color: var(--mlab-canvas) !important;
}
html[data-bs-theme=dark] body.mlab-pub {
    --mlab-canvas: #000000;
    --mlab-paper:  #0d0d0d;
}

/* The topbar sits on the canvas. The footer is a block of its own and paints
   paper edge to edge, wrapper and inner container alike, so it never ends up
   as a paper slab inside a canvas ring. */
body.mlab-pub .app-topbar {
    background-color: var(--mlab-canvas) !important;
}
body.mlab-pub .footer,
body.mlab-pub .footer > .container-fluid {
    background-color: var(--mlab-paper) !important;
}

/* Every panel that was reaching for a hardcoded white or for --card. */
body.mlab-pub .ir-pipeline-step,
body.mlab-pub .ir-feature,
body.mlab-pub .ir-plan,
body.mlab-pub .home-persona,
body.mlab-pub .docs-card,
body.mlab-pub .ir-faq-item,
body.mlab-pub .ir-included-item,
body.mlab-pub .ir-include-box,
body.mlab-pub .ir-comparison,
body.mlab-pub .sector-list,
body.mlab-pub .sector-row,
body.mlab-pub .sector-row.is-active,
body.mlab-pub .sector-row:hover,
body.mlab-pub .mlab-stepper-content {
    background-color: var(--mlab-paper) !important;
}

/* Cells inside a .grid-1px are paper; the 1px gaps are the ink container
   showing through, which is what draws the grid. */
body.mlab-pub .grid-cell {
    background-color: var(--mlab-paper) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TERMINAL & CODE SYNTAX - greyscale plus one accent.

   The default highlighting used seven hues (cyan, amber, green, violet,
   orange, pink, blue) plus red/yellow/green window dots. On a site that is
   otherwise strictly ink on paper, that block was the only place colour
   appeared, and it read as a screenshot from a different product.

   Structure is carried by weight and grey level. A single accent, the mlab
   amber, marks the values a reader is meant to substitute: strings, numbers
   and the response status. Nothing else is coloured.
═══════════════════════════════════════════════════════════════════ */
body.mlab-pub .home-terminal-body,
body.mlab-pub .docs-codeblock {
    color: #d4d4d8 !important;
}

/* Neutral chrome: the window dots are decoration, not status. */
body.mlab-pub .home-terminal-dot,
body.mlab-pub .home-terminal-dot.red,
body.mlab-pub .home-terminal-dot.yellow,
body.mlab-pub .home-terminal-dot.green {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

body.mlab-pub .home-term-comment,
body.mlab-pub .hl-comment {
    color: #8c8c8c !important;
    font-style: italic;
}
body.mlab-pub .home-term-prompt,
body.mlab-pub .hl-cmd {
    color: #8c8c8c !important;
}
body.mlab-pub .home-term-flag,
body.mlab-pub .home-term-key,
body.mlab-pub .hl-flag,
body.mlab-pub .hl-key,
body.mlab-pub .hl-var {
    color: #a3a3a3 !important;
}
body.mlab-pub .home-term-str,
body.mlab-pub .home-term-num,
body.mlab-pub .hl-str,
body.mlab-pub .hl-num {
    color: #e0a34a !important;
}
body.mlab-pub .home-term-resp,
body.mlab-pub .hl-section {
    color: #fafafa !important;
    font-weight: 600;
}
body.mlab-pub .home-terminal-cursor {
    background-color: #d4d4d8 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECONDARY TEXT - a real colour, not an opacity trick.

   Body copy was painted #374151 at opacity 0.6, which resolves to roughly
   #9ca3af on white: 2.8:1, below the 4.5:1 floor and the main reason the
   light theme read as washed out. Leads, card copy, list items and captions
   were all affected, so most of the words on the site sat under the minimum.

   --mlab-ink-2 is now a solid tone that clears 4.5:1 on paper in both themes
   while staying clearly subordinate to the near-black headings. Anything that
   wants to be quieter than this should change size or weight, not opacity.
═══════════════════════════════════════════════════════════════════ */
body.mlab-pub {
    --mlab-ink-2: #55595f;
    --mlab-ink-3: #63676e;
    --mlab-ink-4: #6f737a;
    --mlab-ink-5: #767a81;
}
html[data-bs-theme=dark] body.mlab-pub {
    --mlab-ink-2: #b6bbc3;
    --mlab-ink-3: #a7acb4;
    --mlab-ink-4: #9aa0a8;
    --mlab-ink-5: #8f959d;
}

body.mlab-pub .lead,
body.mlab-pub .mlab-section-subtitle,
body.mlab-pub .mlab-feature-card p,
body.mlab-pub .ir-feature p,
body.mlab-pub .ir-feature ul li,
body.mlab-pub .ir-faq-item p,
body.mlab-pub .ir-included-item p,
body.mlab-pub .ir-plan p,
body.mlab-pub .ir-pipeline-step p,
body.mlab-pub .home-persona .delivers,
body.mlab-pub .sector-row .sector-desc,
body.mlab-pub .mlab-stepper-content p,
body.mlab-pub .mlab-stepper-content li,
body.mlab-pub .ir-table td,
body.mlab-pub .ir-def dd,
body.mlab-pub .docs-callout,
body.mlab-pub .mlab-footer-text,
body.mlab-pub .home-faq-a,
body.mlab-pub .home-faq-a div,
body.mlab-pub .ir-hero p,
body.mlab-pub .ann-header p {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}

/* Small print stays quieter, but never below the large-text floor. */
body.mlab-pub .text-muted,
body.mlab-pub .mlab-stepper-content .text-muted {
    color: var(--mlab-ink-2) !important;
    opacity: 0.85 !important;
}

/* The version chip was 2.4:1 against its own fill. */
body.mlab-pub .mlab-ui-badge--secondary {
    background-color: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--mlab-hairline) !important;
}

/* ─── FAQ items: they were borderless list rows with no side padding, so
   painting them paper turned each one into a bare white slab with text
   against its edge. Give them the same card treatment as everything else. ─── */
body.mlab-pub .ir-faq-item {
    background-color: var(--mlab-paper) !important;
    border: 1px solid var(--mlab-hairline) !important;
    border-radius: 10px !important;
    padding: 1.1rem 1.15rem !important;
    height: 100%;
}
body.mlab-pub .ir-faq-item h6 {
    margin-bottom: 0.45rem;
}
body.mlab-pub .ir-faq-item p {
    margin-bottom: 0;
}

/* ─── Comparison tables: green ticks and red crosses were the only colour on
   an ink-and-paper page. Presence is weight, absence is opacity. ─── */
body.mlab-pub .ir-comparison .text-success,
body.mlab-pub .ir-comparison .text-danger,
body.mlab-pub .ir-comparison .text-muted {
    color: var(--mlab-ink) !important;
}
body.mlab-pub .ir-comparison .text-danger { opacity: 0.38; }
body.mlab-pub .ir-comparison .text-muted  { opacity: 0.24; }

/* ─── Pricing page: the plan cards carry their own <style> block, which mutes
   most of its own copy with opacity between 0.4 and 0.6. Every one of those
   landed under 3.5:1. Same rule as everywhere else: a real tone, no opacity. ─── */
body.mlab-pub .ir-plan-desc,
body.mlab-pub .ir-plan-features li,
body.mlab-pub .tax-note,
body.mlab-pub .period,
body.mlab-pub .ir-include-sub,
body.mlab-pub .ir-include-intro,
body.mlab-pub .ir-pricing-hero p {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}
body.mlab-pub .ir-include-sub {
    font-size: 0.72rem;
}
body.mlab-pub .ir-include-intro {
    font-size: 0.86rem;
    max-width: 640px;
    margin: 0 auto 1.25rem;
}

/* "Most Popular" was white on a fill the pub theme flattens to white: a badge
   with a 1:1 contrast ratio, i.e. an invisible one. */
body.mlab-pub .ir-plan-badge {
    background-color: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1.5px solid var(--mlab-ink) !important;
}


/* ─── Dashboard mockup: decorative, but still text a reader will try to read. ─── */
body.mlab-pub .home-mockup-side-count,
body.mlab-pub .home-mockup-side-item,
body.mlab-pub .home-mockup-side-eyebrow,
body.mlab-pub .home-mockup-h span:not(.home-mockup-pill):not(.home-mockup-pill *),
body.mlab-pub .home-mockup-alert .src,
body.mlab-pub .home-mockup-alert .when {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}

body.mlab-pub .home-mockup-h-sub {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--mlab-ink-2);
}

/* ─── Plan feature ticks are decoration, not status: every row has one. ─── */
body.mlab-pub .ir-plan-features li .feat-icon,
body.mlab-pub .ir-plan-features li .feat-icon.green,
body.mlab-pub .ir-plan-features li .feat-icon.muted {
    background: transparent !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--mlab-hairline) !important;
}

/* ═══ SIZING QUESTIONNAIRE ═══
   Same opacity muting as the rest of the site, in its own <style> block. */
body.mlab-pub .sizing-option-sub,
body.mlab-pub .sizing-sub,
body.mlab-pub .sizing-hint,
body.mlab-pub .sizing-back,
body.mlab-pub .sizing-step > p,
body.mlab-pub .sizing-result-why li {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}
body.mlab-pub .sizing-step h2 span,
body.mlab-pub .sizing-field label span {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}

/* Submission feedback is the one place colour carries meaning, so it stays -
   but at tones that clear 4.5:1 instead of the pastels it shipped with. */
body.mlab-pub .sizing-status.is-error {
    color: #b3261e !important;
}
body.mlab-pub .sizing-status.is-success {
    color: #14663b !important;
}
html[data-bs-theme=dark] body.mlab-pub .sizing-status.is-error {
    color: #ff9d94 !important;
}
html[data-bs-theme=dark] body.mlab-pub .sizing-status.is-success {
    color: #7ddaa4 !important;
}

/* ─── Step counter and footer meta links were the last two under the floor,
   in both themes. ─── */
body.mlab-pub .sizing-step-num {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}
body.mlab-pub .mlab-footer-meta-right a,
body.mlab-pub .mlab-footer-meta-left,
body.mlab-pub .mlab-footer-fineprint,
body.mlab-pub .mlab-footer-links a {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}
body.mlab-pub .mlab-footer-meta-right a:hover,
body.mlab-pub .mlab-footer-links a:hover {
    color: var(--mlab-ink) !important;
}

/* ─── MITRE legend: the grid cells were already greyscale, but the legend
   swatches under them kept an inline teal ramp, so the key did not match the
   thing it was a key for. Same ramp as .home-mitre-cell. ─── */
body.mlab-pub .home-mitre-legend-cell        { background: var(--mlab-hairline) !important; }
body.mlab-pub .home-mitre-legend-cell.lit-1  { background: rgba(0,0,0,0.18) !important; }
body.mlab-pub .home-mitre-legend-cell.lit-2  { background: rgba(0,0,0,0.4) !important; }
body.mlab-pub .home-mitre-legend-cell.lit-3  { background: rgba(0,0,0,0.7) !important; }
body.mlab-pub .home-mitre-legend-cell.lit-4  { background: var(--mlab-ink) !important; }
html[data-bs-theme=dark] body.mlab-pub .home-mitre-legend-cell.lit-1 { background: rgba(255,255,255,0.2) !important; }
html[data-bs-theme=dark] body.mlab-pub .home-mitre-legend-cell.lit-2 { background: rgba(255,255,255,0.45) !important; }
html[data-bs-theme=dark] body.mlab-pub .home-mitre-legend-cell.lit-3 { background: rgba(255,255,255,0.75) !important; }

/* ─── Inline links in body copy inherit the secondary tone, which puts them
   right on the contrast floor and makes them hard to spot as links at all.
   Full ink plus an underline: legible, and obviously clickable. ─── */
body.mlab-pub p a:not(.btn),
body.mlab-pub li a:not(.btn),
body.mlab-pub dd a:not(.btn),
body.mlab-pub .mlab-section-subtitle a:not(.btn),
body.mlab-pub .docs-callout a:not(.btn),
body.mlab-pub .home-faq-a a:not(.btn) {
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

/* ─── The "live" pill is an inverted chip: ink fill, paper text. It is set
   that way further up this file. Only its dot still carried the green. ─── */
body.mlab-pub .home-mockup-pill .pulse-dot {
    background-color: var(--mlab-paper) !important;
}

/* ─── Stepper numerals kept the theme's teal, the only colour left on the
   workflow page. Inverted chip, same as every other numbered marker here. ─── */
body.mlab-pub .mlab-stepper-number {
    background-color: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border-color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-stepper-item:not(:last-child)::before {
    background-color: var(--mlab-hairline) !important;
}

/* ─── Architecture accordion: the rows fell back to --ins-secondary-bg, a
   third surface, and the "01 / Service" counters sat at 3.5:1. ─── */
body.mlab-pub .sector-list .sector-row,
body.mlab-pub .sector-list .sector-row:hover,
body.mlab-pub .sector-list .sector-row.is-active {
    background-color: var(--mlab-paper) !important;
}
body.mlab-pub .sector-list .sector-row.is-active,
body.mlab-pub .sector-list .sector-row:hover {
    /* Selection reads as a rule on the edge, not as a different white. */
    box-shadow: inset 3px 0 0 var(--mlab-ink);
}
body.mlab-pub .sector-num,
body.mlab-pub .sector-desc {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}

/* Sector icon chips: same bordered chip as every other icon on the site,
   instead of a near-black fill that vanishes against dark paper. */
body.mlab-pub .sector-list .sector-icon {
    background-color: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1.5px solid var(--mlab-ink) !important;
    border-radius: 6px !important;
}
body.mlab-pub .sector-list .sector-icon i {
    color: var(--mlab-ink) !important;
}


/* ─── Section eyebrows sat at 3.6:1: ink-3 dimmed a further 15% by opacity.
   They label every section on every page, so they are not decoration. ─── */
body.mlab-pub .mlab-section-label,
body.mlab-pub .mlab-hero-badge,
body.mlab-pub .ann-header-badge,
body.mlab-pub .sizing-eyebrow {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}

/* ─── Comparison table headers carry opacity 0.5 upstream, which is fine for a
   decorative caption and not for the column names a reader compares against. ─── */
body.mlab-pub .ir-comparison th,
body.mlab-pub .ir-comparison thead th {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}

/* ─── Sizing controls still reached for the old off-white, reintroducing a
   third surface on the one page a visitor actually interacts with. ─── */
body.mlab-pub .sizing-option,
body.mlab-pub .sizing-result-card,
body.mlab-pub .sizing-field input,
body.mlab-pub .sizing-field textarea,
body.mlab-pub .sizing-field select {
    background-color: var(--mlab-paper) !important;
    border-color: var(--mlab-hairline) !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .sizing-option.is-selected,
body.mlab-pub .sizing-option:hover {
    border-color: var(--mlab-ink) !important;
}
body.mlab-pub .sizing-field input::placeholder,
body.mlab-pub .sizing-field textarea::placeholder {
    color: var(--mlab-ink-4) !important;
    opacity: 1;
}

/* ═══ CHANGELOG PAGE ═══
   The ann-* components were never brought into the public palette: dates sat
   between 2.1 and 2.4:1, the "Latest" chip was green, and the detail panel
   painted a navy surface that belongs to no theme here. */
body.mlab-pub .ann-version-date,
body.mlab-pub .ann-detail-date,
body.mlab-pub .ann-detail-description,
body.mlab-pub .ann-header p,
body.mlab-pub .ann-detail-body,
body.mlab-pub .ann-detail-body li,
body.mlab-pub .ann-detail-body p {
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}
body.mlab-pub .ann-version-name,
body.mlab-pub .ann-detail-version,
body.mlab-pub .ann-detail-body h2,
body.mlab-pub .ann-detail-body h3,
body.mlab-pub .ann-detail-body strong {
    color: var(--mlab-ink) !important;
}
body.mlab-pub .ann-latest-badge {
    background-color: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--mlab-ink) !important;
}
body.mlab-pub .ann-sidebar,
body.mlab-pub .ann-content,
body.mlab-pub .ann-detail,
body.mlab-pub .ann-version-item,
body.mlab-pub .ann-empty {
    background-color: var(--mlab-paper) !important;
}
body.mlab-pub .ann-version-item.active {
    background-color: var(--mlab-paper) !important;
    box-shadow: inset 3px 0 0 var(--mlab-ink);
}
body.mlab-pub .ann-version-dot {
    background-color: var(--mlab-ink-4) !important;
}
body.mlab-pub .ann-version-item.active .ann-version-dot {
    background-color: var(--mlab-ink) !important;
}
body.mlab-pub .ann-detail-body code,
body.mlab-pub .ann-detail-body pre {
    background-color: var(--mlab-canvas) !important;
    color: var(--mlab-ink) !important;
    border-color: var(--mlab-hairline) !important;
}

/* ─── The <pre> inside a static terminal was picking up a white background
   from the surface rules, so pale terminal text landed on white inside a
   dark frame: 1.04:1, i.e. invisible. The frame owns the background. ─── */
body.mlab-pub .home-terminal pre,
body.mlab-pub .home-terminal code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
    color: inherit !important;
    font-family: var(--mlab-font-mono);
}