/* ═══════════════════════════════════════════════════
   mlab pre-login vibe — editorial B&W language ported
   from vuln.mlab.sh. Loaded after mlab-editorial.css so
   it can override anything that uses the same selector.
   Scoped to body.mlab-pub to stay out of the app shell.
═══════════════════════════════════════════════════ */

body.mlab-pub {
    --mlab-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mlab-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Neutrals now track the design-system tokens (single source of truth).
       --card-foreground flips charcoal #111827 (light) / #f8fafc (dark),
       so ink stays theme-correct; mid-grays derive from it via opacity. */
    --mlab-ink:        var(--primary);
    --mlab-ink-2:      color-mix(in srgb, var(--primary) 80%, var(--background));
    --mlab-ink-3:      color-mix(in srgb, var(--primary) 65%, var(--background));
    /* 48% resolved to #868686, i.e. 3.46:1 on the page ground: under the AA
       floor, and this tone is used as a text colour in all 14 of its call
       sites (footer fineprint, price table, breadcrumbs, placeholders). 57%
       is the lightest step that clears 4.5:1 while staying visibly lighter
       than ink-3. */
    --mlab-ink-4:      color-mix(in srgb, var(--primary) 57%, var(--background));
    --mlab-ink-5:      color-mix(in srgb, var(--primary) 30%, var(--background));
    --mlab-paper:      var(--background);
    --mlab-hairline:   var(--border);
    --mlab-dot:        rgba(0, 0, 0, 0.07);

    --mlab-shadow-hard:  4px 4px 0 var(--primary);
    --mlab-shadow-card:  0 30px 60px -20px rgba(0, 0, 0, 0.35),
                         0 0 0 1px rgba(0, 0, 0, 1);

    font-family: var(--mlab-font-sans);

    background-color: var(--mlab-paper);
    background-image: radial-gradient(var(--mlab-dot) 1px, transparent 1px);
    background-size: 26px 26px;
    background-attachment: fixed;
}

html[data-bs-theme=dark] body.mlab-pub {
    /* ink/paper/hairline/shadow-hard now inherit from the DS tokens above
       (they already flip in dark); only the dot-grid tint stays bespoke. */
    --mlab-dot:        rgba(255, 255, 255, 0.06);
    --mlab-shadow-card:  0 30px 60px -20px rgba(0, 0, 0, 0.7),
                         0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* ─── Headings ─── */
body.mlab-pub h1, body.mlab-pub h2, body.mlab-pub h3,
body.mlab-pub h4, body.mlab-pub h5, body.mlab-pub h6,
body.mlab-pub .mlab-glossary-letter {
    font-family: var(--mlab-font-sans);
    letter-spacing: -0.02em;
    color: var(--primary);
}
body.mlab-pub h1.fw-bold, body.mlab-pub h2.fw-bold, body.mlab-pub h3.fw-bold,
body.mlab-pub h1.fw-semibold, body.mlab-pub h2.fw-semibold, body.mlab-pub h3.fw-semibold {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}

body.mlab-pub code, body.mlab-pub kbd, body.mlab-pub pre, body.mlab-pub samp,
body.mlab-pub .mlab-mono,
body.mlab-pub .mlab-eyebrow, body.mlab-pub .mlab-hero-badge,
body.mlab-pub .mlab-section-label {
    font-feature-settings: 'zero', 'ss01';
}

/* ═══════════════════════════════════════════════════
   HERO — editorial layout with dotted background
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-hero,
body.mlab-pub .mlab-pub-hero {
    position: relative;
    padding: 5rem 0 3rem;
    background: transparent;
    overflow: visible;
}
body.mlab-pub .mlab-hero::before,
body.mlab-pub .mlab-hero::after,
body.mlab-pub .mlab-pub-hero::before,
body.mlab-pub .mlab-pub-hero::after { content: none; }

body.mlab-pub .mlab-hero h1,
body.mlab-pub .mlab-pub-hero h1 {
    font-family: var(--mlab-font-sans);
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--primary);
    margin-bottom: 1.25rem;
}

body.mlab-pub .mlab-hero h1 .mlab-slash,
body.mlab-pub .mlab-pub-hero h1 .mlab-slash {
    color: var(--mlab-ink-5);
    font-weight: 400;
    margin: 0 0.15em;
}

body.mlab-pub .mlab-hero h1 .mlab-underline,
body.mlab-pub .mlab-pub-hero h1 .mlab-underline,
body.mlab-pub .mlab-gradient-text {
    position: relative;
    display: inline-block;
    color: var(--primary);
    font-weight: 800;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: var(--primary) !important;
}
body.mlab-pub .mlab-hero h1 .mlab-underline::after,
body.mlab-pub .mlab-pub-hero h1 .mlab-underline::after,
body.mlab-pub .mlab-gradient-text::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.12em;
    height: 0.32em;
    background: var(--primary);
    opacity: 0.12;
    z-index: -1;
}

body.mlab-pub .mlab-hero p.lead,
body.mlab-pub .mlab-pub-hero p.lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--mlab-ink-2);
    max-width: 640px;
    margin: 0 auto 2rem;
}

/* ─── Hero badge / eyebrow with leading hairline ─── */
body.mlab-pub .mlab-hero-badge,
body.mlab-pub .mlab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mlab-ink-3) !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
}
body.mlab-pub .mlab-hero-badge::before,
body.mlab-pub .mlab-eyebrow::before {
    display: none;}

body.mlab-pub .mlab-hero-badge .pulse-dot,
body.mlab-pub .mlab-eyebrow .mlab-pulse-dot,
body.mlab-pub .mlab-pulse-dot {
    width: 7px;
    height: 7px;
    background: var(--mlab-ink) !important;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    animation: mlabPulseHard 2.4s ease-in-out infinite;
    display: inline-block;
}
html[data-bs-theme=dark] body.mlab-pub .mlab-pulse-dot,
html[data-bs-theme=dark] body.mlab-pub .pulse-dot {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
@keyframes mlabPulseHard {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.92); }
}

/* ═══════════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--mlab-ink-3) !important;
    margin-bottom: 0.6rem;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}
body.mlab-pub .mlab-section-label::before {
    display: none;}
body.mlab-pub .mlab-section-label::after { content: none !important; }
body.mlab-pub .mlab-section-label i[data-lucide] {
    width: 12px !important;
    height: 12px !important;
}

body.mlab-pub .mlab-section-title {
    font-family: var(--mlab-font-sans);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mlab-ink);
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    line-height: 1.1;
    margin-bottom: 1.75rem;
}

/* ═══════════════════════════════════════════════════
   FEATURE / TOOL CARDS — numbered, hard-edged
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-feature-card,
body.mlab-pub .mlab-card-pub,
body.mlab-pub .mlab-tool-card,
body.mlab-pub .mlab-step,
body.mlab-pub .mlab-quote-card,
body.mlab-pub .mlab-pain-card,
body.mlab-pub .mlab-mock {
    background: var(--mlab-paper);
    border: 1px solid var(--mlab-ink) !important;
    border-radius: 12px !important;
    box-shadow: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
body.mlab-pub .mlab-feature-card:hover,
body.mlab-pub .mlab-card-pub:hover,
body.mlab-pub .mlab-tool-card:hover {
    box-shadow: var(--mlab-shadow-md) !important;
    transform: translateY(-2px);
    border-color: var(--mlab-ink) !important;
}

body.mlab-pub .mlab-feature-card--num {
    text-align: left !important;
    padding: 1.5rem 1.25rem 3rem;
    position: relative;
}
body.mlab-pub .mlab-feature-card--num::after {
    content: attr(data-num);
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    font-family: var(--mlab-font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-4);
    opacity: 0.8;
}
body.mlab-pub .mlab-feature-card--num .mlab-feature-icon {
    margin-left: 0;
    margin-bottom: 1rem;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    background: var(--mlab-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.mlab-pub .mlab-feature-card--num h5 {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}
body.mlab-pub .mlab-feature-card--num p {
    font-size: 0.8rem;
    color: var(--mlab-ink-3) !important;
    line-height: 1.55;
    margin-bottom: 0;
}

body.mlab-pub .mlab-feature-arrow {
    position: absolute;
    bottom: 0.85rem;
    right: 0.95rem;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mlab-paper);
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease,
                background 0.15s ease, color 0.15s ease;
}
body.mlab-pub .mlab-feature-card--num:hover .mlab-feature-arrow {
    transform: scale(1);
    opacity: 1;
    background: var(--mlab-ink);
    color: var(--mlab-paper);
}
body.mlab-pub .mlab-feature-card--num:hover .mlab-feature-arrow i {
    color: var(--mlab-paper);
}

/* ═══════════════════════════════════════════════════
   ICON BADGES — neutralized into black/white
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-icon-badge {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 6px !important;
}
body.mlab-pub .mlab-icon-badge.mlab-icon-badge-lg {
    border-radius: 10px !important;
}
body.mlab-pub .mlab-icon-badge.tone-primary,
body.mlab-pub .mlab-icon-badge.tone-info,
body.mlab-pub .mlab-icon-badge.tone-success,
body.mlab-pub .mlab-icon-badge.tone-warning,
body.mlab-pub .mlab-icon-badge.tone-danger,
body.mlab-pub .mlab-icon-badge.tone-violet { color: var(--mlab-ink) !important; }

/* ═══════════════════════════════════════════════════
   VIEW-ALL PILL LINK
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-view-all,
body.mlab-pub .mlab-link-arrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: background 0.15s ease, color 0.15s ease;
}
body.mlab-pub .mlab-view-all:hover,
body.mlab-pub .mlab-link-arrow:hover {
    background: var(--mlab-ink);
    color: var(--mlab-paper) !important;
}
body.mlab-pub .mlab-view-all i,
body.mlab-pub .mlab-link-arrow i { transition: transform 0.15s ease; }
body.mlab-pub .mlab-view-all:hover i,
body.mlab-pub .mlab-link-arrow:hover i { transform: translateX(2px); }

/* ═══════════════════════════════════════════════════
   FLOATING SIGNATURE LABELS
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-float {
    position: absolute;
    width: auto !important;
    max-width: max-content;
    background: var(--mlab-paper);
    color: var(--mlab-ink);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: var(--mlab-shadow-sm);
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}
body.mlab-pub .mlab-float--inverted {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .mlab-float--1 { top: 90px;  right: 6%;  transform: rotate(4deg); }
body.mlab-pub .mlab-float--2 { top: 180px; left: 5%;   transform: rotate(-3deg); }
body.mlab-pub .mlab-float--3 { top: 320px; right: 4%;  transform: rotate(-2deg); }
@media (max-width: 1199px) {
    body.mlab-pub .mlab-float--1 { right: 2%; }
    body.mlab-pub .mlab-float--2 { left: 2%; }
    body.mlab-pub .mlab-float--3 { right: 2%; }
}
@media (max-width: 991px) {
    body.mlab-pub .mlab-float--2,
    body.mlab-pub .mlab-float--3 { display: none; }
    body.mlab-pub .mlab-float--1 { top: 70px; right: 4%; }
}
@media (max-width: 575px) {
    body.mlab-pub .mlab-float { display: none; }
}

/* ═══════════════════════════════════════════════════
   BUTTONS — pill, hard edges on primary CTA
═══════════════════════════════════════════════════ */
body.mlab-pub .btn-primary,
body.mlab-pub .btn-lg-cta {
    background: var(--primary) !important;
    border: 1px solid transparent !important;
    color: var(--primary-foreground) !important;
    border-radius: var(--radius) !important;
    font-weight: 500;
    letter-spacing: normal;
    box-shadow: none;
    transition: background-color var(--mlab-dur-fast) var(--mlab-ease),
                box-shadow var(--mlab-dur-fast) var(--mlab-ease);
}
body.mlab-pub .btn-primary:hover,
body.mlab-pub .btn-lg-cta:hover {
    box-shadow: 0 4px 12px rgba(var(--mlab-shadow-ink-rgb), .20);
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
}
body.mlab-pub .btn-outline-primary,
body.mlab-pub .btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius) !important;
    font-weight: 500;
}
body.mlab-pub .btn-outline-primary:hover,
body.mlab-pub .btn-outline-secondary:hover {
    background: var(--muted) !important;
    color: var(--foreground) !important;
}

/* ═══════════════════════════════════════════════════
   ALERTS + INLINE CODE — aligned on mlab-ui
═══════════════════════════════════════════════════
   Two leftovers from the vendor theme that the migration passes could not
   reach, because neither carries an editorial declaration to rewrite:

   - `.alert-info` renders its text in the theme's cyan (#6ad3e5), which lands
     at 2.88:1 on the light ground and reads as a foreign colour next to the
     migrated palette. Same story for the other variants.
   - inline `<code>` inherits --ins-code-color (#ec4899, pink), 3.35:1.

   Both are rebuilt here on the same parts as .mlab-ui-alert: tinted ground,
   semantic border, foreground text. */
body.mlab-pub .alert {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--foreground);
    font-size: 0.875rem;
}
body.mlab-pub .alert-info {
    border-color: rgba(var(--mlab-info-rgb), .35);
    background: var(--mlab-info-bg);
    color: var(--foreground);
}
body.mlab-pub .alert-success {
    border-color: rgba(var(--mlab-success-rgb), .35);
    background: var(--mlab-success-bg);
    color: var(--foreground);
}
body.mlab-pub .alert-warning {
    border-color: rgba(var(--mlab-warning-rgb), .35);
    background: var(--mlab-warning-bg);
    color: var(--foreground);
}
body.mlab-pub .alert-danger {
    border-color: rgba(var(--mlab-danger-rgb), .35);
    background: var(--mlab-danger-bg);
    color: var(--foreground);
}
/* The icon keeps the semantic hue; only the prose goes back to foreground. */
body.mlab-pub .alert-info [data-lucide],
body.mlab-pub .alert-info svg { color: var(--mlab-info); }
body.mlab-pub .alert-success [data-lucide],
body.mlab-pub .alert-success svg { color: var(--mlab-success); }
body.mlab-pub .alert-warning [data-lucide],
body.mlab-pub .alert-warning svg { color: var(--mlab-warning); }
body.mlab-pub .alert-danger [data-lucide],
body.mlab-pub .alert-danger svg { color: var(--mlab-danger); }

body.mlab-pub :not(pre) > code {
    color: var(--foreground);
    background: var(--muted);
    border-radius: calc(var(--radius) - 4px);
    padding: 0.1em 0.35em;
    font-size: 0.875em;
}

/* ═══════════════════════════════════════════════════
   SECTION SHELL
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-pub-section,
body.mlab-pub .mlab-pub-section-muted {
    padding: 4rem 0;
    background: transparent;
    border-top: 1px solid var(--mlab-hairline);
}
body.mlab-pub .mlab-pub-section-muted {
    background: linear-gradient(180deg, rgba(0,0,0,0.025), transparent 40%);
}
html[data-bs-theme=dark] body.mlab-pub .mlab-pub-section-muted {
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%);
}

/* ═══════════════════════════════════════════════════
   PAIN CARDS — keep semantic red but editorialize
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-pain-card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--mlab-shadow-sm);
}
body.mlab-pub .mlab-pain-card .mlab-pain-tag {
    color: var(--mlab-ink) !important;
    letter-spacing: 0.04em;
}
body.mlab-pub .mlab-pain-card .mlab-pain-quote {
    color: var(--mlab-ink-2) !important;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════
   STEPS / QUOTE CARDS
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-step {
    padding: 1.5rem 1.25rem;
    background: var(--mlab-paper);
    border: 1px solid var(--mlab-ink) !important;
    border-radius: 12px;
}
body.mlab-pub .mlab-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--mlab-paper);
    color: var(--mlab-ink);
    font-family: var(--mlab-font-mono);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
body.mlab-pub .mlab-quote-card {
    border-left: 3px solid var(--mlab-ink) !important;
    border-radius: 0 8px 8px 0 !important;
    background: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-sm);
    padding: 1rem 1.25rem;
}

/* ═══════════════════════════════════════════════════
   TOOL CARDS — keep accent tag
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-tool-card .mlab-tool-tag {
    font-family: var(--mlab-font-mono);
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border-radius: 4px;
}
body.mlab-pub .mlab-tool-card .mlab-tool-cta {
    color: var(--mlab-ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

/* ═══════════════════════════════════════════════════
   COMPARE / FAQ / CTA
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-compare-card {
    border: 1px solid var(--mlab-ink) !important;
    border-radius: 12px;
    background: var(--mlab-paper);
    box-shadow: var(--mlab-shadow-sm);
    overflow: hidden;
}
body.mlab-pub .mlab-compare-card table th,
body.mlab-pub .mlab-compare-card table td {
    border-color: var(--mlab-hairline) !important;
}

body.mlab-pub .accordion-item {
    background: var(--mlab-paper);
    border: 1px solid var(--mlab-ink) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
body.mlab-pub .accordion-button:not(.collapsed) {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}

body.mlab-pub .mlab-pub-cta {
    padding: 3rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--mlab-paper);
    box-shadow: var(--mlab-shadow-sm);
}

/* ═══════════════════════════════════════════════════
   STICKY BANNER — match B&W
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-sticky-banner {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border);
    box-shadow: var(--mlab-shadow-sm);
    border-radius: var(--radius);
}
body.mlab-pub .mlab-sticky-banner a { color: var(--mlab-paper) !important; }

/* ═══════════════════════════════════════════════════
   PUB NAV TOPBAR — sharper, mono links
═══════════════════════════════════════════════════ */
body.mlab-pub .app-topbar {
    background: var(--mlab-paper) !important;
    border-bottom: 1px solid var(--mlab-hairline);
}
body.mlab-pub .app-topbar .topbar-link {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3) !important;
    white-space: nowrap;
}
body.mlab-pub .app-topbar nav { flex-wrap: nowrap; }
body.mlab-pub .app-topbar .topbar-link:hover {
    color: var(--mlab-ink) !important;
}

/* Topbar dropdown menus — editorial */
body.mlab-pub .app-topbar .dropdown-menu {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    background: var(--mlab-paper) !important;
    padding: .5rem !important;
}
body.mlab-pub .app-topbar .dropdown-menu .dropdown-item {
    font-family: var(--mlab-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mlab-ink-2) !important;
    border-radius: 6px !important;
    padding: .45rem .7rem !important;
    display: flex;
    align-items: center;
    gap: .55rem;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
body.mlab-pub .app-topbar .dropdown-menu .dropdown-item:hover,
body.mlab-pub .app-topbar .dropdown-menu .dropdown-item:focus {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    transform: translateX(3px);
}
body.mlab-pub .app-topbar .dropdown-menu hr {
    border-color: var(--mlab-hairline);
    opacity: 1;
}

/* Topbar CTA pair:
   - Sign up = .btn-primary (filled black, inherits from earlier rule)
   - Login   = .login-btn   (white background, same hard-shadow language) */
body.mlab-pub .app-topbar .btn-primary {
    box-shadow: var(--mlab-shadow-sm) !important;
}
body.mlab-pub .app-topbar .btn-primary:hover {
    box-shadow: var(--mlab-shadow-md) !important;
}

body.mlab-pub .login-btn {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    box-shadow: var(--mlab-shadow-sm) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .login-btn:hover,
body.mlab-pub .login-btn:focus {
    box-shadow: var(--mlab-shadow-sm) !important;
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .login-btn i { color: inherit; }

/* ═══════════════════════════════════════════════════
   POLISH: STAT CARDS, ICON BADGES, MOCKS, TABLE, FAQ
═══════════════════════════════════════════════════ */

/* Stat cards (the 4 small numbers on landing) */
body.mlab-pub .mlab-stat-card {
    padding: 1.25rem 1rem;
    border: 1px solid var(--mlab-hairline);
    border-radius: 12px;
    background: var(--mlab-paper);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
body.mlab-pub .mlab-stat-card:hover {
    border-color: var(--mlab-ink);
    box-shadow: var(--mlab-shadow-md);
    transform: translateY(-2px);
}
body.mlab-pub .mlab-stat-num {
    font-family: var(--mlab-font-sans);
    font-weight: 800;
    color: var(--mlab-ink) !important;
    letter-spacing: -0.03em;
}
body.mlab-pub .mlab-stat-label {
    font-family: var(--mlab-font-mono);
    color: var(--mlab-ink-3) !important;
    font-size: .65rem;
    letter-spacing: .18em;
}

/* Icon badges — larger variant */
body.mlab-pub .mlab-icon-badge {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.mlab-pub .mlab-icon-badge.mlab-icon-badge-lg {
    width: 52px;
    height: 52px;
}
body.mlab-pub .mlab-icon-badge i[data-lucide] { width: 18px; height: 18px; }
body.mlab-pub .mlab-icon-badge-lg i[data-lucide] { width: 24px; height: 24px; }

/* Card pub (feature grid 4-col) tighten typography */
body.mlab-pub .mlab-card-pub {
    padding: 1.4rem 1.25rem;
}
body.mlab-pub .mlab-card-pub h5 {
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 0.95rem;
    margin-top: .8rem;
    margin-bottom: .4rem;
}
body.mlab-pub .mlab-card-pub p {
    color: var(--mlab-ink-3) !important;
    font-size: .82rem;
    line-height: 1.55;
}
body.mlab-pub .mlab-card-pub.has-accent { position: relative; overflow: hidden; }
body.mlab-pub .mlab-card-pub.has-accent::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
body.mlab-pub .mlab-card-pub.has-accent:hover::before { transform: scaleX(1); }

/* Step cards (3-up "how it works") */
body.mlab-pub .mlab-step { padding: 1.5rem 1.25rem 1.25rem; }
body.mlab-pub .mlab-step h5 {
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: -0.01em;
    margin-bottom: .4rem;
}
body.mlab-pub .mlab-step p {
    color: var(--mlab-ink-3) !important;
    font-size: .82rem;
    line-height: 1.55;
}

/* Pain cards — tighter */
body.mlab-pub .mlab-pain-card { padding: 1.25rem; }
body.mlab-pub .mlab-pain-card .mlab-pain-tag {
    font-size: .6rem;
    text-transform: uppercase;
}
body.mlab-pub .mlab-pain-card .mlab-pain-quote {
    font-size: .9rem;
    line-height: 1.5;
}

/* Tool cards — better spacing */
body.mlab-pub .mlab-tool-card { padding: 1.5rem 1.25rem 1.25rem; }
body.mlab-pub .mlab-tool-card h5 {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.01em;
}
body.mlab-pub .mlab-tool-card .mlab-tool-tag {
    font-size: .55rem;
    letter-spacing: .14em;
    padding: .2rem .55rem;
}

/* Quote cards */
body.mlab-pub .mlab-quote-card blockquote {
    font-style: italic;
    color: var(--mlab-ink-2) !important;
    font-size: .92rem;
    line-height: 1.55;
}
body.mlab-pub .mlab-quote-card .mlab-quote-author {
    font-family: var(--mlab-font-mono);
    font-size: .65rem;
    letter-spacing: .14em;
    color: var(--mlab-ink-3) !important;
}

/* Product mocks — sharper bar, monospace label */
body.mlab-pub .mlab-mock { box-shadow: var(--mlab-shadow-sm); }
body.mlab-pub .mlab-mock-bar {
    background: var(--mlab-paper) !important;
    border-bottom: 1px solid var(--mlab-ink) !important;
    font-size: .65rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mlab-ink-3) !important;
}
body.mlab-pub .mlab-mock-dot {
    border: 1px solid var(--mlab-ink);
    background: var(--mlab-paper) !important;
}
body.mlab-pub .mlab-mock-body { color: var(--mlab-ink); }
body.mlab-pub .mlab-mock-cell {
    border-radius: 2px !important;
    box-shadow: inset 0 0 0 1px var(--mlab-hairline);
}
body.mlab-pub .mlab-mock-cell.lvl-marker {
    outline: 2px solid var(--ring) !important;
    outline-offset: 2px;
}

/* Compare table */
body.mlab-pub .mlab-compare-card table {
    font-family: var(--mlab-font-sans);
}
body.mlab-pub .mlab-compare-card table thead th {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink) !important;
    background: var(--mlab-paper);
    border-bottom: 1px solid var(--border) !important;
    padding: .9rem .75rem;
}
body.mlab-pub .mlab-compare-card table tbody th {
    font-weight: 700;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-compare-card table tbody td {
    color: var(--mlab-ink-2) !important;
    font-size: .85rem;
}
body.mlab-pub .mlab-compare-card table tbody tr:hover {
    background: rgba(0,0,0,0.02);
}
html[data-bs-theme=dark] body.mlab-pub .mlab-compare-card table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}

/* FAQ accordion */
body.mlab-pub .accordion-button {
    font-family: var(--mlab-font-sans);
    font-weight: 600;
    color: var(--mlab-ink) !important;
    background: var(--mlab-paper);
    padding: 1rem 1.1rem;
    box-shadow: none !important;
}
body.mlab-pub .accordion-button::after {
    filter: invert(0);
}
html[data-bs-theme=dark] body.mlab-pub .accordion-button::after { filter: invert(1); }
body.mlab-pub .accordion-button:not(.collapsed)::after { filter: invert(1); }
body.mlab-pub .accordion-body {
    color: var(--mlab-ink-2) !important;
    font-size: .9rem;
    line-height: 1.6;
    padding: 1rem 1.1rem 1.25rem;
}

/* Final CTA */
body.mlab-pub .mlab-pub-cta h2 {
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-pub-cta p {
    color: var(--mlab-ink-2) !important;
}

/* ═══════════════════════════════════════════════════
   FOOTER — editorial port from vuln.mlab.sh
═══════════════════════════════════════════════════ */
/* Outer footer wrapper: break out of any constrained parent
   (.wrapper, .mlab-page-content, .container-fluid gutters) and
   paint a solid paper band across the full viewport. */
body.mlab-pub footer.footer {
    position: relative;
    background: var(--mlab-paper) !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 4rem;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.mlab-pub footer.footer > .container-fluid {
    background: var(--mlab-paper) !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Inner full-footer: max-width centered for readability,
   inherits the parent's solid paper bg */
body.mlab-pub .mlab-footer-full {
    padding: 3.5rem 1.5rem 1.5rem !important;
    background: transparent !important;
    border-top: 0 !important;
    margin: 0 auto !important;
    max-width: 1280px !important;
    width: 100% !important;
}
body.mlab-pub .mlab-footer-full .fs-lg {
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-footer-dot {
    color: var(--mlab-ink-4);
    font-weight: 400;
}
body.mlab-pub .mlab-footer-full .mlab-footer-text {
    font-family: var(--mlab-font-sans);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
    max-width: 340px;
    margin-bottom: 0.85rem;
}
body.mlab-pub .mlab-footer-full .mlab-footer-fineprint {
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-4) !important;
    margin-top: 0.5rem;
    opacity: 1 !important;
}

/* Column headings with bullet */
body.mlab-pub .mlab-footer-full .mlab-footer-heading {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--mlab-hairline);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body.mlab-pub .mlab-footer-full .mlab-footer-heading::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-foreground);
    flex-shrink: 0;
}

/* Links with sliding arrow on hover */
body.mlab-pub .mlab-footer-full .mlab-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.mlab-pub .mlab-footer-full .mlab-footer-links li {
    margin-bottom: 0.5rem;
}
body.mlab-pub .mlab-footer-full .mlab-footer-links a {
    font-family: var(--mlab-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mlab-ink-2) !important;
    text-decoration: none;
    opacity: 1 !important;
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-block;
    position: relative;
}
body.mlab-pub .mlab-footer-full .mlab-footer-links a:hover {
    color: var(--mlab-ink) !important;
    transform: translateX(3px);
}
body.mlab-pub .mlab-footer-full .mlab-footer-links a::before {
    content: "→";
    position: absolute;
    left: -1.1rem;
    opacity: 0;
    transition: opacity 0.15s ease, left 0.15s ease;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-footer-full .mlab-footer-links a:hover::before {
    opacity: 1;
    left: -1rem;
}

/* Bottom meta strip */
body.mlab-pub .mlab-footer-meta-bar {
    max-width: 1280px;
    margin: 2.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mlab-hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
body.mlab-pub .mlab-footer-meta-left,
body.mlab-pub .mlab-footer-meta-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-footer-meta-sep {
    width: 4px;
    height: 4px;
    background: var(--mlab-ink-5);
    border-radius: 50%;
    display: inline-block;
}
body.mlab-pub .mlab-footer-live {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-footer-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mlab-ink);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    animation: mlabPulseHard 2.4s ease-in-out infinite;
}
html[data-bs-theme=dark] body.mlab-pub .mlab-footer-live-dot {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

@media (max-width: 767.98px) {
    body.mlab-pub .mlab-footer-full { padding: 2.5rem 1.25rem 1.25rem !important; }
    body.mlab-pub .mlab-footer-full .mlab-footer-text { max-width: none; }
    body.mlab-pub .mlab-footer-meta-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════
   SEARCH CARD — ported from vuln.mlab.sh
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-search-card,
body.mlab-pub .mlab-search-card.mlab-glass {
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-bs-theme=dark] body.mlab-pub .mlab-search-card {
    background: rgba(255,255,255,0.02) !important;
}

body.mlab-pub .mlab-search-card .card-body h5,
body.mlab-pub .mlab-search-card .card-body h6 {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--mlab-ink-3) !important;
    margin-bottom: 1rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
body.mlab-pub .mlab-search-card .card-body h5::before,
body.mlab-pub .mlab-search-card .card-body h6::before {
    display: none;}

body.mlab-pub .mlab-search-card .input-group {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--mlab-paper);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html[data-bs-theme=dark] body.mlab-pub .mlab-search-card .input-group {
    background: rgba(255,255,255,0.02);
}
body.mlab-pub .mlab-search-card .input-group:focus-within {
    box-shadow: var(--mlab-shadow-sm);
}

body.mlab-pub .mlab-search-card .form-control,
body.mlab-pub .mlab-search-card .mlab-ui-input {
    height: auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.95rem;
    color: var(--mlab-ink) !important;
    padding: 0.85rem 1.2rem;
}
/* Kill the primitive's own amber focus ring inside the search pill — the pill
   frame (.input-group:focus-within) owns the focus feedback. */
body.mlab-pub .mlab-search-card .form-control:focus,
body.mlab-pub .mlab-search-card .mlab-ui-input:focus,
body.mlab-pub .mlab-search-card .mlab-ui-input:focus-visible {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
body.mlab-pub .mlab-search-card .form-control::placeholder,
body.mlab-pub .mlab-search-card .mlab-ui-input::placeholder {
    color: var(--mlab-ink-4);
    font-family: var(--mlab-font-mono);
    letter-spacing: 0.01em;
}

body.mlab-pub .mlab-search-card .input-group .btn-primary {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    margin: -1px -1px -1px 0 !important;
    padding: 0.85rem 1.75rem !important;
    border: 1px solid var(--primary) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.mlab-pub .mlab-search-card .input-group .btn-primary:hover {
    box-shadow: none !important;
    transform: none !important;
    background: var(--primary) !important;
    opacity: .92;
}

/* Divider between search and upload */
body.mlab-pub .mlab-search-card .mlab-divider {
    border-top: 1px dashed var(--mlab-hairline);
    height: 0;
    background: transparent;
}

/* Upload dropzone — match editorial language */
body.mlab-pub .mlab-upload-zone {
    border: 1px dashed var(--border) !important;
    border-radius: 12px !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
body.mlab-pub .mlab-upload-zone:hover,
body.mlab-pub .mlab-upload-zone.dragover {
    background: rgba(0,0,0,0.02) !important;
    box-shadow: var(--mlab-shadow-sm);
}
html[data-bs-theme=dark] body.mlab-pub .mlab-upload-zone:hover,
html[data-bs-theme=dark] body.mlab-pub .mlab-upload-zone.dragover {
    background: rgba(255,255,255,0.04) !important;
}

/* Redkit link strip */
body.mlab-pub .mlab-search-card .text-center a {
    color: var(--mlab-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

/* ═══════════════════════════════════════════════════
   FREE TOOLS PAGE — editorial cards & section heads
═══════════════════════════════════════════════════ */

/* Section head between tool rows */
body.mlab-pub .mlab-tools-section-head {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    margin: 1rem 0 1.5rem;
    flex-wrap: wrap;
}
body.mlab-pub .mlab-tools-section-head .mlab-section-label {
    margin-bottom: 0;
}
body.mlab-pub .mlab-tools-section-head .mlab-section-title {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    margin-bottom: 0;
    flex: 1 1 auto;
    text-align: left;
}
body.mlab-pub .mlab-tools-section-head::after {
    content: "";
    flex: 1 1 80px;
    height: 1px;
    background: var(--mlab-hairline);
    align-self: center;
    margin-left: auto;
}

/* Trust pills (legacy markup safety) */
body.mlab-pub .mlab-tools-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border) !important;
    border-radius: 100px;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    box-shadow: var(--mlab-shadow-sm);
}

/* Tool cards — hard-edged, hover lifts with shadow */
body.mlab-pub .mlab-tools-card {
    position: relative;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 1.5rem 1.4rem 1.4rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-tools-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
body.mlab-pub a:hover > .mlab-tools-card,
body.mlab-pub .mlab-tools-card:hover {
    box-shadow: var(--mlab-shadow-md);
}
body.mlab-pub a:hover > .mlab-tools-card::before,
body.mlab-pub .mlab-tools-card:hover::before {
    transform: scaleX(1);
}

/* Strip ApexCharts-style colored glow — keep B&W */
body.mlab-pub .mlab-tools-card-glow { display: none !important; }

/* Card icon — squared box, mono outline */
body.mlab-pub .mlab-tools-card-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.mlab-pub .mlab-tools-card-icon i { color: var(--mlab-ink) !important; }

/* Headings inside cards */
body.mlab-pub .mlab-tools-card h3 {
    color: var(--mlab-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* Card body text */
body.mlab-pub .mlab-tools-card p,
body.mlab-pub .mlab-tools-card .text-muted {
    color: var(--mlab-ink-3) !important;
}

/* Mini "Popular / New / Free account" tags */
body.mlab-pub .mlab-tools-card-tag {
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.5rem !important;
    border: 1px solid var(--border) !important;
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border-radius: 4px !important;
}
body.mlab-pub .mlab-tools-card-tag.green {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
}

/* Feature badges (small chips listing capabilities) */
body.mlab-pub .mlab-tools-card-badge {
    font-family: var(--mlab-font-mono) !important;
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    border: 1px solid var(--mlab-ink) !important;
    background: transparent !important;
    color: var(--mlab-ink-2) !important;
    border-radius: 100px !important;
    padding: 0.18rem 0.55rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .mlab-tools-card-badge::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mlab-ink);
}
body.mlab-pub .mlab-tools-card:hover .mlab-tools-card-badge {
    background: var(--mlab-paper) !important;
}

/* CTA inside cards */
body.mlab-pub .mlab-tools-card-cta {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-top: 0.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem;
    transition: gap 0.15s ease;
}
body.mlab-pub .mlab-tools-card:hover .mlab-tools-card-cta {
    gap: 0.7rem;
}

/* Legacy final-CTA box → use editorial cta */
body.mlab-pub .mlab-tools-cta {
    border: 1px solid var(--border) !important;
    border-radius: 16px;
    background: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-sm);
    padding: 2rem 1.5rem;
}

/* ═══════════════════════════════════════════════════
   PRICING — editorial plan cards
═══════════════════════════════════════════════════ */
body.mlab-pub .price-card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 2rem 1.6rem !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
body.mlab-pub .price-card:hover {
    box-shadow: var(--mlab-shadow-md) !important;
    border-color: var(--mlab-ink) !important;
}
body.mlab-pub .price-card-popular {
    border: 1px solid var(--border) !important;
    box-shadow: var(--mlab-shadow-sm);
}
body.mlab-pub .price-card-popular:hover {
    box-shadow: var(--mlab-shadow-md) !important;
}

/* Top bar INSIDE the card — taller, hosts the badge as a ribbon */
body.mlab-pub .price-card-popular::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: var(--mlab-ink) !important;
    border-radius: 14px 14px 0 0 !important;
    z-index: 1;
}
/* push the body content down to clear the ribbon */
body.mlab-pub .price-card-popular {
    padding-top: 3rem !important;
}

/* Badge — sits inside the black ribbon, white text */
body.mlab-pub .price-card-badge {
    background: transparent !important;
    color: var(--mlab-paper) !important;
    border: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    top: 6px !important;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
body.mlab-pub .price-card-badge::before,
body.mlab-pub .price-card-badge::after {
    display: none;}

/* Icon — square outline */
body.mlab-pub .price-card-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
}
body.mlab-pub .price-card-icon i { color: var(--mlab-ink) !important; opacity: 1 !important; }

/* Name / tag / desc */
body.mlab-pub .price-card-name {
    color: var(--mlab-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}
body.mlab-pub .price-card-tag {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 100px !important;
    padding: 0.22rem 0.7rem !important;
}
body.mlab-pub .price-card-tag.muted {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink-3) !important;
    border-color: var(--mlab-hairline) !important;
}
body.mlab-pub .price-card-desc { color: var(--mlab-ink-2) !important; }
body.mlab-pub .price-card-divider {
    background: var(--mlab-hairline) !important;
    border: 0 !important;
    height: 1px;
}

/* Feature list */
body.mlab-pub .price-card-features li {
    color: var(--mlab-ink-2) !important;
}
body.mlab-pub .price-card-features li .feat-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 50%;
}
body.mlab-pub .price-card-features li .feat-icon.muted {
    border-color: var(--mlab-hairline) !important;
    color: var(--mlab-ink-4) !important;
}

/* Credits footer */
body.mlab-pub .price-card-credits {
    font-size: 0.62rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mlab-ink-3) !important;
}
body.mlab-pub .price-card-credits-detail {
    color: var(--mlab-ink-2) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.78rem;
}

/* Comparison table */
body.mlab-pub .price-comparison {
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mlab-shadow-sm);
    background: var(--mlab-paper) !important;
}
body.mlab-pub .price-comparison thead th {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.mlab-pub .price-comparison .price-cat-row td {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    border-top: 1px solid var(--mlab-hairline) !important;
}
body.mlab-pub .price-comparison tbody tr:not(.price-cat-row) td {
    border-top: 1px solid var(--mlab-hairline) !important;
    color: var(--mlab-ink-2) !important;
}
body.mlab-pub .price-comparison .price-check { color: var(--mlab-ink) !important; }
body.mlab-pub .price-comparison .price-x { color: var(--mlab-ink-4) !important; opacity: 0.5; }
body.mlab-pub .price-comparison .price-highlight { background: rgba(0,0,0,0.03) !important; }
html[data-bs-theme=dark] body.mlab-pub .price-comparison .price-highlight { background: rgba(255,255,255,0.04) !important; }

/* ═══════════════════════════════════════════════════
   PAGE HEAD — compact replacement for hero on
   secondary pages (no big floats, no stat ticker).
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-pub-pagehead {
    padding: 3rem 0 2rem;
    position: relative;
}
body.mlab-pub .mlab-pub-pagehead .mlab-section-label {
    margin-bottom: 1rem;
}
body.mlab-pub .mlab-pub-pagehead-title {
    font-family: var(--mlab-font-sans);
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--mlab-ink) !important;
    margin: 0 auto 0.75rem;
    max-width: 720px;
}
body.mlab-pub .mlab-pub-pagehead-sub {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mlab-ink-2) !important;
    max-width: 600px;
    margin: 0 auto;
}
body.mlab-pub .mlab-pub-pagehead::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: var(--border);
    margin: 2rem auto 0;
}

/* ═══════════════════════════════════════════════════
   PRICING FAQ — editorial Q&A index
═══════════════════════════════════════════════════ */
body.mlab-pub .price-faq-split {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: start;
}
@media (max-width: 991px) {
    body.mlab-pub .price-faq-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
body.mlab-pub .price-faq-split .faq-left {
    position: sticky;
    top: 110px;
}
body.mlab-pub .mlab-faq-title {
    font-family: var(--mlab-font-sans);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--mlab-ink) !important;
    margin: 0.5rem 0 0.9rem;
}
body.mlab-pub .mlab-faq-lead {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mlab-ink-2) !important;
    margin-bottom: 1.25rem;
    max-width: 360px;
}

/* Right column: accordion as hairline-divided list,
   not individual rounded boxes. */
body.mlab-pub .price-faq-split .faq-right .accordion {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
body.mlab-pub .price-faq-split .faq-right .accordion-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    counter-increment: faq-counter;
    position: relative;
}
body.mlab-pub .price-faq-split .faq-right .accordion {
    counter-reset: faq-counter;
}
body.mlab-pub .price-faq-split .faq-right .accordion-item:last-child {
    border-bottom: 0 !important;
}

/* Question button — counter sits inline (flex) before the text,
   so it can never overlap regardless of wrapping. */
body.mlab-pub .price-faq-split .faq-right .accordion-button {
    background: transparent !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    padding: 1.1rem 1rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex !important;
    align-items: center;
    gap: 1rem;
    text-align: left;
}
body.mlab-pub .price-faq-split .faq-right .accordion-button::before {
    content: counter(faq-counter, decimal-leading-zero);
    flex: 0 0 auto;
    width: 2rem;
    text-align: left;
    font-family: var(--mlab-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    position: static;
    transform: none;
    line-height: 1;
}
body.mlab-pub .price-faq-split .faq-right .accordion-button:hover {
    background: rgba(0, 0, 0, 0.025) !important;
}
html[data-bs-theme=dark] body.mlab-pub .price-faq-split .faq-right .accordion-button:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
body.mlab-pub .price-faq-split .faq-right .accordion-button:not(.collapsed) {
    background: transparent !important;
    color: var(--mlab-ink) !important;
}

/* Chevron — plain +/− glyph, pushed to far right via flex */
body.mlab-pub .price-faq-split .faq-right .accordion-button::after {
    background-image: none !important;
    content: "+";
    font-family: var(--mlab-font-mono);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    color: var(--mlab-ink) !important;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
    transition: transform 0.2s ease;
    margin-left: auto !important;
    flex: 0 0 auto;
}
body.mlab-pub .price-faq-split .faq-right .accordion-button:not(.collapsed)::after {
    content: "−";
    transform: none !important;
}

/* Answer body — aligned under the question text, past the counter */
body.mlab-pub .price-faq-split .faq-right .accordion-body {
    padding: 0 1rem 1.25rem 4rem;
    color: var(--mlab-ink-2) !important;
    font-size: 0.92rem;
    line-height: 1.65;
}
body.mlab-pub .price-faq-split .faq-right .accordion-body a {
    color: var(--mlab-ink) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
body.mlab-pub .price-faq-split .faq-right .accordion-body strong {
    color: var(--mlab-ink) !important;
}

/* Kill any ugly hl-mark orange remnants — replace with editorial underline */
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(--primary);
    opacity: 0.12;
    z-index: -1;
}
/* On dark CTA blocks, invert: text becomes white, underline becomes light */
body.mlab-pub .dashboard-dark .hl-mark {
    color: #fff !important;
}
body.mlab-pub .dashboard-dark .hl-mark::after {
    background: #fff;
    opacity: 0.18;
}

/* ═══════════════════════════════════════════════════
   TOOL SUBPAGES — editorial restyle of the per-tool UI
   (base64, hash, jwt, json, regex, timestamp, url-encoder,
    image-metadata, ioc-extractor, js-deobfuscator, cve-search,
    eml-parser-landing)
═══════════════════════════════════════════════════ */

body.mlab-pub .mlab-tool-page {
    padding: 2.5rem 0 4rem;
}

/* ─── Header strip (breadcrumb · title · lead) ─── */
body.mlab-pub .mlab-tool-header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 1.5rem;
}
body.mlab-pub .mlab-tool-header .breadcrumb-mini {
    font-size: 0.65rem !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    margin-bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
body.mlab-pub .mlab-tool-header .breadcrumb-mini::before {
    display: none;}
body.mlab-pub .mlab-tool-header .breadcrumb-mini a {
    color: var(--mlab-ink-2) !important;
    text-decoration: none;
}
body.mlab-pub .mlab-tool-header .breadcrumb-mini a:hover {
    color: var(--mlab-ink) !important;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
body.mlab-pub .mlab-tool-header h1 {
    font-family: var(--mlab-font-sans);
    font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--mlab-ink) !important;
    margin: 0 0 0.5rem !important;
}
body.mlab-pub .mlab-tool-header p {
    font-family: var(--mlab-font-sans);
    font-size: 0.95rem !important;
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
    line-height: 1.6 !important;
    max-width: 720px;
}

/* ─── Toolbar (mode pills, options) ─── */
body.mlab-pub .mlab-tool-toolbar {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm);
    padding: 0.7rem 1rem !important;
    font-size: 0.78rem;
}
body.mlab-pub .mlab-tool-toolbar .toolbar-label {
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    font-weight: 600;
}
body.mlab-pub .mlab-tool-toolbar .toolbar-sep {
    background: var(--mlab-hairline) !important;
    opacity: 1 !important;
}

/* Toolbar button group (mode toggle) */
body.mlab-pub .mlab-tool-toolbar .btn-group .btn,
body.mlab-pub .mlab-tool-toolbar .btn-group > .btn {
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: 0 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.85rem !important;
    box-shadow: none !important;
    transform: none !important;
}
body.mlab-pub .mlab-tool-toolbar .btn-group > .btn:first-child { border-radius: var(--radius) 0 0 100px !important; }
body.mlab-pub .mlab-tool-toolbar .btn-group > .btn:last-child  { border-radius: 0 100px 100px 0 !important; }
body.mlab-pub .mlab-tool-toolbar .btn-group > .btn + .btn { margin-left: -1.5px !important; }
body.mlab-pub .mlab-tool-toolbar .btn-group > .btn.active,
body.mlab-pub .mlab-tool-toolbar .btn-group > .btn:active {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    box-shadow: none !important;
}

/* ─── Section titles (above textareas, results, etc.) ─── */
body.mlab-pub .mlab-tool-section-title {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.2em !important;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    margin-bottom: 0.75rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
body.mlab-pub .mlab-tool-section-title::before {
    display: none;}

/* ─── Cards / inputs inside tools ─── */
body.mlab-pub .mlab-tool-page .card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm);
}
body.mlab-pub .mlab-tool-page .card .card-title,
body.mlab-pub .mlab-tool-page .card .card-header {
    font-family: var(--mlab-font-sans);
    color: var(--mlab-ink) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}

body.mlab-pub .mlab-tool-page textarea,
body.mlab-pub .mlab-tool-page input.form-control,
body.mlab-pub .mlab-tool-page select.form-control,
body.mlab-pub .mlab-tool-page select.form-select {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.mlab-pub .mlab-tool-page textarea:focus,
body.mlab-pub .mlab-tool-page input.form-control:focus,
body.mlab-pub .mlab-tool-page select.form-control:focus,
body.mlab-pub .mlab-tool-page select.form-select:focus {
    box-shadow: var(--mlab-shadow-sm) !important;
    outline: 0;
}
body.mlab-pub .mlab-tool-page textarea::placeholder,
body.mlab-pub .mlab-tool-page input.form-control::placeholder {
    color: var(--mlab-ink-4) !important;
    font-family: var(--mlab-font-mono);
}

/* code / pre blocks (results, diffs, decoded payloads) */
body.mlab-pub .mlab-tool-page pre,
body.mlab-pub .mlab-tool-page code,
body.mlab-pub .mlab-tool-page .mlab-output {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    padding: 0.85rem 1rem;
}
body.mlab-pub .mlab-tool-page :not(pre) > code {
    padding: 0.1em 0.35em;
    font-size: 0.85em;
}

/* ═══════════════════════════════════════════════════
   TOOL PAGE — PRODUCT VARIANT (.mlab-tool-page--ui)
   ═══════════════════════════════════════════════════
   Opt-in escape hatch for a tool whose interactive blocks are built from the
   mlab-ui component layer (the design system the logged-in app and the admin
   run on) rather than from Bootstrap classes.

   Converting the markup is most of the job: .card -> .mlab-ui-card and
   .btn-* -> .mlab-ui-btn stop matching the editorial rules above on their own.
   What survives the swap is the handful of rules that match on the ELEMENT
   (textarea, pre, code), and they carry !important, so they have to be undone
   here or they keep painting ink borders on shadcn components.

   The page shell stays editorial on purpose: header strip, how-to grid, FAQ
   and related-tools live on their own classes outside .mlab-tool-page, so a
   converted tool still reads as part of the public site. */
body.mlab-pub .mlab-tool-page--ui textarea,
body.mlab-pub .mlab-tool-page--ui input.form-control,
body.mlab-pub .mlab-tool-page--ui select.form-control,
body.mlab-pub .mlab-tool-page--ui select.form-select {
    background: var(--background) !important;
    border: 1px solid var(--input) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius) !important;
    font-family: var(--mlab-font-mono);
}
body.mlab-pub .mlab-tool-page--ui textarea:focus,
body.mlab-pub .mlab-tool-page--ui input.form-control:focus,
body.mlab-pub .mlab-tool-page--ui select.form-control:focus,
body.mlab-pub .mlab-tool-page--ui select.form-select:focus {
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent) !important;
    transform: none;
    outline: 0;
}
body.mlab-pub .mlab-tool-page--ui textarea::placeholder,
body.mlab-pub .mlab-tool-page--ui input.form-control::placeholder {
    color: var(--muted-foreground) !important;
}
body.mlab-pub .mlab-tool-page--ui pre,
body.mlab-pub .mlab-tool-page--ui code,
body.mlab-pub .mlab-tool-page--ui .mlab-output {
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    color: var(--foreground) !important;
    font-size: 0.8125rem;
    padding: 0.75rem 0.875rem;
}
/* The toolbar strip keeps its editorial frame everywhere else; inside a
   converted tool it has to sit at the same weight as the cards below it. */
body.mlab-pub .mlab-tool-page--ui .mlab-tool-toolbar {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--mlab-shadow-sm) !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-toolbar,
body.mlab-pub .mlab-tool-page--ui .mlab-tool-toolbar .toolbar-label {
    font-family: var(--mlab-font-sans);
    text-transform: none;
    letter-spacing: 0;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-toolbar .toolbar-label {
    font-size: 0.8125rem !important;
    font-weight: 500;
    color: var(--muted-foreground) !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-toolbar .toolbar-sep {
    background: var(--border) !important;
}

/* ── Shell of a converted tool ──────────────────────────────────────────
   The first pass converted only the interactive blocks and left the page
   furniture editorial. On the same screen that read as two products: the
   related-tools chips carried a 1.5px border at full opacity while the tool's
   own buttons carried 1px at 8%, so the secondary navigation outweighed the
   primary actions. Everything below brings the furniture down to the same
   weight. The h1 keeps its landing-page size (these are SEO entry points);
   what changes is the hardware around it, not the typographic scale. */
body.mlab-pub .mlab-tool-page--ui .mlab-tool-header {
    border-bottom: 1px solid var(--border) !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-header .breadcrumb-mini {
    font-family: var(--mlab-font-sans);
    font-size: 0.8125rem !important;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0 !important;
    color: var(--muted-foreground) !important;
    gap: 0.35rem;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-header .breadcrumb-mini::before {
    display: none;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-header .breadcrumb-mini a {
    color: var(--muted-foreground) !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-header .breadcrumb-mini a:hover {
    color: var(--foreground) !important;
    text-decoration-thickness: 1px;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-header h1 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-header p {
    color: var(--muted-foreground) !important;
}

/* Section eyebrows ("RELATED TOOLS", "HOW TO USE") become plain headings:
   the mono + 0.2em tracking + leading rule is the editorial signature. */
body.mlab-pub .mlab-tool-page--ui .mlab-tool-section-title {
    font-family: var(--mlab-font-sans) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: -0.01em !important;
    color: var(--foreground) !important;
    margin-bottom: 1rem !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-section-title::before {
    display: none;
}

/* How-to steps: same card as the tool blocks above them. */
body.mlab-pub .mlab-tool-page--ui .mlab-tool-howto-step {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--mlab-shadow-sm);
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-howto-step:hover {
    transform: none;
    box-shadow: var(--mlab-shadow-md);
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-howto-step .step-num {
    background: var(--muted) !important;
    border: 0 !important;
    color: var(--muted-foreground) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 600;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-howto-step h6 {
    font-weight: 600 !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-howto-step p {
    color: var(--muted-foreground) !important;
}

/* FAQ: keep the numbered list and the +/- affordance, drop the ink rules. */
body.mlab-pub .mlab-tool-page--ui .mlab-tool-faq h2 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-faq .accordion {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-faq .accordion-item {
    border-bottom-color: var(--border) !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-faq .accordion-button {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--foreground) !important;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-faq .accordion-button::before {
    color: var(--muted-foreground);
    letter-spacing: 0.04em;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-faq .accordion-button::after {
    color: var(--muted-foreground) !important;
    font-size: 1.1rem;
}
body.mlab-pub .mlab-tool-page--ui .mlab-tool-faq .accordion-body {
    color: var(--muted-foreground) !important;
}

/* ─── How-to grid (numbered steps) ─── */
body.mlab-pub .mlab-tool-howto {
    gap: 1.25rem !important;
}
body.mlab-pub .mlab-tool-howto-step {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    background: var(--mlab-paper);
    box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    align-items: flex-start !important;
}
body.mlab-pub .mlab-tool-howto-step:hover {
    box-shadow: var(--mlab-shadow-md);
}
body.mlab-pub .mlab-tool-howto-step .step-num {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font-family: var(--mlab-font-mono);
    font-weight: 700;
    font-size: 0.72rem !important;
}
body.mlab-pub .mlab-tool-howto-step h6 {
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    letter-spacing: -0.01em;
    color: var(--mlab-ink) !important;
    margin-bottom: 0.25rem;
}
body.mlab-pub .mlab-tool-howto-step p {
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
}

/* ─── Related tools chips ─── */
body.mlab-pub .mlab-tool-related .btn,
body.mlab-pub .mlab-tool-related a.btn,
body.mlab-pub .mlab-tool-related .btn-outline-secondary {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.38rem 0.85rem !important;
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--mlab-shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .mlab-tool-related .btn:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-md);
}

/* ─── Tool FAQ (per-tool Q&A at the bottom) ─── */
body.mlab-pub .mlab-tool-faq .accordion {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    counter-reset: tool-faq-counter;
}
body.mlab-pub .mlab-tool-faq .accordion-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    counter-increment: tool-faq-counter;
}
body.mlab-pub .mlab-tool-faq .accordion-item:last-child { border-bottom: 0 !important; }
body.mlab-pub .mlab-tool-faq .accordion-item:hover {
    background: rgba(0, 0, 0, 0.02);
}
html[data-bs-theme=dark] body.mlab-pub .mlab-tool-faq .accordion-item:hover {
    background: rgba(255, 255, 255, 0.03);
}
body.mlab-pub .mlab-tool-faq .accordion-button {
    background: transparent !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    padding: 1rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 1rem;
    text-align: left;
}
body.mlab-pub .mlab-tool-faq .accordion-button::before {
    content: counter(tool-faq-counter, decimal-leading-zero);
    flex: 0 0 auto;
    width: 2rem;
    text-align: left;
    font-family: var(--mlab-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    line-height: 1;
}
body.mlab-pub .mlab-tool-faq .accordion-button::after {
    background-image: none !important;
    content: "+";
    font-family: var(--mlab-font-mono);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--mlab-ink) !important;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
    margin-left: auto !important;
    flex: 0 0 auto;
}
body.mlab-pub .mlab-tool-faq .accordion-button:not(.collapsed) {
    background: transparent !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-tool-faq .accordion-button:not(.collapsed)::after {
    content: "−";
}
body.mlab-pub .mlab-tool-faq .accordion-body {
    padding: 0 1rem 1.25rem 4rem !important;
    color: var(--mlab-ink-2) !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}
body.mlab-pub .mlab-tool-faq .accordion-body code {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--mlab-hairline);
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-tool-faq .accordion-body a {
    color: var(--mlab-ink) !important;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* ─── Tool action buttons (Copy / Clear / Download …) ─── */
body.mlab-pub .mlab-tool-page .btn-outline-primary,
body.mlab-pub .mlab-tool-page .btn-outline-secondary {
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    font-weight: 600;
    box-shadow: var(--mlab-shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .mlab-tool-page .btn-outline-primary:hover,
body.mlab-pub .mlab-tool-page .btn-outline-secondary:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-md);
}
body.mlab-pub .mlab-tool-page .btn-link {
    color: var(--mlab-ink) !important;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* Destructive action (image-metadata "Strip ALL & download"). Filled rather
   than outlined so it still reads as the heavier choice, but built from the
   same pill + hard-shadow parts as every other tool button instead of arriving
   as a stock Bootstrap red rectangle. */
body.mlab-pub .mlab-tool-page .btn-danger {
    background: var(--mlab-danger) !important;
    border: 1px solid var(--border) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
    font-weight: 600;
    box-shadow: var(--mlab-shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.mlab-pub .mlab-tool-page .btn-danger:hover {
    box-shadow: var(--mlab-shadow-md);
    background: var(--mlab-danger) !important;
    color: #fff !important;
}

/* ─── Chips / badges in tool results ───────────────────────────────────
   The tools tag their output with stock Bootstrap badges (`bg-secondary
   bg-opacity-10`, `bg-success`, `bg-danger` …). Left alone they render in
   Bootstrap's own palette, which on this theme means `bg-secondary` is INDIGO,
   not grey: pale lavender chips scattered through a black-and-white editorial
   page. These rules keep the semantic reading (neutral / ok / problem) and
   rebuild it out of the ink-and-paper parts the rest of the page is made of.

   `bg-opacity-*` sets --bs-bg-opacity, which our background declarations
   ignore, so the tint below is what actually paints. */
body.mlab-pub .mlab-tool-page .badge {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border);
    color: var(--mlab-ink) !important;
    border-radius: 100px;
    font-family: var(--mlab-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.22em 0.6em;
    line-height: 1.5;
}
/* Semantic variants: the hue survives on the border and on a 12% wash, the
   text stays ink so it is legible on both themes. */
body.mlab-pub .mlab-tool-page .badge.bg-success {
    border-color: var(--mlab-success);
    background: color-mix(in srgb, var(--mlab-success) 12%, var(--mlab-paper)) !important;
}
body.mlab-pub .mlab-tool-page .badge.bg-danger {
    border-color: var(--mlab-danger);
    background: color-mix(in srgb, var(--mlab-danger) 12%, var(--mlab-paper)) !important;
}
body.mlab-pub .mlab-tool-page .badge.bg-warning {
    border-color: var(--mlab-warning);
    background: color-mix(in srgb, var(--mlab-warning) 14%, var(--mlab-paper)) !important;
}
body.mlab-pub .mlab-tool-page .badge.bg-info {
    border-color: var(--mlab-info);
    background: color-mix(in srgb, var(--mlab-info) 12%, var(--mlab-paper)) !important;
}
/* Bootstrap text utilities inside a badge would fight the ink colour above. */
body.mlab-pub .mlab-tool-page .badge.text-body,
body.mlab-pub .mlab-tool-page .badge.text-secondary,
body.mlab-pub .mlab-tool-page .badge.text-muted {
    color: var(--mlab-ink) !important;
}

/* ═══════════════════════════════════════════════════
   MITRE ATT&CK MAP — editorial restyle
═══════════════════════════════════════════════════ */

/* Page head left-aligned (pub-pagehead hairline tweak) */
body.mlab-pub .mlab-pub-pagehead.text-start::after { display: none; }

/* Banner "New to MITRE ATT&CK?" — editorial card */
body.mlab-pub .mlab-banner,
body.mlab-pub .mlab-banner.mlab-banner-info,
body.mlab-pub .mlab-banner.mlab-banner-warning,
body.mlab-pub .mlab-banner.mlab-banner-danger {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 1.1rem 1.35rem !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-banner strong { color: var(--mlab-ink) !important; }
body.mlab-pub .mlab-banner p { color: var(--mlab-ink-2) !important; }
body.mlab-pub .mlab-banner-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--mlab-edit-hairline) !important;
    color: var(--mlab-ink) !important;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Subtle semantic accent on the icon for warning / danger banners */
body.mlab-pub .mlab-banner-warning .mlab-banner-icon { color: #b45309 !important; border-color: rgba(217,119,6,.30) !important; }
body.mlab-pub .mlab-banner-danger .mlab-banner-icon { color: #b91c1c !important; border-color: rgba(220,38,38,.30) !important; }

/* Search input */
body.mlab-pub .mlab-search-input {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.85rem !important;
    padding: 0.65rem 1.1rem !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.mlab-pub .mlab-search-input:focus {
    box-shadow: var(--mlab-shadow-sm) !important;
    outline: 0;
}
body.mlab-pub .mlab-search-input::placeholder {
    color: var(--mlab-ink-4) !important;
    font-family: var(--mlab-font-mono);
}

/* Selection bar */
body.mlab-pub .mlab-selection-bar {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    padding: 0.7rem 1rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.75rem;
}
body.mlab-pub .mlab-selection-bar strong {
    font-family: var(--mlab-font-sans);
    font-weight: 800;
    font-size: 1rem;
    color: var(--mlab-ink) !important;
    margin-right: 0.25rem;
}
body.mlab-pub .mlab-selection-bar .btn {
    font-size: 0.66rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    padding: 0.32rem 0.75rem !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .mlab-selection-bar .btn:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-md) !important;
}
body.mlab-pub .mlab-selection-bar .btn-outline-danger {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-selection-bar .btn-outline-danger:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}

/* Matrix shell */
body.mlab-pub .mitre-matrix {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    gap: 10px !important;
    box-shadow: var(--mlab-shadow-sm);
}

/* Tactic columns */
body.mlab-pub .mitre-tactic {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 12px !important;
}
body.mlab-pub .mitre-tactic h6 {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink) !important;
    margin: 0 0 10px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mlab-hairline);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
body.mlab-pub .mitre-tactic h6::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-foreground);
    flex-shrink: 0;
}

/* Techniques */
body.mlab-pub .mitre-technique {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--mlab-hairline) !important;
    color: var(--mlab-ink-2) !important;
    border-radius: 6px !important;
    padding: 7px 9px !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.74rem !important;
    line-height: 1.35;
    transition: background 0.12s ease, border-color 0.12s ease,
                color 0.12s ease, transform 0.12s ease;
}
body.mlab-pub .mitre-technique:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: var(--mlab-ink) !important;
    color: var(--mlab-ink) !important;
}
html[data-bs-theme=dark] body.mlab-pub .mitre-technique:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
body.mlab-pub .mitre-technique.active {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border-color: var(--mlab-ink) !important;
    box-shadow: var(--mlab-shadow-sm);
}
body.mlab-pub .mitre-technique.sub {
    font-size: 0.7rem !important;
    opacity: 0.85;
    border-left: 2px solid var(--mlab-hairline) !important;
    padding-left: 10px !important;
}
body.mlab-pub .mitre-technique.sub.active {
    border-left-color: var(--mlab-ink) !important;
}

body.mlab-pub .mitre-subtechniques {
    margin-left: 8px;
    margin-top: 4px;
    padding-left: 6px;
    border-left: 1px dashed var(--mlab-hairline);
}

body.mlab-pub .mitre-sub-toggle {
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    border-top: 1px dashed var(--mlab-hairline);
    padding-top: 5px;
    margin-top: 6px;
    margin-left: 0 !important;
}
body.mlab-pub .mitre-sub-toggle:hover {
    color: var(--mlab-ink) !important;
    text-decoration: none;
}

/* Popover (technique details on click) */
body.mlab-pub .mitre-popover,
body.mlab-pub .popover.mitre-popover {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    font-family: var(--mlab-font-sans);
    font-size: 0.78rem !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .popover.mitre-popover .popover-arrow::after,
body.mlab-pub .popover.mitre-popover .popover-arrow::before {
    border-color: var(--mlab-ink) transparent !important;
}
body.mlab-pub .mitre-popover .popover-header {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
body.mlab-pub .mitre-popover .popover-body {
    color: var(--mlab-ink-2) !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.78rem;
    line-height: 1.55;
}
body.mlab-pub .mitre-popover .btn-copy,
body.mlab-pub .mitre-popover .btn {
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.75rem !important;
    box-shadow: none !important;
}
body.mlab-pub .mitre-popover .btn:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}

/* Coverage status pills — kill semantic colours, use B&W marks */
body.mlab-pub .mitre-status-pending,
body.mlab-pub .mitre-status-inprogress,
body.mlab-pub .mitre-status-covered {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-color: var(--mlab-ink) !important;
    position: relative;
}
body.mlab-pub .mitre-status-pending::after,
body.mlab-pub .mitre-status-inprogress::after,
body.mlab-pub .mitre-status-covered::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mlab-ink);
}
body.mlab-pub .mitre-status-pending::after    { background: transparent; border: 1px solid var(--border); }
body.mlab-pub .mitre-status-inprogress::after { background: repeating-linear-gradient(45deg, var(--mlab-ink) 0 2px, transparent 2px 4px); border: 1px solid var(--border); }
body.mlab-pub .mitre-status-covered::after    { background: var(--mlab-ink); }

/* ═══════════════════════════════════════════════════
   /binaries — editorial CLI catalog
═══════════════════════════════════════════════════ */

/* Pagehead variant (left-aligned, no hairline divider) */
body.mlab-pub .bin-pagehead { padding: 3rem 0 2rem !important; }
body.mlab-pub .bin-pagehead::after { display: none !important; }
body.mlab-pub .bin-pagehead-title {
    text-align: left !important;
    margin: 0.75rem 0 0.75rem !important;
}
body.mlab-pub .bin-pagehead-sub {
    text-align: left !important;
    margin: 0 0 1.5rem !important;
    max-width: 720px;
}

/* Header pill row */
body.mlab-pub .bin-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
body.mlab-pub .bin-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem !important;
    border-radius: 100px !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--mlab-shadow-sm);
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
}
body.mlab-pub .bin-pill i {
    width: 13px !important;
    height: 13px !important;
}

/* ─── Tool card (mlab / postmortem) ─── */
body.mlab-pub .bin-card {
    position: relative;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 2rem 1.75rem !important;
    box-shadow: var(--mlab-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: visible;
}
body.mlab-pub .bin-card:hover {
    box-shadow: var(--mlab-shadow-md);
}
body.mlab-pub .bin-card[data-num]::after {
    content: attr(data-num);
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-family: var(--mlab-font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--mlab-ink-4);
}

body.mlab-pub .bin-card-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-right: 4rem;
}
body.mlab-pub .bin-card-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.mlab-pub .bin-card-icon i {
    color: var(--mlab-ink) !important;
    width: 24px !important;
    height: 24px !important;
}
body.mlab-pub .bin-card-title {
    font-family: var(--mlab-font-sans);
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--mlab-ink) !important;
    margin: 0 0 0.35rem !important;
}
body.mlab-pub .bin-card-sub {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    margin: 0 !important;
}
body.mlab-pub .bin-card-desc {
    color: var(--mlab-ink-2) !important;
    font-size: 0.94rem !important;
    line-height: 1.65 !important;
    opacity: 1 !important;
    margin-bottom: 1.5rem !important;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--mlab-ink);
    background: rgba(0, 0, 0, 0.02);
}
html[data-bs-theme=dark] body.mlab-pub .bin-card-desc {
    background: rgba(255, 255, 255, 0.03);
}
body.mlab-pub .bin-card-desc code {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid var(--mlab-hairline);
    border-radius: 4px;
    padding: 0.05em 0.35em;
    font-size: 0.88em;
}

/* ─── Section labels inside cards (Install / Quick start …) ─── */
body.mlab-pub .bin-section-label {
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    margin: 1.5rem 0 0.65rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
body.mlab-pub .bin-section-label::before {
    display: none;}

/* ─── Terminal-style code block ─── */
body.mlab-pub .bin-code {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 1rem 1.1rem !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.78rem !important;
    line-height: 1.7 !important;
    box-shadow: var(--mlab-shadow-sm);
    position: relative;
    padding-top: 2rem !important;
}
/* dots — terminal chrome */
body.mlab-pub .bin-code::before {
    content: "● ● ●";
    position: absolute;
    top: 0.55rem;
    left: 1rem;
    font-size: 0.55rem;
    letter-spacing: 0.4em;
    color: var(--mlab-paper);
    opacity: 0.35;
}
body.mlab-pub .bin-code .c { color: rgba(255,255,255,0.45); font-style: italic; }
body.mlab-pub .bin-code .p {
    color: var(--mlab-paper);
    opacity: 0.6;
    font-weight: 600;
    margin-right: 0.35em;
}

/* ─── Target / ecosystem chips ─── */
body.mlab-pub .bin-targets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
body.mlab-pub .bin-target {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.72rem !important;
    font-weight: 600 !important;
}
body.mlab-pub .bin-target i {
    width: 14px !important;
    height: 14px !important;
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
}
body.mlab-pub .bin-target code {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--mlab-ink-2) !important;
    font-size: 0.95em;
}

/* ─── Feature checklist ─── */
body.mlab-pub .bin-feature-list { padding: 0; margin: 0; list-style: none; }
body.mlab-pub .bin-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--mlab-hairline);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--mlab-ink-2) !important;
    opacity: 1 !important;
}
body.mlab-pub .bin-feature-list li:last-child { border-bottom: 0; }
body.mlab-pub .bin-feature-list li strong { color: var(--mlab-ink) !important; }
body.mlab-pub .bin-feature-list li code {
    background: rgba(0,0,0,0.05);
    border: 1px solid var(--mlab-hairline);
    border-radius: 4px;
    padding: 0.05em 0.35em;
    font-size: 0.88em;
    font-family: var(--mlab-font-mono);
}
body.mlab-pub .bin-feature-list li i {
    width: 16px !important;
    height: 16px !important;
    margin-top: 2px;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border);
    border-radius: 50%;
    padding: 1px;
    flex-shrink: 0;
}

/* ─── Action button row (GitHub / Download / Docs) ─── */
body.mlab-pub .bin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mlab-hairline);
}
body.mlab-pub .bin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem !important;
    border-radius: var(--radius) !important;
    font-family: var(--mlab-font-sans);
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 1px solid var(--border) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
    box-shadow: var(--mlab-shadow-sm);
}
body.mlab-pub .bin-btn i { width: 14px !important; height: 14px !important; }
body.mlab-pub .bin-btn-primary {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .bin-btn-primary:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-md);
    opacity: 1;
}
body.mlab-pub .bin-btn-ghost {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .bin-btn-ghost:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-md);
}

/* ─── Divider "More coming" ─── */
body.mlab-pub .bin-divider {
    text-align: center;
    margin: 3.5rem 0 2rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
}
body.mlab-pub .bin-divider::before,
body.mlab-pub .bin-divider::after {
    content: "";
    display: inline-block;
    width: 80px;
    height: 1.5px;
    background: var(--mlab-ink);
    vertical-align: middle;
    margin: 0 1rem;
    opacity: 0.6;
}

/* ─── Footer-of-cards "Looking for the browser-based toolbox?" ─── */
body.mlab-pub .bin-extra {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    padding: 2rem 1.5rem !important;
    text-align: center;
}
body.mlab-pub .bin-extra h3 {
    font-family: var(--mlab-font-sans);
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--mlab-ink) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.5rem !important;
}
body.mlab-pub .bin-extra p {
    color: var(--mlab-ink-2) !important;
    font-size: 0.9rem !important;
    opacity: 1 !important;
    margin-bottom: 1.25rem !important;
}

/* ═══════════════════════════════════════════════════
   BLOG ARTICLE — code blocks
   (override mlab-editorial.css's generic `pre` rule
    which forced a light-on-light combo)
═══════════════════════════════════════════════════ */
body.mlab-pub .article-body pre,
body.mlab-pub .article-body pre code {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
}
body.mlab-pub .article-body pre {
    padding: 2rem 1.1rem 1.1rem !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.82rem !important;
    line-height: 1.65 !important;
    box-shadow: var(--mlab-shadow-sm);
    overflow-x: auto;
    position: relative;
    margin: 1.5rem 0 !important;
}
/* Terminal chrome */
body.mlab-pub .article-body pre::before {
    content: "● ● ●";
    position: absolute;
    top: 0.55rem;
    left: 1rem;
    font-size: 0.55rem;
    letter-spacing: 0.4em;
    color: var(--mlab-paper);
    opacity: 0.35;
}
body.mlab-pub .article-body pre code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* Inline code in article copy */
body.mlab-pub .article-body :not(pre) > code {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid var(--mlab-hairline) !important;
    color: var(--mlab-ink) !important;
    border-radius: 4px !important;
    padding: 0.1em 0.4em !important;
    font-family: var(--mlab-font-mono) !important;
    font-size: 0.88em !important;
}
html[data-bs-theme=dark] body.mlab-pub .article-body :not(pre) > code {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════
   DEVELOPER DOCS — code blocks + sidebar nav
   (fixes the editorial-css rule that forced .doc-codeblock pre
    to white bg, killing the catppuccin syntax highlighting)
═══════════════════════════════════════════════════ */

/* ─── Codeblock card: solid black panel, hard-shadow ─── */
body.mlab-pub .doc-codeblock {
    background: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm);
    overflow: hidden;
    margin: 1rem 0 1.5rem !important;
}

/* Header (filename + Copy button) */
body.mlab-pub .doc-codeblock-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.55rem 1rem !important;
}
body.mlab-pub .doc-codeblock-filename {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
}
body.mlab-pub .doc-codeblock-filename i {
    color: rgba(255, 255, 255, 0.65) !important;
    opacity: 1 !important;
}
body.mlab-pub .doc-codeblock-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    border-radius: var(--radius) !important;
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    padding: 0.25rem 0.7rem !important;
}
body.mlab-pub .doc-codeblock-btn:hover {
    color: var(--mlab-paper) !important;
    border-color: var(--mlab-paper) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* The actual <pre> — restore transparent so the dark bg shows
   under the syntax highlight colors, and force readable defaults. */
body.mlab-pub .doc-codeblock pre {
    background: transparent !important;
    color: #cdd6f4 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.8rem !important;
    line-height: 1.7 !important;
    box-shadow: none !important;
}
body.mlab-pub .doc-codeblock pre code {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
}

/* Syntax highlight tokens — keep catppuccin on dark bg */
body.mlab-pub .doc-codeblock .hl-key     { color: #89b4fa !important; }
body.mlab-pub .doc-codeblock .hl-str     { color: #a6e3a1 !important; }
body.mlab-pub .doc-codeblock .hl-num     { color: #fab387 !important; }
body.mlab-pub .doc-codeblock .hl-bool    { color: #fab387 !important; }
body.mlab-pub .doc-codeblock .hl-cmd     { color: #cba6f7 !important; }
body.mlab-pub .doc-codeblock .hl-flag    { color: #f9e2af !important; }
body.mlab-pub .doc-codeblock .hl-var     { color: #f38ba8 !important; }
body.mlab-pub .doc-codeblock .hl-section { color: #89dceb !important; font-weight: 600; }
body.mlab-pub .doc-codeblock .hl-comment { color: #8a8fa3 !important; font-style: italic; }

/* Inline <code> in body copy */
body.mlab-pub .doc-chapter :not(pre) > code,
body.mlab-pub .doc-body :not(pre) > code {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid var(--mlab-hairline) !important;
    color: var(--mlab-ink) !important;
    border-radius: 4px !important;
    padding: 0.1em 0.4em !important;
    font-family: var(--mlab-font-mono) !important;
    font-size: 0.88em !important;
}
html[data-bs-theme=dark] body.mlab-pub .doc-chapter :not(pre) > code,
html[data-bs-theme=dark] body.mlab-pub .doc-body :not(pre) > code {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ─── Sidebar nav ─── */
body.mlab-pub .doc-nav {
    border-right: 1px solid var(--mlab-hairline) !important;
}
body.mlab-pub .doc-nav-title {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mlab-hairline);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body.mlab-pub .doc-nav-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-foreground);
    flex-shrink: 0;
}
body.mlab-pub .doc-nav-link {
    font-family: var(--mlab-font-sans);
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--mlab-ink-2) !important;
    border-radius: 6px !important;
    padding: 0.45rem 0.7rem !important;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    position: relative;
}
body.mlab-pub .doc-nav-link:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--mlab-ink) !important;
    transform: translateX(2px);
}
html[data-bs-theme=dark] body.mlab-pub .doc-nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
body.mlab-pub .doc-nav-link.active {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .doc-nav-link.active::before { display: none !important; }

/* ─── Doc body ─── */
body.mlab-pub .doc-chapter h2 {
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--mlab-ink) !important;
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
}
body.mlab-pub .doc-chapter h3 {
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: var(--mlab-ink) !important;
    margin-top: 2rem !important;
}
body.mlab-pub .doc-chapter .doc-subtitle {
    color: var(--mlab-ink-3) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
}
body.mlab-pub .doc-chapter p {
    color: var(--mlab-ink-2) !important;
    line-height: 1.7;
}

/* ─── Alert boxes (warn / info) in docs ─── */
body.mlab-pub .doc-chapter .alert,
body.mlab-pub .doc-body .alert {
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: 10px !important;
    box-shadow: var(--mlab-shadow-sm);
    padding: 0.85rem 1rem !important;
}
body.mlab-pub .doc-chapter .alert-warning,
body.mlab-pub .doc-body .alert-warning {
    border-left: 6px solid var(--mlab-ink) !important;
}
body.mlab-pub .doc-chapter .alert-info,
body.mlab-pub .doc-body .alert-info {
    border-left: 6px solid var(--mlab-ink) !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ═══════════════════════════════════════════════════
   CHEAT SHEETS — editorial restyle
   (regex, ports, cidr, http-status-codes, ascii,
    html-entities, mime-types)
═══════════════════════════════════════════════════ */

/* Compact hero padding (the markup is reused — slim it down) */
body.mlab-pub .mlab-page-content .mlab-hero {
    padding: 3.5rem 0 1.5rem !important;
}

/* The "search + TOC" toolbar card on top */
body.mlab-pub .mlab-cs-search,
body.mlab-pub .mlab-cs-toc {
    /* layout reuse */
}
body.mlab-pub .mlab-page-content > .container-fluid .card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
}

/* TOC chips */
body.mlab-pub .mlab-cs-toc { gap: 0.4rem !important; }
body.mlab-pub .mlab-cs-toc a {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem !important;
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    box-shadow: var(--mlab-shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .mlab-cs-toc a:hover,
body.mlab-pub .mlab-cs-toc a.active {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    box-shadow: var(--mlab-shadow-sm);
}

/* Search input */
body.mlab-pub .mlab-cs-search input,
body.mlab-pub .mlab-cs-search input.form-control {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.8rem !important;
    border-radius: var(--radius) !important;
    padding: 0.45rem 0.85rem 0.45rem 2.2rem !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.mlab-pub .mlab-cs-search input:focus {
    box-shadow: var(--mlab-shadow-sm) !important;
    outline: 0;
}
body.mlab-pub .mlab-cs-search input::placeholder {
    color: var(--mlab-ink-4) !important;
    font-family: var(--mlab-font-mono);
}
body.mlab-pub .mlab-cs-search .search-icon {
    color: var(--mlab-ink) !important;
    opacity: 0.6 !important;
}

/* ─── Section heads (above each table) ─── */
body.mlab-pub .mlab-cs-section {
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem 1rem;
    align-items: baseline;
}
body.mlab-pub .mlab-cs-section h2 {
    font-family: var(--mlab-font-sans) !important;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--mlab-ink) !important;
    margin: 0 !important;
    position: relative;
    padding-left: 2.5rem;
}
body.mlab-pub .mlab-cs-section h2::before {
    content: "§";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--mlab-font-mono);
    font-size: 1.3rem;
    color: var(--mlab-ink-4);
    font-weight: 400;
}
body.mlab-pub .mlab-cs-section p {
    grid-column: 1 / -1;
    color: var(--mlab-ink-2) !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin: 0.5rem 0 0 !important;
    max-width: 720px;
}
body.mlab-pub .mlab-cs-section p code {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--mlab-hairline);
    border-radius: 4px;
    padding: 0.05em 0.35em;
    font-family: var(--mlab-font-mono);
    font-size: 0.88em;
    color: var(--mlab-ink) !important;
}

/* ─── Data tables ─── */
body.mlab-pub .mlab-cs-table {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    margin-bottom: 2rem !important;
    overflow: hidden;
}
body.mlab-pub .mlab-cs-table table {
    margin: 0 !important;
    font-family: var(--mlab-font-sans);
    font-size: 0.86rem !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-cs-table thead th {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    opacity: 1 !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
}
body.mlab-pub .mlab-cs-table tbody td {
    padding: 0.6rem 1rem !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
    color: var(--mlab-ink-2) !important;
    vertical-align: middle;
}
body.mlab-pub .mlab-cs-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
body.mlab-pub .mlab-cs-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}
html[data-bs-theme=dark] body.mlab-pub .mlab-cs-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Code cells inside tables */
body.mlab-pub .mlab-cs-table td code,
body.mlab-pub .mlab-cs-table th code {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 4px !important;
    padding: 0.15em 0.45em !important;
    font-family: var(--mlab-font-mono) !important;
    font-size: 0.82em !important;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}

/* Hidden rows after search */
body.mlab-pub .mlab-cs-table tbody tr.cs-hidden { display: none; }

/* ═══════════════════════════════════════════════════
   /compare/ — side-by-side comparison pages
   (md5-vs-sha256, base64-vs-hex, siem-vs-soar, yara-vs-sigma)
═══════════════════════════════════════════════════ */

/* Hero: tighten padding (no big floats here, just slash/underline) */
body.mlab-pub .mlab-page-content > .container-fluid > .mlab-hero {
    padding-bottom: 1.5rem !important;
}

/* ─── Main comparison table card ─── */
body.mlab-pub .mlab-compare-table {
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    background: var(--mlab-paper) !important;
    overflow: hidden;
}
body.mlab-pub .mlab-compare-table .card-body { padding: 0 !important; }

body.mlab-pub .mlab-compare-table table {
    margin: 0 !important;
    font-family: var(--mlab-font-sans);
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-compare-table thead th {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.2em !important;
    padding: 1rem 1.1rem !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
}
/* First column thead = feature label */
body.mlab-pub .mlab-compare-table thead th:first-child {
    color: var(--mlab-ink-3) !important;
}
/* Versus column dividers */
body.mlab-pub .mlab-compare-table thead th + th,
body.mlab-pub .mlab-compare-table tbody td + td {
    border-left: 1px solid var(--mlab-hairline) !important;
}
body.mlab-pub .mlab-compare-table tbody td {
    padding: 0.75rem 1.1rem !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
    color: var(--mlab-ink-2) !important;
    font-size: 0.88rem !important;
    vertical-align: middle;
}
body.mlab-pub .mlab-compare-table tbody td:first-child {
    color: var(--mlab-ink) !important;
    font-weight: 600;
}
body.mlab-pub .mlab-compare-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
body.mlab-pub .mlab-compare-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.025) !important;
}
html[data-bs-theme=dark] body.mlab-pub .mlab-compare-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Desaturate semantic spans (text-danger / text-success / text-muted)
   inside the compare table — keep meaning via marks, not colour. */
body.mlab-pub .mlab-compare-table .text-success,
body.mlab-pub .mlab-compare-table .text-danger,
body.mlab-pub .mlab-compare-table .text-muted {
    color: var(--mlab-ink) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* Strong inline tags = "Secure" / "Broken" — turn into editorial chip */
body.mlab-pub .mlab-compare-table .fw-semibold.text-success,
body.mlab-pub .mlab-compare-table .fw-semibold.text-danger {
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 100px !important;
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    font-weight: 700 !important;
}
/* "Broken / Weak / No" → inverted fill, visually distinguishable from
   "Secure / Strong / Yes" while staying B&W */
body.mlab-pub .mlab-compare-table .fw-semibold.text-danger {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
/* Inline icon (check / x) — mono ink */
body.mlab-pub .mlab-compare-table .text-success i,
body.mlab-pub .mlab-compare-table .text-danger i,
body.mlab-pub .mlab-compare-table .text-muted i {
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-compare-table .text-muted i {
    opacity: 0.45;
}

/* ─── "When to use X" twin cards ─── */
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card,
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card.h-100 {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card:hover {
    box-shadow: var(--mlab-shadow-md) !important;
}
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card h2 {
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: var(--mlab-ink) !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mlab-hairline);
}
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0 0;
}
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.5rem;
    border-bottom: 1px dashed var(--mlab-hairline);
    color: var(--mlab-ink-2) !important;
    font-size: 0.88rem;
    line-height: 1.55;
}
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card li:last-child {
    border-bottom: 0;
}
body.mlab-pub .mlab-page-content .row.g-3 > [class*="col-md-6"] > .card li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0.45rem;
    font-family: var(--mlab-font-mono);
    color: var(--mlab-ink);
    font-weight: 700;
}

/* ─── Verdict card ─── */
/* Carte inversee a l'origine (fond encre, texte papier). Une regle generique
   plus specifique, `.mlab-page-content > .container-fluid .card`, forcait deja
   le fond en papier sans toucher aux couleurs de texte : le verdict sortait en
   papier sur papier, donc totalement invisible sur les pages /compare/*.
   Reconstruite en carte claire avec un liseré d'accent, ce qui supprime aussi
   la dependance a l'ordre de cascade. */
body.mlab-pub .mlab-compare-verdict {
    background: var(--card) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    position: relative;
    overflow: hidden;
}
body.mlab-pub .mlab-compare-verdict .card-body {
    padding: 1.75rem 1.5rem !important;
}
body.mlab-pub .mlab-compare-verdict h2 {
    color: var(--muted-foreground) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
body.mlab-pub .mlab-compare-verdict h2::before {
    content: "▸";
    color: var(--accent);
    opacity: 1;
}
body.mlab-pub .mlab-compare-verdict p {
    color: var(--foreground) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}
body.mlab-pub .mlab-compare-verdict strong {
    color: var(--foreground) !important;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1px;
}

/* ═══════════════════════════════════════════════════
   HELP CENTER — main + all subpages
   (main, contact, partners, troubleshooting, mcp,
    gs-*, tool-*, gs-api, gs-crypto-lookup,
    gs-custom-scan, gs-infra-verify, gs-scan-*)
═══════════════════════════════════════════════════ */

/* ─── Hero / pagehead ─── */
body.mlab-pub .hc-hero {
    padding: 3.5rem 1rem 1.5rem !important;
    text-align: center;
}
body.mlab-pub .hc-hero h1 {
    font-family: var(--mlab-font-sans) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: var(--mlab-ink) !important;
    font-size: clamp(2.2rem, 4.4vw, 3.2rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 1rem !important;
}
body.mlab-pub .hc-hero .lead,
body.mlab-pub .hc-hero p.lead {
    font-size: 1rem !important;
    color: var(--mlab-ink-2) !important;
    max-width: 640px;
    margin: 0 auto;
}

/* Hero pill (eyebrow) */
body.mlab-pub .hc-hero-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem !important;
    padding: 0.4rem 0.9rem !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    border-radius: 100px !important;
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    box-shadow: var(--mlab-shadow-sm);
    margin-bottom: 1.5rem;
}

/* ─── Section title (above card grids) ─── */
body.mlab-pub .hc-section-title {
    font-family: var(--mlab-font-sans) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--mlab-ink) !important;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 2rem 0 1.5rem !important;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
body.mlab-pub .hc-section-title::before {
    content: "§";
    color: var(--mlab-ink-4) !important;
    font-family: var(--mlab-font-mono) !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    font-size: 1.2em !important;
    font-weight: 400 !important;
    line-height: 1;
    vertical-align: baseline !important;
    margin: 0 !important;
}

/* ─── Topic cards (the 6-up coloured grid on /helpcenter) ─── */
body.mlab-pub .hc-card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 1.4rem 1.25rem 1.2rem !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    position: relative;
    overflow: hidden;
}
body.mlab-pub .hc-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
body.mlab-pub a.hc-card:hover,
body.mlab-pub .hc-card:hover {
    box-shadow: var(--mlab-shadow-md) !important;
    border-color: var(--mlab-ink) !important;
}
body.mlab-pub .hc-card:hover::before { transform: scaleX(1); }

body.mlab-pub .hc-card-title {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}
body.mlab-pub .hc-card-desc {
    color: var(--mlab-ink-2) !important;
    line-height: 1.55;
}
body.mlab-pub .hc-card-link {
    color: var(--mlab-ink) !important;
    font-size: 0.66rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.15rem;
    transition: gap 0.15s ease;
}
body.mlab-pub .hc-card:hover .hc-card-link { gap: 0.65rem; }

/* Icon box — kill the coloured variants (amber/blue/emerald/rose/violet),
   keep mono outline square */
body.mlab-pub .hc-icon-box,
body.mlab-pub .hc-icon-box--amber,
body.mlab-pub .hc-icon-box--blue,
body.mlab-pub .hc-icon-box--emerald,
body.mlab-pub .hc-icon-box--rose,
body.mlab-pub .hc-icon-box--violet {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.mlab-pub .hc-icon-box i,
body.mlab-pub [class^="hc-icon-box"] i {
    color: var(--mlab-ink) !important;
}
/* Card colour variants → all neutralised */
body.mlab-pub .hc-card--amber,
body.mlab-pub .hc-card--blue,
body.mlab-pub .hc-card--emerald,
body.mlab-pub .hc-card--rose,
body.mlab-pub .hc-card--violet {
    background: var(--mlab-paper) !important;
    border-color: var(--mlab-ink) !important;
}

/* ─── Info bar (yellow callouts on guide pages) ─── */
body.mlab-pub .hc-info-bar {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-left: 6px solid var(--mlab-ink) !important;
    border-radius: 10px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    padding: 0.9rem 1.1rem !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .hc-info-bar-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── Numbered step cards (used across guide pages) ─── */
body.mlab-pub .mlab-step-card,
body.mlab-pub .step-card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 1.4rem 1.25rem 1.2rem !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}
body.mlab-pub .mlab-step-card::before,
body.mlab-pub .step-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
body.mlab-pub .mlab-step-card:hover,
body.mlab-pub .step-card:hover {
    box-shadow: var(--mlab-shadow-md);
}
body.mlab-pub .mlab-step-card:hover::before,
body.mlab-pub .step-card:hover::before { transform: scaleX(1); }

body.mlab-pub .mlab-step-number,
body.mlab-pub .step-number,
body.mlab-pub .step-num {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 50%;
    width: 32px !important;
    height: 32px !important;
    font-family: var(--mlab-font-mono);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
}
body.mlab-pub .step-badge {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 100px !important;
    padding: 0.18rem 0.55rem !important;
}
body.mlab-pub .mlab-step-card h5,
body.mlab-pub .step-card h5 {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.015em;
}
body.mlab-pub .mlab-step-card p,
body.mlab-pub .step-card p {
    color: var(--mlab-ink-2) !important;
    line-height: 1.6;
}
body.mlab-pub .step-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px;
}

/* ─── Guide page cards (generic .card inside helpcenter) ─── */
body.mlab-pub .mlab-page-content .card.h-100,
body.mlab-pub .mlab-page-content .row.g-4 > [class*="col-"] > .card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════
   /partners — directory of ecosystem partners
═══════════════════════════════════════════════════ */

/* Category section */
body.mlab-pub .partners-category {
    margin-bottom: 3rem !important;
}
body.mlab-pub .partners-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border) !important;
    counter-increment: partners-cat;
}
body.mlab-pub .row.justify-content-center {
    counter-reset: partners-cat;
}
body.mlab-pub .partners-category-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.mlab-pub .partners-category-icon i {
    color: var(--mlab-ink) !important;
}
body.mlab-pub .partners-category-header::before {
    content: counter(partners-cat, decimal-leading-zero);
    font-family: var(--mlab-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--mlab-ink-3);
    margin-right: 0.25rem;
}
body.mlab-pub .partners-category-title {
    font-family: var(--mlab-font-sans);
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--mlab-ink) !important;
    margin: 0 !important;
}
body.mlab-pub .partners-category-count {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink) !important;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 100px !important;
    padding: 0.22rem 0.7rem !important;
    margin-left: auto;
    box-shadow: var(--mlab-shadow-sm);
}

/* Partner cards — equal-height row via h:100% on the card itself */
body.mlab-pub .partners-category .row > [class*="col-"] { display: flex; }
body.mlab-pub .p-card {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    width: 100%;
    height: 100%;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}
body.mlab-pub .p-card-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
body.mlab-pub .p-card-desc {
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.mlab-pub .p-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
body.mlab-pub .p-card:hover {
    box-shadow: var(--mlab-shadow-md) !important;
    border-color: var(--mlab-ink) !important;
}
body.mlab-pub .p-card:hover::before { transform: scaleX(1); }

body.mlab-pub .p-card-logo {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    flex: 0 0 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4px;
}
body.mlab-pub .p-card-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}
body.mlab-pub .p-card-logo i {
    width: 22px !important;
    height: 22px !important;
}
body.mlab-pub .p-card-name {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    font-size: 0.92rem !important;
}
body.mlab-pub .p-card-desc {
    color: var(--mlab-ink-3) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    margin-top: 0.25rem !important;
}
body.mlab-pub .p-card-arrow {
    color: var(--mlab-ink) !important;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
body.mlab-pub .p-card:hover .p-card-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* Final CTA "Partner with us" */
body.mlab-pub .partners-category + .text-center .text-muted {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
}

/* ═══════════════════════════════════════════════════
   LEGAL pages — tos / privacy / sales
═══════════════════════════════════════════════════ */

body.mlab-pub .legal-content {
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 0 4rem;
    font-family: var(--mlab-font-sans);
}

/* H1 — the document title */
body.mlab-pub .legal-content h1 {
    font-family: var(--mlab-font-sans) !important;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--mlab-ink) !important;
    line-height: 1.05 !important;
    margin: 0 0 0.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--border) !important;
    position: relative;
}
body.mlab-pub .legal-content h1::before {
    content: "§";
    font-family: var(--mlab-font-mono);
    font-size: 0.85em;
    color: var(--mlab-ink-4);
    margin-right: 0.6rem;
    font-weight: 400;
    vertical-align: 0.05em;
}

/* Legal meta line (organisation + version) */
body.mlab-pub .legal-content .legal-meta {
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
    margin-bottom: 2.5rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
body.mlab-pub .legal-content .legal-meta::before {
    display: none;}

/* H2 — section title */
body.mlab-pub .legal-content h2 {
    counter-increment: legal-h2;
    font-family: var(--mlab-font-sans) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--mlab-ink) !important;
    margin: 3rem 0 1rem !important;
    padding-bottom: 0.6rem !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
body.mlab-pub .legal-content { counter-reset: legal-h2; }
body.mlab-pub .legal-content h2::before {
    content: counter(legal-h2, decimal-leading-zero);
    font-family: var(--mlab-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--mlab-ink-3);
    flex-shrink: 0;
}

/* H3 — subsection */
body.mlab-pub .legal-content h3 {
    font-family: var(--mlab-font-sans) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--mlab-ink) !important;
    margin: 1.75rem 0 0.5rem !important;
    padding-left: 1rem;
    border-left: 3px solid var(--mlab-ink);
}

/* Body copy */
body.mlab-pub .legal-content p,
body.mlab-pub .legal-content li {
    font-family: var(--mlab-font-sans) !important;
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
    color: var(--mlab-ink-2) !important;
}
body.mlab-pub .legal-content p { margin-bottom: 1rem !important; }

/* Lists — clean indent, mono bullets */
body.mlab-pub .legal-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 1.25rem !important;
    border-left: 2px solid var(--mlab-hairline);
}
body.mlab-pub .legal-content li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.5rem !important;
    margin: 0 !important;
    border-bottom: 1px dashed var(--mlab-hairline);
}
body.mlab-pub .legal-content li:last-child { border-bottom: 0; }
body.mlab-pub .legal-content li::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 1em;
    width: 0.5rem;
    height: 1px;
    background: var(--mlab-ink);
}

/* Strong / bold */
body.mlab-pub .legal-content p b,
body.mlab-pub .legal-content li b,
body.mlab-pub .legal-content strong {
    color: var(--mlab-ink) !important;
    font-weight: 700;
}

/* Italics — quoted definitions */
body.mlab-pub .legal-content i,
body.mlab-pub .legal-content em {
    color: var(--mlab-ink-2) !important;
    font-style: italic;
}

/* Links */
body.mlab-pub .legal-content a {
    color: var(--mlab-ink) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: opacity 0.12s ease;
}
body.mlab-pub .legal-content a:hover {
    opacity: 0.7;
}

/* Tables in legal docs (rare but possible) */
body.mlab-pub .legal-content table {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 1.5rem 0;
    font-size: 0.88rem;
}
body.mlab-pub .legal-content table th,
body.mlab-pub .legal-content table td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--mlab-hairline);
    text-align: left;
}
body.mlab-pub .legal-content table th {
    background: var(--mlab-paper);
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ═══════════════════════════════════════════════════
   404 · a lookup that finds no route
   Same language as the home flow: ink + one amber accent. The rows are the
   salvage checks the page really runs (see html/404.html), revealed in order.
═══════════════════════════════════════════════════ */

body.mlab-pub .mlab-404-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}
body.mlab-pub .mlab-404-stack { max-width: 640px; width: 100%; }
body.mlab-pub .mlab-404-kicker {
    display: flex;
    align-items: center;
    gap: .5rem;
    font: 500 .7rem/1 var(--mlab-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent, #d97706);
    margin-bottom: 1rem;
}
body.mlab-pub .mlab-404-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #d97706);
}
body.mlab-pub .mlab-404-title {
    font-family: var(--mlab-font-sans);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--mlab-ink);
    margin: 0 0 .5rem;
}
body.mlab-pub .mlab-404-path {
    font: .8rem var(--mlab-font-mono);
    color: var(--mlab-ink-3);
    margin: 0 0 1.75rem;
    overflow-wrap: anywhere;
}
body.mlab-pub .mlab-404-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--mlab-hairline);
}
body.mlab-pub .mlab-404-check {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-top: 1px solid var(--mlab-hairline);
    font: .8rem var(--mlab-font-mono);
    color: var(--mlab-ink-3);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .35s ease, transform .35s ease;
}
body.mlab-pub .mlab-404-check.is-in { opacity: 1; transform: none; }
body.mlab-pub .mlab-404-check-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mlab-hairline);
}
body.mlab-pub .mlab-404-check-name { flex: 0 0 9rem; white-space: nowrap; }
body.mlab-pub .mlab-404-check-detail { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mlab-pub .mlab-404-check-verdict { flex: 0 0 auto; }
body.mlab-pub .mlab-404-check.is-hit { color: var(--mlab-ink); }
body.mlab-pub .mlab-404-check.is-hit .mlab-404-check-dot { background: var(--accent, #d97706); }
body.mlab-pub .mlab-404-check.is-hit .mlab-404-check-verdict { color: var(--accent, #d97706); }
@media (max-width: 480px) {
    body.mlab-pub .mlab-404-check-name { flex-basis: auto; }
}

body.mlab-pub .mlab-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.5rem;
}
body.mlab-pub .mlab-404-footer {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mlab-ink-3);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    body.mlab-pub .mlab-404-check { transition: none; }
}

/* ═══════════════════════════════════════════════════
   AUTH pages — login / register / forgot / reset /
   check-email / create-organization / company_locked /
   logout
═══════════════════════════════════════════════════ */

body.mlab-pub .auth-box {
    min-height: 100vh;
    background: transparent !important;
    padding: 2rem 1rem;
}
/* Bigger inner container when the split layout is on */
body.mlab-pub:has(.auth-split-row) .auth-box > .container {
    max-width: 1180px;
}

/* The main form card */
body.mlab-pub .auth-box .card,
body.mlab-pub .auth-split-form > .card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    overflow: hidden !important;
}
body.mlab-pub .auth-box .card-body {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2rem 1.85rem !important;
}
/* Neutralise Bootstrap's per-edge radius on direct card children */
body.mlab-pub .auth-box .card > :first-child,
body.mlab-pub .auth-box .card > :last-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ─── Brand block (logo + tagline) ─── */
body.mlab-pub .auth-brand .logo-text {
    font-family: var(--mlab-font-sans);
    color: var(--mlab-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}
body.mlab-pub .auth-brand p {
    color: var(--mlab-ink-2) !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin-top: 0.85rem !important;
}
body.mlab-pub .auth-brand::before {
    display: none;
}

/* ─── Headings inside auth cards ─── */
body.mlab-pub .auth-box h1,
body.mlab-pub .auth-box h2,
body.mlab-pub .auth-box h3,
body.mlab-pub .auth-box h4 {
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--mlab-ink) !important;
}

/* ─── Form labels & inputs ─── */
body.mlab-pub .auth-box .form-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.2em !important;
    color: var(--mlab-ink) !important;
    font-weight: 600 !important;
    margin-bottom: 0.45rem !important;
}
body.mlab-pub .auth-box .form-label .text-danger {
    color: var(--mlab-ink) !important;
    opacity: 0.5;
}

body.mlab-pub .auth-box .form-control,
body.mlab-pub .auth-box input.form-control {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    padding: 0.65rem 0.85rem !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.mlab-pub .auth-box .form-control:focus {
    box-shadow: var(--mlab-shadow-sm) !important;
    outline: 0;
}
body.mlab-pub .auth-box .form-control::placeholder {
    color: var(--mlab-ink-4) !important;
    font-family: var(--mlab-font-mono);
}

/* Input-group wrappers (some forms wrap input in input-group) */
body.mlab-pub .auth-box .input-group {
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    border-radius: 0 !important;
}
body.mlab-pub .auth-box .input-group > .form-control { width: 100%; }

/* ─── Keep me signed in / forgot row ─── */
body.mlab-pub .auth-box .form-check-input {
    border: 1px solid var(--border) !important;
    background-color: var(--mlab-paper) !important;
    box-shadow: none !important;
}
body.mlab-pub .auth-box .form-check-input:checked {
    background-color: var(--mlab-ink) !important;
    border-color: var(--mlab-ink) !important;
}
body.mlab-pub .auth-box .form-check-label {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-2) !important;
}
body.mlab-pub .auth-box a.text-muted,
body.mlab-pub .auth-box a[href*="forgot"] {
    color: var(--mlab-ink) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 3px !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
}

/* ─── Primary submit button ─── */
body.mlab-pub .auth-box .btn.btn-primary,
body.mlab-pub .auth-box button[type="submit"].btn-primary,
body.mlab-pub .auth-box .d-grid > .btn-primary {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    padding: 0.7rem 1.25rem !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.mlab-pub .auth-box .btn.btn-primary:hover {
    box-shadow: var(--mlab-shadow-md) !important;
}
body.mlab-pub .auth-box .btn.btn-primary[disabled] {
    opacity: 0.5;
    box-shadow: var(--mlab-shadow-sm) !important;
}

/* ─── Social auth (Google / GitHub) ─── */
body.mlab-pub .social-auth-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 480px) {
    body.mlab-pub .social-auth-group { grid-template-columns: 1fr; }
}
body.mlab-pub .social-auth-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem !important;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    text-decoration: none !important;
    box-shadow: var(--mlab-shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .social-auth-btn:hover {
    box-shadow: var(--mlab-shadow-md);
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .social-auth-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
/* Keep Google's brand colours visible on white, invert on hover */
body.mlab-pub .social-auth-btn.is-github svg path {
    fill: var(--mlab-ink) !important;
}
body.mlab-pub .social-auth-btn.is-github:hover svg path {
    fill: var(--mlab-paper) !important;
}

/* "or" divider */
body.mlab-pub .social-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.25rem 0;
}
body.mlab-pub .social-auth-divider::before,
body.mlab-pub .social-auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1.5px;
    background: var(--mlab-ink);
}
body.mlab-pub .social-auth-divider span {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
}

/* Error banner */
body.mlab-pub .social-auth-error {
    border: 1px solid var(--border) !important;
    border-left: 6px solid var(--mlab-ink) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.85rem !important;
    margin-bottom: 1rem;
    box-shadow: var(--mlab-shadow-sm);
}

/* Generic "auth-error" alert (some pages use this class) */
body.mlab-pub .auth-error {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-left: 6px solid var(--mlab-ink) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    box-shadow: var(--mlab-shadow-sm);
}

/* ─── "New here? Create an account" — bottom links ─── */
body.mlab-pub .auth-box .card-body > p,
body.mlab-pub .auth-box .text-muted {
    color: var(--mlab-ink-2) !important;
}
body.mlab-pub .auth-box .card-body > p a {
    color: var(--mlab-ink) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 3px !important;
    font-weight: 700;
}

/* ─── Footer signature line ─── */
body.mlab-pub .auth-box .col-xxl-4 > p.text-muted,
body.mlab-pub .auth-split-form > p.text-muted {
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
}

/* ─── Aside (illustration + tagline) ─── */
body.mlab-pub .auth-split-aside {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}
body.mlab-pub .auth-aside-image {
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    background: var(--mlab-paper) !important;
    padding: 1.5rem !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
body.mlab-pub .auth-aside-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--mlab-dot) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.55;
    pointer-events: none;
}
body.mlab-pub .auth-aside-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
body.mlab-pub .auth-aside-desc {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-2) !important;
    text-align: center;
    max-width: 420px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   SCAN RESULT PAGES — ip / domain / hash / file / crypto
═══════════════════════════════════════════════════ */

/* ─── Report header (title + verdict badge + overview stats) ─── */
body.mlab-pub .mlab-report-header {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    overflow: hidden !important;
    position: relative;
}
body.mlab-pub .mlab-report-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--mlab-ink) !important;
    z-index: 1;
}
body.mlab-pub .mlab-report-header .card-body {
    padding: 1.75rem 1.5rem !important;
    background: transparent !important;
}
body.mlab-pub .mlab-report-header h3,
body.mlab-pub .mlab-report-header h4,
body.mlab-pub .mlab-report-header h2 {
    font-family: var(--mlab-font-sans) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--mlab-ink) !important;
    font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important;
}

/* The big indicator pill next to the report title (IP / domain / hash…) */
body.mlab-pub .mlab-report-header .badge.bg-primary,
body.mlab-pub .mlab-report-header .badge {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 100px !important;
    font-family: var(--mlab-font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 0.45rem 0.95rem !important;
    box-shadow: var(--mlab-shadow-sm);
    word-break: break-all;
    max-width: 100%;
    text-transform: none !important;
}

body.mlab-pub .mlab-report-header hr {
    border: 0 !important;
    border-top: 1px solid var(--mlab-hairline) !important;
    margin: 1.25rem 0 !important;
    opacity: 1 !important;
}

/* ─── Overview stats row ─── */
body.mlab-pub .mlab-report-stat {
    padding: 0.6rem 0 !important;
    text-align: left !important;
    position: relative;
}
body.mlab-pub .mlab-report-stat + .mlab-report-stat::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--mlab-hairline);
}
body.mlab-pub .mlab-report-stat h6 {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    margin-bottom: 0.4rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
body.mlab-pub .mlab-report-stat h6::before {
    display: none;}
body.mlab-pub .mlab-report-stat p {
    font-family: var(--mlab-font-sans) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--mlab-ink) !important;
    margin-bottom: 0 !important;
    word-break: break-all;
    line-height: 1.4;
}
/* MIME types are long and slash-delimited: keep them mono, wrap at
   natural separators instead of chopping words mid-glyph. */
body.mlab-pub .mlab-report-stat p.mlab-mime {
    font-family: var(--mlab-font-mono) !important;
    /* sized so the longest real-world subtype segment
       ("officedocument.wordprocessingml.document") fits one line in col-md-4 */
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    line-height: 1.55;
    word-break: normal !important;
    overflow-wrap: anywhere;
}

/* ─── Detail cards under the header ─── */
body.mlab-pub .mlab-report-card,
body.mlab-pub .mlab-info-card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    overflow: hidden !important;
}
body.mlab-pub .mlab-report-card .card-body,
body.mlab-pub .mlab-info-card .card-body {
    padding: 1.5rem !important;
    background: transparent !important;
}

/* ─── Hash blocks (md5/sha1/sha256/sha512) ─── */
body.mlab-pub .mlab-hash-block {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    /* right padding reserves the copy button's lane */
    padding: 0.9rem 4.75rem 0.9rem 1rem !important;
    box-shadow: none !important;
    position: relative;
    /* fixed label column so every hash value starts on the same axis */
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.mlab-pub .mlab-hash-block:hover {
    box-shadow: var(--mlab-shadow-md) !important;
}
body.mlab-pub .mlab-hash-block strong {
    font-family: var(--mlab-font-mono) !important;
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: var(--mlab-ink-3) !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
body.mlab-pub .mlab-hash-block strong::before {
    display: none;}
body.mlab-pub .mlab-hash-block code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.8rem !important;
    color: var(--mlab-ink) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    word-break: break-all;
    line-height: 1.5;
}
body.mlab-pub .mlab-hash-block .btn-copy {
    border: 1px solid var(--border) !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    font-size: 0.58rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0.22rem 0.55rem !important;
    box-shadow: none !important;
    top: 0.7rem !important;
    right: 0.7rem !important;
}
body.mlab-pub .mlab-hash-block:hover .btn-copy {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
/* Narrow screens: no room for a label column, stack label over value */
@media (max-width: 575.98px) {
    body.mlab-pub .mlab-hash-block {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.35rem;
        padding-right: 1rem !important;
        padding-top: 2.4rem !important;
    }
}

/* ─── Code blocks (full payloads, intel dumps) ─── */
body.mlab-pub .mlab-code-block {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 1.75rem 1rem 1rem !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.78rem !important;
    line-height: 1.65 !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    overflow-x: auto;
    position: relative;
}
body.mlab-pub .mlab-code-block::before {
    content: "● ● ●";
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 0.55rem;
    letter-spacing: 0.4em;
    color: var(--mlab-paper);
    opacity: 0.35;
}

/* ─── Analysis tabs ─── */
body.mlab-pub .mlab-tabs .nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    gap: 0;
    margin-bottom: 1.25rem;
}
body.mlab-pub .mlab-tabs .nav-tabs .nav-link {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mlab-ink-3) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    opacity: 1 !important;
    padding: 0.7rem 1rem !important;
    margin-bottom: -1.5px;
    border-bottom: 1.5px solid transparent !important;
    transition: color 0.12s ease, border-color 0.12s ease;
}
body.mlab-pub .mlab-tabs .nav-tabs .nav-link:hover {
    background: transparent !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .mlab-tabs .nav-tabs .nav-link.active {
    color: var(--mlab-ink) !important;
    background: transparent !important;
    border-bottom-color: var(--mlab-ink) !important;
    border-bottom-width: 3px !important;
}

/* ─── Verdict / status badges in result body ─── */
body.mlab-pub .mlab-page-content .badge.bg-success,
body.mlab-pub .container-fluid .badge.bg-success {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 100px !important;
    padding: 0.22rem 0.6rem !important;
}
body.mlab-pub .mlab-page-content .badge.bg-danger,
body.mlab-pub .mlab-page-content .badge.bg-warning,
body.mlab-pub .container-fluid .badge.bg-danger,
body.mlab-pub .container-fluid .badge.bg-warning {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 100px !important;
    padding: 0.22rem 0.6rem !important;
}

/* ─── Map container (IP geolocation, domain edge map) ─── */
body.mlab-pub .mlab-map-container {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    overflow: hidden;
    background: var(--mlab-paper) !important;
}

/* ─── Loading / pending / no_scan / blacklisted / fail states ─── */
body.mlab-pub .mlab-page-content .alert,
body.mlab-pub .container-fluid > .alert {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    border-left: 6px solid var(--mlab-ink) !important;
    border-radius: 10px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
}

/* Spinner inside loading.html — keep neutral */
body.mlab-pub .spinner-border {
    border-color: var(--mlab-ink) !important;
    border-right-color: transparent !important;
}

/* ═══════════════════════════════════════════════════
   FINAL PASS — ir-*, hunt-*, tprm/.t-*, credit limit
   pages, sso wrappers, generic Bootstrap card catch-all
═══════════════════════════════════════════════════ */

/* ─── Generic Bootstrap .card inside main content ─── */
body.mlab-pub .mlab-page-content > .container-fluid .card.text-center,
body.mlab-pub .mlab-page-content .row > [class*="col-"] > .card {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
}
body.mlab-pub .mlab-page-content > .container-fluid .card .card-body { background: transparent !important; }
body.mlab-pub .mlab-page-content .card h3,
body.mlab-pub .mlab-page-content .card h4 {
    color: var(--mlab-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

/* ─── ir-* / hunt-* shared product page language ─── */
body.mlab-pub .ir-hero,
body.mlab-pub .hunt-hero {
    padding: 3.5rem 0 2rem !important;
    text-align: center;
}
body.mlab-pub .ir-hero h1,
body.mlab-pub .hunt-hero h1 {
    font-family: var(--mlab-font-sans) !important;
    font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    color: var(--mlab-ink) !important;
}
body.mlab-pub .ir-hero-badge,
body.mlab-pub .hunt-hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem !important;
    padding: 0.4rem 0.95rem !important;
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    border-radius: 100px !important;
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    box-shadow: var(--mlab-shadow-sm);
    margin-bottom: 1.5rem;
}
body.mlab-pub .ir-gradient,
body.mlab-pub .hunt-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: var(--mlab-ink) !important;
    color: var(--mlab-ink) !important;
    position: relative;
    display: inline-block;
}
body.mlab-pub .ir-gradient::after,
body.mlab-pub .hunt-gradient::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.08em;
    height: 0.32em;
    background: var(--primary);
    opacity: 0.14;
    z-index: -1;
}

/* Highlights strip — block-level so margin auto centers it,
   width fits content so the pilule hugs the numbers. */
body.mlab-pub .ir-highlights,
body.mlab-pub .hunt-highlights {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 100px !important;
    box-shadow: var(--mlab-shadow-sm);
    padding: 1.1rem 1.5rem !important;
    display: flex !important;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Bootstrap .row nested inside .ir-highlights would push to 100%
   and break the fit-content centering — collapse it back. */
body.mlab-pub .ir-highlights > .row {
    width: 100%;
    margin: 0 !important;
    justify-content: center;
}
body.mlab-pub .ir-highlight-num,
body.mlab-pub .hunt-highlight-num {
    font-family: var(--mlab-font-sans) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: var(--mlab-ink) !important;
    letter-spacing: -0.02em;
}
body.mlab-pub .ir-highlight-label,
body.mlab-pub .hunt-highlight-label {
    font-size: 0.55rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
    font-weight: 500 !important;
}

/* Feature cards */
body.mlab-pub .ir-feature,
body.mlab-pub .hunt-feature {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 1.4rem 1.25rem !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}
body.mlab-pub .ir-feature::before,
body.mlab-pub .hunt-feature::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
body.mlab-pub .ir-feature:hover,
body.mlab-pub .hunt-feature:hover {
    box-shadow: var(--mlab-shadow-md);
}
body.mlab-pub .ir-feature:hover::before,
body.mlab-pub .hunt-feature:hover::before { transform: scaleX(1); }

body.mlab-pub .ir-feature-icon,
body.mlab-pub .hunt-feature-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
}
body.mlab-pub .ir-feature h5,
body.mlab-pub .hunt-feature h5 {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}
body.mlab-pub .ir-feature p,
body.mlab-pub .hunt-feature p {
    color: var(--mlab-ink-2) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}

/* CTA panels */
body.mlab-pub .ir-cta,
body.mlab-pub .hunt-cta,
body.mlab-pub .ir-pricing-cta {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    padding: 2.5rem 2rem !important;
}
body.mlab-pub .ir-cta h3,
body.mlab-pub .hunt-cta h3,
body.mlab-pub .ir-pricing-cta h3,
body.mlab-pub .ir-pricing-cta h2,
body.mlab-pub .ir-pricing-cta h4 {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}
/* Kill the dark gradient overlay the original page painted with ::before */
body.mlab-pub .ir-pricing-cta::before,
body.mlab-pub .ir-cta::before,
body.mlab-pub .hunt-cta::before {
    display: none !important;
    background: transparent !important;
}
body.mlab-pub .ir-pricing-cta { position: relative; z-index: 0; }
body.mlab-pub .ir-pricing-cta > * { position: relative; z-index: 1; }

/* Buttons inside the CTA — originally designed for a dark bg
   (.btn-light = filled white, .btn-outline-light = white outline).
   Re-skin to the brand pilule language so they read on paper. */
body.mlab-pub .ir-pricing-cta .btn-light,
body.mlab-pub .ir-cta .btn-light,
body.mlab-pub .hunt-cta .btn-light {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-weight: 700 !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.mlab-pub .ir-pricing-cta .btn-light:hover,
body.mlab-pub .ir-cta .btn-light:hover,
body.mlab-pub .hunt-cta .btn-light:hover {
    box-shadow: var(--mlab-shadow-md) !important;
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .ir-pricing-cta .btn-outline-light,
body.mlab-pub .ir-cta .btn-outline-light,
body.mlab-pub .hunt-cta .btn-outline-light {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
body.mlab-pub .ir-pricing-cta .btn-outline-light:hover,
body.mlab-pub .ir-cta .btn-outline-light:hover,
body.mlab-pub .hunt-cta .btn-outline-light:hover {
    box-shadow: var(--mlab-shadow-md) !important;
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}

body.mlab-pub .ir-cta p,
body.mlab-pub .hunt-cta p,
body.mlab-pub .ir-pricing-cta p {
    color: var(--mlab-ink-2) !important;
}

/* ─── ir-pricing plan cards (used by tprm/pricing) ─── */
body.mlab-pub .ir-plan {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
body.mlab-pub .ir-plan:hover {
    box-shadow: var(--mlab-shadow-md) !important;
}
body.mlab-pub .ir-plan-popular {
    border: 1px solid var(--border) !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    padding-top: 2rem !important;
}
body.mlab-pub .ir-plan-popular::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28px;
    background: var(--mlab-ink) !important;
    border-radius: 14px 14px 0 0;
    z-index: 1;
}
body.mlab-pub .ir-plan-badge {
    background: transparent !important;
    color: var(--mlab-paper) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
body.mlab-pub .ir-plan-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
}
body.mlab-pub .ir-plan-name {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}
body.mlab-pub .ir-plan-desc { color: var(--mlab-ink-2) !important; }
body.mlab-pub .ir-plan-price {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}
body.mlab-pub .ir-plan-divider {
    background: var(--mlab-hairline) !important;
    border: 0 !important;
    height: 1px;
}
body.mlab-pub .ir-plan-features li,
body.mlab-pub .ir-included-item {
    color: var(--mlab-ink-2) !important;
}
body.mlab-pub .ir-included-icon,
body.mlab-pub .ir-plan-features li .feat-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 50%;
}
body.mlab-pub .ir-plan-section-label {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
}

/* ─── Pricing hero (tprm/pricing) ─── */
body.mlab-pub .ir-pricing-hero {
    padding: 3rem 0 2rem !important;
    text-align: center;
}
body.mlab-pub .ir-pricing-hero h1 {
    font-family: var(--mlab-font-sans) !important;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--mlab-ink) !important;
}

/* ─── Pipeline (tprm/overview "5 steps" diagram) ─── */
body.mlab-pub .ir-pipeline {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    padding: 1.5rem !important;
}
body.mlab-pub .ir-pipeline-step {
    text-align: center;
}
body.mlab-pub .ir-pipeline-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 50% !important;
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
}

/* ─── Comparison table (tprm vs spreadsheet) ─── */
body.mlab-pub .ir-comparison {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    overflow: hidden;
}
body.mlab-pub .ir-comparison table th {
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink) !important;
    background: var(--mlab-paper) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ─── FAQ items (tprm/documentation) ─── */
body.mlab-pub .ir-faq-item {
    background: var(--mlab-paper) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
    border-radius: 0 !important;
    padding: 1rem 0;
}

/* ─── Tiny utility chips used in tprm pages: .t-success/.t-danger/.t-warning/.t-info/.t-muted/.t-badge ─── */
body.mlab-pub .t-badge,
body.mlab-pub .t-success,
body.mlab-pub .t-danger,
body.mlab-pub .t-warning,
body.mlab-pub .t-info {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    border-radius: 100px !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    padding: 0.18rem 0.55rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
body.mlab-pub .t-danger,
body.mlab-pub .t-warning {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
body.mlab-pub .t-muted {
    color: var(--mlab-ink-3) !important;
    font-family: var(--mlab-font-mono);
    font-size: 0.72rem;
}
body.mlab-pub .t-icon {
    color: var(--mlab-ink) !important;
}

/* ─── Redirect page (single H1) ─── */
body.mlab-pub > h1:only-of-type,
body.mlab-pub > h1 + p {
    font-family: var(--mlab-font-sans);
    color: var(--mlab-ink) !important;
    padding: 0 1.5rem;
}
body.mlab-pub > h1:only-of-type {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 3rem 0 0.5rem;
}

/* ─── Mail parser landing — the textarea + upload area ─── */
body.mlab-pub .mlab-page-content textarea.form-control,
body.mlab-pub .mlab-page-content input.form-control,
body.mlab-pub .mlab-page-content select.form-control,
body.mlab-pub .mlab-page-content select.form-select {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-mono);
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.mlab-pub .mlab-page-content textarea.form-control:focus,
body.mlab-pub .mlab-page-content input.form-control:focus {
    box-shadow: var(--mlab-shadow-sm) !important;
    outline: 0;
}

/* ═══════════════════════════════════════════════════
   SSO pages — tweaks on top of the .auth-box block
═══════════════════════════════════════════════════ */

/* Inline section-label inside the auth-brand block — center it */
body.mlab-pub .auth-brand .mlab-section-label {
    margin-bottom: 0 !important;
}
body.mlab-pub .auth-brand p {
    margin-top: 0.5rem !important;
}

/* SSO error: outline icon ring (replaces the red shield) */
body.mlab-pub .mlab-sso-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--mlab-paper);
    color: var(--mlab-ink);
    box-shadow: var(--mlab-shadow-sm);
    margin-bottom: 0.5rem;
}
body.mlab-pub .mlab-sso-error-icon i[data-lucide] {
    width: 28px !important;
    height: 28px !important;
    color: var(--mlab-ink) !important;
}

/* Error code chip */
body.mlab-pub .mlab-sso-error-code code {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 0.28rem 0.8rem !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    box-shadow: var(--mlab-shadow-sm);
    display: inline-block;
}

/* ═══════════════════════════════════════════════════
   GLOBAL TOPBAR — apply the editorial header style on
   post-login pages too (dashboard / account / scans / …)
   so the navbar reads identically across the whole site.
═══════════════════════════════════════════════════ */

/* Expose the editorial tokens at the root so selectors outside
   body.mlab-pub can resolve them. */
:root {
    --mlab-ink:        var(--primary);
    --mlab-ink-2:      color-mix(in srgb, var(--primary) 80%, var(--background));
    --mlab-ink-3:      color-mix(in srgb, var(--primary) 65%, var(--background));
    /* Aligne sur la definition sous body.mlab-pub (voir le commentaire la-bas) */
    --mlab-ink-4:      color-mix(in srgb, var(--primary) 57%, var(--background));
    --mlab-ink-5:      color-mix(in srgb, var(--primary) 30%, var(--background));
    --mlab-paper:      var(--background);
    --mlab-hairline:   var(--border);
    --mlab-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mlab-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Dark ink/paper/hairline now inherit from the DS tokens on :root above
   (--card-foreground/--background/--border already flip in dark). */

/* ─── Topbar shell ─── */
.app-topbar {
    background: var(--mlab-paper) !important;
    border-bottom: 1px solid var(--mlab-hairline) !important;
}
.app-topbar nav { flex-wrap: nowrap; }

/* ─── Topbar links ─── */
.app-topbar .topbar-link {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
    white-space: nowrap;
    transition: color 0.12s ease;
}
.app-topbar .topbar-link:hover,
.app-topbar .topbar-link:focus {
    color: var(--mlab-ink) !important;
}

/* ─── Dropdown menus ─── */
.app-topbar .dropdown-menu {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    background: var(--mlab-paper) !important;
    padding: .5rem !important;
}
.app-topbar .dropdown-menu .dropdown-item {
    font-family: var(--mlab-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mlab-ink-2) !important;
    border-radius: 6px !important;
    padding: .45rem .7rem !important;
    display: flex;
    align-items: center;
    gap: .55rem;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.app-topbar .dropdown-menu .dropdown-item:hover,
.app-topbar .dropdown-menu .dropdown-item:focus {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    transform: translateX(3px);
}
.app-topbar .dropdown-menu hr {
    border-color: var(--mlab-hairline) !important;
    opacity: 1 !important;
}

/* ─── Product mega-menus (Detection / Attack Surface / Training …) ─── */
.app-topbar .mlab-product-menu {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--mlab-shadow-sm) !important;
    background: var(--mlab-paper) !important;
}
.app-topbar .mlab-product-item {
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.app-topbar .mlab-product-item:hover {
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
    transform: translateX(3px);
}
.app-topbar .mlab-product-item:hover .mlab-product-title,
.app-topbar .mlab-product-item:hover .mlab-product-subtitle {
    color: var(--mlab-paper) !important;
}
.app-topbar .mlab-product-item .mlab-product-icon {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: 8px !important;
}
/* On hover the row goes black — keep the icon box white with a black
   glyph inside so it stays readable against the dark row. */
.app-topbar .mlab-product-item:hover .mlab-product-icon {
    background: var(--mlab-paper) !important;
    border-color: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
}
.app-topbar .mlab-product-item:hover .mlab-product-icon i,
.app-topbar .mlab-product-item:hover .mlab-product-icon svg {
    color: var(--mlab-ink) !important;
    stroke: var(--mlab-ink) !important;
}
.app-topbar .mlab-product-title {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
.app-topbar .mlab-product-subtitle {
    color: var(--mlab-ink-3) !important;
    font-size: 0.66rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
}

/* SOON badge in the product menu */
.app-topbar .mlab-soon-badge {
    background: var(--mlab-paper) !important;
    color: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    font-size: 0.55rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    padding: 0.1rem 0.4rem !important;
    border-radius: 100px !important;
    margin-left: 0.4rem;
}

/* Chevron caret in topbar dropdowns */
.app-topbar .mlab-topbar-chevron {
    color: var(--mlab-ink-3) !important;
    transition: transform 0.15s ease, color 0.15s ease;
}
.app-topbar .topbar-link:hover .mlab-topbar-chevron {
    color: var(--mlab-ink) !important;
}

/* "Soon" / sub-link strip below a product name */
.app-topbar .mlab-product-sublinks {
    color: var(--mlab-ink-3) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    padding: 0.25rem 0.7rem 0.55rem;
}
.app-topbar .mlab-product-sublinks a {
    color: var(--mlab-ink-2) !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.app-topbar .mlab-product-sublinks a:hover {
    color: var(--mlab-ink) !important;
    border-bottom-color: var(--mlab-ink);
}

/* ─── Topbar CTA pair (Sign up / Login) ─── */
.app-topbar .btn-primary {
    background: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-paper) !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    box-shadow: var(--mlab-shadow-sm) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.app-topbar .btn-primary:hover {
    box-shadow: var(--mlab-shadow-md) !important;
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
.login-btn {
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-ink) !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    box-shadow: var(--mlab-shadow-sm) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, color 0.12s ease;
}
.login-btn:hover,
.login-btn:focus {
    box-shadow: var(--mlab-shadow-sm) !important;
    background: var(--mlab-ink) !important;
    color: var(--mlab-paper) !important;
}
.login-btn i { color: inherit; }

/* ─── User/account avatar dropdown (post-login only) ─── */
.app-topbar .nav-link.dropdown-toggle,
.app-topbar [data-bs-toggle="dropdown"] {
    color: var(--mlab-ink) !important;
}
.app-topbar .avatar:not(.logo-topbar .avatar),
.app-topbar .avatar-sm:not(.logo-topbar .avatar-sm),
.app-topbar .avatar-xs:not(.logo-topbar .avatar-xs) {
    border: 1px solid var(--border) !important;
    box-shadow: var(--mlab-shadow-sm);
}
/* Brand logo avatar: no decorative border/shadow/background — the mark blends
   straight into the topbar surface. */
.app-topbar .logo-topbar .avatar,
.app-topbar .logo-topbar .avatar-sm,
.app-topbar .logo-topbar .avatar-xs,
.app-topbar .logo-topbar .avatar-title {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}
/* logo.png ships with a solid white background baked into the image; blend it
   into the (light) topbar surface so only the black mark shows. Only the
   light-mode logo (.logo-dark) uses logo.png — dark mode uses logo-white.png. */
.app-topbar .logo-topbar .logo-dark .mlab-topbar-logo {
    mix-blend-mode: multiply;
}

/* ─── Theme toggle / search / notification buttons ─── */
.app-topbar .btn:not(.btn-primary):not(.login-btn) {
    color: var(--mlab-ink) !important;
}
.app-topbar .btn:not(.btn-primary):not(.login-btn):hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--mlab-ink) !important;
}
html[data-bs-theme=dark] .app-topbar .btn:not(.btn-primary):not(.login-btn):hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Mobile nav drawer (matches pre-login styling) ─── */
.mlab-mobile-nav-link {
    color: var(--mlab-ink) !important;
    font-family: var(--mlab-font-sans);
    font-weight: 600;
    border-bottom: 1px solid var(--mlab-hairline);
    transition: padding-left 0.12s ease, background 0.12s ease;
}
.mlab-mobile-nav-link:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    padding-left: 1.25rem;
}
html[data-bs-theme=dark] .mlab-mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
.mlab-mobile-nav-eyebrow {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    color: var(--mlab-ink-3) !important;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════
   TPRM "Core features at no cost" — included items list
═══════════════════════════════════════════════════ */

body.mlab-pub .ir-included-item {
    display: flex !important;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem !important;
    background: var(--mlab-paper) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem;
    box-shadow: none !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    position: relative;
    overflow: hidden;
}
body.mlab-pub .ir-included-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
body.mlab-pub .ir-included-item:hover {
    box-shadow: var(--mlab-shadow-md) !important;
}
body.mlab-pub .ir-included-item:hover::before { transform: scaleX(1); }

/* Icon box — bigger, solid black with a white check */
body.mlab-pub .ir-included-icon {
    background: var(--mlab-ink) !important;
    border: 1px solid var(--border) !important;
    color: var(--mlab-paper) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mlab-shadow-sm);
    margin-top: 2px;
}
body.mlab-pub .ir-included-item:hover .ir-included-icon {
    transform: rotate(-3deg);
    transition: transform 0.15s ease;
}
body.mlab-pub .ir-included-icon i,
body.mlab-pub .ir-included-icon svg {
    color: var(--mlab-paper) !important;
    stroke: var(--mlab-paper) !important;
    width: 16px !important;
    height: 16px !important;
}

/* Title + description inside each item */
body.mlab-pub .ir-included-item > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
}
body.mlab-pub .ir-included-item h6 {
    font-family: var(--mlab-font-sans) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: var(--mlab-ink) !important;
    margin: 0 0 0.25rem !important;
    line-height: 1.3;
}
body.mlab-pub .ir-included-item p {
    font-family: var(--mlab-font-sans) !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    color: var(--mlab-ink-2) !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════
   HOME · REAL SCAN REPORT PREVIEW
   Mirrors the live /domain/<name> report closely enough that the button
   below it feels like "more of the same thing", not a different page.
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-demo-eyebrow {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-demo-domain {
    font-family: var(--mlab-font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mlab-ink);
}

body.mlab-pub .mlab-demo-score-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: .9rem 0 1rem;
    border-top: 1px solid var(--mlab-hairline);
    border-bottom: 1px solid var(--mlab-hairline);
    margin-bottom: 1rem;
}
body.mlab-pub .mlab-demo-grade {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* The arc stops at 57% to match the score it is reporting. */
    background: conic-gradient(#d97706 0 57%, var(--mlab-hairline) 57% 100%);
    position: relative;
}
body.mlab-pub .mlab-demo-grade::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--mlab-paper);
}
body.mlab-pub .mlab-demo-grade-letter {
    position: relative;
    font-family: var(--mlab-font-mono);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-demo-grade-num {
    position: relative;
    font-family: var(--mlab-font-mono);
    font-size: .55rem;
    color: var(--mlab-ink-3);
    margin-top: .1rem;
}

body.mlab-pub .mlab-demo-sev {
    font-family: var(--mlab-font-mono);
    font-size: .68rem;
    padding: .18rem .5rem;
    border-radius: 100px;
    border: 1px solid transparent;
}
body.mlab-pub .mlab-demo-sev--high { background: rgba(220, 38, 38, .1);  color: #b91c1c; border-color: rgba(220, 38, 38, .25); }
body.mlab-pub .mlab-demo-sev--med  { background: rgba(217, 119, 6, .1);  color: #b45309; border-color: rgba(217, 119, 6, .25); }
body.mlab-pub .mlab-demo-sev--low  { background: rgba(100, 116, 139, .1); color: #475569; border-color: rgba(100, 116, 139, .25); }
body.mlab-pub .mlab-demo-sev--info { background: rgba(100, 116, 139, .06); color: var(--mlab-ink-3); border-color: var(--mlab-hairline); }
html[data-bs-theme=dark] body.mlab-pub .mlab-demo-sev--high { color: #fca5a5; }
html[data-bs-theme=dark] body.mlab-pub .mlab-demo-sev--med  { color: #fcd34d; }
html[data-bs-theme=dark] body.mlab-pub .mlab-demo-sev--low  { color: #cbd5e1; }

body.mlab-pub .mlab-demo-findings { list-style: none; padding: 0; margin: 0 0 1rem; }
body.mlab-pub .mlab-demo-findings li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-size: .84rem;
    line-height: 1.5;
    padding: .42rem 0;
    border-bottom: 1px solid var(--mlab-hairline);
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-demo-findings li:last-child { border-bottom: 0; }
body.mlab-pub .mlab-demo-tag {
    flex: 0 0 auto;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .14rem .4rem;
    border-radius: 4px;
}
body.mlab-pub .mlab-demo-tag--high { background: rgba(220, 38, 38, .12);  color: #b91c1c; }
body.mlab-pub .mlab-demo-tag--med  { background: rgba(217, 119, 6, .12);  color: #b45309; }
body.mlab-pub .mlab-demo-tag--low  { background: rgba(100, 116, 139, .12); color: #475569; }
html[data-bs-theme=dark] body.mlab-pub .mlab-demo-tag--high { color: #fca5a5; }
html[data-bs-theme=dark] body.mlab-pub .mlab-demo-tag--med  { color: #fcd34d; }
html[data-bs-theme=dark] body.mlab-pub .mlab-demo-tag--low  { color: #cbd5e1; }

body.mlab-pub .mlab-demo-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
body.mlab-pub .mlab-demo-chips span {
    font-family: var(--mlab-font-mono);
    font-size: .65rem;
    padding: .2rem .5rem;
    border: 1px solid var(--mlab-hairline);
    border-radius: 6px;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-demo-chips b { color: var(--mlab-ink); font-weight: 600; }

body.mlab-pub .mlab-demo-kv {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .78rem;
    padding: .22rem 0;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-demo-kv span { color: var(--mlab-ink-3); }
body.mlab-pub .mlab-demo-kv code { font-size: .76rem; }

body.mlab-pub .mlab-demo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .8rem 1.5rem;
    background: var(--ins-secondary-bg);
    border-top: 1px solid var(--ins-border-color);
}
@media (max-width: 575px) {
    body.mlab-pub .mlab-demo-footer { justify-content: center; text-align: center; }
    body.mlab-pub .mlab-demo-score-row { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════
   HOME · WORKFLOW PIPELINE
   Two columns: the stages on the left drive the panel on the right. The active
   stage runs a progress bar that doubles as the countdown to the next one, so
   the motion explains itself instead of just being motion.
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 991px) { body.mlab-pub .mlab-flow { grid-template-columns: 1fr; } }

body.mlab-pub .mlab-flow-steps { display: flex; flex-direction: column; gap: .5rem; }
body.mlab-pub .mlab-flow-step {
    position: relative;
    display: flex;
    gap: .9rem;
    text-align: left;
    width: 100%;
    background: transparent;
    border: 1px solid var(--mlab-hairline);
    border-radius: 14px;
    padding: .95rem 1.1rem 1.05rem;
    color: inherit;
    overflow: hidden;
    transition: border-color .25s ease, background-color .25s ease;
}
body.mlab-pub .mlab-flow-step:hover { border-color: var(--mlab-ink-3); }
body.mlab-pub .mlab-flow-step.is-active { border-color: var(--mlab-ink); background: var(--mlab-paper); }

body.mlab-pub .mlab-flow-step-num {
    flex: 0 0 auto;
    font-family: var(--mlab-font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    padding-top: .1rem;
    transition: color .25s ease;
}
body.mlab-pub .mlab-flow-step.is-active .mlab-flow-step-num { color: var(--accent, #d97706); }
body.mlab-pub .mlab-flow-step-text { display: block; min-width: 0; }
body.mlab-pub .mlab-flow-step-title {
    display: block;
    font-weight: 700;
    font-size: .96rem;
    letter-spacing: -.01em;
    color: var(--mlab-ink);
    margin-bottom: .2rem;
}
body.mlab-pub .mlab-flow-step-desc {
    display: block;
    font-size: .83rem;
    line-height: 1.55;
    color: var(--mlab-ink-3);
}

/* Progress bar: width is driven by the JS timer, so it is always in sync with
   the actual advance rather than a CSS animation guessing at it. */
body.mlab-pub .mlab-flow-step-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--mlab-hairline);
    opacity: 0;
    transition: opacity .2s ease;
}
body.mlab-pub .mlab-flow-step.is-active .mlab-flow-step-bar { opacity: 1; }
body.mlab-pub .mlab-flow-step-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent, #d97706), var(--mlab-ink));
}

/* ── Panel ── */
body.mlab-pub .mlab-flow-stage {
    position: relative;
    border: 1px solid var(--mlab-hairline);
    border-radius: 16px;
    background: var(--mlab-paper);
    padding: 1.35rem 1.5rem;
    min-height: 320px;
    display: flex;
}
body.mlab-pub .mlab-flow-panel {
    display: none;
    width: 100%;
    flex-direction: column;
}
body.mlab-pub .mlab-flow-panel.is-active { display: flex; }
@media (prefers-reduced-motion: no-preference) {
    body.mlab-pub .mlab-flow-panel.is-active { animation: mlabFlowIn .4s ease both; }
}
@keyframes mlabFlowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

body.mlab-pub .mlab-flow-panel-head {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    margin-bottom: 1rem;
}

/* Panel 1 · typed prompt */
body.mlab-pub .mlab-flow-prompt {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mlab-font-mono);
    font-size: .95rem;
    border: 1px solid var(--mlab-hairline);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-bottom: 1.1rem;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-flow-caret { color: var(--accent, #d97706); flex: 0 0 auto; }
body.mlab-pub .mlab-flow-typed { white-space: nowrap; overflow: hidden; }
body.mlab-pub .mlab-flow-cursor {
    width: 8px; height: 1.05em;
    background: var(--mlab-ink);
    flex: 0 0 auto;
    animation: mlabFlowBlink 1s steps(1) infinite;
}
@keyframes mlabFlowBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.mlab-pub .mlab-flow-cursor { animation: none; } }

body.mlab-pub .mlab-flow-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
body.mlab-pub .mlab-flow-tags span {
    font-family: var(--mlab-font-mono);
    font-size: .68rem;
    padding: .22rem .55rem;
    border: 1px solid var(--mlab-hairline);
    border-radius: 100px;
    color: var(--mlab-ink-3);
}

/* Panel 2 · modules checking in one after another */
body.mlab-pub .mlab-flow-modules { list-style: none; padding: 0; margin: 0; }
body.mlab-pub .mlab-flow-modules li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    padding: .32rem 0;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-flow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mlab-hairline);
    flex: 0 0 auto;
}
body.mlab-pub .mlab-flow-panel.is-active .mlab-flow-modules li { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
    body.mlab-pub .mlab-flow-panel.is-active .mlab-flow-modules li {
        animation: mlabFlowLand .45s ease forwards;
    }
    body.mlab-pub .mlab-flow-modules li:nth-child(1) { animation-delay: .05s; }
    body.mlab-pub .mlab-flow-modules li:nth-child(2) { animation-delay: .13s; }
    body.mlab-pub .mlab-flow-modules li:nth-child(3) { animation-delay: .21s; }
    body.mlab-pub .mlab-flow-modules li:nth-child(4) { animation-delay: .29s; }
    body.mlab-pub .mlab-flow-modules li:nth-child(5) { animation-delay: .37s; }
    body.mlab-pub .mlab-flow-modules li:nth-child(6) { animation-delay: .45s; }
    body.mlab-pub .mlab-flow-modules li:nth-child(7) { animation-delay: .53s; }
    body.mlab-pub .mlab-flow-modules li:nth-child(8) { animation-delay: .61s; }
}
@keyframes mlabFlowLand { to { opacity: 1; } }
body.mlab-pub .mlab-flow-panel.is-active .mlab-flow-modules li .mlab-flow-dot { background: #10b981; }
@media (prefers-reduced-motion: reduce) {
    body.mlab-pub .mlab-flow-panel.is-active .mlab-flow-modules li { opacity: 1; }
}

/* Panel 3 · relationship graph */
body.mlab-pub .mlab-flow-graph { width: 100%; height: auto; }
body.mlab-pub .mlab-flow-edges line {
    stroke: var(--mlab-ink-3);
    stroke-width: 1.2;
    opacity: .45;
}
@media (prefers-reduced-motion: no-preference) {
    body.mlab-pub .mlab-flow-panel.is-active .mlab-flow-edges line {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: mlabFlowDraw 1.1s ease forwards .2s;
    }
    body.mlab-pub .mlab-flow-panel.is-active .mlab-flow-nodes circle {
        opacity: 0;
        animation: mlabFlowPop .4s ease forwards;
        animation-delay: var(--d, 0s);
    }
}
@keyframes mlabFlowDraw { to { stroke-dashoffset: 0; } }
@keyframes mlabFlowPop { to { opacity: 1; } }
body.mlab-pub .mlab-flow-nodes circle { fill: var(--mlab-ink); }
body.mlab-pub .mlab-flow-nodes circle:first-child { fill: var(--accent, #d97706); }
body.mlab-pub .mlab-flow-labels text {
    font-family: var(--mlab-font-mono);
    font-size: 10px;
    fill: var(--mlab-ink-3);
}

/* Panel 4 · the deliverable */
body.mlab-pub .mlab-flow-out { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
body.mlab-pub .mlab-flow-out-score {
    flex: 0 0 auto;
    width: 78px; height: 78px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: conic-gradient(var(--accent, #d97706) 0 57%, var(--mlab-hairline) 57% 100%);
    position: relative;
}
body.mlab-pub .mlab-flow-out-score::before {
    content: "";
    position: absolute; inset: 6px;
    border-radius: 50%;
    background: var(--mlab-paper);
}
body.mlab-pub .mlab-flow-out-grade {
    position: relative;
    font-family: var(--mlab-font-mono);
    font-weight: 700; font-size: 1.6rem; line-height: 1;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-flow-out-num {
    position: relative;
    font-family: var(--mlab-font-mono);
    font-size: .58rem;
    color: var(--mlab-ink-3);
    margin-top: .15rem;
}
body.mlab-pub .mlab-flow-out-list { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
body.mlab-pub .mlab-flow-out-list span {
    font-size: .85rem;
    color: var(--mlab-ink);
    padding-left: 1.1rem;
    position: relative;
}
body.mlab-pub .mlab-flow-out-list span::before {
    content: "";
    position: absolute;
    left: 0; top: .48em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
}

/* ═══════════════════════════════════════════════════
   HOME · USE CASES, SPECS, TRUST
   These three sit next to each other, so each one deliberately drops something
   its neighbours keep: the specs and the trust list carry no icons at all,
   which is what stops the page reading as the same card grid four times.
═══════════════════════════════════════════════════ */

/* ── Roles, absorbed from the old personas section ── */
body.mlab-pub .mlab-uc-roles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
body.mlab-pub .mlab-uc-roles-head {
    width: 100%;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    margin-bottom: .2rem;
}
body.mlab-pub .mlab-uc-roles span:not(.mlab-uc-roles-head) {
    font-size: .74rem;
    padding: .2rem .6rem;
    border: 1px solid var(--mlab-hairline);
    border-radius: 100px;
    color: var(--mlab-ink-3);
}

/* ── Use case cards ── */
body.mlab-pub .mlab-uc-list { display: flex; flex-direction: column; gap: .75rem; }
body.mlab-pub .mlab-uc {
    border: 1px solid var(--mlab-hairline);
    border-radius: 14px;
    padding: 1.15rem 1.3rem;
    background: var(--mlab-paper);
    transition: border-color .2s ease;
}
body.mlab-pub .mlab-uc:hover { border-color: var(--mlab-ink-3); }
body.mlab-pub .mlab-uc-head { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: .6rem; }
body.mlab-pub .mlab-uc-num {
    font-family: var(--mlab-font-mono);
    font-size: .72rem;
    font-weight: 700;
    color: var(--accent, #d97706);
    padding-top: .15rem;
    flex: 0 0 auto;
}
body.mlab-pub .mlab-uc-title { font-size: .98rem; font-weight: 700; margin: 0 0 .1rem; color: var(--mlab-ink); }
body.mlab-pub .mlab-uc-role {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-uc-desc { font-size: .85rem; line-height: 1.6; color: var(--mlab-ink-3); margin: 0 0 .85rem; }
body.mlab-pub .mlab-uc-desc code { font-size: .8rem; }

/* The "you get back" block is the half these cards were missing: what the tool
   hands over, not just what the situation is. */
body.mlab-pub .mlab-uc-out {
    border-left: 2px solid var(--accent, #d97706);
    padding-left: .85rem;
    margin-bottom: .85rem;
}
body.mlab-pub .mlab-uc-out-head {
    display: block;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    margin-bottom: .35rem;
}
body.mlab-pub .mlab-uc-out ul { list-style: none; padding: 0; margin: 0; }
body.mlab-pub .mlab-uc-out li {
    font-size: .82rem;
    line-height: 1.55;
    color: var(--mlab-ink);
    padding: .12rem 0;
}

/* ── Spec sheet: numbers, no icons ── */
body.mlab-pub .mlab-spec {
    border: 1px solid var(--mlab-hairline);
    border-radius: 16px;
    background: var(--mlab-paper);
    padding: .4rem 1.35rem 1.2rem;
    height: 100%;
}
body.mlab-pub .mlab-spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0 .15rem;
    border-top: 1px solid var(--mlab-hairline);
}
body.mlab-pub .mlab-spec-row:first-child { border-top: 0; }
body.mlab-pub .mlab-spec-k { font-size: .88rem; color: var(--mlab-ink); }
body.mlab-pub .mlab-spec-v {
    font-family: var(--mlab-font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mlab-ink);
    flex: 0 0 auto;
}
body.mlab-pub .mlab-spec-sub {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--mlab-ink-3);
    padding-bottom: .2rem;
}

/* ── Code sample ── */
body.mlab-pub .mlab-code {
    border: 1px solid var(--mlab-hairline);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mlab-paper);
}
body.mlab-pub .mlab-code-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--mlab-hairline);
}
body.mlab-pub .mlab-code-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    flex: 0 0 auto;
}
body.mlab-pub .mlab-code-title {
    font-family: var(--mlab-font-mono);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-code-body {
    margin: 0;
    padding: 1rem 1.15rem;
    font-family: var(--mlab-font-mono);
    font-size: .74rem;
    line-height: 1.65;
    color: var(--mlab-ink);
    overflow-x: auto;
}
body.mlab-pub .mlab-code-body .c-cmt { color: var(--mlab-ink-3); }
body.mlab-pub .mlab-code-body .c-key { color: var(--accent, #d97706); }
body.mlab-pub .mlab-code-body .c-str { color: #0f766e; }
body.mlab-pub .mlab-code-body .c-num { color: #7c3aed; }
html[data-bs-theme=dark] body.mlab-pub .mlab-code-body .c-str { color: #5eead4; }
html[data-bs-theme=dark] body.mlab-pub .mlab-code-body .c-num { color: #c4b5fd; }

/* ── Trust: a definition list, not cards ── */
body.mlab-pub .mlab-trust { margin: 0; }
body.mlab-pub .mlab-trust-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--mlab-hairline);
}
body.mlab-pub .mlab-trust-row:last-child { border-bottom: 1px solid var(--mlab-hairline); }
@media (max-width: 767px) {
    body.mlab-pub .mlab-trust-row { grid-template-columns: 1fr; gap: .35rem; }
}
body.mlab-pub .mlab-trust dt {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    padding-top: .15rem;
}
body.mlab-pub .mlab-trust dd {
    margin: 0;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-trust dd a { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════
   CROSS-LINKS · tools <-> blog
   Rendered server-side from helper/content_links.rs. Both blocks stay out of
   the page when the subject has no counterpart, so neither ever renders empty.
═══════════════════════════════════════════════════ */

/* "Go deeper" on a tool page */
body.mlab-pub .mlab-xblock {
    max-width: 1100px;
    margin: 3rem auto 1rem;
    padding: 1.75rem 0 0;
    border-top: 1px solid var(--mlab-hairline);
}
body.mlab-pub .mlab-xblock-head {
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
    margin: 0 0 1.1rem;
}
body.mlab-pub .mlab-xblock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem;
}
body.mlab-pub .mlab-xlink {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--mlab-hairline);
    border-radius: 12px;
    background: var(--mlab-paper);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
body.mlab-pub .mlab-xlink:hover {
    border-color: var(--mlab-ink);
    transform: translateY(-2px);
}
body.mlab-pub .mlab-xlink-title {
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-xlink-excerpt {
    font-size: .8rem;
    line-height: 1.55;
    color: var(--mlab-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.mlab-pub .mlab-xlink-meta {
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mlab-ink-3);
    margin-top: .15rem;
}
body.mlab-pub .mlab-xblock-all {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--mlab-font-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--mlab-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Try it while you read" on an article */
body.mlab-pub .mlab-trythis {
    max-width: 760px;
    margin: 2.25rem auto 0;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--mlab-hairline);
    border-left: 3px solid var(--accent, #d97706);
    border-radius: 12px;
    background: var(--mlab-paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
body.mlab-pub .mlab-trythis-head {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-trythis-cta {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    text-decoration: none;
    text-align: right;
}
body.mlab-pub .mlab-trythis-cta:hover .mlab-trythis-label { text-decoration: underline; }
body.mlab-pub .mlab-trythis-label {
    font-weight: 700;
    font-size: .95rem;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-trythis-action {
    font-size: .8rem;
    color: var(--mlab-ink-3);
}
@media (max-width: 575px) {
    body.mlab-pub .mlab-trythis { flex-direction: column; align-items: flex-start; }
    body.mlab-pub .mlab-trythis-cta { text-align: left; }
}

/* Glossary "See also": the terms that have a tool or an article behind them. */
body.mlab-pub .mlab-gl-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .75rem;
    margin: .5rem 0 0;
    font-size: .8rem;
}
body.mlab-pub .mlab-gl-links > span {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-gl-links a {
    color: var(--mlab-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.mlab-pub .mlab-gl-links a:hover { color: var(--accent, #d97706); }

/* ═══════════════════════════════════════════════════
   HUBS · orientation and card detail
   Learn and the cheat sheets were a title and a list of links each. The block
   below is the part only a hub can write: which format answers which kind of
   question. The card additions carry the specifics a menu entry cannot.
═══════════════════════════════════════════════════ */
body.mlab-pub .mlab-hub-intro {
    border: 1px solid var(--mlab-hairline);
    border-radius: 16px;
    background: var(--mlab-paper);
    padding: 1.5rem 1.75rem;
}
body.mlab-pub .mlab-hub-intro-lead {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--mlab-ink);
    margin: 0 0 1.2rem;
    max-width: 62ch;
}
body.mlab-pub .mlab-hub-intro-lead strong { font-weight: 700; }

body.mlab-pub .mlab-hub-guide { margin: 0; display: flex; flex-direction: column; }
body.mlab-pub .mlab-hub-guide > div {
    display: grid;
    grid-template-columns: minmax(180px, 34%) 1fr;
    gap: 1.25rem;
    padding: .75rem 0;
    border-top: 1px solid var(--mlab-hairline);
}
@media (max-width: 767px) {
    body.mlab-pub .mlab-hub-guide > div { grid-template-columns: 1fr; gap: .25rem; }
}
body.mlab-pub .mlab-hub-guide dt {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mlab-ink);
}
body.mlab-pub .mlab-hub-guide dd {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-hub-guide dd a {
    color: var(--mlab-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.mlab-pub .mlab-hub-guide dd a:hover { color: var(--accent, #d97706); }

/* The question a comparison actually settles, which is what people search. */
body.mlab-pub .mlab-hub-card-q {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--mlab-hairline);
    font-family: var(--mlab-font-mono);
    font-size: .72rem;
    line-height: 1.5;
    color: var(--mlab-ink-3);
}
/* Card and its tool link are one unit, so the links line up across a row of
   uneven cards instead of floating at four different heights. */
body.mlab-pub .mlab-hub-pair {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body.mlab-pub .mlab-hub-pair .mlab-hub-card { flex: 1 1 auto; }

/* Sibling of the card, never a child: an anchor inside an anchor is invalid
   and browsers split it apart. */
body.mlab-pub .mlab-hub-card-tool {
    display: block;
    margin-top: .45rem;
    padding-left: 1rem;
    font-size: .76rem;
    color: var(--mlab-ink-3);
}
body.mlab-pub .mlab-hub-card-tool a {
    color: var(--mlab-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.mlab-pub .mlab-hub-card-tool a:hover { color: var(--accent, #d97706); }

/* How many entries are actually behind a cheat sheet link. */
body.mlab-pub .mlab-hub-card-count {
    margin-top: .5rem;
    font-size: .68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #d97706);
}

/* ═══════════════════════════════════════════════════
   404 · search and salvage
   The page is a static cached string with no per-request data, so everything
   here is decided client-side from the path.
═══════════════════════════════════════════════════ */
.mlab-404-salvage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 0 0 1.25rem;
    padding: .85rem 1.15rem;
    border: 1px solid var(--accent, #d97706);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #d97706) 7%, transparent);
}
.mlab-404-salvage-lead { font-size: .88rem; color: var(--mlab-ink); }
.mlab-404-salvage .btn { margin-left: auto; }
.mlab-404-salvage-subject {
    font-family: var(--mlab-font-mono);
    font-size: .82rem;
    color: var(--mlab-ink);
    background: var(--mlab-paper);
    border: 1px solid var(--mlab-hairline);
    border-radius: 6px;
    padding: .15rem .5rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.mlab-404-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: .4rem .4rem .4rem .9rem;
    border: 1px solid var(--mlab-hairline);
    border-radius: var(--radius);
    background: var(--mlab-paper);
}
.mlab-404-search:focus-within { border-color: var(--mlab-ink); }
.mlab-404-search > i,
.mlab-404-search > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--mlab-ink-3);
}
.mlab-404-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--mlab-ink);
    font-size: .9rem;
    padding: .45rem 0;
}
.mlab-404-search input:focus { outline: none; }
.mlab-404-search .btn { flex: 0 0 auto; border-radius: var(--radius); }
@media (max-width: 480px) {
    .mlab-404-search { border-radius: 14px; flex-wrap: wrap; padding: .6rem .75rem; }
    .mlab-404-search .btn { width: 100%; }
}