/* ============================================================
   MaxiaPulse theme
   ------------------------------------------------------------
   Loaded LAST in <head> on every customer-facing page, after the
   page's own inline <style>. Every page ships an identical :root
   token block, so redefining those values here rebrands the whole
   application without touching a single line of behaviour.

   Palette is lifted from the MaxiaPulse design reference
   (app/globals.css): warm near-black, bone type, olive "signal"
   for anything you can act on, rust for the brand and for warnings.

   Rules this file exists to enforce:
     - no purple/blue SaaS gradients
     - no glow, no glassmorphism, no blur
     - 1px lines instead of soft shadows
     - small radii (2-4px), not 12px pills
     - uppercase mono for micro-labels, condensed caps for headings
   ============================================================ */

:root {
    /* --- MaxiaPulse brand ------------------------------------ */
    --mp-void:        #12110f;   /* page ground */
    --mp-black:       #0d0c0b;   /* sidebar, chrome */
    --mp-surface:     #191815;   /* cards */
    --mp-raised:      #22201c;   /* inputs, wells */
    --mp-raised-2:    #292620;   /* hover */
    --mp-bone:        #f0ece3;   /* primary text */
    --mp-paper:       #d4cec2;
    --mp-muted:       #aaa397;   /* secondary text */
    --mp-faint:       #7d766a;   /* tertiary text */
    --mp-line:        #38342e;   /* borders */
    --mp-line-strong: #514b41;
    --mp-moss:        #98a77a;   /* success, calm positive */
    --mp-signal:      #c5ce9a;   /* THE action colour */
    --mp-rust:        #b86759;   /* brand red, warnings */
    --mp-rust-dark:   #54302b;
    --mp-yellow:      #d1b85b;
    --mp-blue:        #6e8290;

    --mp-font: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mp-mono: "Courier New", Courier, monospace;

    /* --- remap the app's existing tokens --------------------- */
    --bg-primary:      var(--mp-void);
    --bg-secondary:    var(--mp-black);
    --bg-tertiary:     var(--mp-surface);
    --bg-card:         var(--mp-surface);
    --bg-glass:        var(--mp-raised);

    --border-primary:   var(--mp-line);
    --border-secondary: #2a2721;

    --text-primary:   var(--mp-bone);
    --text-secondary: var(--mp-muted);
    --text-tertiary:  var(--mp-faint);

    /* Purple was the de-facto brand accent. Rust takes that role. */
    --accent-purple: var(--mp-rust);
    --accent-blue:   var(--mp-blue);
    --accent-green:  var(--mp-moss);
    --accent-orange: var(--mp-yellow);
    --accent-cyan:   var(--mp-blue);
    --accent-red:    #c0604f;

    /* Flat, not gradient. Kept as gradient() so background-clip:text
       consumers keep working untouched. */
    --gradient-primary:   linear-gradient(0deg, var(--mp-signal), var(--mp-signal));
    --gradient-secondary: linear-gradient(0deg, var(--mp-rust), var(--mp-rust));
    --gradient-tertiary:  linear-gradient(0deg, var(--mp-blue), var(--mp-blue));

    /* Lines do the work shadows used to. */
    --shadow-sm: 0 1px 0 rgba(0,0,0,.4);
    --shadow-md: 0 2px 0 rgba(0,0,0,.4);
    --shadow-lg: 0 6px 24px rgba(0,0,0,.55);
    --shadow-secondary: 0 2px 0 rgba(0,0,0,.4);
}

html, body { background: var(--mp-void); }
body {
    color: var(--mp-bone);
    font-family: var(--mp-font);
    -webkit-font-smoothing: antialiased;
}

/* Native controls — checkboxes, radios, range, and the date/time picker
   glyphs — otherwise render in the browser's default purple. */
:root { accent-color: var(--mp-signal); color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(.85) sepia(.2) saturate(.6);
    cursor: pointer;
}

/* Some pages ship Tailwind's light utilities on the body or on their cards.
   A class selector beats our element selector, so the canvas would stay light
   while our bone text stayed light with it — invisible copy. Repaint those
   utilities rather than leaving the two halves disagreeing.

   NOTE: the client-branded registration pages deliberately do NOT load this
   file. Their canvas belongs to the client, not to MaxiaPulse. */
body.bg-gray-50, body.bg-gray-100, body.bg-white { background: var(--mp-void) !important; }
.bg-white  { background: var(--mp-surface) !important; }
.bg-gray-50, .bg-gray-100 { background: var(--mp-raised) !important; }
.text-gray-900, .text-gray-800 { color: var(--mp-bone) !important; }
.text-gray-700, .text-gray-600 { color: var(--mp-muted) !important; }
.text-gray-500, .text-gray-400 { color: var(--mp-faint) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--mp-line) !important; }

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.page-title, .section-title, .card-title, .modal-title, .stat-value {
    font-family: var(--mp-font);
    letter-spacing: -.01em;
}

/* Page titles are bone caps in the reference, not gradient-filled text. */
.page-title {
    background: none !important;
    -webkit-text-fill-color: var(--mp-bone) !important;
    color: var(--mp-bone) !important;
    text-transform: uppercase;
    letter-spacing: -.005em;
    font-weight: 700;
}

/* Every heading that used -webkit-background-clip:text to pour a purple
   gradient into itself. Bone, flat, legible. */
.hero-title, .stat-number, .section-title, .cta-title,
.login-title, .legal-title, .feature-title, .stat-value {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--mp-bone) !important;
    color: var(--mp-bone) !important;
}

/* The one deliberate two-tone moment: a rust second clause, as in
   "STAY / HUMAN." on the reference home page. */
.mp-accent {
    -webkit-text-fill-color: var(--mp-rust) !important;
    color: var(--mp-rust) !important;
}
.mp-accent-signal {
    -webkit-text-fill-color: var(--mp-signal) !important;
    color: var(--mp-signal) !important;
}

/* Big display headline, condensed and tight, for hero and section heads. */
.hero-title, .cta-title {
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: .98;
    text-transform: uppercase;
}
.section-title { font-weight: 700; letter-spacing: -.02em; }

/* Micro-labels: uppercase mono, the reference's signature detail. */
.stat-label, .form-help, .field-label, th, .table-header, .table-header *,
.badge, .tag, .status-badge,
.sched-rel, .cal-dow, .fact span, .kpi-label, .metric-label {
    font-family: var(--mp-mono);
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ============================================================
   Surfaces — 1px lines, small radii, no blur
   ============================================================ */

.card, .stat-card, .event-card, .panel, .widget, .modal, .dropdown,
.table-container, .list-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: 4px;
    box-shadow: none;
    backdrop-filter: none;
}

.card:hover, .stat-card:hover, .event-card:hover {
    border-color: var(--mp-line-strong);
    transform: none;
    box-shadow: none;
}

/* The header no longer floats on frosted glass. */
.header {
    background: var(--mp-black);
    backdrop-filter: none;
    border-bottom: 1px solid var(--mp-line);
}

/* ============================================================
   Sidebar & navigation
   ============================================================ */

.sidebar {
    background: var(--mp-black);
    border-right: 1px solid var(--mp-line);
}
.sidebar::before { display: none; }   /* kill the blue wash */

.logo-section {
    border-bottom: 1px solid var(--mp-line);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}
/* The wordmark is an SVG lockup now, not a 60px raster block. */
.logo, .mobile-logo {
    height: 26px !important;
    width: auto !important;
    max-width: 100%;
    filter: none !important;
    object-fit: contain;
}

.nav-item {
    border-radius: 3px;
    margin-bottom: .15rem;
    padding: .7rem 1rem;
    color: var(--mp-muted);
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.nav-item::before { display: none; }

.nav-item:hover {
    transform: none;                  /* no slide */
    background: var(--mp-raised);
    color: var(--mp-bone);
}

/* Active nav is a filled signal block with dark text — the single
   loudest thing in the sidebar, exactly as in the reference. */
.nav-item.active,
.nav-item.active:hover {
    background: var(--mp-signal);
    border-color: var(--mp-signal);
    color: var(--mp-void);
    font-weight: 600;
}
.nav-item.active .nav-icon { filter: none; opacity: 1; }

/* ============================================================
   Buttons
   ============================================================ */

.btn, .btn-primary, .btn-secondary, .create-event-btn, .modal-btn,
button.primary, .action-btn {
    border-radius: 3px;
    font-family: var(--mp-font);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary, .create-event-btn, button.primary {
    background: var(--mp-signal) !important;
    border: 1px solid var(--mp-signal) !important;
    color: var(--mp-void) !important;
    box-shadow: none !important;
}
.btn-primary:hover, .create-event-btn:hover, button.primary:hover {
    background: #d3daae !important;
    border-color: #d3daae !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary, .modal-btn.secondary {
    background: transparent !important;
    border: 1px solid var(--mp-line-strong) !important;
    color: var(--mp-bone) !important;
    box-shadow: none !important;
}
.btn-secondary:hover, .modal-btn.secondary:hover {
    background: var(--mp-raised) !important;
    border-color: var(--mp-bone) !important;
    transform: none !important;
}

/* Toolbar / bulk-action buttons: one signal primary, the rest outlined.
   Three differently-tinted buttons in a row reads as three warnings. */
.bulk-action-btn, .action-bar button, .toolbar-btn {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--mp-line-strong) !important;
    border-radius: 3px !important;
    color: var(--mp-bone) !important;
    box-shadow: none !important;
}
.bulk-action-btn:hover, .action-bar button:hover, .toolbar-btn:hover {
    background: var(--mp-raised) !important;
    border-color: var(--mp-bone) !important;
    transform: none !important;
}
/* The one that starts the main job on the page keeps the signal fill. */
.bulk-action-btn.upload-list-btn, .toolbar-btn.primary {
    background: var(--mp-signal) !important;
    border-color: var(--mp-signal) !important;
    color: var(--mp-void) !important;
}
.bulk-action-btn.upload-list-btn:hover, .toolbar-btn.primary:hover {
    background: #d3daae !important;
    border-color: #d3daae !important;
}
.bulk-action-btn:disabled, .bulk-action-btn[disabled] {
    opacity: .4; cursor: not-allowed;
}

/* Tabs: a quiet underline, not a filled pill. */
.tab-btn {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--mp-muted) !important;
    padding: .55rem .1rem !important;
    margin-right: 1.4rem;
}
.tab-btn:hover { color: var(--mp-bone) !important; }
.tab-btn.active {
    color: var(--mp-bone) !important;
    border-bottom-color: var(--mp-signal) !important;
    font-weight: 700;
}

/* Destructive stays rust, flat. */
.btn-danger, .modal-btn.danger, .logout-btn {
    background: transparent !important;
    border: 1px solid var(--mp-rust) !important;
    color: var(--mp-rust) !important;
    box-shadow: none !important;
}
.btn-danger:hover, .modal-btn.danger:hover, .logout-btn:hover {
    background: var(--mp-rust-dark) !important;
    color: var(--mp-bone) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================
   Forms
   ============================================================ */

.form-input, .form-select, .form-textarea, .input, .textarea, .select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="url"],
input[type="tel"], select, textarea {
    background: var(--mp-raised);
    border: 1px solid var(--mp-line);
    border-radius: 3px;
    color: var(--mp-bone);
}
.form-input:focus, .input:focus, .textarea:focus, .select:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--mp-signal);
    outline: none;
    box-shadow: none;
}
::placeholder { color: var(--mp-faint); }

.form-label, .field-label {
    color: var(--mp-muted);
    font-weight: 600;
}

/* Visible focus for keyboard users, on brand. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--mp-signal);
    outline-offset: 2px;
}

/* ============================================================
   Tables
   ============================================================ */

table { border-color: var(--mp-line); }
th {
    color: var(--mp-faint);
    font-weight: 600;
    font-size: .72rem;
    border-bottom: 1px solid var(--mp-line);
    background: transparent;
}
td { border-bottom: 1px solid var(--border-secondary); color: var(--mp-paper); }
tr:hover td { background: var(--mp-raised); }

/* ============================================================
   Stat cards
   ============================================================ */

/* The stat glyphs were saturated two-stop gradient chips — four of them in a
   row was the loudest thing on the page. Flat well, coloured glyph, so the
   number stays the thing you read first. */
.stat-icon, .metric-icon, .kpi-icon {
    background: var(--mp-raised) !important;
    background-image: none !important;
    border: 1px solid var(--mp-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.stat-icon.blue,   .metric-icon.blue   { color: var(--mp-blue) !important; }
.stat-icon.green,  .metric-icon.green  { color: var(--mp-moss) !important; }
.stat-icon.purple, .metric-icon.purple { color: var(--mp-rust) !important; }
.stat-icon.orange, .metric-icon.orange { color: var(--mp-yellow) !important; }
.stat-icon.red,    .metric-icon.red    { color: var(--mp-rust) !important; }
.stat-icon svg, .metric-icon svg { color: inherit !important; }

.stat-value, .stat-number, .kpi-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* ============================================================
   Badges & status
   ============================================================ */

.badge, .tag, .status-badge, .pill {
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: .68rem;
    font-weight: 600;
    padding: .18rem .55rem;
}
.badge-success, .badge.b-green, .status-published, .status-active { color: var(--mp-signal); }
.badge-warning, .badge.b-orange, .status-draft   { color: var(--mp-yellow); }
.badge-danger,  .badge.b-red,    .status-failed  { color: var(--mp-rust); }
.badge-info,    .badge.b-blue                    { color: var(--mp-blue); }
.badge.b-purple                                  { color: var(--mp-rust); }
.badge.b-grey                                    { color: var(--mp-muted); }

/* ============================================================
   Modals — flat sheet on a plain scrim, no frosted glass
   ============================================================ */

.modal-overlay, .modal-backdrop {
    background: rgba(9, 8, 7, .82);
    backdrop-filter: none;
}
.modal {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: 5px;
    box-shadow: var(--shadow-lg);
}
.modal::before { display: none; }
.modal-header, .modal-footer { border-color: var(--mp-line); }
.modal-content {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: 5px;
}

/* Auth modal. Anything filled with signal needs dark ink on it — white on
   #c5ce9a is about 1.7:1, which is unreadable and was the previous default. */
.login-button, .modal-tab.active, .auth-submit {
    background: var(--mp-signal) !important;
    background-image: none !important;
    border: 1px solid var(--mp-signal) !important;
    color: var(--mp-void) !important;
    box-shadow: none !important;
    border-radius: 3px !important;
    font-weight: 700;
}
.login-button:hover:not(:disabled), .auth-submit:hover:not(:disabled) {
    background: #d3daae !important;
    border-color: #d3daae !important;
    transform: none !important;
}
.login-button:disabled { opacity: .45; }

.modal-tab {
    border-radius: 3px !important;
    color: var(--mp-muted);
    background: transparent;
}
.modal-tab:hover { color: var(--mp-bone); }

.login-title { color: var(--mp-bone) !important; }
.login-subtitle, .auth-divider { color: var(--mp-muted); }

/* Social sign-in stays a neutral surface — Google supplies its own colour. */
.social-login button, .google-btn, .btn-google {
    background: var(--mp-raised) !important;
    border: 1px solid var(--mp-line-strong) !important;
    color: var(--mp-bone) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
.social-login button:hover, .google-btn:hover, .btn-google:hover {
    background: var(--mp-raised-2) !important;
    border-color: var(--mp-bone) !important;
}

.forgot-link, .auth-link, a.forgot-password { color: var(--mp-signal) !important; }
.forgot-link:hover, .auth-link:hover, a.forgot-password:hover { color: #d3daae !important; }
.auth-error { color: var(--mp-rust); }

/* ============================================================
   Floating help / feedback buttons
   ------------------------------------------------------------
   Both sat at z-index 1000 — the same as .modal-overlay — and
   appear later in the document, so they won the tie and painted
   on top of open dialogs, covering Cancel and Send. They belong
   under anything modal, always.
   ============================================================ */

.feedback-button, .faq-button {
    z-index: 900 !important;                 /* below .modal-overlay (1000) */
    background: var(--mp-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mp-line-strong) !important;
    border-radius: 999px !important;
    color: var(--mp-muted) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.feedback-button:hover, .faq-button:hover {
    background: var(--mp-raised) !important;
    border-color: var(--mp-bone) !important;
    color: var(--mp-bone) !important;
    transform: none !important;
    box-shadow: none !important;
}
.feedback-button:active, .faq-button:active { transform: none !important; }
.feedback-button svg { opacity: .8; }

/* An open dialog should own the screen. */
.modal-overlay.visible ~ .feedback-button,
.modal-overlay.visible ~ .faq-button,
.modal-overlay.active ~ .feedback-button,
.modal-overlay.active ~ .faq-button { opacity: 0; pointer-events: none; }

/* ============================================================
   The brand mark
   ============================================================ */

.mp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mp-bone);
    font-family: var(--mp-font);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
}
.mp-brand:hover { color: var(--mp-bone); }

/* Three rust bars — a heartbeat on a monitor. Geometry copied exactly
   from the reference's .pulse-mark so the mark is identical everywhere. */
.mp-mark {
    width: 28px; height: 23px;
    display: inline-flex; align-items: center; gap: 3px;
    flex: 0 0 28px;
}
.mp-mark i { display: block; width: 5px; background: var(--mp-rust); }
.mp-mark i:nth-child(1) { height: 8px; }
.mp-mark i:nth-child(2) { height: 23px; }
.mp-mark i:nth-child(3) { height: 13px; }

.mp-brand.compact { font-size: 1.05rem; }
.mp-brand.compact .mp-mark { transform: scale(.8); transform-origin: left; }

/* ============================================================
   Marketing pages
   ============================================================ */

/* The animated blue/purple/green glow orbs behind the landing page.
   Warm near-black instead — the reference has no ambient light at all. */
body::before, body::after {
    background: none !important;
    animation: none !important;
}

/* Decorative floating app icons: kept, but quieted to furniture so
   they read as texture rather than confetti. */
.floating-icons { opacity: .3; }
.floating-icon {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.floating-icon svg { color: var(--mp-muted) !important; opacity: .8; }
.icon-blue, .icon-purple, .icon-green, .icon-orange, .icon-cyan { color: var(--mp-muted) !important; }

.hero-image, .section-image, .feature-image {
    border: 1px solid var(--mp-line);
    border-radius: 4px;
    box-shadow: none;
}

/* Marketing section rhythm: generous, editorial, not cramped. */
.section-description, .hero-subtitle, .cta-subtitle { color: var(--mp-muted); }

.nav-links a, .marketing-nav a { color: var(--mp-paper); }
.nav-links a:hover, .marketing-nav a:hover { color: var(--mp-signal); }

/* --- the human signal band --------------------------------- */

.mp-signal-band {
    padding: 6rem 0;
    background: var(--mp-black);
    border-top: 1px solid var(--mp-line);
    border-bottom: 1px solid var(--mp-line);
}
.mp-signal-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem;
    align-items: center;
}
.mp-signal-figure { margin: 0; }
.mp-signal-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--mp-line);
    border-radius: 4px;
    /* Sit the photo down into the page rather than letting it glow off it. */
    filter: saturate(.92) contrast(1.02);
}
.mp-signal-kicker {
    font-family: var(--mp-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    color: var(--mp-rust);
    margin-bottom: .9rem;
}
.mp-signal-copy .section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.06;
    text-transform: none;
    margin-bottom: 1.1rem;
}
.mp-signal-copy .section-description {
    font-size: .96rem;
    line-height: 1.7;
    max-width: 46ch;
}
@media (max-width: 900px) {
    .mp-signal-inner { grid-template-columns: 1fr; gap: 2rem; }
    .mp-signal-band { padding: 3.5rem 0; }
}

/* --- real client marks ------------------------------------- */

.mp-clients { padding: 3rem 2rem; text-align: center; }
.mp-clients-label {
    font-family: var(--mp-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .68rem;
    color: var(--mp-faint);
    margin-bottom: 1.75rem;
}
.mp-clients-row {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1080px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem 3.25rem;
}
.mp-clients-row img {
    display: block;
    /* Explicit height, not max-height. With width:auto an image that has not
       decoded yet measures 0x0, the row collapses, and a lazy image inside a
       zero-height box never enters the viewport to trigger its own load. */
    height: 34px;
    width: auto;
    min-width: 90px;
    max-width: 150px;
    object-fit: contain;
    /* Real client marks come in six different palettes, and some are JPEGs
       that carry a white box. Levelling them to one bone tone keeps the row
       from clashing; screen blending drops those white boxes into the ground
       so no client ends up in a lit rectangle while the others float. */
    filter: grayscale(1) brightness(1.7) opacity(.55);
    mix-blend-mode: screen;
    transition: filter .2s ease;
}
.mp-clients-row img:hover { filter: grayscale(1) brightness(1.9) opacity(.9); }

/* Square marks (a monogram, a seal) carry far less ink than a wordmark at the
   same height, so they read as smaller. Give them a little more room back. */
.mp-clients-row img[src*="motospa"],
.mp-clients-row img[src*="coleman"] { height: 40px; min-width: 40px; }
/* This one is a dark-ink lockup; lift it further so it sits at the same weight. */
.mp-clients-row img[src*="love-cradle"] { filter: grayscale(1) brightness(3.4) opacity(.5); }
.mp-clients-row img[src*="love-cradle"]:hover { filter: grayscale(1) brightness(3.8) opacity(.85); }
@media (max-width: 720px) {
    .mp-clients-row { gap: 1.75rem 2rem; }
    .mp-clients-row img { max-height: 26px; }
}

/* ============================================================
   Housekeeping — retire the effects the brief rules out
   ============================================================ */

.glass, .liquid-glass, .glass-card {
    background: var(--mp-surface) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--mp-line) !important;
}

/* Scrollbars in the warm palette rather than default grey. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mp-black); }
::-webkit-scrollbar-thumb { background: var(--mp-line); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--mp-line-strong); }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
