/* ---------- App theme tokens ---------- */
:root {
    --navbar-light-bg-color: #2196f3;  /* light mode navbar */
    --navbar-dark-bg-color: #212529;   /* dark mode navbar */
    --navbar-text-color: #ffffff;
    --video-table-max-height: 70vh;
    --changes-panel-fixed-height: clamp(300px, 36vh, 420px);

    --mediaops-accent: #0d6efd;
    --mediaops-accent-alt: #6ea8fe;
    --mediaops-accent-contrast: #ffffff;
    --action_color: var(--mediaops-accent, #0d6efd);
    --action_color_hover: color-mix(in srgb, var(--mediaops-accent, #0d6efd) 82%, white);

    /* mpr-ui square theme preview colours (quadrants 0..3). */
    --mpr-theme-square-quad-0: #e0f2fe; /* blue-light */
    --mpr-theme-square-quad-1: #ffedd5; /* orange-light */
    --mpr-theme-square-quad-2: #0f172a; /* blue-dark */
    --mpr-theme-square-quad-3: #7c2d12; /* orange-dark */

    --dark-button-bg-color: #424242;
    --dark-button-text-color: #fafafa;

    --tag-badge-light-bg-color: #e0e0e0;
    --tag-badge-light-text-color: #212121;
    --tag-badge-dark-bg-color: var(--border_color);
    --tag-badge-dark-text-color: var(--menu_color);

    /* Kill Bootswatch gradients globally */
    --bs-gradient: none !important;
}

body[data-bs-theme='light'][data-mediaops-palette='blue'] {
    --mediaops-accent: #0d6efd;
    --mediaops-accent-alt: #6ea8fe;
    --mediaops-accent-contrast: #ffffff;
    --action_color: var(--mediaops-accent, #0d6efd);
    --action_color_hover: color-mix(in srgb, var(--mediaops-accent, #0d6efd) 82%, white);
    --mediaops-cursor: #0d6efd;
    --mediaops-selection: rgba(13, 110, 253, 0.14);
    --mpr-color-accent: var(--mediaops-accent);
    --mpr-color-accent-alt: var(--mediaops-accent-alt);
    --mpr-color-accent-contrast: var(--mediaops-accent-contrast);
    --mpr-color-surface-primary: rgba(239, 246, 255, 0.95);
    --mpr-color-surface-elevated: rgba(255, 255, 255, 0.98);
    --mpr-color-text-primary: #0f172a;
    --mpr-color-text-muted: #334155;
    --mpr-color-border: rgba(59, 130, 246, 0.28);
    --mpr-color-divider: rgba(147, 197, 253, 0.55);
    --mpr-theme-toggle-bg: rgba(59, 130, 246, 0.18);
    --mpr-shadow-elevated: 0 18px 36px rgba(37, 99, 235, 0.16);
    --mpr-shadow-flyout: 0 24px 48px rgba(30, 64, 175, 0.24);
}

body[data-bs-theme='dark'][data-mediaops-palette='blue'] {
    --mediaops-accent: #60a5fa;
    --mediaops-accent-alt: #93c5fd;
    --mediaops-accent-contrast: #0f172a;
    --action_color: var(--mediaops-accent, #60a5fa);
    --action_color_hover: color-mix(in srgb, var(--mediaops-accent, #60a5fa) 84%, white);
    --mediaops-cursor: #60a5fa;
    --mediaops-selection: rgba(96, 165, 250, 0.22);
    --mpr-color-accent: var(--mediaops-accent);
    --mpr-color-accent-alt: var(--mediaops-accent-alt);
    --mpr-color-accent-contrast: var(--mediaops-accent-contrast);
    --mpr-color-surface-primary: rgba(2, 6, 23, 0.92);
    --mpr-color-surface-elevated: rgba(15, 23, 42, 0.96);
    --mpr-color-text-primary: #e2e8f0;
    --mpr-color-text-muted: #93c5fd;
    --mpr-color-border: rgba(96, 165, 250, 0.32);
    --mpr-color-divider: rgba(59, 130, 246, 0.36);
    --mpr-theme-toggle-bg: rgba(96, 165, 250, 0.25);
    --mpr-shadow-elevated: 0 24px 48px rgba(2, 6, 23, 0.55);
    --mpr-shadow-flyout: 0 28px 56px rgba(15, 23, 42, 0.62);
}

body[data-bs-theme='light'][data-mediaops-palette='orange'] {
    --mediaops-accent: #fb923c;
    --mediaops-accent-alt: #fdba74;
    --mediaops-accent-contrast: #0f172a;
    --action_color: var(--mediaops-accent, #fb923c);
    --action_color_hover: color-mix(in srgb, var(--mediaops-accent, #fb923c) 84%, white);
    --mediaops-cursor: #f97316;
    --mediaops-selection: rgba(249, 115, 22, 0.16);
    --mpr-color-accent: var(--mediaops-accent);
    --mpr-color-accent-alt: var(--mediaops-accent-alt);
    --mpr-color-accent-contrast: var(--mediaops-accent-contrast);
    --mpr-color-surface-primary: rgba(255, 247, 237, 0.95);
    --mpr-color-surface-elevated: rgba(255, 251, 245, 0.98);
    --mpr-color-text-primary: #7c2d12;
    --mpr-color-text-muted: #9a3412;
    --mpr-color-border: rgba(249, 115, 22, 0.33);
    --mpr-color-divider: rgba(253, 186, 116, 0.58);
    --mpr-theme-toggle-bg: rgba(251, 146, 60, 0.2);
    --mpr-shadow-elevated: 0 18px 36px rgba(194, 65, 12, 0.16);
    --mpr-shadow-flyout: 0 24px 48px rgba(154, 52, 18, 0.24);
}

body[data-bs-theme='dark'][data-mediaops-palette='orange'] {
    --mediaops-accent: #f97316;
    --mediaops-accent-alt: #fb923c;
    --mediaops-accent-contrast: #111827;
    --action_color: var(--mediaops-accent, #f97316);
    --action_color_hover: color-mix(in srgb, var(--mediaops-accent, #f97316) 86%, white);
    --mediaops-cursor: #fb923c;
    --mediaops-selection: rgba(251, 146, 60, 0.24);
    --mpr-color-accent: var(--mediaops-accent);
    --mpr-color-accent-alt: var(--mediaops-accent-alt);
    --mpr-color-accent-contrast: var(--mediaops-accent-contrast);
    --mpr-color-surface-primary: rgba(67, 20, 7, 0.94);
    --mpr-color-surface-elevated: rgba(92, 32, 13, 0.96);
    --mpr-color-text-primary: #ffedd5;
    --mpr-color-text-muted: #fdba74;
    --mpr-color-border: rgba(251, 146, 60, 0.38);
    --mpr-color-divider: rgba(249, 115, 22, 0.44);
    --mpr-theme-toggle-bg: rgba(251, 146, 60, 0.24);
    --mpr-shadow-elevated: 0 24px 48px rgba(67, 20, 7, 0.52);
    --mpr-shadow-flyout: 0 28px 56px rgba(67, 20, 7, 0.6);
}

/* Keep shared navbar typography consistent across pages. */
.navbar {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * mpr-ui sets the header/footer z-index above Bootstrap's modal layer.
 * Ensure Bootstrap modals (and backdrops) render above the app chrome so
 * close buttons remain clickable.
 */
mpr-header {
    z-index: 1030 !important;
}

.mpr-footer {
    z-index: 1030 !important;
}

/* ---------- Navbar (flat, no gradient) ---------- */
.navbar {
    padding-top: .25rem;
    padding-bottom: .25rem;
    background-image: none !important;    /* belt & suspenders */
    box-shadow: none !important;
}
body[data-bs-theme='light'] .navbar {
    background-color: var(--navbar-light-bg-color) !important;
    color: var(--navbar-text-color);
}
body[data-bs-theme='dark'] .navbar {
    background-color: var(--navbar-dark-bg-color) !important;
    color: var(--navbar-text-color);
}

/* Ensure links are readable on both themes */
.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--navbar-text-color) !important;
}

/* ---------- Buttons (flat, no gradient) ---------- */
.btn {
    background-image: none !important;
    box-shadow: none !important;
}
body[data-bs-theme='dark'] .btn-light,
body[data-bs-theme='dark'] .btn-secondary {
    background-color: var(--dark-button-bg-color) !important;
    border-color: var(--dark-button-bg-color) !important;
    color: var(--dark-button-text-color) !important;
}

/* ---------- Misc content tweaks ---------- */
h1, h2, h3 { margin-top: .5rem; }

/* Gracefully hide broken avatar images (avoids inline onerror handler) */
.user-avatar {
    object-fit: cover;
}
.user-avatar::before {
    content: '';
    display: block;
}
.user-avatar:not([src]),
.user-avatar[src=''],
.user-avatar[src*='data:'] {
    /* Fallback when no avatar is available */
    display: none;
}

.channel-switcher {
    position: relative;
    display: flex;
    align-items: center;
}

.channel-switcher__toggle {
    border-radius: 999px;
    padding: 0.35rem;
    line-height: 1;
}

.channel-switcher__toggle:focus-visible {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mediaops-accent, #0d6efd) 30%, transparent);
}

.channel-switcher__avatar {
    cursor: pointer;
    display: block;
    margin: 0;
}

.channel-switcher__menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    left: auto;
    z-index: 1040;
    min-width: 240px;
    max-height: min(360px, calc(100dvh - 6rem));
    overflow-y: auto;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 120ms ease-in-out, transform 120ms ease-in-out;
}

.channel-switcher__menu.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.channel-switcher__logout-item {
    width: 100%;
}

.channel-switcher__logout-icon {
    font-size: 18px;
    line-height: 1;
}

.channel-switcher__settings-icon {
    font-size: 18px;
    line-height: 1;
}

.channel-switcher__settings-modal[data-mpr-modal="container"] {
    top: 0;
    bottom: 0;
    --mpr-modal-top-offset: 0px;
    --mpr-modal-bottom-offset: 0px;
}

.channel-switcher__settings-modal [data-mpr-modal="backdrop"] {
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.channel-switcher__settings-modal-body {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
}

.channel-switcher__settings-section {
    border: 1px solid var(--mpr-color-border, rgba(148, 163, 184, 0.35));
    border-radius: 0.75rem;
    padding: 0.75rem;
    background: var(--mpr-color-surface-elevated, rgba(255, 255, 255, 0.98));
}

.channel-switcher__settings-section-title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mpr-color-text-primary, #0f172a);
}

.channel-switcher__settings-account-photo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
}

.channel-switcher__settings-photo {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 1px solid var(--mpr-color-border, rgba(148, 163, 184, 0.35));
}

.channel-switcher__settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
}

.channel-switcher__settings-row + .channel-switcher__settings-row {
    margin-top: 0.45rem;
}

.channel-switcher__settings-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mpr-color-text-muted, #64748b);
}

.channel-switcher__settings-value {
    font-size: 0.9rem;
    color: var(--mpr-color-text-primary, #0f172a);
}

.channel-switcher__settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
}

.channel-switcher__settings-help-link {
    align-self: flex-start;
}

/* ---------- Spreadsheet change indicators ---------- */
.row-changed {
    background-color: color-mix(in srgb, var(--action_color, #0d6efd) 16%, transparent) !important;
    border-left: 3px solid var(--action_color, #0d6efd) !important;
}

body[data-bs-theme='dark'] .row-changed {
    background-color: color-mix(in srgb, var(--action_color, #0d6efd) 10%, transparent) !important;
}

/* ---------- Changes Panel ---------- */
#changes-panel {
    min-height: var(--changes-panel-fixed-height);
}

#changes-panel [data-test='no-pending-changes'] {
    min-height: var(--changes-panel-fixed-height);
    margin-bottom: 0;
}

#changes-panel .card {
    border-color: color-mix(in srgb, var(--action_color, #0d6efd) 38%, transparent);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: var(--changes-panel-fixed-height);
    display: flex;
    flex-direction: column;
}

#changes-panel .card-header {
    background-color: color-mix(in srgb, var(--action_color, #0d6efd) 12%, transparent);
    border-bottom-color: color-mix(in srgb, var(--action_color, #0d6efd) 38%, transparent);
}

body[data-bs-theme='dark'] #changes-panel .card-header {
    background-color: color-mix(in srgb, var(--action_color, #0d6efd) 14%, transparent);
}

#changes-panel .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

#changes-panel .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    border: 1px solid var(--border_color, rgba(0, 0, 0, 0.12));
    border-radius: 0.35rem;
    background: var(--content_background, #fff);
}

#changes-panel .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--header_background, #f3f4f6);
    border-bottom-color: var(--border_color, rgba(0, 0, 0, 0.12));
}

#changes-panel code {
    font-size: 0.875rem;
}

#changes-panel .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* ---------- Table container shell (worksheet viewport scrolling is built-in via CE) ---------- */
.table-container {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    margin: 1rem 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

body[data-bs-theme='dark'] .table-container {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Ensure table doesn't cause page overflow */
.table-container > div {
    min-width: 100%;
}

.table-container #video-table {
    width: 100%;
    min-height: 0;
}

.table-container #video-table > div:not(.jcontextmenu) {
    height: auto;
}

.table-container #video-table.jtabs .jtabs-headers-container {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--header_background, #f3f4f6);
    border-bottom: 1px solid var(--border_color, rgba(0, 0, 0, 0.12));
}

.table-container #video-table.jtabs .jtabs-headers {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.table-container #video-table.jtabs .jtabs-headers > div {
    flex: 0 0 auto;
}

/* Keep jSuites context menus viewport-bounded when opened from spreadsheet cells. */
.table-container #video-table .jcontextmenu {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.table-container #video-table > .jcontextmenu {
    height: auto;
}

/* Keep table badges readable (videos.css uses these vars) */

/* ---------- Landing page ---------- */

[x-cloak] {
    display: none !important;
}

.changes-panel table code {
    font-size: 0.85rem;
}

.landing-body {
    font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background:
        radial-gradient(90rem 45rem at 8% -6%, rgba(15, 118, 110, 0.28), transparent 55%),
        radial-gradient(60rem 35rem at 100% 4%, rgba(217, 119, 6, 0.24), transparent 58%),
        linear-gradient(180deg, #f3f4f6 0%, #ffffff 52%, #f8fafc 100%);
    min-height: 100vh;
    color: #111827;
}

.landing-header {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(17, 24, 39, 0.1);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    font-family: 'Sora', system-ui, sans-serif;
}

.landing-brand-icon {
    font-size: 1.4rem;
}

.landing-main {
    position: relative;
    overflow-x: clip;
}

.landing-hero {
    position: relative;
    padding-top: 2.2rem;
    padding-bottom: 2.4rem;
}

.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(130deg, rgba(15, 23, 42, 0.92), rgba(17, 94, 89, 0.86)),
        radial-gradient(circle at 72% 28%, rgba(251, 191, 36, 0.22), transparent 46%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.38);
    z-index: 0;
}

.landing-hero .container {
    position: relative;
    z-index: 1;
}

.landing-hero-content {
    background: rgba(8, 15, 31, 0.45);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 1rem;
    padding: clamp(1.25rem, 2vw, 1.8rem);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.32);
}

.landing-eyebrow {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.14);
    color: #fef3c7;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
}

.landing-hero-title {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    line-height: 1.08;
    color: #f8fafc;
    font-weight: 700;
}

.landing-hero-subtitle {
    color: rgba(226, 232, 240, 0.92);
    max-width: 64ch;
}

.landing-cta-button {
    border-radius: 999px;
    padding-inline: 1.35rem;
    font-weight: 600;
}

.landing-cta-caption {
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.98rem;
    max-width: 42ch;
}

.landing-error-alert {
    max-width: 52ch;
}

.landing-hero-benefits {
    display: grid;
    gap: 0.72rem;
    margin-bottom: 0;
}

.landing-hero-benefits li {
    align-items: flex-start;
    color: #e2e8f0;
}

.landing-check-icon {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.22);
    color: #fef3c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex: 0 0 auto;
}

.landing-ops-card {
    background:
        linear-gradient(150deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.82)),
        radial-gradient(circle at 100% 0%, rgba(13, 148, 136, 0.2), transparent 55%);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 1rem;
    padding: 1.1rem 1rem;
    color: #e2e8f0;
}

.landing-ops-header {
    padding-bottom: 0.72rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.landing-ops-badge {
    border-radius: 999px;
    padding: 0.24rem 0.66rem;
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: #99f6e4;
    background: rgba(20, 184, 166, 0.18);
}

.landing-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.landing-kpi-cell {
    border-radius: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(15, 23, 42, 0.58);
    padding: 0.66rem 0.6rem;
    text-align: center;
}

.landing-kpi-value {
    font-family: 'Sora', system-ui, sans-serif;
    color: #f8fafc;
    font-size: 1.2rem;
    font-weight: 700;
}

.landing-kpi-label {
    color: #cbd5e1;
    font-size: 0.8rem;
}

.landing-ops-list {
    margin-top: 0.95rem;
    display: grid;
    gap: 0.45rem;
}

.landing-ops-row {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 0.74rem;
    padding: 0.54rem 0.66rem;
    background: rgba(2, 6, 23, 0.42);
    gap: 0.75rem;
}

.landing-ops-text {
    color: #cbd5e1;
    font-size: 0.9rem;
}

.landing-ops-status {
    color: #34d399;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 700;
}

.landing-section {
    position: relative;
}

.landing-section-features {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.7), rgba(255, 255, 255, 0.92));
}

.landing-feature-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.14);
}

.landing-section-flow {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(237, 247, 245, 0.8));
}

.landing-steps {
    counter-reset: landing-step-counter;
}

.landing-step-item {
    counter-increment: landing-step-counter;
    gap: 1rem;
}

.landing-step-index {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
}

.landing-screen {
    border-radius: 1rem;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.95)),
        radial-gradient(circle at 82% 18%, rgba(245, 158, 11, 0.2), transparent 48%);
    color: #e2e8f0;
    padding: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.34);
}

.landing-screen-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.landing-screen-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.landing-screen-row {
    font-size: 0.95rem;
}

.landing-screen-actions .btn {
    border-radius: 999px;
}

.landing-footer {
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.landing-footer-links a {
    font-size: 0.9rem;
}

@media (max-width: 991.98px) {
    .landing-hero-content {
        height: 100%;
    }

    .landing-ops-card {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .landing-hero {
        padding-top: 1.5rem;
        padding-bottom: 1.8rem;
    }

    .landing-hero-content {
        padding: 1.05rem;
    }

    .landing-hero-title {
        font-size: clamp(1.75rem, 7vw, 2.1rem);
    }

    .landing-kpi-grid {
        grid-template-columns: 1fr;
    }

    .landing-screen {
        margin-top: 1.1rem;
    }
}