/* ═══════════════════════════════════════════════════
   mlab editorial layer: refines borders, typography
   and section structure on top of mlab-custom.css.
   Loaded AFTER mlab-custom.css so it can override.
═══════════════════════════════════════════════════ */

/* Webfonts now self-hosted — see /assets/css/fonts/mlab-webfonts.css
   (Instrument Serif + JetBrains Mono). Loaded globally from head partials. */

:root {
    --mlab-edit-hairline: rgba(15, 23, 42, 0.08);
    --mlab-edit-hairline-strong: rgba(15, 23, 42, 0.14);
    --mlab-edit-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --mlab-edit-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    /* Neutral secondary text. Bootstrap .text-secondary maps to the brand
       indigo in this theme, so mlab components use this token instead. */
    --mlab-text-secondary: #6b7280;
    /* Shared card hover transition (consolidates the repeated value). */
    --mlab-card-transition: border-color .2s ease, transform .2s ease;
}

html[data-bs-theme=dark] {
    --mlab-edit-hairline: rgba(255, 255, 255, 0.08);
    --mlab-edit-hairline-strong: rgba(255, 255, 255, 0.16);
    --mlab-text-secondary: #9ca3af;
}

/* ─── Subtle dotted background on hero only ─── */
.mlab-hero {
    background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    background-position: center top;
}
html[data-bs-theme=dark] .mlab-hero {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ─── H1 highlight accent (marker style) ─── */
:root {
    --hl-mark-rgb: 249, 115, 22; /* mlab orange */
}
html[data-bs-theme=dark] {
    --hl-mark-rgb: 251, 146, 60;
}
.hl-mark {
    position: relative;
    display: inline-block;
    padding: 0 0.2em;
    color: inherit;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 32%,
        rgba(var(--hl-mark-rgb), 0.38) 32%,
        rgba(var(--hl-mark-rgb), 0.38) 94%,
        transparent 94%
    );
    border-radius: 2px;
}

.mlab-hero h1 {
    font-size: clamp(2.25rem, 4.6vw, 3.4rem);
    line-height: 1.05;
}

/* ─── Eyebrow upgrade: mono uppercase with leading mark ─── */
.mlab-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ins-topbar-item-color);
    opacity: 0.85;
    margin-bottom: 0.85rem;
}
.mlab-section-label::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--ins-primary);
    display: inline-block;
}

/* ─── Section titles: tighter, with optional italic-serif accent ─── */
.mlab-section-title {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

/* ─── Hairline dividers between major sections ─── */
.mlab-section {
    position: relative;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
.mlab-section + .mlab-section {
    border-top: 1px solid var(--mlab-edit-hairline);
}

/* Optional small section number marker — opt-in via data-section-num */
.mlab-section[data-section-num]::before {
    content: attr(data-section-num);
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-family: var(--mlab-edit-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ins-topbar-item-color);
    opacity: 0.4;
    pointer-events: none;
}
@media (max-width: 1199.98px) {
    .mlab-section[data-section-num]::before {
        display: none;
    }
}

/* ─── Cards: sharper, hairline borders, no big shadow ─── */
.mlab-feature-card,
.mlab-role-item,
.mlab-usecase-card,
.mlab-product-card,
.mlab-pulse-card,
.mlab-live-feed-card {
    border: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 12px;
    box-shadow: none !important;
    transition: var(--mlab-card-transition), background-color .2s ease;
}

.mlab-feature-card:hover,
.mlab-role-item:hover,
.mlab-usecase-card:hover,
.mlab-product-card:hover {
    border-color: var(--mlab-edit-hairline-strong) !important;
    transform: translateY(-1px);
}

/* Search card: cleaner, hairline border instead of heavy shadow */
.mlab-search-card {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 8px 24px rgba(15,23,42,0.04) !important;
}

/* ─── Buttons: pill refinement on primary CTAs only (.btn-primary inside hero/cards) ─── */
.mlab-search-card .btn-primary,
.mlab-hero .btn-primary {
    border-radius: var(--radius);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mlab-search-card .btn-primary:hover,
.mlab-hero .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--ins-primary-rgb), 0.22);
}

/* Hero badge: a touch more refined */
.mlab-hero-badge {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.32rem 0.85rem;
}

/* ─── Code/mono accents on metric labels ─── */
.mlab-pulse-label,
.mlab-hero-metric {
    font-family: var(--mlab-edit-mono);
    letter-spacing: 0.04em;
}

/* ─── Ecosystem category headings ─── */
.mlab-ecosystem-category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ins-topbar-item-color);
    opacity: 0.7;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--mlab-edit-hairline);
}

/* ─── Section header block: eyebrow + title + subtitle, vertically tightened ─── */
.mlab-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    margin-bottom: 2.5rem;
}
.mlab-section-head .mlab-section-subtitle {
    margin-top: 0.25rem;
    max-width: 560px;
}

/* ─── Stepper refinement ─── */
.mlab-stepper-number {
    font-family: var(--mlab-edit-mono);
    font-weight: 500;
    border: 1px solid var(--mlab-edit-hairline-strong);
    background: transparent !important;
    color: var(--ins-primary) !important;
}

/* ─── Footer-like bottom strip after CTA section (optional spacer) ─── */
.mlab-page-content > .container-fluid > .mlab-section:last-of-type {
    border-bottom: 1px solid var(--mlab-edit-hairline);
}

/* ─── Selection styling ─── */
::selection {
    background: var(--ins-primary);
    color: #fff;
}

/* ═══════════════════════════════════════════════════
   LAYOUT PRIMITIVES (argentic-inspired)
═══════════════════════════════════════════════════ */

/* ─── grid-1px : cells separated by hairlines via gap+bg trick ─── */
.grid-1px {
    display: grid;
    gap: 1px;
    background: var(--mlab-edit-hairline);
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 14px;
    overflow: hidden;
}
.grid-1px > .grid-cell {
    background: var(--ins-body-bg, #fff);
    padding: 1.75rem;
    transition: background-color .2s ease;
    display: flex;
    flex-direction: column;
}
.grid-1px > .grid-cell.is-hover:hover,
.grid-1px > .grid-cell:hover {
    background: var(--ins-secondary-bg, #f8fafc);
}
html[data-bs-theme=dark] .grid-1px > .grid-cell {
    background: rgba(255, 255, 255, 0.02);
}
html[data-bs-theme=dark] .grid-1px > .grid-cell:hover {
    background: rgba(255, 255, 255, 0.04);
}

.grid-1px-3 { grid-template-columns: repeat(3, 1fr); }
.grid-1px-4 { grid-template-columns: repeat(4, 1fr); }
.grid-1px-2x2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 991.98px) {
    .grid-1px-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-1px-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .grid-1px-3,
    .grid-1px-4,
    .grid-1px-2x2 { grid-template-columns: 1fr; }
}

/* When a card lives inside a grid-1px cell, strip its own border / padding */
.grid-1px .mlab-feature-card,
.grid-1px .mlab-role-item,
.grid-1px .mlab-pulse-card {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.grid-1px .grid-cell:hover .mlab-feature-card,
.grid-1px .grid-cell:hover .mlab-role-item {
    transform: none !important;
}

/* ─── sector-row : horizontal accordion / list rows ─── */
.sector-list {
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 14px;
    overflow: hidden;
    background: var(--ins-body-bg, #fff);
}
.sector-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 22px 28px;
    border-bottom: 1px solid var(--mlab-edit-hairline);
    cursor: pointer;
    transition: background-color .2s ease;
    background: transparent;
}
.sector-row:last-child { border-bottom: 0; }
.sector-row:hover { background: var(--ins-secondary-bg, #f8fafc); }
.sector-row.is-active { background: var(--ins-secondary-bg, #f8fafc); }
html[data-bs-theme=dark] .sector-row:hover,
html[data-bs-theme=dark] .sector-row.is-active { background: rgba(255,255,255,0.04); }

.sector-row .sector-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--mlab-edit-hairline);
    background: var(--ins-secondary-bg, #f8fafc);
}
.sector-row .sector-title { font-weight: 600; font-size: 1.02rem; margin: 0 0 0.15rem; }
.sector-row .sector-num {
    font-family: var(--mlab-edit-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--ins-topbar-item-color);
    opacity: 0.55;
}
.sector-row .sector-desc {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ins-topbar-item-color);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
}
.sector-row.is-active .sector-desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.55rem;
}
.sector-row .sector-chevron {
    color: var(--ins-topbar-item-color);
    opacity: 0.4;
    transition: transform .25s ease, opacity .2s ease;
}
.sector-row.is-active .sector-chevron {
    transform: rotate(90deg);
    opacity: 1;
}

@media (max-width: 575.98px) {
    .sector-row { grid-template-columns: 40px 1fr auto; gap: 14px; padding: 18px 18px; }
}

/* ─── Editorial asymmetric : title-left / content-right ─── */
.editorial-split {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: start;
}
.editorial-split .editorial-left { position: sticky; top: 100px; }
@media (max-width: 991.98px) {
    .editorial-split { grid-template-columns: 1fr; gap: 32px; }
    .editorial-split .editorial-left { position: static; }
}

/* ─── Dashboard dark card ─── */
.dashboard-dark {
    border-radius: 28px;
    background: #0e1116;
    color: #fafafa;
    padding: 56px 56px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.dashboard-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
    pointer-events: none;
}
.dashboard-dark > * { position: relative; z-index: 1; }
.dashboard-dark h2,
.dashboard-dark h3 { color: #fff; }
.dashboard-dark p { color: rgba(255,255,255,0.7); }
.dashboard-dark .mlab-section-label {
    color: rgba(255,255,255,0.6);
}
.dashboard-dark .mlab-section-label::before { background: rgba(var(--hl-mark-rgb), 1); }

.dashboard-dark .btn-light {
    border-radius: var(--radius);
    padding: 0.55rem 1.4rem;
    font-weight: 500;
}
.dashboard-dark .btn-outline-light {
    border-radius: var(--radius);
    padding: 0.55rem 1.4rem;
    font-weight: 500;
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}
.dashboard-dark .btn-outline-light:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.4);
}

.dashboard-dark-mock {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    padding: 22px;
    font-family: var(--mlab-edit-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
}
.dashboard-dark-mock .mock-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.dashboard-dark-mock .mock-row:last-child { border-bottom: 0; }
.dashboard-dark-mock .mock-key { color: rgba(255,255,255,0.45); }
.dashboard-dark-mock .mock-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 0.7rem;
    background: rgba(var(--hl-mark-rgb), 0.18);
    color: rgba(var(--hl-mark-rgb), 1);
}

@media (max-width: 991.98px) {
    .dashboard-dark { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
}

/* ─── Cell content helpers (inside grid-1px) ─── */
.grid-cell .cell-eyebrow {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ins-topbar-item-color);
    opacity: 0.55;
    margin-bottom: 0.85rem;
}
.grid-cell .cell-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
}
.grid-cell .cell-desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ins-topbar-item-color);
    margin: 0;
}

/* ═══════════════════════════════════════════════════
   ECOSYSTEM (B: featured + grid + tools strip)
═══════════════════════════════════════════════════ */

.eco-cat-label {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ins-topbar-item-color);
    opacity: 0.55;
    margin: 0 0 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.eco-cat-label::before {
    content: "";
    width: 14px; height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.eco-cat-label .eco-cat-count {
    font-weight: 400;
    opacity: 0.7;
}

.eco-featured {
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 18px;
    padding: 40px 44px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(var(--hl-mark-rgb), 0.05) 0%, rgba(var(--hl-mark-rgb), 0) 60%),
        var(--ins-body-bg, #fff);
    position: relative;
    overflow: hidden;
}
.eco-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(15,23,42,0.04) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    opacity: 0.6;
}
html[data-bs-theme=dark] .eco-featured::after {
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}
.eco-featured > * { position: relative; z-index: 1; }

.eco-featured .eco-hero-name {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0.5rem 0 0.4rem;
}
.eco-featured .eco-hero-name .eco-domain {
    color: var(--ins-topbar-item-color);
    opacity: 0.55;
    font-weight: 500;
}
.eco-featured .eco-hero-tagline {
    font-family: var(--mlab-edit-mono);
    font-size: 0.78rem;
    color: var(--ins-topbar-item-color);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}
.eco-featured .eco-hero-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ins-topbar-item-color);
    max-width: 460px;
    margin-bottom: 1.4rem;
}
.eco-featured .eco-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius);
    background: var(--ins-primary, #111);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.eco-featured .eco-hero-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--ins-primary-rgb), 0.22);
    color: #fff;
}

.eco-featured .eco-hero-aside {
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 12px;
    padding: 18px 20px;
    background: var(--ins-secondary-bg, #f8fafc);
    font-family: var(--mlab-edit-mono);
    font-size: 0.78rem;
    color: var(--ins-topbar-item-color);
    line-height: 1.7;
}
.eco-featured .eco-hero-aside .aside-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--mlab-edit-hairline);
}
.eco-featured .eco-hero-aside .aside-row:last-child { border-bottom: 0; }
.eco-featured .eco-hero-aside .aside-key { opacity: 0.55; }

@media (max-width: 991.98px) {
    .eco-featured { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
}

/* Product cells (used inside grid-1px for Platforms / Tools) */
.eco-cell {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
}
.eco-cell .eco-cell-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.3rem;
}
.eco-cell .eco-cell-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.eco-cell .eco-cell-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}
.eco-cell .eco-cell-name .eco-domain {
    color: var(--ins-topbar-item-color);
    opacity: 0.55;
    font-weight: 500;
}
.eco-cell .eco-cell-tagline {
    font-family: var(--mlab-edit-mono);
    font-size: 0.7rem;
    color: var(--ins-topbar-item-color);
    opacity: 0.65;
    letter-spacing: 0.02em;
    margin: 0 0 0.3rem;
}
.eco-cell .eco-cell-desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ins-topbar-item-color);
    margin: 0 0 0.7rem;
    flex-grow: 1;
}
.eco-cell .eco-cell-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ins-primary);
    text-decoration: none;
    margin-top: auto;
}
.eco-cell .eco-cell-link:hover { text-decoration: underline; }

.eco-cell .eco-soon-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ins-topbar-item-color);
    background: var(--ins-secondary-bg, #f8fafc);
    border: 1px solid var(--mlab-edit-hairline);
    margin-left: 0.5rem;
    vertical-align: middle;
}
.eco-cell.is-soon { opacity: 0.55; }
.eco-cell.is-soon .eco-cell-icon { filter: saturate(0.4); }

/* Tools strip: 4 small cells */
.eco-tools-strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199.98px) {
    .eco-tools-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .eco-tools-strip { grid-template-columns: 1fr; }
}
.eco-tools-strip .grid-cell { padding: 1.2rem 1.25rem; }
.eco-tools-strip .eco-cell-name { font-size: 0.92rem; }
.eco-tools-strip .eco-cell-desc { font-size: 0.78rem; line-height: 1.5; margin-bottom: 0.5rem; }

/* Override: hide existing .mlab-ecosystem-category bottom border when used inside .eco-cat-label */
.eco-cat-label { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* ═══════════════════════════════════════════════════
   PRICING REFINEMENTS
═══════════════════════════════════════════════════ */

/* Hero badge — mono uppercase pill */
.price-hero-badge {
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.95rem !important;
    background: var(--ins-secondary-bg) !important;
    border: 1px solid var(--mlab-edit-hairline) !important;
    color: var(--ins-topbar-item-color) !important;
}

.price-hero h1 {
    font-size: clamp(2.25rem, 4.6vw, 3.4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
}

/* Plan cards: hairline border, sharper edges, no heavy shadow */
.price-card {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
    transition: var(--mlab-card-transition) !important;
}
.price-card:hover {
    border-color: var(--mlab-edit-hairline-strong) !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}
.price-card-popular {
    border-color: rgba(var(--ins-primary-rgb), 0.35) !important;
}

/* Divider section — eyebrow style */
.price-divider-section h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
}

/* Comparison table refinement */
.price-comparison {
    border: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 14px !important;
    overflow: hidden;
    background: var(--ins-body-bg);
}
.price-comparison table { margin: 0 !important; }
.price-comparison thead th {
    background: var(--ins-secondary-bg) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--mlab-edit-hairline) !important;
    padding: 1.1rem 0.75rem !important;
}
.price-comparison .price-cat-row td {
    background: var(--ins-secondary-bg) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.7rem 1rem !important;
    color: var(--ins-topbar-item-color) !important;
    border-top: 1px solid var(--mlab-edit-hairline) !important;
}
.price-comparison tbody tr:not(.price-cat-row) td {
    border-top: 1px solid var(--mlab-edit-hairline) !important;
    font-size: 0.88rem !important;
    padding: 0.7rem 0.75rem !important;
}
.price-comparison tbody tr:not(.price-cat-row):hover td {
    background: rgba(var(--ins-primary-rgb), 0.025);
}
.price-comparison .price-highlight {
    background: rgba(var(--hl-mark-rgb), 0.05) !important;
    position: relative;
}
.price-comparison .price-check { color: #22c55e; }
.price-comparison .price-x { color: var(--ins-topbar-item-color); opacity: 0.35; }

/* FAQ as editorial split */
.price-faq-split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
}
.price-faq-split .faq-left { position: sticky; top: 100px; }
.price-faq-split .faq-left h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 0.8rem;
    text-align: left;
}
.price-faq-split .faq-left p {
    color: var(--ins-topbar-item-color);
    max-width: 360px;
    margin: 0;
}
.price-faq-split .accordion-item {
    border: 0 !important;
    border-bottom: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.price-faq-split .accordion-item:first-child {
    border-top: 1px solid var(--mlab-edit-hairline) !important;
}
.price-faq-split .accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    padding: 1.1rem 0 !important;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ins-body-color);
}
.price-faq-split .accordion-button:not(.collapsed) {
    color: var(--ins-primary);
}
.price-faq-split .accordion-body {
    padding: 0 0 1.2rem !important;
    color: var(--ins-topbar-item-color);
    line-height: 1.65;
}

@media (max-width: 991.98px) {
    .price-faq-split { grid-template-columns: 1fr; gap: 32px; }
    .price-faq-split .faq-left { position: static; }
}

/* ═══════════════════════════════════════════════════
   PRODUCT OVERVIEWS (IR / TPRM / HUNT)
═══════════════════════════════════════════════════ */

/* Hero badges → mono uppercase pill */
.ir-hero-badge,
.tprm-hero-badge,
.hunt-hero-badge {
    font-family: var(--mlab-edit-mono) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.35rem 0.95rem !important;
}

/* Feature cards: hairline border, no heavy shadow, sharper hover */
.ir-feature,
.tprm-feature,
.hunt-feature {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
    transition: var(--mlab-card-transition) !important;
}
.ir-feature:hover,
.tprm-feature:hover,
.hunt-feature:hover {
    border-color: var(--mlab-edit-hairline-strong) !important;
    transform: translateY(-1px) !important;
}

/* Pipeline / steps */
.ir-pipeline,
.tprm-pipeline {
    border: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.ir-pipeline-step,
.tprm-pipeline-step {
    border-right: 1px solid var(--mlab-edit-hairline) !important;
}
.ir-pipeline-step:last-child,
.tprm-pipeline-step:last-child {
    border-right: 0 !important;
}

/* Highlights (dark card-like bar) — keep but refine */
.ir-highlights,
.tprm-highlights,
.hunt-highlights {
    border-radius: 18px !important;
}
.ir-highlight-label,
.tprm-highlight-label,
.hunt-highlight-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem !important;
}

/* CTA bottom card */
.ir-cta,
.tprm-cta,
.hunt-cta {
    border-radius: 24px !important;
}

/* Included items list (IR) */
.ir-included-item {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
}

/* Comparison block (IR) */
.ir-comparison {
    border: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   HELPCENTER + DEVELOPER DOCS REFINEMENTS
═══════════════════════════════════════════════════ */

.hc-hero-pill {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0.35rem 0.95rem !important;
}
.hc-hero h1 {
    font-size: clamp(2.25rem, 4.6vw, 3.4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
}

.hc-section-title {
    font-family: inherit;
    font-size: clamp(1.5rem, 2.8vw, 1.9rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--mlab-edit-hairline);
    position: relative;
}
.hc-section-title::before {
    content: "";
    display: inline-block;
    width: 14px; height: 1px;
    background: var(--ins-primary);
    vertical-align: middle;
    margin-right: 0.6rem;
    margin-bottom: 0.3em;
}

.hc-card {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
    transition: var(--mlab-card-transition), background-color .2s ease !important;
}
.hc-card:hover {
    border-color: var(--mlab-edit-hairline-strong) !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}
.hc-card-link {
    font-family: var(--mlab-edit-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.hc-info-bar {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
}

/* Developer documentation */
.dev-hero-pill,
.api-hero-pill {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.dev-card,
.api-card {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
}

/* Code blocks: ensure mono font + hairline */
pre, code {
    font-family: var(--mlab-edit-mono) !important;
}
pre {
    border: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 10px !important;
    background: var(--ins-secondary-bg) !important;
}

/* ═══════════════════════════════════════════════════
   BLOG + AUTH POLISH
═══════════════════════════════════════════════════ */

/* Blog cards: hairline border, no heavy shadows */
.blog-grid .card,
.blog-grid > article,
.blog-card {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
    transition: var(--mlab-card-transition) !important;
}
.blog-grid .card:hover,
.blog-grid > article:hover,
.blog-card:hover {
    border-color: var(--mlab-edit-hairline-strong) !important;
    transform: translateY(-1px) !important;
}

.blog-hero h1 {
    font-size: clamp(2.25rem, 4.6vw, 3.4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
}

/* Auth pages: clean form card with hairline border */
.auth-page-content .card,
.auth-card,
form.auth-form,
.auth-box {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.02), 0 8px 24px rgba(15,23,42,0.04) !important;
    border-radius: 14px !important;
}

/* Form inputs: hairline border, focus ring with primary color */
input.form-control,
.form-control {
    border-color: var(--mlab-edit-hairline);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input.form-control:focus,
.form-control:focus {
    border-color: var(--ins-primary);
    box-shadow: 0 0 0 3px rgba(var(--ins-primary-rgb), 0.08);
}

/* Auth primary button as pill */
.auth-page-content .btn-primary,
form .btn-primary[type="submit"] {
    border-radius: var(--radius) !important;
    padding: 0.6rem 1.4rem !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
.auth-page-content .btn-primary:hover,
form .btn-primary[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--ins-primary-rgb), 0.22);
}

/* ═══════════════════════════════════════════════════
   AUTH PAGES — full-page dotted background
═══════════════════════════════════════════════════ */

/* Apply pattern to the body of any page that contains an .auth-box wrapper */
body:has(> .auth-box),
body:has(.auth-box) {
    background-color: var(--ins-body-bg, #ffffff);
    background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    background-position: center top;
    background-attachment: fixed;
}
html[data-bs-theme=dark] body:has(.auth-box) {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Make the .auth-box transparent so the dots show through */
.auth-box {
    background: transparent !important;
}

/* The inner auth card stays solid white so the form is readable */
.auth-box .card,
.auth-box > .container > .card,
.auth-box [class*="card"] {
    background: var(--ins-body-bg, #fff);
}

/* ═══════════════════════════════════════════════════
   DEVELOPER DOCS REFINEMENT (sticky sidebar already present)
═══════════════════════════════════════════════════ */

.doc-page {
    gap: 56px !important;
    padding-top: 1rem;
}

.doc-nav {
    border-right: 1px solid var(--mlab-edit-hairline) !important;
    padding-right: 1.25rem;
}

.doc-nav-title {
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    color: var(--ins-topbar-item-color) !important;
    opacity: 0.6;
    margin-top: 1.25rem !important;
    margin-bottom: 0.75rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--mlab-edit-hairline);
}
.doc-nav-title:first-child {
    border-top: 0;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.doc-nav-title::before {
    content: "—";
    margin-right: 0.4rem;
    opacity: 0.6;
}

.doc-nav-link {
    border-left: 0 !important;
    border-radius: 8px;
    margin: 1px 0.4rem;
    padding: 0.42rem 0.85rem !important;
    font-family: inherit;
    font-size: 0.82rem !important;
}
.doc-nav-link:hover {
    background: var(--ins-secondary-bg, #f8fafc) !important;
}
.doc-nav-link.active {
    background: rgba(var(--ins-primary-rgb), 0.06) !important;
    color: var(--ins-body-color, #111) !important;
    font-weight: 600 !important;
    position: relative;
}
.doc-nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 14px;
    border-radius: var(--radius);
    background: var(--ins-primary);
}

.doc-chapter h2 {
    font-size: clamp(1.75rem, 3vw, 2.2rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.45rem !important;
}
.doc-chapter h3 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
}
.doc-chapter .doc-subtitle {
    font-size: 0.82rem !important;
    color: var(--ins-topbar-item-color);
    margin-bottom: 1.6rem !important;
}

.doc-codeblock {
    border: 1px solid var(--mlab-edit-hairline) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
    margin: 1.2rem 0 !important;
}
.doc-codeblock-header {
    border-bottom: 1px solid var(--mlab-edit-hairline) !important;
    background: var(--ins-secondary-bg, #f8fafc) !important;
    padding: 0.55rem 0.95rem !important;
}
.doc-codeblock-filename {
    font-family: var(--mlab-edit-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
    color: var(--ins-topbar-item-color);
}
.doc-codeblock-btn {
    font-family: var(--mlab-edit-mono);
    font-size: 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--mlab-edit-hairline);
    background: var(--ins-body-bg);
    padding: 0.2rem 0.6rem;
    transition: background-color .15s ease;
}
.doc-codeblock-btn:hover {
    background: var(--ins-secondary-bg);
}
.doc-codeblock pre {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ins-body-bg) !important;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    font-size: 0.82rem;
    line-height: 1.65;
}

@media (max-width: 991.98px) {
    .doc-page { flex-direction: column; gap: 24px !important; }
    .doc-nav {
        width: 100% !important; min-width: 0 !important;
        position: static !important;
        max-height: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--mlab-edit-hairline) !important;
        padding-right: 0 !important;
    }
    .doc-body { padding: 0 !important; }
}

/* ═══════════════════════════════════════════════════
   AUTH SPLIT LAYOUT — form left, image+desc right
═══════════════════════════════════════════════════ */

/* Make the auth-box wider when split layout is active */
body:has(.auth-split-row) .auth-box .container {
    max-width: 1180px;
}

.auth-split-row {
    align-items: stretch !important;
    gap: 48px;
}

.auth-split-form {
    flex: 0 1 460px;
    max-width: 460px;
    margin-left: 0;
    margin-right: 0;
}

.auth-split-aside {
    flex: 1 1 480px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-aside-image {
    aspect-ratio: 1 / 1;
    /* cap so the image stays smaller than the typical login card height (~530px),
       targeting roughly 80% of it. min() lets it scale down on shorter viewports. */
    width: min(100%, 60vh, 420px);
    height: auto;
    align-self: center;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ins-secondary-bg, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-aside-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auth-aside-desc {
    margin: 1.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--ins-topbar-item-color);
    opacity: 0.85;
    max-width: 460px;
}
.auth-aside-desc::before {
    content: "";
    margin-right: 0;
    opacity: 0.55;
}

@media (max-width: 991.98px) {
    .auth-split-row {
        gap: 0 !important;
    }
    .auth-split-aside {
        display: none !important;
    }
    .auth-split-form {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════
   SOCIAL LOGIN BUTTONS (Google + GitHub)
═══════════════════════════════════════════════════ */

.social-auth-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}
.social-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--mlab-edit-hairline);
    background: var(--ins-body-bg, #fff);
    color: var(--ins-body-color, #111);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.social-auth-btn:hover {
    border-color: var(--mlab-edit-hairline-strong);
    transform: translateY(-1px);
    color: var(--ins-body-color, #111);
    background: var(--ins-secondary-bg, #f8fafc);
}
.social-auth-btn svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.social-auth-btn.is-github svg { color: #181717; }
html[data-bs-theme=dark] .social-auth-btn.is-github svg { color: #e6e6e6; }

.social-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.85rem;
    margin: 0.85rem 0 1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ins-topbar-item-color);
    opacity: 0.55;
}
.social-auth-divider::before,
.social-auth-divider::after {
    content: "";
    height: 1px;
    background: var(--mlab-edit-hairline);
}

.social-auth-error {
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.06);
    color: #b91c1c;
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.85rem;
    font-size: 0.78rem;
}
html[data-bs-theme=dark] .social-auth-error {
    color: #fca5a5;
}

/* ═══════════════════════════════════════════════════
   POST-LOGIN POLISH (dashboard, account, admin, organization, scans)
   Density-aware: keep tables/widgets dense, refine surfaces only.
═══════════════════════════════════════════════════ */

/* ─── Card surfaces: thinner border, no heavy shadow ─── */
.app-wrapper .card,
.content-page .card,
body.app .card {
    border-color: var(--mlab-edit-hairline) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}
.app-wrapper .card:hover,
.content-page .card:hover {
    /* keep stable, no transform — tables would jump */
    border-color: var(--mlab-edit-hairline-strong) !important;
}

/* ─── Card headers: cleaner separation, mono uppercase eyebrow ─── */
.content-page .card-header,
.content-page .card > .card-header {
    border-bottom: 1px solid var(--mlab-edit-hairline) !important;
    background: transparent !important;
    padding: 0.85rem 1.1rem !important;
}

/* ─── Sidebar nav active item: subtle orange marker like dev docs ─── */
.app-sidebar .menu-link.active,
.app-sidebar .nav-link.active,
.leftside-menu .menu-link.active {
    position: relative;
}
.app-sidebar .menu-link.active::before,
.app-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 16px;
    border-radius: var(--radius);
    background: var(--ins-primary);
}

/* ─── Bootstrap tables: tighter, hairlines instead of solid borders ─── */
.content-page .table > :not(caption) > * > * {
    border-bottom-color: var(--mlab-edit-hairline) !important;
}
.content-page .table > thead > tr > th {
    font-family: var(--mlab-edit-mono);
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ins-topbar-item-color) !important;
    border-bottom: 1px solid var(--mlab-edit-hairline-strong) !important;
    background: transparent !important;
}

/* ─── Badges: keep Bootstrap colors but slightly tighter ─── */
.content-page .badge {
    font-family: var(--mlab-edit-mono);
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    padding: 0.28rem 0.55rem;
}

/* ─── Primary action buttons: pill in dashboard CTAs ─── */
.content-page .btn-primary,
.content-page .btn-success,
.content-page .btn-danger {
    border-radius: var(--radius);
    font-weight: 500;
}
.content-page .btn-primary:hover,
.content-page .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--ins-primary-rgb), 0.18);
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Outline buttons stay rectangular for density (admin lists, filters) */

/* ─── Stat / KPI numbers: editorial typography ─── */
.content-page .card .display-1,
.content-page .card .display-2,
.content-page .card .display-3,
.content-page .card .display-4,
.content-page .card .display-5,
.content-page .card .display-6,
.content-page .card .h1,
.content-page .card h1.fw-bold,
.content-page .stat-value,
.content-page .kpi-value {
    letter-spacing: -0.025em;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Small stat labels: mono uppercase */
.content-page .stat-label,
.content-page .kpi-label,
.content-page .text-uppercase.text-muted {
    font-family: var(--mlab-edit-mono) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.12em !important;
}

/* ─── Sub-headings inside dashboards ─── */
.content-page h4,
.content-page h5,
.content-page .card-title {
    letter-spacing: -0.015em;
}

/* ─── Form controls in dash: keep our focus ring ─── */
/* (already covered globally by mlab-editorial.css form-control rules) */

/* ─── Action card refinement (mlab-action-card on dashboard) ─── */
.mlab-action-card {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: none !important;
    transition: var(--mlab-card-transition) !important;
}
.mlab-action-card:hover {
    border-color: var(--mlab-edit-hairline-strong) !important;
    transform: translateY(-1px);
}

/* ─── Modals: hairline borders ─── */
.modal-content {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: 0 12px 48px rgba(15, 23, 42, 0.12) !important;
}
.modal-header,
.modal-footer {
    border-color: var(--mlab-edit-hairline) !important;
}

/* ─── Dropdowns: hairline border, mono uppercase headers ─── */
.dropdown-menu {
    border: 1px solid var(--mlab-edit-hairline) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}
.dropdown-header {
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════
   DASHBOARD BACKGROUND — dotted pattern like the hero
═══════════════════════════════════════════════════ */

/* Apply on the main content container of the dashboard */
body:has(> .wrapper > .content-page) .content-page {
    background-color: var(--ins-body-bg, #ffffff);
    background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    background-position: center top;
    background-attachment: fixed;
}
html[data-bs-theme=dark] body:has(> .wrapper > .content-page) .content-page {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ─── Reduce motion respect ─── */
@media (prefers-reduced-motion: reduce) {
    .mlab-feature-card:hover,
    .mlab-role-item:hover,
    .mlab-usecase-card:hover,
    .mlab-product-card:hover,
    .mlab-search-card .btn-primary:hover,
    .mlab-hero .btn-primary:hover {
        transform: none;
    }
}

/* Locked feature card — blurs the underlying content and overlays an upgrade CTA */
.mlab-locked-wrapper {
    position: relative;
}
.mlab-locked-card .card-header,
.mlab-locked-card .card-body {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}
.mlab-locked-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: inherit;
}
.mlab-locked-content {
    text-align: center;
    padding: 1.5rem 2rem;
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    max-width: 360px;
}
/* Force readable text inside the dark overlay regardless of the active theme */
.mlab-locked-content h5 {
    color: #ffffff;
}
.mlab-locked-content .text-muted {
    color: #9ca3af !important;
}
.mlab-locked-content i {
    color: #e5e7eb;
}

/* ═══════════════════════════════════════════════════
   Account subscription — plan cards (show-card.html)
═══════════════════════════════════════════════════ */
.mlab-plans { max-width: 1100px; margin: 0 auto; padding-top: 1.5rem; padding-bottom: 1rem; }

.mlab-plan-card {
    position: relative;
    border: 1px solid var(--ins-border-color, #e5e7eb);
    border-radius: 14px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mlab-plan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.mlab-plan-card-popular {
    border-color: var(--ins-primary, #4f46e5);
    box-shadow: 0 8px 24px rgba(79,70,229,.14);
}
.mlab-plan-card-dark { background: #111827; }
.mlab-plan-card-dark :is(.card-body, .mlab-ui-card__content),
.mlab-plan-card-dark .mlab-plan-price,
.mlab-plan-card-dark h5 { color: #f9fafb; }
.mlab-plan-card-dark .mlab-plan-tagline { color: #9ca3af !important; }
.mlab-plan-card-dark .mlab-plan-features li { color: #e5e7eb; }

.mlab-plan-ribbon {
    position: absolute;
    top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--ins-primary, #4f46e5);
    color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .25rem .7rem; border-radius: var(--radius);
    box-shadow: 0 4px 10px rgba(79,70,229,.3);
    white-space: nowrap;
}

.mlab-plan-head { min-height: 132px; }
.mlab-plan-price {
    font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin-bottom: .5rem;
    color: var(--ins-body-color, #111827);
}
.mlab-plan-price span { font-size: .85rem; font-weight: 500; color: var(--ins-secondary-color, #6b7280); }
.mlab-plan-tagline { font-size: .82rem; margin-bottom: 0; }

.mlab-plan-features { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; }
.mlab-plan-features li {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: .85rem; line-height: 1.45; padding: .3rem 0;
    color: var(--ins-body-color, #374151);
}
.mlab-plan-features li i {
    flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: #16a34a;
}
.mlab-plan-card-dark .mlab-plan-features li i { color: #34d399; }

/* ── Welcome offer (intro price on a first subscription) ──────────────────
   Amber is the accent tier here, deliberately not the primary: the offer has to
   read as an annotation on the Pro card, not as a second call to action. Colors
   are tokenised on --ins-* (the vendor theme's prefix, --bs-* does not follow
   dark mode) with translucent amber over whatever the ground is, so one rule
   holds in both themes. */
.mlab-plan-ribbon--offer {
    background: #d97706;
    box-shadow: 0 4px 10px rgba(217, 119, 6, .32);
}

/* While the offer runs, the promoted card follows the ribbon into amber instead
   of keeping the default highlight, which would otherwise clash with it. */
.mlab-plan-card-popular:has(.mlab-plan-ribbon--offer) {
    border-color: rgba(217, 119, 6, .55);
    box-shadow: 0 8px 24px rgba(217, 119, 6, .16);
}

/* The standard price stays on screen, struck through, so the price after the
   offer is never something the buyer has to go looking for. Needs to outrank
   `.mlab-plan-price span`, which would otherwise mute and shrink it. */
.mlab-plan-price .mlab-plan-price-was {
    font-size: 1.05rem;
    font-weight: 600;
    margin-right: .4rem;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--ins-secondary-color, #6b7280);
    opacity: .75;
}

.mlab-plan-price--offer { color: #d97706; }

.mlab-plan-price-note {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: -.25rem 0 .5rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--ins-secondary-color, #6b7280);
}
.mlab-plan-price-note i,
.mlab-plan-price-note svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    color: #d97706;
}

.mlab-intro-banner {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 0 auto 1.75rem;
    padding: .85rem 1.05rem;
    max-width: 720px;
    border: 1px solid rgba(217, 119, 6, .35);
    border-radius: 14px;
    background: rgba(217, 119, 6, .08);
    color: var(--ins-body-color, #111827);
    font-size: .85rem;
    line-height: 1.5;
}
.mlab-intro-banner strong { color: #d97706; }
.mlab-intro-banner__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .1rem;
    color: #d97706;
}

/* Inline variant for the comparison table cell, where there is no room for the
   full banner. */
.mlab-intro-note {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .2rem;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.3;
    color: #d97706;
    white-space: nowrap;
}
.mlab-intro-note i,
.mlab-intro-note svg { flex: 0 0 auto; width: 11px; height: 11px; }

/* ── Hub / index cards (cheat sheets, learn) ──────────────────────────── */
.mlab-hub-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 14px;
    background: var(--ins-body-bg, #fff);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mlab-hub-card:hover {
    border-color: var(--mlab-edit-hairline-strong);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--ins-primary-rgb), 0.10);
    color: inherit;
}
.mlab-hub-card-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--mlab-edit-hairline);
    color: var(--ins-primary);
}
.mlab-hub-card-icon i,
.mlab-hub-card-icon svg { width: 20px; height: 20px; }
.mlab-hub-card-body { flex: 1 1 auto; min-width: 0; }
.mlab-hub-card-title {
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.2;
    margin-bottom: .25rem;
    color: var(--ins-body-color, #111827);
}
.mlab-hub-card-desc {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--mlab-text-secondary);
}

/* Small platform tags under a hub card (integrations page). */
.mlab-hub-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.mlab-hub-card-meta span {
    font-family: var(--mlab-edit-mono);
    font-size: .64rem;
    line-height: 1;
    padding: .25rem .45rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 999px;
    color: var(--mlab-text-secondary);
}

/* Neutral muted text — the Bootstrap .text-secondary maps to the brand
   indigo in this theme, which reads as unwanted blue body copy. Use this
   for descriptive/secondary prose instead. */
.mlab-muted { color: var(--mlab-text-secondary) !important; }

/* ── Program cards (banner + floating icon + CTA) ─────────────────────── */
.mlab-program-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ins-body-bg, #fff);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mlab-program-card:hover {
    transform: translateY(-3px);
    border-color: var(--mlab-edit-hairline-strong);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
    color: inherit;
}

.mlab-program-card-banner {
    position: relative;
    height: 148px;
    background-color: #0f172a;
    background-size: cover;
    background-position: center;
}
/* Real MJ banner sits on top; the gradient is the fallback while the image
   file is absent (a 404 just reveals the gradient layer beneath). Drop the
   generated art at the referenced path to light it up. */
.mlab-program-card--student .mlab-program-card-banner {
    background-image: url('/assets/programs/student.png'),
                      linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
}
.mlab-program-card--equity .mlab-program-card-banner {
    background-image: url('/assets/programs/equity.png'),
                      linear-gradient(135deg, #0f766e 0%, #10b981 100%);
}
.mlab-program-card-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, .38) 100%);
}

.mlab-program-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    font-size: .64rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, .38);
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.mlab-program-card-icon {
    position: absolute;
    bottom: -24px;
    left: 20px;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ins-body-bg, #fff);
    border: 1px solid var(--mlab-edit-hairline);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
    color: #111827;
}
.mlab-program-card-icon i { width: 24px; height: 24px; }
html[data-bs-theme=dark] .mlab-program-card-icon { color: #e5e7eb; }

.mlab-program-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 2.3rem 1.35rem 1.35rem;
}
.mlab-program-card-title {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.2;
    margin-bottom: .4rem;
    color: var(--ins-body-color, #111827);
}
.mlab-program-card-desc {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--mlab-text-secondary);
    margin-bottom: 1.1rem;
}
.mlab-program-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ins-body-color, #111827);
}
.mlab-program-card-cta i { width: 16px; height: 16px; transition: transform .18s ease; }
.mlab-program-card:hover .mlab-program-card-cta i { transform: translateX(3px); }

/* ── Commitment panel ─────────────────────────────────────────────────── */
.mlab-commitment {
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 16px;
    padding: 2rem 2.25rem;
    background: rgba(15, 23, 42, .02);
}
html[data-bs-theme=dark] .mlab-commitment { background: rgba(255, 255, 255, .02); }

.mlab-commitment-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.1rem;
}
.mlab-commitment-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ins-body-bg, #fff);
    border: 1px solid var(--mlab-edit-hairline);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    color: #111827;
}
.mlab-commitment-icon i { width: 22px; height: 22px; }
html[data-bs-theme=dark] .mlab-commitment-icon { color: #e5e7eb; }
.mlab-commitment-title {
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
    margin: .1rem 0 0;
    color: var(--ins-body-color, #111827);
}
.mlab-commitment-lead {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--mlab-text-secondary);
    margin: 0 0 1.6rem;
    max-width: 68ch;
}

.mlab-commitment-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 640px) {
    .mlab-commitment-pillars { grid-template-columns: 1fr; gap: 1rem; }
}
.mlab-commitment-pillar {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--mlab-edit-hairline);
}
.mlab-commitment-pillar i {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: #111827;
}
html[data-bs-theme=dark] .mlab-commitment-pillar i { color: #e5e7eb; }
.mlab-commitment-pillar strong {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ins-body-color, #111827);
}
.mlab-commitment-pillar span {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--mlab-text-secondary);
    margin-top: .15rem;
}

/* ── Equity page: reveal, stats, growth chart, stepper ────────────────── */
.mlab-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .mlab-reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s ease, transform .55s ease;
    }
    .mlab-reveal.is-visible { opacity: 1; transform: none; }
    .mlab-reveal.d1 { transition-delay: .09s; }
    .mlab-reveal.d2 { transition-delay: .18s; }
}

/* Stat band */
.mlab-eq-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) { .mlab-eq-stats { grid-template-columns: repeat(2, 1fr); } }
.mlab-eq-stat {
    text-align: center;
    padding: 1.3rem .5rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 14px;
    background: var(--ins-body-bg, #fff);
}
.mlab-eq-stat-num {
    font-family: var(--mlab-edit-mono);
    font-weight: 700;
    font-size: 1.95rem;
    line-height: 1;
    color: var(--ins-body-color, #111827);
}
.mlab-eq-stat-label { font-size: .78rem; color: var(--mlab-text-secondary); margin-top: .45rem; }

/* Growth chart */
.mlab-eq-chart svg { width: 100%; height: auto; display: block; }
.mlab-eq-grid line { stroke: var(--mlab-edit-hairline); stroke-width: 1; }
.mlab-eq-stake {
    stroke: #94a3b8;
    stroke-width: 2;
    stroke-dasharray: 4 4;
    opacity: .8;
}
.mlab-eq-axis text { font-family: var(--mlab-edit-mono); font-size: 11px; fill: #94a3b8; }
.mlab-eq-chart-line { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mlab-eq-chart-area { opacity: 0; transition: opacity .9s ease .35s; }
.mlab-eq-chart-dot { opacity: 0; transition: opacity .4s ease 1.4s; }
@media (prefers-reduced-motion: no-preference) {
    .mlab-eq-chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
    .is-visible .mlab-eq-chart-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s cubic-bezier(.4, 0, .2, 1); }
}
.is-visible .mlab-eq-chart-area { opacity: 1; }
.is-visible .mlab-eq-chart-dot { opacity: 1; }

.mlab-eq-legend-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.mlab-eq-legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--mlab-text-secondary); }
.mlab-eq-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.mlab-eq-legend-dot--value { background: linear-gradient(90deg, #4f46e5, #10b981); }
.mlab-eq-legend-dot--stake { background: transparent; border: 2px dashed #94a3b8; border-radius: 2px; }

/* How-it-works step */
.mlab-eq-step { position: relative; overflow: hidden; }
.mlab-eq-step-num {
    position: absolute;
    top: .5rem;
    right: .9rem;
    font-family: var(--mlab-edit-mono);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--mlab-edit-hairline-strong);
}

/* What's included grid */
.mlab-eq-inc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
@media (max-width: 768px) { .mlab-eq-inc { grid-template-columns: 1fr; } }
.mlab-eq-inc-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .9rem 1rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 12px;
    background: var(--ins-body-bg, #fff);
    transition: border-color .15s ease, transform .15s ease;
}
.mlab-eq-inc-item:hover { border-color: var(--mlab-edit-hairline-strong); transform: translateY(-2px); }
.mlab-eq-inc-item i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: #111827; }
html[data-bs-theme=dark] .mlab-eq-inc-item i { color: #e5e7eb; }
.mlab-eq-inc-item strong { display: block; font-size: .85rem; color: var(--ins-body-color, #111827); }
.mlab-eq-inc-item span { display: block; font-size: .76rem; color: var(--mlab-text-secondary); margin-top: .1rem; }
.mlab-eq-inc-item > div { min-width: 0; flex: 1 1 auto; }

/* ═══ Equity · runway calculator ═══ */
.mlab-eq-calc { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1.75rem; align-items: center; }
@media (max-width: 991px) { .mlab-eq-calc { grid-template-columns: 1fr; } }

.mlab-eq-slider-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .8rem; color: var(--mlab-text-secondary); margin-bottom: .5rem;
}
.mlab-eq-slider-value {
    font-family: var(--mlab-edit-mono); font-weight: 700; font-size: 1rem;
    color: var(--ins-body-color, #111827);
}
.mlab-eq-range { width: 100%; }

/* Two outcomes, side by side, so the contrast is the whole point. */
.mlab-eq-outcome {
    border: 1px solid var(--mlab-edit-hairline); border-radius: 14px;
    padding: 1rem 1.15rem; background: var(--ins-body-bg, #fff);
}
.mlab-eq-outcome + .mlab-eq-outcome { margin-top: .7rem; }
.mlab-eq-outcome--equity { border-color: #10b981; }
.mlab-eq-outcome-head {
    letter-spacing: 0.04em; color: var(--mlab-text-secondary); margin-bottom: .3rem;
}
.mlab-eq-outcome-num {
    font-family: var(--mlab-edit-mono); font-weight: 700; font-size: 1.75rem; line-height: 1;
    color: var(--ins-body-color, #111827);
}
.mlab-eq-outcome--equity .mlab-eq-outcome-num { color: #10b981; }
.mlab-eq-outcome-sub { font-size: .76rem; color: var(--mlab-text-secondary); margin-top: .35rem; }

.mlab-eq-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin-top: .25rem; }
.mlab-eq-bar {
    flex: 1 1 0; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #4f46e5, #10b981);
    transition: height .35s cubic-bezier(.4, 0, .2, 1);
    min-height: 2px;
}
.mlab-eq-bar--muted { background: var(--mlab-edit-hairline); }
@media (prefers-reduced-motion: reduce) { .mlab-eq-bar { transition: none; } }

/* Stack picker feeding the calculator */
.mlab-eq-picks { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.mlab-eq-pick {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem; border: 1px solid var(--mlab-edit-hairline);
    border-radius: 10px; cursor: pointer; margin: 0;
    transition: border-color .15s ease;
}
.mlab-eq-pick:hover { border-color: var(--mlab-edit-hairline-strong); }
.mlab-eq-pick input { margin: 0; flex: 0 0 auto; accent-color: #10b981; }
.mlab-eq-pick-name { font-size: .85rem; flex: 1 1 auto; color: var(--ins-body-color, #111827); }
.mlab-eq-pick-price {
    font-family: var(--mlab-edit-mono); font-size: .78rem;
    color: var(--mlab-text-secondary); flex: 0 0 auto; white-space: nowrap;
}
/* Not a toggle: a line the visitor cannot switch off, because on a normal
   contract it is quoted on top rather than chosen. */
.mlab-eq-pick--note { cursor: default; border-style: dashed; padding-left: 1.95rem; }
.mlab-eq-pick--note:hover { border-color: var(--mlab-edit-hairline); }

/* ═══ Equity · scenarios ═══
   Trois defauts corriges ici :
   - le badge d'etape sortait a 14px pendant que le titre de la carte sortait a
     11.9px (h3.h6), donc l'etiquette dominait le titre qu'elle etait censee
     qualifier. Le badge descend, le titre remonte ;
   - ce badge etait en `display: inline`, ou un margin-bottom vertical n'a aucun
     effet : le titre venait se coller dessous. Passe en inline-flex ;
   - la boite de contexte etait remplie avec --mlab-edit-hairline, qui est le
     token de BORDURE (slate a 8%). Utilise en aplat il donne un gris sale et
     sans contour. Remplace par le couple --muted / --border du systeme. */
.mlab-eq-scenario { position: relative; height: 100%; }
.mlab-eq-scenario-stage {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    padding: .3rem .6rem;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--muted-foreground);
    margin-bottom: .6rem;
}
.mlab-eq-scenario h3 {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--foreground);
    margin-bottom: .6rem;
}
.mlab-eq-scenario-trigger {
    font-size: .84rem;
    line-height: 1.6;
    padding: .75rem .875rem;
    border-radius: var(--radius);
    background: var(--muted);
    border: 1px solid var(--border);
    color: var(--foreground);
    margin-bottom: .85rem;
}
.mlab-eq-scenario-uses { list-style: none; padding: 0; margin: 0; }
.mlab-eq-scenario-uses li {
    display: flex; gap: .5rem; align-items: flex-start;
    font-size: .82rem; line-height: 1.5; padding: .3rem 0;
    color: var(--muted-foreground);
}
/* Le vert etait un #10b981 en dur, hors palette. */
.mlab-eq-scenario-uses i,
.mlab-eq-scenario-uses svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--mlab-success); }

/* ═══ Equity · timeline ═══ */
/* Rail and dots derive every offset from the same two variables, so they share
   one centre by construction. Three hardcoded offsets drifted 2.7px apart,
   which on a 2px rail meant the line visibly missed the dots. */
.mlab-eq-tl {
    --tl-gutter: 2rem;
    --tl-dot: 11px;
    --tl-rail: 2px;
    --tl-dot-top: 7px;
    position: relative;
    padding-left: var(--tl-gutter);
}
.mlab-eq-tl::before,
.mlab-eq-tl::after {
    content: "";
    position: absolute;
    left: calc(var(--tl-gutter) / 2 - var(--tl-rail) / 2);
    width: var(--tl-rail);
    border-radius: var(--tl-rail);
    /* Starts at the centre of the first dot, not at the top of the block. */
    top: calc(var(--tl-dot-top) + var(--tl-dot) / 2);
}
.mlab-eq-tl::before {
    bottom: var(--tl-dot-top);
    background: var(--mlab-edit-hairline);
}
.mlab-eq-tl::after {
    height: 0;
    background: linear-gradient(180deg, #4f46e5, #10b981);
    transition: height 1.5s cubic-bezier(.4, 0, .2, 1) .15s;
}
.mlab-eq-tl.is-visible::after {
    height: calc(100% - var(--tl-dot-top) - var(--tl-dot-top) - var(--tl-dot) / 2);
}

.mlab-eq-tl-item { position: relative; padding-bottom: 1.6rem; }
.mlab-eq-tl-item:last-child { padding-bottom: 0; }
/* Opaque and drawn over the rail, so the line cannot show through the middle
   the way a hollow ring let it. */
.mlab-eq-tl-item::before {
    content: "";
    position: absolute;
    left: calc(var(--tl-dot) / -2 - var(--tl-gutter) / 2);
    top: var(--tl-dot-top);
    width: var(--tl-dot);
    height: var(--tl-dot);
    border-radius: 50%;
    background: var(--mlab-edit-hairline-strong);
    transition: background-color .45s ease, box-shadow .45s ease;
}
.mlab-eq-tl.is-visible .mlab-eq-tl-item::before {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
}
.mlab-eq-tl-item:nth-child(2)::before { transition-delay: .38s; }
.mlab-eq-tl-item:nth-child(3)::before { transition-delay: .76s; }
.mlab-eq-tl-item:nth-child(4)::before { transition-delay: 1.14s; }
@media (prefers-reduced-motion: reduce) {
    .mlab-eq-tl::after { transition: none; }
    .mlab-eq-tl-item::before { transition: none; }
}
.mlab-eq-tl-title { font-size: .95rem; font-weight: 600; line-height: 1.5; margin-bottom: .2rem; }
.mlab-eq-tl-body { font-size: .85rem; line-height: 1.6; color: var(--mlab-text-secondary); margin: 0; }

/* ═══ Equity · FAQ ═══ */
.mlab-eq-faq-item { border-bottom: 1px solid var(--mlab-edit-hairline); }
.mlab-eq-faq-q {
    width: 100%; background: none; border: 0; text-align: left;
    padding: 1rem .25rem; font-size: .95rem; font-weight: 600;
    color: var(--ins-body-color, #111827);
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.mlab-eq-faq-q:hover { color: #10b981; }
.mlab-eq-faq-q i,
.mlab-eq-faq-q svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform .25s ease; }
.mlab-eq-faq-item.is-open .mlab-eq-faq-q i,
.mlab-eq-faq-item.is-open .mlab-eq-faq-q svg { transform: rotate(45deg); }
.mlab-eq-faq-a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
}
.mlab-eq-faq-item.is-open .mlab-eq-faq-a { grid-template-rows: 1fr; }
.mlab-eq-faq-a > div { overflow: hidden; }
.mlab-eq-faq-a p {
    font-size: .87rem; line-height: 1.7; color: var(--mlab-text-secondary);
    margin: 0; padding: 0 .25rem 1rem;
}
@media (prefers-reduced-motion: reduce) { .mlab-eq-faq-a { transition: none; } }

/* Linked school rows (schools with a dedicated page) */
a.mlab-eq-inc-item--link { text-decoration: none; }
a.mlab-eq-inc-item--link:hover { border-color: var(--mlab-edit-hairline-strong); }
.mlab-school-snippet {
    display: block;
    font-size: .76rem;
    color: var(--mlab-text-secondary);
    margin-top: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mlab-school-go {
    width: 16px !important;
    height: 16px !important;
    align-self: center;
    color: var(--ins-secondary-color, #9ca3af);
    opacity: .5;
    transition: transform .15s ease, opacity .15s ease;
}
a.mlab-eq-inc-item--link:hover .mlab-school-go { opacity: 1; transform: translateX(2px); }

/* Per-school page: prose block for the Markdown description */
.mlab-school-prose { font-size: .95rem; line-height: 1.7; color: var(--ins-body-color, #111827); }
.mlab-school-prose h2 { font-size: 1.15rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.mlab-school-prose h3 { font-size: 1rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
.mlab-school-prose p { margin: 0 0 .9rem; }
.mlab-school-prose a { color: var(--mlab-accent, #4f46e5); }
.mlab-school-prose img { border-radius: 12px; margin: .5rem 0; }
.mlab-school-prose ul, .mlab-school-prose ol { margin: 0 0 .9rem 1.4rem; }

/* CTA panel */
.mlab-eq-cta {
    text-align: center;
    padding: 2.2rem 1.5rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(79, 70, 229, .06) 0%, rgba(16, 185, 129, .05) 45%, transparent 70%),
        var(--ins-body-bg, #fff);
}
.mlab-hub-card-arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--ins-secondary-color, #9ca3af);
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.mlab-hub-card:hover .mlab-hub-card-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
    color: var(--ins-primary);
}

/* ═══ Scan result report system (ip / crypto / domain / hash / …) ═══════ */
.mlab-result-hero,
.mlab-result-card {
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 16px;
    background: var(--ins-body-bg, #fff);
}
.mlab-result-hero { padding: 1.6rem 1.75rem; }
.mlab-result-card { padding: 1.4rem 1.6rem; }
.mlab-result-card + .mlab-result-card,
.mlab-result-hero + .mlab-result-card { margin-top: 1.25rem; }

.mlab-result-eyebrow {
    font-size: .68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mlab-text-secondary);
    margin-bottom: .9rem;
}

/* Queried target (IP / address) as copyable mono token */
.mlab-result-target {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mlab-edit-mono);
    font-weight: 600;
    font-size: 1.05rem;
    padding: .35rem .7rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 10px;
    background: rgba(var(--ins-primary-rgb), .04);
    word-break: break-all;
}
.mlab-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    flex: 0 0 auto;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 7px;
    background: var(--ins-body-bg, #fff);
    color: var(--mlab-text-secondary);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.mlab-copy-btn:hover { color: var(--ins-body-color, #111827); border-color: var(--mlab-edit-hairline-strong); }
.mlab-copy-btn i { width: 14px; height: 14px; }

/* Verdict pill + score ring */
.mlab-verdict {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--mlab-edit-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .34rem .7rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.mlab-verdict--success { color: #15803d; background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.22); }
.mlab-verdict--info    { color: #475569; background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.22); }
.mlab-verdict--warning { color: #b45309; background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.24); }
.mlab-verdict--danger  { color: #b91c1c; background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.24); }

.mlab-score-ring {
    --score: 0; --ring: #16a34a;
    width: 104px; height: 104px; flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--score) * 1%), var(--mlab-edit-hairline) 0);
    display: grid; place-items: center; position: relative;
}
/* The punched-out centre. Both this and .mlab-score-ring-inner are positioned
   at z-index auto, and a ::after paints after the element's children, so without
   the z-index below this disc covered the grade and the score. */
.mlab-score-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--ins-body-bg, #fff); }
.mlab-score-ring-inner { position: relative; z-index: 1; text-align: center; line-height: 1.05; }
.mlab-score-ring-num { font-family: var(--mlab-edit-mono); font-weight: 700; font-size: 1.5rem; }
.mlab-score-ring-max { font-size: .62rem; color: var(--mlab-text-secondary); }
/* Fill from 0 to the score on load; the grade lands as the sweep ends. The
   number beside it counts up in html/domain/main.html. Needs @property to
   tween a custom property; browsers without it just show the final ring. */
@property --score { syntax: '<number>'; inherits: false; initial-value: 0; }
.mlab-score-ring:not(.mlab-score-ring--pending) { animation: mlab-score-fill 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.mlab-score-ring:not(.mlab-score-ring--pending) .mlab-score-ring-num { animation: mlab-score-grade .45s ease-out .85s both; }
@keyframes mlab-score-fill { from { --score: 0; } }
@keyframes mlab-score-grade { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce), print {
    .mlab-score-ring, .mlab-score-ring .mlab-score-ring-num { animation: none !important; }
}
.mlab-ring--success { --ring: #16a34a; }
.mlab-ring--info    { --ring: #64748b; }
.mlab-ring--warning { --ring: #d97706; }
.mlab-ring--danger  { --ring: #dc2626; }

/* Signal chips (booleans / flags) */
.mlab-signal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: .6rem;
}
.mlab-signal {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .85rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 12px;
    background: var(--ins-body-bg, #fff);
}
.mlab-signal i { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mlab-text-secondary); }
.mlab-signal-k { font-size: .82rem; color: var(--mlab-text-secondary); margin-right: auto; }
.mlab-signal-v { font-size: .82rem; font-weight: 600; color: var(--ins-body-color, #111827); }
.mlab-signal--ok i, .mlab-signal--ok .mlab-signal-v { color: #16a34a; }
.mlab-signal--warn i, .mlab-signal--warn .mlab-signal-v { color: #d97706; }
.mlab-signal--bad i, .mlab-signal--bad .mlab-signal-v { color: #dc2626; }

/* Key/value metadata grid */
.mlab-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem 1.25rem;
}
@media (min-width: 768px) { .mlab-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mlab-kv-item { padding: .55rem 0; border-top: 1px solid var(--mlab-edit-hairline); }
.mlab-kv-k {
    font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--mlab-text-secondary);
}
.mlab-kv-v { font-size: .9rem; font-weight: 600; margin-top: .2rem; word-break: break-word; }

/* Unified on-brand badge / chip (replaces the Bootstrap colour rainbow) */
.mlab-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; font-weight: 600;
    padding: .28rem .6rem; border-radius: 999px;
    border: 1px solid var(--mlab-edit-hairline);
    background: rgba(var(--ins-primary-rgb), .05);
    color: var(--ins-body-color, #111827);
}
.mlab-chip--ok   { color: #15803d; background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.22); }
.mlab-chip--warn { color: #b45309; background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.24); }
.mlab-chip--bad  { color: #b91c1c; background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.24); }
.mlab-chip--info { color: #475569; background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.22); }
/* Observations rather than defects: reads quieter than --info, which low uses. */
.mlab-chip--muted { color: var(--mlab-text-secondary); background: transparent; border-color: var(--mlab-edit-hairline); }
/* The light inks above (700 shades) sink into a dark card; dark mode reads
   the 300 shades on a slightly stronger tint. */
html[data-bs-theme=dark] :is(.mlab-verdict--success, .mlab-chip--ok)   { color: #86efac; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.30); }
html[data-bs-theme=dark] :is(.mlab-verdict--warning, .mlab-chip--warn) { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.30); }
html[data-bs-theme=dark] :is(.mlab-verdict--danger, .mlab-chip--bad)   { color: #fca5a5; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.30); }
html[data-bs-theme=dark] :is(.mlab-verdict--info, .mlab-chip--info)    { color: #cbd5e1; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.30); }

/* ═══ Single-page scan report: nav rail + stacked sections ═════════════ */
.mlab-report {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .mlab-report { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* Sticky rail */
.mlab-report-rail { position: sticky; top: 88px; }
@media (max-width: 991.98px) {
    /* On narrow screens the rail becomes a horizontal scroller above the body. */
    .mlab-report-rail {
        position: static;
        overflow-x: auto;
        border-bottom: 1px solid var(--mlab-edit-hairline);
        padding-bottom: .5rem;
    }
    .mlab-report-nav { display: flex; gap: .35rem; }
    .mlab-report-nav .mlab-result-eyebrow { display: none; }
    .mlab-report-nav-item { white-space: nowrap; }
}

.mlab-report-nav-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: .85rem;
    font-weight: 500;
    color: var(--mlab-text-secondary);
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.mlab-report-nav-item:hover {
    color: var(--ins-body-color);
    background: var(--ins-secondary-bg, #f8fafc);
}
.mlab-report-nav-item.active {
    color: var(--ins-body-color);
    background: rgba(var(--ins-primary-rgb), .06);
    border-color: var(--mlab-edit-hairline);
    font-weight: 600;
}
.mlab-report-nav-item > span:first-child { margin-right: auto; }

.mlab-nav-badge {
    /* Never wrap: a long label next to it (a changelog title) must not split "09-24". */
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--mlab-edit-mono);
    font-size: .66rem;
    font-weight: 600;
    min-width: 1.15rem;
    padding: .05rem .3rem;
    text-align: center;
    border-radius: 999px;
}
.mlab-nav-badge--high   { color: #b91c1c; background: rgba(220,38,38,.12); }
.mlab-nav-badge--medium { color: #b45309; background: rgba(217,119,6,.12); }
.mlab-nav-badge--low    { color: #475569; background: rgba(100,116,139,.12); }

/* Sections */
.mlab-report-section {
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 16px;
    background: var(--ins-body-bg, #fff);
    padding: 1.4rem 1.6rem;
    scroll-margin-top: 88px;
}
.mlab-report-section + .mlab-report-section { margin-top: 1.25rem; }
/* Inside the report body, spacing is a flex gap, so sections hidden by a page's
   search filter (d-none) leave no uneven hole. */
.mlab-report-body { display: flex; flex-direction: column; gap: 1.25rem; }
.mlab-report-body > .mlab-report-section + .mlab-report-section { margin-top: 0; }

.mlab-report-section-head {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding-bottom: .8rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--mlab-edit-hairline);
}
.mlab-report-section-num {
    font-family: var(--mlab-edit-mono);
    font-size: .72rem;
    color: var(--mlab-text-secondary);
}
.mlab-report-section-title {
    font-family: var(--mlab-edit-serif);
    font-size: 1.35rem;
    font-weight: 400;
    margin: 0;
}

/* Blocks inside a section */
.mlab-subblock { padding: 1.1rem 0; border-top: 1px solid var(--mlab-edit-hairline); }
.mlab-subblock:first-of-type,
.mlab-report-section-head + .mlab-subblock { border-top: 0; }

/* A table inside a section card: keep its hairline frame, drop the floating
   card look (shadow, big gap) the standalone cheat sheet gave it. The
   prelogin sheet sets these with !important, hence the same here. */
body.mlab-pub .mlab-report-section .mlab-cs-table { box-shadow: none !important; margin: .75rem 0 0 !important; }
/* Guide links that land on a card clear the sticky header. */
.mlab-hub-card { scroll-margin-top: 88px; }
/* Breadcrumb inside a hero eyebrow reads as part of it. */
.mlab-result-eyebrow a { color: inherit; }

/* Long-form text in report sections (legal pages): readable measure and rhythm. */
.mlab-report--prose .mlab-report-section p,
.mlab-report--prose .mlab-report-section li { font-size: .92rem; line-height: 1.75; }
.mlab-report--prose .mlab-report-section ul,
.mlab-report--prose .mlab-report-section ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.mlab-report--prose .mlab-report-section li + li { margin-top: .25rem; }
.mlab-report--prose .mlab-report-section h3,
.mlab-report--prose .mlab-report-section h4 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .5rem; }
.mlab-subblock-title {
    font-size: .68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mlab-text-secondary);
    margin-bottom: .75rem;
}

/* Folded raw dumps (crt.sh, full subdomain list, robots.txt…) */
.mlab-subblock--fold > summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}
.mlab-subblock--fold > summary::-webkit-details-marker { display: none; }
.mlab-subblock--fold > summary:hover { color: var(--ins-body-color); }
.mlab-subblock--fold > summary i {
    width: 14px; height: 14px;
    transition: transform .15s ease;
}
.mlab-subblock--fold[open] > summary i { transform: rotate(90deg); }
.mlab-subblock-hint {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-size: .7rem;
    opacity: .8;
}
.mlab-subblock-body { margin-top: .9rem; }

/* Findings panel */
.mlab-findings-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.mlab-finding-counts { display: flex; flex-wrap: wrap; gap: .4rem; }

.mlab-finding-list {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
}
.mlab-finding {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-left-width: 3px;
    border-radius: 9px;
    font-size: .88rem;
}
.mlab-finding + .mlab-finding { margin-top: .4rem; }
.mlab-finding--high   { border-left-color: #dc2626; }
.mlab-finding--medium { border-left-color: #d97706; }
.mlab-finding--low    { border-left-color: #64748b; }

.mlab-finding-sev {
    font-family: var(--mlab-edit-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    flex: 0 0 3.6rem;
}
.mlab-finding--high   .mlab-finding-sev { color: #b91c1c; }
.mlab-finding--medium .mlab-finding-sev { color: #b45309; }
.mlab-finding--low    .mlab-finding-sev { color: #475569; }

.mlab-finding-title { flex: 1 1 auto; }
.mlab-finding-link {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--mlab-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--mlab-edit-hairline-strong);
}
.mlab-finding-link:hover { color: var(--ins-primary); }

.mlab-finding-empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(22,163,74,.22);
    background: rgba(22,163,74,.08);
    border-radius: 10px;
    color: #15803d;
    font-size: .88rem;
}
.mlab-finding-empty i { width: 16px; height: 16px; }

/* The report is a document: it should print like one. */
@media print {
    .mlab-report { grid-template-columns: minmax(0, 1fr); }
    .mlab-report-rail { display: none; }
    .mlab-report-section { break-inside: avoid; border-radius: 0; }
    .mlab-subblock--fold > .mlab-subblock-body { display: block !important; }
}

/* Small score ring, for a ring inside a card rather than a page hero.
   ──────────────────────────────────────────────────────────────────
   The full ring is 104px, sized to sit beside a title and a paragraph. In the
   RedKit dashboard's three-up grid it crowded the domain name into an ellipsis,
   which is the one thing on the card you actually need to read. Same drawing,
   two thirds of the size; the punched-out centre scales with it or the arc
   reads as a disc. */
.mlab-score-ring--sm { width: 64px; height: 64px; }
.mlab-score-ring--sm::after { inset: 6px; }
.mlab-score-ring--sm .mlab-score-ring-num { font-size: 1rem; }
.mlab-score-ring--sm .mlab-score-ring-max { font-size: .5rem; }

/* A single big number in a stat tile.
   ────────────────────────────────────
   The RedKit dashboard used `<h2 class="fw-bold">`, which borrows a heading
   level for something that is not a heading and inherits the heading font
   scale. The tiles next to it carry a verdict pill instead, so this only needs
   to match their weight. */
.mlab-stat-figure {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ins-body-color);
}

/* Breadcrumb in the editorial hero (cheat sheets, comparisons).
   ──────────────────────────────────────────────────────────────
   The /tool/ pages already showed a crumb above their title, styled under
   `.mlab-tool-header .breadcrumb-mini` in mlab-custom.css. The cheat sheets and
   comparisons use the centred `.mlab-hero` instead, so they matched none of
   those selectors and shipped no crumb at all. Same type treatment, restated
   for this container rather than widened there: the hero is centred and sits
   under the badge, so it needs its own margins. */
.mlab-hero .breadcrumb-mini {
    font-size: 0.72rem;
    opacity: 0.55;
    margin: 0.75rem 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mlab-hero .breadcrumb-mini a {
    color: inherit;
    text-decoration: none;
}

.mlab-hero .breadcrumb-mini a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ── Integrations: "request an integration" banner ─────────────────────── */
.mlab-request-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 1.9rem 1.75rem;
    border: 1px solid var(--mlab-edit-hairline);
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(217, 119, 6, 0.07), transparent 55%),
        var(--ins-body-bg, #fff);
}
.mlab-request-banner-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.mlab-request-banner-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.mlab-request-banner-steps {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.75rem;
    border-left: 1px solid var(--mlab-edit-hairline);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
}
.mlab-request-banner-steps li { display: flex; gap: .85rem; align-items: baseline; }
.mlab-request-banner-steps strong {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ins-body-color, #111827);
    margin-bottom: .15rem;
}
.mlab-request-banner-steps li span:not(.mlab-report-section-num) {
    display: block;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--mlab-text-secondary);
}
@media (max-width: 767.98px) {
    .mlab-request-banner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.25rem; }
    .mlab-request-banner-steps {
        padding: 1.25rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--mlab-edit-hairline);
    }
}

/* Dashboard: terms update notice. Same grid as the request banner, plus a
   dismiss button in the corner. */
.mlab-terms-banner { position: relative; }
.mlab-terms-banner-close {
    position: absolute; top: .75rem; right: .75rem;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent;
    color: var(--mlab-text-secondary);
    cursor: pointer;
}
.mlab-terms-banner-close:hover,
.mlab-terms-banner-close:focus-visible {
    border-color: var(--mlab-edit-hairline);
    color: var(--ins-body-color, #111827);
    outline: none;
}
.mlab-terms-banner-close svg { width: 16px; height: 16px; }
.mlab-terms-banner .mlab-request-banner-main { padding-right: 1.5rem; }

/* Domain scan still running. Deliberately loud: the neutral public banner read as
   "done", and a half-finished report with no warning looks like a clean one.
   Live: page_is_loading.html updates the count, bar and parts every poll, and a
   pill follows the reader once the banner scrolls out of view. */
.mlab-scan-live {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #78350f;
    font-size: .88rem; line-height: 1.55;
    animation: mlab-scan-live-call 1.6s ease-out 2;
}
.mlab-scan-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mlab-scan-live strong { font-size: 1rem; color: #78350f; }
.mlab-scan-live p { color: #92400e; font-size: .84rem; }
.mlab-scan-live-count {
    font-family: var(--mlab-edit-mono); font-size: .72rem; font-weight: 600;
    padding: .1rem .5rem; border-radius: 999px;
    background: rgba(217,119,6,.15); color: #92400e;
}
.mlab-scan-live-pulse {
    position: relative; flex: 0 0 auto;
    width: 10px; height: 10px; border-radius: 50%;
    background: #d97706;
}
.mlab-scan-live-pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid #d97706;
    animation: mlab-scan-live-ping 1.6s ease-out infinite;
}
.mlab-scan-live-bar {
    height: 6px; margin: .85rem 0 .75rem;
    border-radius: 999px; overflow: hidden;
    background: rgba(217,119,6,.18);
}
.mlab-scan-live-fill {
    display: block; height: 100%; min-width: 6px; border-radius: inherit;
    background: #d97706 repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,.28) 6px 12px);
    background-size: 17px 17px;
    animation: mlab-scan-live-stripes .8s linear infinite;
    transition: width .6s ease;
}
.mlab-scan-live-parts {
    display: flex; flex-wrap: wrap; gap: .35rem;
    list-style: none; padding: 0; margin: 0 0 .75rem;
}
.mlab-scan-live-part {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--mlab-edit-mono); font-size: .68rem;
    padding: .15rem .5rem; border-radius: 999px;
    border: 1px solid rgba(217,119,6,.45); color: #92400e;
    background: rgba(255,255,255,.5);
}
.mlab-scan-live-part-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #d97706;
    animation: mlab-scan-live-blink 1.1s ease-in-out infinite;
}
.mlab-scan-live-part.is-done { border-color: transparent; background: transparent; color: rgba(120,53,15,.55); }
.mlab-scan-live-part.is-done .mlab-scan-live-part-dot { animation: none; background: rgba(120,53,15,.35); }

/* the floating follower */
.mlab-scan-pill {
    position: fixed; left: 50%; bottom: 1.25rem; z-index: 1040;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .55rem .95rem; border: 0; border-radius: 999px;
    background: #1c1917; color: #fff;
    font-size: .82rem; font-weight: 600;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    cursor: pointer;
    animation: mlab-scan-pill-in .3s ease-out;
}
.mlab-scan-pill[hidden] { display: none; }
.mlab-scan-pill-count { font-family: var(--mlab-edit-mono); font-size: .72rem; opacity: .75; }
.mlab-scan-pill-bar { width: 64px; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.18); }

html[data-bs-theme=dark] .mlab-scan-live {
    background: rgba(217,119,6,.16);
    border-color: rgba(251,191,36,.35);
    color: #fde68a;
}
html[data-bs-theme=dark] .mlab-scan-live strong { color: #fef3c7; }
html[data-bs-theme=dark] .mlab-scan-live p { color: #fcd34d; }
html[data-bs-theme=dark] .mlab-scan-live-count { background: rgba(251,191,36,.18); color: #fde68a; }
html[data-bs-theme=dark] .mlab-scan-live-part { background: transparent; border-color: rgba(251,191,36,.4); color: #fde68a; }
html[data-bs-theme=dark] .mlab-scan-live-part.is-done { border-color: transparent; color: rgba(253,230,138,.5); }
html[data-bs-theme=dark] .mlab-scan-live-part.is-done .mlab-scan-live-part-dot { background: rgba(253,230,138,.35); }
html[data-bs-theme=dark] .mlab-scan-pill { background: #fef3c7; color: #1c1917; }
html[data-bs-theme=dark] .mlab-scan-pill-bar { background: rgba(0,0,0,.15); }

@keyframes mlab-scan-live-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes mlab-scan-live-blink { 50% { opacity: .3; } }
@keyframes mlab-scan-live-stripes { to { background-position: 17px 0; } }
@keyframes mlab-scan-live-call { 0% { box-shadow: 0 0 0 0 rgba(217,119,6,.45); } 100% { box-shadow: 0 0 0 14px rgba(217,119,6,0); } }
@keyframes mlab-scan-pill-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .mlab-scan-live, .mlab-scan-live-pulse::after, .mlab-scan-live-fill,
    .mlab-scan-live-part-dot, .mlab-scan-pill { animation: none; }
}

/* Score held back while the scan runs: a green ring on half the data is false comfort. */
.mlab-score-ring--pending { background: conic-gradient(var(--mlab-edit-hairline) 0 100%); }
.mlab-score-ring--pending .mlab-score-ring-num { color: var(--mlab-text-secondary); }

/* ── Pricing: Enterprise and public sector segments ─────────────────────── */
/* Same family as .mlab-scan-live: tinted fill, hairline border, a heavy left
   rule and a solid icon tile, one accent per audience. */
.mlab-seg-head { margin-bottom: 1.5rem; }
.mlab-seg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mlab-seg {
    --seg: #d97706; --seg-bg: #fffbeb; --seg-line: #fcd34d; --seg-ink: #92400e;
    display: flex; flex-direction: column;
    padding: 1.5rem 1.5rem 1.4rem;
    border-radius: 14px;
    background: var(--seg-bg);
    border: 1px solid var(--seg-line);
    border-left: 4px solid var(--seg);
}
.mlab-seg--public { --seg: #2563eb; --seg-bg: #eff6ff; --seg-line: #bfdbfe; --seg-ink: #1e40af; }
.mlab-seg-top { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.mlab-seg-icon {
    width: 42px; height: 42px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 10px; background: var(--seg); color: #fff;
}
.mlab-seg-icon svg { width: 20px; height: 20px; }
.mlab-seg-kicker {
    font-family: var(--mlab-edit-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--seg-ink);
}
.mlab-seg-title { font-size: 1.05rem; font-weight: 700; margin: .1rem 0 0; color: var(--ins-body-color, #111827); }
.mlab-seg-lead { font-size: .88rem; line-height: 1.55; color: var(--mlab-text-secondary); margin: 0 0 1.1rem; }
.mlab-seg-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.mlab-seg-list li { display: flex; gap: .7rem; align-items: flex-start; }
.mlab-seg-list li > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .15rem; color: var(--seg); }
.mlab-seg-list strong { display: block; font-size: .87rem; font-weight: 600; color: var(--ins-body-color, #111827); }
.mlab-seg-list span { display: block; font-size: .8rem; line-height: 1.45; color: var(--mlab-text-secondary); }
.mlab-seg-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.mlab-seg-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.mlab-seg-trust {
    list-style: none; margin: 1rem 0 0; padding: 1rem 1.25rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
    border: 1px solid var(--mlab-edit-hairline); border-radius: 14px;
}
.mlab-seg-trust li { display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--mlab-text-secondary); }
.mlab-seg-trust svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .1rem; color: #d97706; }
.mlab-seg-trust strong { color: var(--ins-body-color, #111827); font-weight: 600; }
html[data-bs-theme=dark] .mlab-seg { --seg-bg: rgba(217,119,6,.10); --seg-line: rgba(251,191,36,.30); --seg: #f59e0b; --seg-ink: #fcd34d; }
html[data-bs-theme=dark] .mlab-seg--public { --seg-bg: rgba(37,99,235,.12); --seg-line: rgba(96,165,250,.30); --seg: #3b82f6; --seg-ink: #93c5fd; }
@media (max-width: 991.98px) {
    .mlab-seg-grid, .mlab-seg-trust { grid-template-columns: 1fr; }
}

/* ── Redkit public page (/redkit) ───────────────────────────────────────── */
.mlab-rk-hero {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(217, 119, 6, 0.07), transparent 55%),
        var(--ins-body-bg, #fff);
}
.mlab-rk-lead { font-size: 1.02rem; font-weight: 600; color: var(--ins-body-color, #111827); margin-bottom: .5rem; }

.mlab-rk-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
}
.mlab-rk-steps li {
    display: flex; flex-direction: column; gap: .35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--mlab-edit-hairline); border-radius: 12px;
}
.mlab-rk-steps strong { font-size: .92rem; font-weight: 600; color: var(--ins-body-color, #111827); }
.mlab-rk-steps li > span:not(.mlab-report-section-num) { font-size: .82rem; line-height: 1.5; color: var(--mlab-text-secondary); }

.mlab-rk-facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.25rem;
    margin-bottom: 1.25rem;
}
.mlab-rk-facts > div { padding: .55rem 0; border-top: 1px solid var(--mlab-edit-hairline); }

.mlab-rk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.mlab-rk-mod {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .85rem 1rem;
    border: 1px solid var(--mlab-edit-hairline); border-radius: 12px;
    transition: border-color .15s ease;
}
.mlab-rk-mod:hover { border-color: var(--mlab-edit-hairline-strong); }
.mlab-rk-mod-icon {
    width: 32px; height: 32px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(217, 119, 6, .10); color: #d97706;
}
.mlab-rk-mod-icon svg { width: 16px; height: 16px; }
.mlab-rk-mod-title {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    font-size: .88rem; font-weight: 600; color: var(--ins-body-color, #111827);
}
.mlab-rk-mod-desc { font-size: .8rem; line-height: 1.5; color: var(--mlab-text-secondary); margin-top: .2rem; }

.mlab-rk-preset-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.mlab-rk-preset-top svg { width: 16px; height: 16px; color: #d97706; }
.mlab-rk-preset-top strong { font-size: .92rem; color: var(--ins-body-color, #111827); }

.mlab-rk-safety {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem;
}
.mlab-rk-safety li { display: flex; gap: .7rem; align-items: flex-start; }
.mlab-rk-safety li > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .15rem; color: #d97706; }
.mlab-rk-safety strong { display: block; font-size: .88rem; font-weight: 600; color: var(--ins-body-color, #111827); }
.mlab-rk-safety span { display: block; font-size: .8rem; line-height: 1.5; color: var(--mlab-text-secondary); }
.mlab-rk-safety code, .mlab-rk-faq code { font-size: .76rem; word-break: break-word; }

.mlab-rk-plans {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--mlab-edit-hairline); border-radius: 12px; overflow: hidden;
}
.mlab-rk-plans > div { padding: 1rem 1.1rem; }
.mlab-rk-plans > div + div { border-left: 1px solid var(--mlab-edit-hairline); }
.mlab-rk-plan-v { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-top: .3rem; color: var(--ins-body-color, #111827); }
.mlab-rk-plans span { font-size: .78rem; color: var(--mlab-text-secondary); }

.mlab-rk-faq details { border-top: 1px solid var(--mlab-edit-hairline); }
.mlab-rk-faq details:last-child { border-bottom: 1px solid var(--mlab-edit-hairline); }
.mlab-rk-faq summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 0;
    font-size: .9rem; font-weight: 600; color: var(--ins-body-color, #111827);
}
.mlab-rk-faq summary::-webkit-details-marker { display: none; }
.mlab-rk-faq summary::after { content: "+"; font-family: var(--mlab-edit-mono); color: var(--mlab-text-secondary); }
.mlab-rk-faq details[open] summary::after { content: "−"; }
.mlab-rk-faq p { font-size: .85rem; line-height: 1.6; color: var(--mlab-text-secondary); margin: 0 0 1rem; max-width: 64ch; }

/* The three scan types, under the hero */
.mlab-rk-types {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem;
    margin-top: 1.5rem;
}
.mlab-rk-type {
    display: flex; gap: .75rem; align-items: center;
    padding: .85rem 1rem;
    border: 1px solid var(--mlab-edit-hairline); border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease;
}
.mlab-rk-type:hover { border-color: var(--accent, #d97706); }
.mlab-rk-type strong { display: block; font-size: .9rem; font-weight: 600; color: var(--ins-body-color, #111827); }
.mlab-rk-type span { display: block; font-size: .78rem; line-height: 1.4; color: var(--mlab-text-secondary); }

/* Families inside a scan type */
.mlab-rk-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.mlab-rk-cats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mlab-rk-cat { padding: 1rem 1.1rem; border: 1px solid var(--mlab-edit-hairline); border-radius: 12px; }
.mlab-rk-cat p { font-size: .8rem; line-height: 1.5; color: var(--mlab-text-secondary); margin: 0; }
@media (max-width: 1199.98px) and (min-width: 992px) { .mlab-rk-cats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home page teaser pointing at /redkit */
.mlab-rk-teaser { align-items: center; }
.mlab-rk-teaser-types { display: flex; flex-direction: column; gap: .6rem; }
.mlab-rk-teaser .mlab-rk-type { background: var(--ins-body-bg, #fff); }

html[data-bs-theme=dark] .mlab-rk-mod-icon { background: rgba(245, 158, 11, .14); color: #f59e0b; }

@media (max-width: 991.98px) {
    .mlab-rk-steps, .mlab-rk-cats, .mlab-rk-cats--4, .mlab-rk-types { grid-template-columns: 1fr; }
    .mlab-rk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mlab-rk-plans > div:nth-child(3) { border-left: 0; }
    .mlab-rk-plans > div:nth-child(n+3) { border-top: 1px solid var(--mlab-edit-hairline); }
}
@media (max-width: 767.98px) {
    .mlab-rk-grid, .mlab-rk-safety, .mlab-rk-facts { grid-template-columns: 1fr; }
}

/* ── About page: quiet editorial, left aligned, amber accents ──────────── */
.mlab-about-hero {
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid var(--mlab-edit-hairline);
    background: radial-gradient(32% 55% at 74% 42%, rgba(217, 119, 6, 0.08), transparent 70%);
}
.mlab-about-title {
    font-weight: 500;
    font-size: clamp(2.4rem, 5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ins-body-color, #111827);
    margin: 0 0 1.25rem;
}
.mlab-about-title em { font-style: italic; color: var(--mlab-text-secondary); }
.mlab-about-lead {
    max-width: 58ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--mlab-text-secondary);
    margin-bottom: 1.75rem;
}
.mlab-about-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 0;
    font-family: var(--mlab-edit-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mlab-text-secondary);
}
.mlab-about-meta span + span::before { content: "·"; margin: 0 .7rem; opacity: .5; }

.mlab-about-block { padding: 3rem 0 0; }
.mlab-about-block-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding-bottom: .9rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--mlab-edit-hairline);
}
.mlab-about-block-head .mlab-report-section-title { margin: 0; }

/* Beliefs: three columns, roman numerals in serif */
.mlab-about-beliefs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
.mlab-about-belief-num {
    display: block;
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1;
    color: #d97706;
    margin-bottom: .75rem;
}
.mlab-about-belief h3 {
    font-size: .98rem;
    font-weight: 600;
    color: var(--ins-body-color, #111827);
    margin-bottom: .45rem;
}
.mlab-about-belief p {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--mlab-text-secondary);
    margin: 0;
}

/* Pull quote */
.mlab-about-quote {
    margin: 3.5rem 0 0;
    padding: 2.75rem 0;
    border-top: 1px solid var(--mlab-edit-hairline);
    border-bottom: 1px solid var(--mlab-edit-hairline);
    text-align: center;
}
.mlab-about-quote blockquote {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ins-body-color, #111827);
    margin: 0 0 .9rem;
}
.mlab-about-quote blockquote em { font-style: italic; color: #d97706; }
.mlab-about-quote figcaption {
    font-family: var(--mlab-edit-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mlab-text-secondary);
}

/* Platforms: one row per product, hairline separated */
.mlab-about-list { list-style: none; margin: 0; padding: 0; }
.mlab-about-list li + li { border-top: 1px solid var(--mlab-edit-hairline); }
.mlab-about-list a {
    display: grid;
    grid-template-columns: 9rem 11rem minmax(0, 1fr) 1rem;
    align-items: baseline;
    gap: 1rem;
    padding: .95rem .25rem;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, padding .15s ease;
}
.mlab-about-list a:hover { background: var(--muted, rgba(0, 0, 0, .03)); padding-left: .75rem; }
.mlab-about-list-k {
    font-family: var(--mlab-edit-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mlab-text-secondary);
}
.mlab-about-list-name { font-weight: 600; font-size: .92rem; color: var(--ins-body-color, #111827); }
.mlab-about-list-desc { font-size: .86rem; color: var(--mlab-text-secondary); }
.mlab-about-list i[data-lucide], .mlab-about-list svg {
    width: 14px;
    height: 14px;
    color: var(--mlab-text-secondary);
    align-self: center;
    transition: color .15s ease, transform .15s ease;
}
.mlab-about-list a:hover svg { color: #d97706; transform: translate(2px, -2px); }

.mlab-request-banner-steps strong a { color: inherit; text-decoration: none; }
.mlab-request-banner-steps strong a:hover { color: #d97706; }

@media (max-width: 767.98px) {
    .mlab-about-hero { padding: 2rem 0 1.75rem; }
    .mlab-about-beliefs { grid-template-columns: 1fr; gap: 1.5rem; }
    .mlab-about-list a { grid-template-columns: minmax(0, 1fr) 1rem; gap: .2rem .75rem; }
    .mlab-about-list-k, .mlab-about-list-desc { grid-column: 1; }
    .mlab-about-list-name { grid-column: 1; grid-row: 2; }
    .mlab-about-list-desc { grid-row: 3; }
    .mlab-about-list svg { grid-column: 2; grid-row: 1 / 4; }
}
@media (prefers-reduced-motion: reduce) {
    .mlab-about-list a, .mlab-about-list svg { transition: none; }
}

/* About: "signal over noise" trace between the hero and the beliefs */
.mlab-about-signal { padding: 3.5rem 0 1rem; }
.mlab-about-signal svg { display: block; width: 100%; height: auto; overflow: visible; }
.mlab-about-signal path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.mlab-about-signal-noise {
    stroke: var(--mlab-text-secondary);
    stroke-opacity: .45;
    stroke-width: 1.25;
}
.mlab-about-signal-spike { stroke: #d97706; stroke-width: 2; }
.mlab-about-signal-dot { fill: #d97706; opacity: 0; }
.mlab-about-signal-ping {
    fill: none;
    stroke: #d97706;
    stroke-width: 1.25;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.mlab-about-signal.is-drawn .mlab-about-signal-noise {
    animation: mlab-about-draw 2.2s cubic-bezier(.65, 0, .35, 1) forwards;
}
.mlab-about-signal.is-drawn .mlab-about-signal-spike {
    animation: mlab-about-draw .7s cubic-bezier(.3, 0, .2, 1) 1.75s forwards;
}
.mlab-about-signal.is-drawn .mlab-about-signal-dot {
    animation: mlab-about-fade .3s ease 2.3s forwards;
}
.mlab-about-signal.is-drawn .mlab-about-signal-ping {
    animation: mlab-about-ping 2.4s ease-out 2.5s infinite;
}
@keyframes mlab-about-draw { to { stroke-dashoffset: 0; } }
@keyframes mlab-about-fade { to { opacity: 1; } }
@keyframes mlab-about-ping {
    0%   { opacity: .7; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(3.2); }
    100% { opacity: 0;  transform: scale(3.2); }
}

.mlab-about-signal-labels {
    position: relative;
    height: 1rem;
    margin-top: .6rem;
    font-family: var(--mlab-edit-mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mlab-text-secondary);
}
.mlab-about-signal-labels span { position: absolute; left: 0; opacity: 0; transition: opacity .6s ease .3s; }
/* 880 / 1200 of the width: centred under the spike */
.mlab-about-signal-labels .mlab-about-signal-label-signal {
    left: 73.33%;
    transform: translateX(-50%);
    color: #d97706;
    transition-delay: 2.3s;
}
.mlab-about-signal.is-drawn .mlab-about-signal-labels span { opacity: 1; }

/* The trace now carries the separation, so the beliefs start closer */
.mlab-about-signal + .mlab-about-block { padding-top: 1.5rem; }

@media (max-width: 767.98px) {
    .mlab-about-signal { padding: 2.25rem 0 .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mlab-about-signal path { stroke-dashoffset: 0; animation: none !important; }
    .mlab-about-signal-dot, .mlab-about-signal-labels span { opacity: 1; animation: none !important; transition: none; }
    .mlab-about-signal-ping { display: none; }
}

/* ── Home: seasonal decoration on the search card (mlab-season.js) ───────
   The layer is a zero-height strip on the card's top edge: y=0 is the
   border, decorations above it use bottom:0, ones hanging into the card
   use top:0. It never takes clicks and sits above the card. */
.mlab-season-host { position: relative; }
/* a little more air above the card while a season is on, for the decor */
.mlab-season-host.is-seasonal { margin-top: 1.25rem; }
.mlab-season {
    position: absolute;
    inset: 0 0 auto 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}
.mlab-season svg { display: block; overflow: visible; }

/* Halloween: pumpkin on the edge, spider on a thread, a bat crossing */
.mlab-season--halloween .mlab-season-pumpkin {
    position: absolute;
    left: 7%;
    bottom: -4px;
    width: 46px;
    transform-origin: 50% 100%;
    animation: mlab-hw-wobble 6s ease-in-out infinite;
}
.mlab-season-pumpkin .body { fill: #e8730c; }
.mlab-season-pumpkin .body.mid { fill: #f38a1f; }
.mlab-season-pumpkin .stem { fill: #4d7c0f; }
.mlab-season-pumpkin .face {
    fill: #fde68a;
    filter: drop-shadow(0 0 2px rgba(253, 224, 71, .9));
    animation: mlab-hw-flicker 3.2s steps(1, end) infinite;
}

.mlab-season--halloween .mlab-season-spider {
    position: absolute;
    right: 9%;
    top: 0;
    width: 26px;
    transform-origin: 50% 0;
    animation: mlab-hw-swing 4.5s ease-in-out infinite;
}
.mlab-season-spider .thread {
    display: block;
    width: 1px;
    height: 10px;
    margin: 0 auto;
    background: var(--mlab-text-secondary);
    opacity: .55;
    transform-origin: 50% 0;
    animation: mlab-hw-drop 9s cubic-bezier(.45, 0, .25, 1) infinite;
}
.mlab-season-spider svg {
    width: 26px;
    margin-top: -2px;
    animation: mlab-hw-follow 9s cubic-bezier(.45, 0, .25, 1) infinite;
}
.mlab-season-spider .body { fill: var(--ins-body-color, #111827); }
.mlab-season-spider .legs path {
    fill: none;
    stroke: var(--ins-body-color, #111827);
    stroke-width: 1.4;
    stroke-linecap: round;
}
.mlab-season-spider .eye { fill: #f97316; }

.mlab-season--halloween .mlab-season-bat {
    position: absolute;
    bottom: 16px; /* in the strip the host margin opens above the card */
    left: 0;
    width: 30px;
    opacity: 0;
    animation: mlab-hw-fly 16s linear 3s infinite;
}
.mlab-season-bat svg { width: 30px; }
.mlab-season-bat path { fill: var(--ins-body-color, #111827); }
.mlab-season-bat .wing {
    transform-box: fill-box;
    animation: mlab-hw-flap .22s ease-in-out infinite alternate;
}
.mlab-season-bat .wing.l { transform-origin: 100% 40%; }
.mlab-season-bat .wing.r { transform-origin: 0 40%; }

@keyframes mlab-hw-wobble {
    0%, 100% { transform: rotate(0); }
    45% { transform: rotate(0); }
    50% { transform: rotate(-4deg); }
    55% { transform: rotate(3deg); }
    60% { transform: rotate(0); }
}
@keyframes mlab-hw-flicker {
    0%, 100% { opacity: 1; }
    37% { opacity: .55; }
    39% { opacity: 1; }
    71% { opacity: .7; }
    73% { opacity: 1; }
}
@keyframes mlab-hw-swing {
    0%, 100% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
}
/* the spider drops a little, pauses, climbs back: thread stretches, body
   follows (10px * 2.4 = +14px). Kept short so it never reaches the input. */
@keyframes mlab-hw-drop {
    0%, 30% { transform: scaleY(1); }
    45%, 62% { transform: scaleY(2.4); }
    80%, 100% { transform: scaleY(1); }
}
@keyframes mlab-hw-follow {
    0%, 30% { transform: translateY(0); }
    45%, 62% { transform: translateY(14px); }
    80%, 100% { transform: translateY(0); }
}
@keyframes mlab-hw-fly {
    0% { opacity: 0; transform: translate(-40px, 0); }
    3% { opacity: 1; }
    15% { transform: translate(calc(var(--mlab-season-w, 900px) * .35), -14px); }
    27% { opacity: 1; transform: translate(calc(var(--mlab-season-w, 900px) * .7), 6px); }
    32% { opacity: 0; transform: translate(calc(var(--mlab-season-w, 900px) + 40px), -10px); }
    100% { opacity: 0; transform: translate(calc(var(--mlab-season-w, 900px) + 40px), -10px); }
}
@keyframes mlab-hw-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(-.35); }
}

/* Data Privacy Day: bits slide along the edge into a padlock inside the
   pill; when they arrive it snaps shut, turns amber, pulses, then reopens.
   One 6s cycle: open + bits flowing (0-55%), shut (58-92%), reopen. */
.mlab-season--privacy .mlab-season-pill { padding-left: .55rem; }
.mlab-season-lock { position: relative; width: 13px; height: 16px; flex: none; }
.mlab-season-lock svg { width: 13px; height: 16px; }
.mlab-season-lock .shackle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    animation: mlab-pv-shackle 6s cubic-bezier(.5, 0, .3, 1.4) infinite;
}
.mlab-season-lock .body {
    fill: var(--mlab-text-secondary);
    animation: mlab-pv-body 6s ease infinite;
}
.mlab-season-lock .hole { fill: var(--mlab-paper, #fff); }
.mlab-season-lock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 62%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 1.5px solid #d97706;
    opacity: 0;
    animation: mlab-pv-ring 6s ease-out infinite;
}

.mlab-season--privacy .mlab-season-bit {
    position: absolute;
    left: 50%;
    bottom: 3px;
    font-family: var(--mlab-edit-mono);
    font-size: .62rem;
    line-height: 1;
    color: #d97706;
    opacity: 0;
    animation: mlab-pv-bit 6s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes mlab-pv-shackle {
    0%, 55% { transform: translateY(-3px); }
    58%, 92% { transform: translateY(0); }
    96%, 100% { transform: translateY(-3px); }
}
@keyframes mlab-pv-body {
    0%, 56% { fill: var(--mlab-text-secondary); }
    59%, 90% { fill: #d97706; }
    96%, 100% { fill: var(--mlab-text-secondary); }
}
@keyframes mlab-pv-ring {
    0%, 57% { opacity: 0; transform: scale(.5); }
    59% { opacity: .8; }
    75%, 100% { opacity: 0; transform: scale(2.2); }
}
/* from a point along the edge (--from, signed) to the pill side (--to) */
@keyframes mlab-pv-bit {
    0% { opacity: 0; transform: translateX(var(--from)); }
    8% { opacity: .85; }
    40% { opacity: .85; }
    48%, 100% { opacity: 0; transform: translateX(var(--to)); }
}

/* Pi Day: a pi wheel rolls along the edge (no slipping, the JS sets the
   angle from the distance) and leaves the digits of pi behind it.
   9s cycle: roll (0-62%), rest at the end (62-80%), fade out, start over. */
.mlab-season--pi .mlab-season-pi {
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid #d97706;
    border-radius: 50%;
    background: var(--mlab-paper, #fff);
    display: grid;
    place-items: center;
    animation: mlab-pi-roll 9s linear infinite;
}
.mlab-season-pi span {
    font-family: var(--mlab-edit-serif, Georgia), serif;
    font-size: .8rem;
    line-height: 1;
    font-weight: 600;
    color: var(--ins-body-color, #111827);
    transform: translateY(-1px);
}
.mlab-season--pi .mlab-season-pi-trail {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 3px;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--mlab-edit-mono);
    font-size: .62rem;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--mlab-text-secondary);
    /* revealed up to the wheel's centre as it rolls */
    clip-path: inset(0 100% 0 0);
    animation: mlab-pi-trail 9s linear infinite;
}

@keyframes mlab-pi-roll {
    0% { opacity: 0; transform: translateX(0) rotate(0); }
    3% { opacity: 1; }
    62%, 86% { opacity: 1; transform: translateX(var(--travel)) rotate(var(--turns)); }
    94%, 100% { opacity: 0; transform: translateX(var(--travel)) rotate(var(--turns)); }
}
@keyframes mlab-pi-trail {
    0% { opacity: 1; clip-path: inset(0 100% 0 0); }
    62%, 84% { opacity: 1; clip-path: inset(0 22px 0 0); }
    94%, 100% { opacity: 0; clip-path: inset(0 22px 0 0); }
}

/* Christmas: a light garland hanging just inside the card's top edge (drawn
   to its pixel width by the JS), and light snow in the strip above it. */
.mlab-season--christmas .mlab-season-garland { position: absolute; top: 0; left: 0; }
.mlab-season-garland .wire {
    fill: none;
    stroke: #166534;
    stroke-width: 1.4;
    stroke-opacity: .75;
}
.mlab-season-garland .cap { fill: #52525b; }
.mlab-season-garland .glass {
    animation: mlab-xm-blink 2.4s ease-in-out infinite;
}
.mlab-season-garland .b0 .glass { fill: #ef4444; --g: rgba(239, 68, 68, .85); }
.mlab-season-garland .b1 .glass { fill: #f59e0b; --g: rgba(245, 158, 11, .85); }
.mlab-season-garland .b2 .glass { fill: #22c55e; --g: rgba(34, 197, 94, .85); }
.mlab-season-garland .b3 .glass { fill: #3b82f6; --g: rgba(59, 130, 246, .85); }

.mlab-season--christmas .mlab-season-snow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    overflow: hidden;
    /* flakes fade in at the top and out as they reach the card */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.mlab-season-snow span {
    position: absolute;
    top: -6px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: #94a3b8;
    opacity: .75;
    animation: mlab-xm-fall linear infinite;
}
html[data-bs-theme=dark] .mlab-season-snow span { background: #f8fafc; opacity: .8; }

@keyframes mlab-xm-blink {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px var(--g)); }
    50% { opacity: .35; filter: none; }
}
@keyframes mlab-xm-fall {
    0% { transform: translate(0, 0); }
    25% { transform: translate(5px, 20px); }
    50% { transform: translate(-3px, 40px); }
    75% { transform: translate(4px, 60px); }
    100% { transform: translate(0, 80px); }
}

/* Valentine: small hearts drifting up from the edge, one heart beating on it */
.mlab-season--valentine .mlab-season-heart {
    position: absolute;
    bottom: 0;
    width: var(--size);
    opacity: 0;
    --rise: -50px; /* stays under the CTA buttons */
    animation: mlab-va-rise ease-in-out infinite;
}
.mlab-season-heart.h0 path { fill: #f43f5e; }
.mlab-season-heart.h1 path { fill: #f9a8d4; }
.mlab-season-heart.h2 path { fill: #e11d48; }

.mlab-season--valentine .mlab-season-beat {
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 22px;
    margin-left: -11px;
    filter: drop-shadow(0 2px 4px rgba(225, 29, 72, .35));
    animation: mlab-va-beat 1.6s ease-in-out infinite;
}
.mlab-season-beat path { fill: #e11d48; }

@keyframes mlab-va-rise {
    0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.6); }
    12% { opacity: .9; }
    50% { transform: translate(var(--sway), calc(var(--rise) / 2)) rotate(-8deg) scale(1); }
    85% { opacity: .55; }
    100% { opacity: 0; transform: translate(0, var(--rise)) rotate(6deg) scale(.9); }
}
/* lub-dub: two beats then a rest */
@keyframes mlab-va-beat {
    0%, 40%, 100% { transform: scale(1); }
    10% { transform: scale(1.22); }
    20% { transform: scale(1.02); }
    30% { transform: scale(1.16); }
}

/* Sysadmin Day: a small rack on the edge, LEDs blinking out of step, and a
   coffee mug next to it, steaming. */
.mlab-season--sysadmin .mlab-season-desk {
    position: absolute;
    left: 6%;
    bottom: -1px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.mlab-season-desk .rack { width: 46px; }
.mlab-season-desk .unit { fill: #27272a; stroke: #52525b; stroke-width: .8; }
.mlab-season-desk .vent { stroke: #52525b; stroke-width: .9; stroke-linecap: round; }
.mlab-season-desk .led.ok { fill: #22c55e; animation: mlab-sa-led 1.7s steps(1, end) infinite; }
.mlab-season-desk .led.io { fill: #f59e0b; animation: mlab-sa-io .9s steps(1, end) infinite; }
.mlab-season-desk .led.l1 { animation-delay: -.6s; }
.mlab-season-desk .led.l2 { animation-delay: -1.1s; animation-duration: 1.3s; }
.mlab-season-desk .mug { width: 26px; }
.mlab-season-desk .cup { fill: #fafafa; stroke: #a1a1aa; stroke-width: 1; }
.mlab-season-desk .handle { fill: none; stroke: #a1a1aa; stroke-width: 1.6; }
.mlab-season-desk .coffee { fill: #78350f; }
.mlab-season-desk .stripe { stroke: #d97706; stroke-width: 2; }
.mlab-season-desk .steam path {
    fill: none;
    stroke: var(--mlab-text-secondary);
    stroke-width: 1.3;
    stroke-linecap: round;
    opacity: 0;
    animation: mlab-sa-steam 3s ease-out infinite;
}
.mlab-season-desk .steam path:nth-child(2) { animation-delay: 1s; }
.mlab-season-desk .steam path:nth-child(3) { animation-delay: 2s; }
.mlab-season-desk .tag {
    position: absolute;
    left: 0;
    bottom: calc(100% + 3px);
    font-family: var(--mlab-edit-mono);
    font-size: .56rem;
    letter-spacing: .06em;
    color: var(--mlab-text-secondary);
}

@keyframes mlab-sa-led {
    0%, 100% { opacity: 1; }
    8% { opacity: .25; }
    12% { opacity: 1; }
    55% { opacity: .25; }
    60% { opacity: 1; }
}
@keyframes mlab-sa-io {
    0%, 100% { opacity: .2; }
    20% { opacity: 1; }
    30% { opacity: .2; }
    65% { opacity: 1; }
    72% { opacity: .2; }
}
@keyframes mlab-sa-steam {
    0% { opacity: 0; transform: translate(0, 4px); }
    25% { opacity: .7; }
    100% { opacity: 0; transform: translate(1.5px, -7px); }
}

/* World Password Day: a tiny password field in the pill. It types
   "password123" (meter red, WEAK), wipes it, then types a long masked one
   (meter green, STRONG). 10s cycle, all CSS: mono font so ch widths + steps()
   give a typewriter, the typed span's right border is the caret. */
.mlab-season-pw .key { width: 14px; height: 14px; flex: none; }
.mlab-season-pw .key circle,
.mlab-season-pw .key path { fill: none; stroke: #d97706; stroke-width: 1.6; stroke-linecap: round; }
.mlab-season-pw .field {
    position: relative;
    width: 15ch;
    height: 1.2em;
    padding: 0 .35rem;
    border-radius: 4px;
    background: var(--muted, rgba(0, 0, 0, .04));
    text-transform: none;
    letter-spacing: .02em;
    font-weight: 500;
}
.mlab-season-pw .weak,
.mlab-season-pw .strong {
    position: absolute;
    left: .35rem;
    top: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2em;
    border-right: 1.5px solid transparent;
}
.mlab-season-pw .weak { color: #ef4444; animation: mlab-pw-weak 10s infinite, mlab-pw-caret .8s step-end infinite; }
.mlab-season-pw .strong { color: var(--ins-body-color, #111827); animation: mlab-pw-strong 10s infinite, mlab-pw-caret .8s step-end infinite; }
.mlab-season-pw .meter {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--mlab-edit-hairline-strong);
    overflow: hidden;
    flex: none;
}
.mlab-season-pw .meter i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    animation: mlab-pw-meter 10s infinite;
}
.mlab-season-pw .verdict { position: relative; width: 8ch; height: 1.2em; }
.mlab-season-pw .verdict span { position: absolute; left: 0; top: 0; line-height: 1.2em; opacity: 0; }
.mlab-season-pw .v-weak { color: #ef4444; animation: mlab-pw-vweak 10s infinite; }
.mlab-season-pw .v-strong { color: #16a34a; animation: mlab-pw-vstrong 10s infinite; }

/* "password123": 11 chars typed 3-25%, held, wiped 33-40% */
@keyframes mlab-pw-weak {
    0%, 3% { width: 0; opacity: 1; animation-timing-function: steps(11, end); }
    25%, 33% { width: 11ch; animation-timing-function: steps(11, end); }
    40% { width: 0; opacity: 1; }
    /* gone outside its phase, or its caret would blink at the field start */
    41%, 100% { width: 0; opacity: 0; }
}
/* 14 masked chars typed 44-66%, held, then cleared at the end */
@keyframes mlab-pw-strong {
    0%, 42% { width: 0; opacity: 0; }
    43%, 44% { width: 0; opacity: 1; animation-timing-function: steps(14, end); }
    66%, 92% { width: 14ch; opacity: 1; }
    96% { width: 0; opacity: 1; }
    97%, 100% { width: 0; opacity: 0; }
}
@keyframes mlab-pw-caret {
    0%, 100% { border-right-color: transparent; }
    50% { border-right-color: currentColor; }
}
@keyframes mlab-pw-meter {
    0%, 3% { width: 0; background: #ef4444; }
    25%, 33% { width: 22%; background: #ef4444; }
    40%, 44% { width: 0; background: #f59e0b; }
    55% { width: 55%; background: #f59e0b; }
    66%, 92% { width: 100%; background: #22c55e; }
    97%, 100% { width: 0; background: #22c55e; }
}
@keyframes mlab-pw-vweak {
    0%, 22% { opacity: 0; }
    25%, 35% { opacity: 1; }
    38%, 100% { opacity: 0; }
}
@keyframes mlab-pw-vstrong {
    0%, 64% { opacity: 0; }
    67%, 91% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

/* April 1st: a paper fish taped over the card's top edge (poisson d'avril).
   It hangs from the tape, swings a little, flicks its tail now and then. */
.mlab-season--aprilfool .mlab-season-fish {
    position: absolute;
    right: 12%;
    top: -9px;
    width: 84px;
    transform-origin: 50% 5px;
    animation: mlab-af-swing 5s ease-in-out infinite;
}
.mlab-season-fish svg {
    position: relative;
    width: 84px;
    margin-top: 5px;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, .18));
}
.mlab-season-fish .paper { fill: #fb923c; stroke: #fff7ed; stroke-width: 1.2; stroke-linejoin: round; }
.mlab-season-fish .fin { fill: #f97316; }
.mlab-season-fish .scales { fill: none; stroke: #fed7aa; stroke-width: 1.2; stroke-linecap: round; }
.mlab-season-fish .eye { fill: #fff; }
.mlab-season-fish .pupil { fill: #1f2937; }
.mlab-season-fish .smile { fill: none; stroke: #9a3412; stroke-width: 1; stroke-linecap: round; }
.mlab-season-fish .tail {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: mlab-af-tail 5s ease-in-out infinite;
}
/* a strip of tape across the border, slightly crooked, translucent */
.mlab-season-fish .tape {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 32px;
    height: 12px;
    margin-left: -16px;
    background: rgba(254, 243, 199, .82);
    border-left: 1px dashed rgba(180, 140, 60, .35);
    border-right: 1px dashed rgba(180, 140, 60, .35);
    box-shadow: 0 1px 1px rgba(15, 23, 42, .08);
    transform: rotate(-6deg);
}

@keyframes mlab-af-swing {
    0%, 100% { transform: rotate(4deg); }
    50% { transform: rotate(-5deg); }
}
@keyframes mlab-af-tail {
    0%, 60%, 100% { transform: rotate(0); }
    66% { transform: rotate(-16deg); }
    72% { transform: rotate(12deg); }
    78% { transform: rotate(-6deg); }
    84% { transform: rotate(0); }
}

/* Easter: three painted eggs on the edge, a bunny peeking from behind the
   card. The burrow clips at the card border (y=0), the bunny slides up in it. */
.mlab-season--easter .mlab-season-eggs {
    position: absolute;
    left: 6%;
    bottom: -3px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}
.mlab-season-eggs .egg {
    width: 24px;
    transform-origin: 50% 100%;
}
.mlab-season-eggs .egg.e1 { width: 28px; animation: mlab-ea-wobble 5s ease-in-out infinite; }
.mlab-season-eggs .egg.e2 { width: 21px; animation: mlab-ea-wobble 5s ease-in-out 2.5s infinite; }
.mlab-season-eggs .shell { stroke: rgba(15, 23, 42, .14); stroke-width: .8; }
.mlab-season-eggs .e0 .shell { fill: #f9a8d4; }
.mlab-season-eggs .e1 .shell { fill: #93c5fd; }
.mlab-season-eggs .e2 .shell { fill: #fde68a; }
.mlab-season-eggs .pat { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.mlab-season-eggs .dot { fill: #fff; }
.mlab-season-eggs .band { fill: none; stroke: #86efac; stroke-width: 2; }

.mlab-season--easter .mlab-season-burrow {
    position: absolute;
    left: 76%;
    bottom: 0;
    width: 48px;
    height: 60px;
    overflow: hidden;
}
.mlab-season-bunny {
    position: absolute;
    left: 2px;
    bottom: -2px;
    width: 44px;
    transform: translateY(100%);
    animation: mlab-ea-peek 8s cubic-bezier(.34, 1.3, .64, 1) infinite;
}
.mlab-season-bunny .fur { fill: #fafafa; stroke: #a1a1aa; stroke-width: .9; }
.mlab-season-bunny .inner { fill: #f9a8d4; }
.mlab-season-bunny .eye { fill: #27272a; }
.mlab-season-bunny .cheek { fill: #fbcfe8; opacity: .8; }
.mlab-season-bunny .nose { fill: #f472b6; }
.mlab-season-bunny .ear { transform-box: fill-box; transform-origin: 50% 100%; }
.mlab-season-bunny .ear.l { animation: mlab-ea-ear 8s ease-in-out infinite; }
.mlab-season-bunny .ear.r { animation: mlab-ea-ear 8s ease-in-out .15s infinite; }
.mlab-season-bunny .eyes { transform-box: fill-box; transform-origin: center; animation: mlab-ea-blink 8s linear infinite; }
html[data-bs-theme=dark] .mlab-season-bunny .fur { fill: #e4e4e7; stroke: #71717a; }

/* hidden, pops up, looks around, ducks back down */
@keyframes mlab-ea-peek {
    0%, 18% { transform: translateY(100%); }
    26%, 70% { transform: translateY(0); }
    78%, 100% { transform: translateY(100%); }
}
@keyframes mlab-ea-ear {
    0%, 32% { transform: rotate(0); }
    35% { transform: rotate(-10deg); }
    38% { transform: rotate(4deg); }
    41%, 52% { transform: rotate(0); }
    55% { transform: rotate(8deg); }
    58%, 100% { transform: rotate(0); }
}
@keyframes mlab-ea-blink {
    0%, 45%, 48%, 100% { transform: scaleY(1); }
    46.5% { transform: scaleY(.1); }
}
@keyframes mlab-ea-wobble {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(-7deg); }
    88% { transform: rotate(5deg); }
    92% { transform: rotate(-2deg); }
}

/* New year: fireworks above the card, a year pill on its top border.
   One 5s cycle per firework: rocket rises (0-12%), bursts (12-44%), rests. */
.mlab-season--newyear .mlab-season-firework {
    position: absolute;
    bottom: 0;
    width: 0;
}
.mlab-season-firework .rocket {
    position: absolute;
    bottom: 0;
    left: -1px;
    width: 2px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(to top, transparent, var(--c));
    opacity: 0;
    animation: mlab-ny-rise 5s cubic-bezier(.2, .7, .4, 1) infinite;
    animation-delay: var(--d);
}
.mlab-season-firework .burst {
    position: absolute;
    bottom: 30px; /* sparks reach ~54px: clear of the CTA buttons */
    left: 0;
    width: 0;
    height: 0;
    animation: mlab-ny-sag 5s ease-out infinite;
    animation-delay: var(--d);
}
.mlab-season-firework .burst::before {
    content: "";
    position: absolute;
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c), transparent 65%);
    opacity: 0;
    animation: mlab-ny-flash 5s ease-out infinite;
    animation-delay: var(--d);
}
.mlab-season-firework .burst i {
    position: absolute;
    left: -1px;
    top: -3.5px;
    width: 2px;
    height: 7px;
    border-radius: 2px;
    background: var(--c);
    opacity: 0;
    animation: mlab-ny-spark 5s cubic-bezier(.15, .6, .35, 1) infinite;
    animation-delay: var(--d);
}
.mlab-season-firework .burst b {
    position: absolute;
    left: -1.5px;
    top: -1.5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--c);
    opacity: 0;
    animation: mlab-ny-dot 5s cubic-bezier(.15, .6, .35, 1) infinite;
    animation-delay: var(--d);
}

/* shared: a small mono pill straddling the card's top border, centred */
.mlab-season-pill {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .22rem .8rem;
    border: 1px solid var(--mlab-edit-hairline-strong);
    border-radius: 999px;
    background: var(--mlab-paper, #fff);
    font-family: var(--mlab-edit-mono);
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    color: var(--ins-body-color, #111827);
}
.mlab-season-year span {
    background: linear-gradient(100deg, var(--ins-body-color, #111827) 40%, #f59e0b 50%, var(--ins-body-color, #111827) 60%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mlab-ny-shine 4s ease-in-out infinite;
}
.mlab-season-year::before,
.mlab-season-year::after {
    content: "\2726";
    position: absolute;
    top: 50%;
    font-size: .55rem;
    color: #f59e0b;
    transform: translateY(-50%);
    animation: mlab-ny-twinkle 2.4s ease-in-out infinite;
}
.mlab-season-year::before { left: -1.1rem; }
.mlab-season-year::after { right: -1.1rem; animation-delay: 1.2s; }

@keyframes mlab-ny-rise {
    0% { opacity: 0; transform: translateY(0); }
    2% { opacity: 1; }
    11% { opacity: 1; transform: translateY(-26px); }
    13%, 100% { opacity: 0; transform: translateY(-30px); }
}
@keyframes mlab-ny-spark {
    0%, 11% { opacity: 0; transform: rotate(var(--a)) translateY(0) scaleY(.3); }
    13% { opacity: 1; }
    32% { opacity: .95; transform: rotate(var(--a)) translateY(-19px) scaleY(1); }
    46%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(-24px) scaleY(.5); }
}
@keyframes mlab-ny-dot {
    0%, 12% { opacity: 0; transform: rotate(var(--a)) translateY(0); }
    15% { opacity: 1; }
    34% { opacity: .9; transform: rotate(var(--a)) translateY(-11px); }
    50%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(-14px); }
}
@keyframes mlab-ny-flash {
    0%, 11% { opacity: 0; transform: scale(.4); }
    14% { opacity: .55; transform: scale(1); }
    28%, 100% { opacity: 0; transform: scale(1.6); }
}
/* a touch of gravity once the sparks are out */
@keyframes mlab-ny-sag {
    0%, 20% { transform: translateY(0); }
    44%, 100% { transform: translateY(6px); }
}
@keyframes mlab-ny-shine {
    0%, 20% { background-position: 100% 0; }
    60%, 100% { background-position: 0 0; }
}
@keyframes mlab-ny-twinkle {
    0%, 100% { opacity: .25; transform: translateY(-50%) scale(.7); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
}

@media (max-width: 575.98px) {
    .mlab-season--halloween .mlab-season-pumpkin { width: 36px; left: 5%; }
    .mlab-season--halloween .mlab-season-spider { right: 6%; }
    /* the password pill drops its verdict on a phone to fit the card */
    .mlab-season-pw .verdict { display: none; }
    /* the sign-in line is wider on a phone: hearts stay below it */
    .mlab-season--valentine .mlab-season-heart { --rise: -22px; }
    /* two fireworks on a phone, the outer ones: clear of the sign-in line */
    .mlab-season--newyear .mlab-season-firework:nth-child(2),
    .mlab-season--newyear .mlab-season-firework:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mlab-season { display: none; }
}
@media (max-width: 575.98px) {
    /* bits travel a shorter way on a phone */
    .mlab-season--privacy .mlab-season-bit:nth-child(4n) { display: none; }
}