:root {
    --mt-blue: #2563EB;
    --mt-deep: #1D4ED8;
    --mt-white: #FFFFFF;
    --mt-bg: #F8FAFC;
    --mt-text: #1E293B;
    --mt-muted: #64748B;
    --mt-border: #E2E8F0;
    --mt-soft: #EFF6FF;
    --mt-sidebar: 280px;
    --mt-topbar: 68px;
    --mt-bottom: 80px;
    --mt-radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-weight: 300;
    background: var(--mt-bg);
    color: var(--mt-text);
    min-height: 100vh;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

strong:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not([style*="tabular-nums"]),
b:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not([style*="tabular-nums"]) {
    font-weight: 400 !important;
}

/* Neutralize legacy inline bold styles on non-numeric elements */
h1[style*="font-weight"],
h2[style*="font-weight"],
h3[style*="font-weight"],
h4[style*="font-weight"],
.btn[style*="font-weight"],
label[style*="font-weight"],
th[style*="font-weight"],
.nav-label[style*="font-weight"],
.nav-link[style*="font-weight"],
.badge:not(.nav-count-badge):not(.topbar-bell-count):not(.badge-count):not(.action-count-pill)[style*="font-weight"],
span[style*="font-weight"]:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not(.stat-value):not(.cf-value):not(.cf-channel-balance):not(.doc-balance-value):not(.doc-qty-pill):not(.action-count-pill):not(.nav-count-badge):not(.topbar-bell-count):not(.plate-number):not([style*="tabular-nums"]),
strong[style*="font-weight"]:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not(.stat-value):not(.cf-value):not(.cf-channel-balance):not(.doc-balance-value):not([style*="tabular-nums"]) {
    font-weight: 400 !important;
}

a { color: var(--mt-blue); text-decoration: none; }
a:hover { color: var(--mt-deep); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.sidebar {
    display: none;
    width: var(--mt-sidebar);
    background: var(--mt-white);
    color: var(--mt-text);
    position: fixed;
    inset: 0 auto 0 0;
    padding: 20px 16px;
    overflow-y: auto;
    flex-direction: column;
    border-right: 1px solid var(--mt-border);
    z-index: 50;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--mt-border);
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.sidebar-header .sidebar-brand {
    padding: 0;
    margin: 0;
    border: none;
    flex: 1;
    min-width: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 8px 8px 20px;
    border-bottom: 1px solid var(--mt-border);
    margin-bottom: 18px;
    color: var(--mt-text);
}

.sidebar-brand:hover { color: var(--mt-text); }
.sidebar-brand img {
    width: 100%;
    height: 52px;
    min-width: 0;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}

/* Sidebar Toggle Buttons */
.sidebar-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--mt-border);
    background: var(--mt-white);
    color: var(--mt-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-right: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.sidebar-toggle-btn:hover {
    background: var(--mt-soft);
    border-color: #93C5FD;
    color: var(--mt-blue);
}
.sidebar-toggle-btn:active {
    transform: scale(0.95);
}

.sidebar-collapse-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--mt-border);
    background: var(--mt-bg);
    color: var(--mt-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.sidebar-collapse-btn:hover {
    background: var(--mt-white);
    color: var(--mt-text);
    border-color: #CBD5E1;
}

/* Floating Quick Show Sidebar Button (Visible on Desktop when Sidebar is Collapsed) */
.sidebar-floating-btn {
    position: fixed;
    left: 14px;
    bottom: 22px;
    z-index: 45;
    background: #1E293B;
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.3);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}
.sidebar-floating-btn:hover {
    background: #2563EB;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.sidebar-floating-btn i {
    width: 15px;
    height: 15px;
}

/* Mobile Backdrop */
.sidebar-backdrop {
    display: none;
}

.nav-group { margin-bottom: 22px; }
.nav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--mt-muted);
    padding: 0 12px 8px;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--mt-muted);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 160ms ease, color 160ms ease;
}

.nav-link:hover { background: var(--mt-soft); color: var(--mt-deep); }
.nav-link.is-active { background: var(--mt-blue); color: var(--mt-white); }
.nav-link i, .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    background: var(--mt-bg);
    margin-top: auto;
    color: var(--mt-text);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mt-blue);
    color: var(--mt-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.topbar .avatar,
.list-row .avatar {
    background: var(--mt-blue);
    color: var(--mt-white);
}

.user-chip small { display: block; color: var(--mt-muted); font-weight: 600; }

.main {
    min-height: 100vh;
    padding: calc(var(--mt-topbar) + 18px) 16px calc(var(--mt-bottom) + 24px);
}

.topbar {
    z-index: 30;
    height: var(--mt-topbar);
    background: var(--mt-white);
    border-bottom: 1px solid var(--mt-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.topbar-brand {
    display: flex;
    align-items: center;
    color: var(--mt-text);
    font-weight: 800;
    letter-spacing: 0.4px;
}

.topbar-brand img { width: auto; height: 36px; max-width: 190px; object-fit: contain; object-position: left center; }
.topbar-context {
    display: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--mt-muted);
}
.topbar-meta { display: none; align-items: center; gap: 12px; }
.clock-pill {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--mt-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--mt-text);
    font-variant-numeric: tabular-nums;
    background: var(--mt-bg);
}

.mobile-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 40;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 6px;
    border-radius: 22px;
}

.mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--mt-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 8px 2px;
    border-radius: 14px;
    position: relative;
}

.mobile-nav a.is-active { color: var(--mt-white); background: var(--mt-blue); }
.mobile-nav.mobile-nav-admin { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mobile-nav svg { width: 18px; height: 18px; }

.hero {
    background: var(--mt-blue);
    color: var(--mt-white);
    border-radius: 24px;
    padding: 26px 22px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hero h1 { margin: 0; font-size: 28px; letter-spacing: -0.6px; line-height: 1.15; }
.hero p { margin: 8px 0 0; color: #DBEAFE; font-size: 14px; }
.eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #DBEAFE;
}
.hero .btn { background: var(--mt-white); color: var(--mt-deep); }
.hero .btn:hover { background: #DBEAFE; color: var(--mt-deep); }
.hero .btn-secondary { background: #1D4ED8; color: var(--mt-white); border-color: #1D4ED8; }
.hero .btn-secondary:hover { background: var(--mt-white); color: var(--mt-deep); }

/* Workshop dashboard */
.dashboard-page { max-width: 1600px; margin: 0 auto; }
.dashboard-page .dashboard-hero {
    background: var(--mt-white);
    color: var(--mt-text);
    border: 1px solid var(--mt-border);
    border-top: 4px solid var(--mt-blue);
    border-radius: 20px;
    padding: 24px 22px;
    margin-bottom: 16px;
}
.dashboard-page .dashboard-hero p { color: var(--mt-muted); }
.dashboard-page .dashboard-hero .eyebrow { color: var(--mt-blue); }
.dashboard-page .dashboard-hero .btn { background: var(--mt-blue); color: var(--mt-white); }
.dashboard-page .dashboard-hero .btn:hover { background: var(--mt-deep); color: var(--mt-white); }
.dashboard-page .dashboard-hero .btn-secondary {
    background: var(--mt-white);
    color: var(--mt-text);
    border-color: var(--mt-border);
}
.dashboard-page .dashboard-hero .btn-secondary:hover {
    background: var(--mt-soft);
    border-color: #BFDBFE;
    color: var(--mt-deep);
}
.dashboard-pipeline {
    display: block;
    margin-bottom: 16px;
    padding: 12px 18px;
    border-color: var(--mt-border);
    border-radius: 16px;
    background: var(--mt-white);
}
.dashboard-stats { margin-bottom: 20px; }
.dashboard-stats .stat {
    min-height: 144px;
    border-radius: 16px;
    transition: border-color 160ms ease, transform 160ms ease;
}
.dashboard-stats .stat:hover {
    border-color: #93C5FD;
    transform: translateY(-2px);
}
.dashboard-stats .stat-featured {
    background: var(--mt-deep);
    border-color: var(--mt-deep);
}
.dashboard-split { gap: 20px; margin-bottom: 20px; }
.dashboard-panel {
    border-radius: 16px;
    border-color: var(--mt-border);
}
.dashboard-panel .list-row {
    border: 0;
    border-bottom: 1px solid var(--mt-border);
    border-radius: 0;
}
.dashboard-panel .list-row:last-child { border-bottom: 0; }
.dashboard-panel .list-row:hover {
    background: var(--mt-soft);
    border-color: var(--mt-border);
    transform: none;
}
.dashboard-clearance-panel { border-color: #BFDBFE; }
.dashboard-job-row { padding: 12px 18px; }
.dashboard-job-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.dashboard-job-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dashboard-clearance-actions .btn { min-height: 40px; padding: 7px 10px; font-size: 12px; }

@media (min-width: 900px) {
    .dashboard-page .dashboard-hero { padding: 30px; }
    .dashboard-page .dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .dashboard-page .dashboard-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.page-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.page-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.5px; }
.page-head p { margin: 6px 0 0; color: var(--mt-muted); font-size: 14px; }

.card {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    padding: 20px;
}

.card + .card, .facts + .card, .card + form, .split + .card { margin-top: 16px; }
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.card h2 { margin: 0 0 14px; font-size: 16px; letter-spacing: -0.2px; }
.card-head h2 { margin: 0; }

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.stat {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    padding: 18px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-featured { background: var(--mt-deep); color: var(--mt-white); border-color: var(--mt-deep); }
.stat-featured .stat-label,
.stat-featured .stat-note { color: #DBEAFE; }
.stat-label { color: var(--mt-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; }
.stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.7px; margin-top: 8px; }
.stat-note { color: var(--mt-muted); font-size: 12px; margin-top: 6px; }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; }
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mt-soft);
    color: var(--mt-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-featured .stat-icon { background: #2563EB; color: var(--mt-white); }
a.stat { color: inherit; }
a.stat:hover { border-color: var(--mt-blue); color: inherit; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 700;
    cursor: pointer;
    background: var(--mt-blue);
    color: var(--mt-white);
    transition: background-color 160ms ease, transform 160ms ease;
}

.btn:hover { background: var(--mt-deep); color: var(--mt-white); }
.btn:active { transform: scale(0.98); }
.btn-secondary { background: var(--mt-white); color: var(--mt-text); border-color: var(--mt-border); }
.btn-secondary:hover { background: var(--mt-bg); color: var(--mt-text); }
.btn-danger { background: #DC2626; }
.btn-ghost { background: transparent; color: var(--mt-blue); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }

.btn.is-loading,
button.is-loading,
input.is-loading {
    cursor: wait;
    pointer-events: none;
}
.button-loader-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.button-loader-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-loader-spin 650ms linear infinite;
}
@keyframes button-loader-spin { to { transform: rotate(360deg); } }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pill {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--mt-border);
    background: var(--mt-white);
    color: var(--mt-text);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}
.pill:hover { color: var(--mt-deep); border-color: var(--mt-blue); }
.pill.is-on { background: var(--mt-blue); color: var(--mt-white); border-color: var(--mt-blue); }

.search-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 18px;
    padding: 8px;
    margin-bottom: 16px;
}
.search-bar .control { flex: 1; }
.search-bar input[type="search"] {
    flex: 1;
    background: var(--mt-bg);
    border: 0;
    min-height: 48px;
}

.facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.fact {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    padding: 16px;
}
.fact span {
    display: block;
    color: var(--mt-muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}
.fact strong { font-size: 15px; }
.line-block {
    margin-top: 22px;
    padding-top: 8px;
}
.line-block h2 {
    margin: 0 0 14px;
    font-size: 16px;
    letter-spacing: -0.2px;
}
.totals {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mt-border);
}
.totals p { margin: 0; color: var(--mt-muted); }
.totals strong { color: var(--mt-text); font-size: 18px; }
.timeline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.photo-tile {
    margin: 0;
    position: relative;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    overflow: hidden;
}
.photo-tile img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}
.photo-tile figcaption {
    padding: 8px 12px 12px;
    font-size: 12px;
    color: var(--mt-muted);
}
.photo-remove {
    position: absolute;
    top: 8px;
    right: 8px;
}
.photo-upload {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mt-border);
}
.thumb {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mt-soft);
}
.timeline .badge.is-on { background: var(--mt-blue); color: var(--mt-white); }

.feed, .list { display: grid; gap: 10px; }
.feed-item, .job-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--mt-border); border-radius: 16px; background: var(--mt-white); color: var(--mt-text); }
.feed-item:hover, .job-card:hover { border-color: var(--mt-blue); color: var(--mt-text); }
.feed-item strong, .job-card strong { display: block; }
.feed-item span, .job-card span { color: var(--mt-muted); font-size: 13px; }
.list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    background: var(--mt-white);
    color: var(--mt-text);
    transition: border-color 160ms ease, transform 160ms ease;
}
.list-row:hover { border-color: var(--mt-blue); color: var(--mt-text); transform: translateY(-1px); }
.list-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--mt-soft);
    color: var(--mt-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.list-body { flex: 1; min-width: 0; }
.list-body strong { display: block; font-size: 15px; }
.list-body span { display: block; color: var(--mt-muted); font-size: 13px; margin-top: 3px; }
.list-row > svg { color: var(--mt-muted); width: 18px; height: 18px; flex-shrink: 0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--mt-border); vertical-align: middle; }
th { color: var(--mt-muted); font-size: 12px; letter-spacing: 0.4px; font-weight: 700; }
tr:last-child td { border-bottom: 0; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: var(--mt-soft);
    color: var(--mt-deep);
    text-transform: capitalize;
    white-space: nowrap;
}

.badge-draft, .badge-unpaid { background: #F1F5F9; color: #475569; }
.badge-booked { background: #EFF6FF; color: #1D4ED8; }
.badge-checked_in { background: #ECFEFF; color: #0E7490; }
.badge-diagnosing { background: #EEF2FF; color: #4338CA; }
.badge-awaiting_approval { background: #FFFBEB; color: #B45309; }
.badge-sent, .badge-partial { background: #DBEAFE; color: #1D4ED8; }
.badge-in_progress { background: #FFF7ED; color: #C2410C; }
.badge-completed, .badge-accepted, .badge-paid { background: #DCFCE7; color: #166534; }
.badge-awaiting_parts, .badge-expired { background: #F5F3FF; color: #6D28D9; }
.badge-quality_check { background: #F0FDFA; color: #0F766E; }
.badge-ready_collection { background: #F0FDF4; color: #15803D; }
.badge-invoiced { background: #E0E7FF; color: #3730A3; }
.badge-cancelled, .badge-declined, .badge-void, .badge-fail, .badge-inactive { background: #FEE2E2; color: #991B1B; }
.badge-low_stock { background: #FEF3C7; color: #92400E; }
.badge-active { background: #DCFCE7; color: #166534; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--mt-text);
    margin-bottom: 8px;
}
.field > label { margin: 0; }

.control {
    position: relative;
    display: flex;
    align-items: center;
}
.control > svg {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--mt-blue);
    pointer-events: none;
    z-index: 1;
}
.control:has(textarea) > svg { top: 16px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], input[type="search"], select, textarea {
    width: 100%;
    min-height: 52px;
    border: 1.5px solid var(--mt-border);
    border-radius: 14px;
    padding: 12px 16px;
    background: var(--mt-bg);
    color: var(--mt-text);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.control.has-icon input,
.control.has-icon select,
.control.has-icon textarea {
    padding-left: 44px;
}
select {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
::placeholder { color: var(--mt-muted); }

input:hover, select:hover, textarea:hover { border-color: #BFDBFE; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--mt-blue);
    background: var(--mt-white);
    box-shadow: 0 0 0 4px #DBEAFE;
}

input[type="file"] {
    width: 100%;
    min-height: 92px;
    padding: 22px 16px;
    border: 1.5px dashed var(--mt-blue);
    border-radius: 16px;
    background: var(--mt-soft);
    color: var(--mt-text);
    cursor: pointer;
}
input[type="file"]:hover,
input[type="file"]:focus {
    background: #DBEAFE;
    box-shadow: none;
}

.help { color: var(--mt-muted); font-size: 12px; margin-top: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
form.card { padding: 24px; }
table input, table select {
    min-height: 44px;
    padding: 8px 12px;
    background: var(--mt-white);
}

.alert {
    border: 1px solid var(--mt-border);
    background: var(--mt-white);
    color: var(--mt-text);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}
.alert-success { border-color: #86EFAC; background: #F0FDF4; }
.alert-error { border-color: #FECACA; background: #FEF2F2; }

.auth-body { min-height: 100vh; background: var(--mt-bg); }
.auth-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.auth-hero-centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-white);
    padding: 20px;
    margin: 0;
}
.auth-hero-white {
    background: var(--mt-white);
}
.auth-panel {
    background: var(--mt-deep);
    color: var(--mt-white);
    padding: 32px 24px;
}
.auth-panel-white {
    background: var(--mt-white);
    color: var(--mt-text);
}
.auth-panel h1 { margin: 16px 0 8px; font-size: 30px; letter-spacing: -0.6px; }
.auth-panel p { margin: 0; color: #DBEAFE; }
.auth-panel-white p { color: var(--mt-muted); }
.auth-card {
    width: 100%;
    max-width: 460px;
    margin: 24px auto;
    padding: 28px 22px 32px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 24px;
}

.auth-card-centered {
    width: 100%;
    max-width: 420px;
    padding: 32px 28px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
}
.auth-logo { margin-bottom: 22px; }
.auth-logo h1 { margin: 0; font-size: 26px; letter-spacing: -0.4px; }
.auth-logo p { margin: 6px 0 0; color: var(--mt-muted); font-size: 14px; }
.auth-logo-centered {
    text-align: center;
    margin-bottom: 28px;
}
.auth-logo-centered h1 {
    margin: 16px 0 8px;
    font-size: 28px;
    letter-spacing: -0.4px;
    color: var(--mt-text);
}
.auth-logo-centered p {
    margin: 0;
    color: var(--mt-muted);
    font-size: 14px;
}
.auth-switch { display: flex; gap: 16px; margin-top: 18px; font-size: 13px; font-weight: 700; }
.auth-card .btn { width: 100%; min-height: 52px; border-radius: 14px; }

.auth-panel-content {
    margin-bottom: 24px;
}

.auth-logo-mark {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.auth-logo-animated {
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.auth-logo-mark img {
    width: 36px;
    height: 36px;
}

.auth-description {
    font-size: 15px;
    line-height: 1.6;
    color: #DBEAFE;
    margin-top: 12px;
}

.auth-panel-white .auth-description {
    color: var(--mt-muted);
}

.auth-access-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 13px;
    color: #DBEAFE;
}

.auth-access-note-white {
    background: var(--mt-bg);
    color: var(--mt-muted);
}

.auth-access-note svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-card-icon {
    width: 56px;
    height: 56px;
    background: var(--mt-soft);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--mt-blue);
}

.auth-card-icon svg {
    width: 28px;
    height: 28px;
}

.btn-full {
    width: 100%;
    justify-content: center;
    gap: 10px;
}

.auth-switch a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mt-muted);
    transition: color 160ms ease;
}

.auth-switch a:hover {
    color: var(--mt-blue);
}

.auth-switch svg {
    width: 16px;
    height: 16px;
}

.landing { min-height: 100vh; }
.landing-top {
    background: var(--mt-deep);
    color: var(--mt-white);
    padding: 36px 20px 88px;
}
.landing-top h1 { margin: 16px 0 8px; font-size: 34px; letter-spacing: -0.8px; max-width: 640px; }
.landing-top p { margin: 0; color: #DBEAFE; max-width: 560px; }
.landing-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: 0.8px; }
.landing-cards {
    max-width: 1100px;
    margin: -56px auto 0;
    padding: 0 16px 40px;
}
.portal-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.portal-tile {
    display: block;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 22px;
    padding: 24px;
    color: var(--mt-text);
    min-height: 220px;
    transition: border-color 160ms ease, transform 160ms ease;
}
.portal-tile:hover { border-color: var(--mt-blue); color: var(--mt-text); transform: translateY(-3px); }
.portal-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--mt-soft);
    color: var(--mt-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}
.portal-tile h2 { margin: 16px 0 8px; font-size: 22px; letter-spacing: -0.4px; }
.portal-tile p { margin: 0; color: var(--mt-muted); font-size: 14px; line-height: 1.5; }
.landing-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 16px 48px;
}
.feature {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    padding: 18px;
}
.feature strong { display: block; margin-bottom: 6px; }
.feature p { margin: 0; color: var(--mt-muted); font-size: 14px; }
.portal-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--mt-soft);
    color: var(--mt-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.doc { background: var(--mt-white); color: var(--mt-text); }
.doc-sheet { max-width: 860px; margin: 0 auto; background: var(--mt-white); border: 1px solid var(--mt-border); padding: 28px; }
.doc-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--mt-blue); padding-bottom: 16px; }
.doc-brand { display: flex; gap: 12px; align-items: flex-start; }
.doc-brand img { width: auto; height: 56px; }
.doc-meta { text-align: right; }
.doc-meta h2 { margin: 0; color: var(--mt-blue); font-size: 22px; }
.doc-placeholder { color: var(--mt-muted); font-style: italic; }
.doc-actions { max-width: 860px; margin: 16px auto; display: flex; gap: 8px; }
.doc-footer { margin-top: 28px; border-top: 1px solid var(--mt-border); padding-top: 12px; color: var(--mt-muted); font-size: 12px; }

.signature-draw-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.signature-draw-container canvas {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.signature-actions {
    display: flex;
    gap: 8px;
}

.signature-actions button {
    min-height: 36px;
    padding: 0 16px;
}


.client-landing {
    min-height: 100vh;
    background: var(--mt-white);
    display: flex;
    flex-direction: column;
}

.client-landing-header {
    background: var(--mt-deep);
    color: var(--mt-white);
    padding: 40px 24px;
    text-align: center;
}

.client-brand {
    max-width: 600px;
    margin: 0 auto;
}

.client-logo-mark {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.client-logo-mark img {
    width: 48px;
    height: 48px;
}

.client-landing-header h1 {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.client-tagline {
    margin: 0;
    font-size: 16px;
    color: #DBEAFE;
    font-weight: 500;
}

.client-landing-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
    align-items: start;
}

.client-login-card {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.client-login-header {
    text-align: center;
    margin-bottom: 28px;
}

.client-login-icon {
    width: 64px;
    height: 64px;
    background: var(--mt-soft);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--mt-blue);
}

.client-login-icon svg {
    width: 32px;
    height: 32px;
}

.client-login-header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--mt-text);
}

.client-login-header p {
    margin: 0;
    font-size: 14px;
    color: var(--mt-muted);
}

.client-login-register {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mt-border);
    text-align: center;
}

.client-login-register p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--mt-muted);
}

.client-login-footer {
    margin-top: 20px;
    text-align: center;
}

.client-login-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mt-muted);
    font-size: 13px;
    font-weight: 600;
    transition: color 160ms ease;
}

.client-login-footer a:hover {
    color: var(--mt-blue);
}

.client-login-footer svg {
    width: 16px;
    height: 16px;
}

.client-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.client-feature {
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    padding: 24px;
    transition: all 160ms ease;
}

.client-feature:hover {
    border-color: var(--mt-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--mt-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mt-white);
    margin-bottom: 16px;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.client-feature h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mt-text);
}

.client-feature p {
    margin: 0;
    font-size: 13px;
    color: var(--mt-muted);
    line-height: 1.5;
}

@media (max-width: 899px) {
    .client-landing-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .client-features {
        grid-template-columns: 1fr;
    }

    .client-landing-header h1 {
        font-size: 28px;
    }
}


/* ------------------------------------------------------------- */
/* EXECUTIVE DOCUMENT & INVOICE / RECEIPT STYLING               */
/* ------------------------------------------------------------- */
.doc-header-pro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 2.5px solid var(--mt-blue);
}
.doc-header-brand {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}
.doc-brand-badge {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #EFF6FF;
    border: 1.5px solid #DBEAFE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
}
.doc-brand-badge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.doc-brand-details {
    display: flex;
    flex-direction: column;
}
.doc-company-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--mt-deep);
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.doc-company-sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--mt-blue);
    margin-top: 2px;
}
.doc-meta-contact {
    margin-top: 8px;
    font-size: 12px;
    color: var(--mt-text);
    line-height: 1.5;
}
.doc-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mt-muted);
}
.doc-contact-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.doc-contact-row span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.doc-sep {
    color: var(--mt-border);
    margin: 0 2px;
}
.doc-tax-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.tax-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #F1F5F9;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.doc-header-type {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.doc-type-pill {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mt-blue);
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    padding: 4px 12px;
    border-radius: 8px;
}
.doc-type-number {
    font-size: 26px;
    font-weight: 800;
    color: var(--mt-deep);
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.doc-status-stamp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.doc-stamp-paid {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}
.doc-stamp-partial {
    background: #EFF6FF;
    color: #1E40AF;
    border: 1px solid #BFDBFE;
}
.doc-stamp-unpaid {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}
.doc-stamp-void {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.doc-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.doc-info-card {
    background: #F8FAFC;
    border: 1px solid var(--mt-border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}
.doc-info-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--mt-muted);
    margin-bottom: 8px;
}
.doc-info-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.doc-entity-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--mt-text);
}
.doc-entity-line {
    font-size: 13px;
    color: var(--mt-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.doc-muted-text {
    font-size: 12px;
    color: var(--mt-muted);
}
.doc-dates-stack {
    gap: 6px;
}
.doc-date-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.doc-date-title {
    color: var(--mt-muted);
}
.doc-date-val {
    color: var(--mt-text);
    font-variant-numeric: tabular-nums;
}
.doc-val-danger {
    color: #DC2626 !important;
}
.doc-val-success {
    color: #059669 !important;
}
.doc-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: var(--mt-blue);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}
.plate-badge-lg {
    font-size: 13px;
    padding: 4px 12px;
}

.doc-table-wrap {
    border: 1px solid var(--mt-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #FFFFFF;
}
.doc-table-pro {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.doc-table-pro thead {
    background: #F8FAFC;
    border-bottom: 1px solid var(--mt-border);
}
.doc-table-pro th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #475569;
    text-align: left;
}
.doc-table-pro td {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.doc-table-pro tbody tr:last-child td {
    border-bottom: none;
}
.doc-table-pro tbody tr:hover {
    background: #FAFAFA;
}
.doc-qty-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 2px 8px;
    background: #F1F5F9;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.doc-bottom-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 32px;
}
.doc-pay-box {
    background: #F8FAFC;
    border: 1px solid var(--mt-border);
    border-radius: 14px;
    padding: 16px;
}
.doc-pay-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--mt-deep);
    margin-bottom: 12px;
}
.doc-pay-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}
.doc-pay-method {
    color: var(--mt-text);
}
.doc-pay-method strong {
    color: var(--mt-deep);
}
.doc-pay-method span {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
}
.doc-pay-note {
    font-size: 12px;
    color: var(--mt-muted);
    border-top: 1px solid var(--mt-border);
    padding-top: 8px;
    margin-top: 4px;
}
.doc-notes-box {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
    font-size: 13px;
}
.doc-notes-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #92400E;
    margin-bottom: 4px;
}
.doc-notes-box p {
    margin: 0;
    color: #78350F;
    line-height: 1.4;
}

.doc-totals-card {
    background: #F8FAFC;
    border: 1px solid var(--mt-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.doc-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--mt-muted);
}
.doc-total-grand {
    font-size: 16px;
    font-weight: 800;
    color: var(--mt-deep);
    border-top: 1px solid var(--mt-border);
    padding-top: 10px;
    margin-top: 2px;
}
.doc-total-grand strong {
    font-size: 18px;
}
.doc-total-paid {
    color: #065F46;
    font-weight: 600;
}
.doc-paid-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}
.doc-balance-box {
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.doc-balance-box.is-due {
    background: #FEF2F2;
    border: 1.5px solid #FCA5A5;
    color: #991B1B;
}
.doc-balance-box.is-settled {
    background: #ECFDF5;
    border: 1.5px solid #A7F3D0;
    color: #065F46;
}
.doc-balance-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.doc-balance-value {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.doc-sign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--mt-border);
}
.doc-sign-box {
    display: flex;
    flex-direction: column;
}
.doc-signature-holder {
    height: 55px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
}
.doc-signature-img {
    max-height: 50px;
    max-width: 180px;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}
.doc-sign-line {
    height: 1px;
    border-bottom: 1.5px dashed var(--mt-border);
    margin-bottom: 8px;
    width: 100%;
}
.doc-sign-caption {
    font-size: 12px;
    font-weight: 700;
    color: var(--mt-text);
}
.doc-sign-sub {
    font-size: 11px;
    color: var(--mt-muted);
}

.doc-footer-pro {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--mt-border);
}
.doc-footer-notes p {
    margin: 0;
    font-size: 12px;
    color: var(--mt-muted);
    line-height: 1.5;
}
.doc-footer-system {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #94A3B8;
    margin-top: 8px;
}

.receipt-hero-card {
    background: #F0FDF4;
    border: 1.5px solid #BBF7D0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.receipt-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.receipt-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #86EFAC;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
}
.receipt-hero-number {
    font-size: 20px;
    font-weight: 800;
    color: #166534;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.receipt-amount-display {
    text-align: center;
    padding: 8px 0;
}
.receipt-amount-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #15803D;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.receipt-amount-number {
    font-size: 38px;
    font-weight: 800;
    color: #14532D;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.receipt-method-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.receipt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: #FFFFFF;
    border: 1px solid #BBF7D0;
    border-radius: 20px;
    font-size: 12px;
    color: #166534;
}
.receipt-verify-box {
    background: #F8FAFC;
    border: 1px solid var(--mt-border);
    border-radius: 12px;
    padding: 14px 18px;
}
.receipt-verify-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #D1FAE5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 899px) {
    .doc-header-pro {
        flex-direction: column;
        align-items: flex-start;
    }
    .doc-header-type {
        text-align: left;
        align-items: flex-start;
    }
    .doc-meta-grid {
        grid-template-columns: 1fr;
    }
    .doc-bottom-grid {
        grid-template-columns: 1fr;
    }
    .doc-sign-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ------------------------------------------------------------- */
/* NATIVE APP CLIENT PORTAL ENHANCEMENTS                         */
/* ------------------------------------------------------------- */
.plate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 2px 7px 2px 4px;
    background: #FFFFFF;
    color: #0B0D12;
    border: 1.6px solid #0B0D12;
    border-radius: 4px;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: 'FE-Font', 'FE-Schrift', 'Euro Plate', 'DIN Alternate', 'DIN Condensed', 'Arial Black', sans-serif;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 #FFFFFF;
    vertical-align: middle;
    white-space: nowrap;
}
.plate-badge::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 12px;
    border: 0.6px solid #000000;
    border-radius: 1px;
    background: linear-gradient(180deg, 
        #000000 0% 16.66%, 
        #FCDC04 16.66% 33.33%, 
        #D90000 33.33% 50%, 
        #000000 50% 66.66%, 
        #FCDC04 66.66% 83.33%, 
        #D90000 83.33% 100%
    );
    flex-shrink: 0;
    box-shadow: 1.8px 0 0 0 #0B0D12;
    margin-right: 5px;
}
.plate-badge-white { background: #FFFFFF; }
.plate-badge-lg {
    font-size: 14px;
    padding: 3px 10px 3px 6px;
    letter-spacing: 1.8px;
    border-width: 2px;
    border-radius: 5px;
}
.plate-badge-lg::before {
    width: 16px;
    height: 15px;
    box-shadow: 2px 0 0 0 #0B0D12;
    margin-right: 7px;
}

.mobile-nav-native {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 50;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 2px;
    border-radius: 18px;
    align-items: center;
}
.mobile-nav-native a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--mt-muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    padding: 7px 1px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 150ms ease;
    position: relative;
}
.mobile-nav-native a.is-active {
    color: var(--mt-blue);
    background: var(--mt-soft);
}
.mobile-nav-native a svg { width: 19px; height: 19px; }
.mobile-nav-native a.is-active svg { stroke-width: 2.5px; }
.mobile-nav-native .nav-fab {
    background: var(--mt-blue) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 7px 1px !important;
}
.mobile-nav-native .nav-fab:hover { background: var(--mt-deep) !important; }

/* Client roadside emergency dispatch */
.emergency-page {
    max-width: 1280px;
    margin: 0 auto;
}
.emergency-page-head {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-top: 4px solid #DC2626;
    border-radius: 20px;
    padding: 22px;
    gap: 20px;
}
.emergency-page-head h1 {
    color: var(--mt-text);
    font-size: clamp(25px, 4vw, 34px);
    letter-spacing: -0.7px;
}
.emergency-page-head p { line-height: 1.55; }
.emergency-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
}
.emergency-kicker svg { width: 13px; height: 13px; }
.emergency-page .emergency-hotline-action,
.emergency-page .emergency-whatsapp-action,
.emergency-page .emergency-secondary-phone {
    min-height: 42px;
    white-space: nowrap;
}
.emergency-page .emergency-hotline-action {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}
.emergency-page .emergency-hotline-action:hover { background: #B91C1C !important; }
.emergency-page .emergency-whatsapp-action {
    background: #16A34A !important;
    border-color: #16A34A !important;
}
.emergency-page .emergency-whatsapp-action:hover { background: #15803D !important; }

.emergency-active-card {
    background: var(--mt-white) !important;
    border: 1px solid #FCA5A5 !important;
    border-left: 4px solid #DC2626 !important;
    border-radius: 18px !important;
    padding: 20px !important;
}
.emergency-active-head {
    background: #FEF2F2;
    border: 1px solid #FECACA !important;
    border-radius: 14px;
    padding: 16px;
}
.emergency-active-card .tracker-steps {
    padding: 4px 2px;
    margin: 20px 0 18px !important;
}
.emergency-active-card .tracker-step-dot {
    width: 32px;
    height: 32px;
}
.emergency-active-card .tracker-step.is-current .tracker-step-dot {
    outline: 4px solid #FEE2E2;
    outline-offset: 0;
}
.emergency-summary-grid {
    background: var(--mt-bg) !important;
    border-color: var(--mt-border) !important;
    padding: 10px !important;
}
.emergency-summary-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: var(--mt-white);
}
.emergency-gps-verified,
.emergency-tech-call {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
.emergency-gps-verified svg,
.emergency-tech-call svg { width: 13px; height: 13px; }

.emergency-hotline-card {
    background: var(--mt-white) !important;
    border-color: #BFDBFE !important;
    border-radius: 18px !important;
}
.emergency-hotline-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: var(--mt-soft) !important;
    color: var(--mt-blue) !important;
}
.emergency-hotline-copy strong { color: var(--mt-text) !important; }
.emergency-hotline-copy span { color: var(--mt-muted) !important; line-height: 1.45; }
.emergency-secondary-phone { color: var(--mt-text) !important; border-color: var(--mt-border) !important; }

.emergency-request-card,
.emergency-history-card {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 18px !important;
}
.emergency-request-card .card-head {
    padding-bottom: 16px !important;
    margin-bottom: 22px !important;
}
.emergency-request-form { display: block; }
.emergency-form-section > label,
.emergency-location-section > div:first-child > label {
    color: var(--mt-text) !important;
    font-size: 14px !important;
}
.emergency-type-tile {
    min-height: 106px;
    padding: 14px !important;
    border: 1px solid var(--mt-border) !important;
    border-radius: 14px !important;
    background: var(--mt-white) !important;
}
.emergency-type-tile:hover {
    border-color: #93C5FD !important;
    background: var(--mt-soft) !important;
}
.emergency-type-tile.is-selected {
    border-color: #DC2626 !important;
    background: #FEF2F2 !important;
}
.emergency-type-tile input { accent-color: #DC2626; }
.emergency-type-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mt-bg);
}
.emergency-type-icon svg { width: 18px; height: 18px; }
.emergency-location-section {
    background: var(--mt-soft) !important;
    border-color: #BFDBFE !important;
    border-radius: 16px !important;
    padding: 18px !important;
}
.emergency-request-form .form-group label { color: var(--mt-text) !important; }
.emergency-request-form .form-control {
    border-color: #CBD5E1;
    border-radius: 12px;
    background: var(--mt-white);
}
.emergency-request-form .form-control:focus {
    border-color: var(--mt-blue);
    outline: 2px solid #DBEAFE;
    outline-offset: 0;
}
.emergency-dispatch-confirmation {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    border-left: 4px solid #DC2626 !important;
    border-radius: 14px !important;
}
.emergency-dispatch-submit {
    min-height: 48px;
    border-radius: 12px !important;
    white-space: nowrap;
}
.emergency-history-card .card-head { padding-bottom: 4px; }
.emergency-history-card tbody tr:hover { background: var(--mt-bg); }

@media (max-width: 640px) {
    .emergency-page-head { padding: 20px; }
    .emergency-page-head > div:last-child,
    .emergency-page .emergency-hotline-action,
    .emergency-page .emergency-whatsapp-action { width: 100%; }
    .emergency-active-card { padding: 14px !important; }
    .emergency-active-head { padding: 14px; }
    .emergency-active-card .tracker-steps { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
    .emergency-summary-grid { grid-template-columns: 1fr !important; }
    .emergency-hotline-card > div > div:last-child { width: 100%; }
    .emergency-hotline-card .btn { flex: 1; }
    .emergency-dispatch-confirmation > div:first-child { align-items: flex-start !important; }
    .emergency-dispatch-submit { width: 100%; }
}

.tracker-card {
    background: #FFFFFF;
    border: 1px solid var(--mt-border);
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.tracker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mt-border);
}
.tracker-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 18px 0;
    position: relative;
}
.tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.tracker-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EFF6FF;
    color: var(--mt-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid var(--mt-border);
}
.tracker-step.is-done .tracker-step-dot {
    background: var(--mt-blue);
    color: #FFFFFF;
    border-color: var(--mt-blue);
}
.tracker-step.is-current .tracker-step-dot {
    background: var(--mt-deep);
    color: #FFFFFF;
    border-color: var(--mt-blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
}
.tracker-step-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--mt-muted);
    line-height: 1.2;
}
.tracker-step.is-current .tracker-step-label,
.tracker-step.is-done .tracker-step-label {
    color: var(--mt-text);
}

.auth-segmented {
    display: flex;
    background: #EFF6FF;
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 20px;
    border: 1px solid var(--mt-border);
}
.auth-segmented a, .auth-segmented button {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    color: var(--mt-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 160ms ease;
}
.auth-segmented a.is-active, .auth-segmented button.is-active {
    background: #FFFFFF;
    color: var(--mt-blue);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.native-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
@media (min-width: 768px) {
    .native-quick-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.native-quick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid var(--mt-border);
    border-radius: 20px;
    text-decoration: none;
    color: var(--mt-text);
    transition: all 180ms ease;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.native-quick-card:hover {
    border-color: var(--mt-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}
.native-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #EFF6FF;
    color: var(--mt-blue);
}
.native-quick-icon.icon-amber { background: #FEF3C7; color: #D97706; }
.native-quick-icon.icon-emerald { background: #D1FAE5; color: #059669; }
.native-quick-icon.icon-indigo { background: #EEF2FF; color: #4F46E5; }
.native-quick-title { font-size: 14px; font-weight: 700; color: var(--mt-text); }
.native-quick-sub { font-size: 12px; color: var(--mt-muted); margin-top: 3px; }

.vehicle-app-card {
    background: #FFFFFF;
    border: 1px solid var(--mt-border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 10px;
    transition: all 160ms ease;
}
.vehicle-app-card:hover {
    border-color: var(--mt-blue);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.connected-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    background: #D1FAE5;
    padding: 3px 8px;
    border-radius: 12px;
}
.connected-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #059669;
}

/* ------------------------------------------------------------- */
/* NOTIFICATION BADGES & ACTIVITY INDICATORS                     */
/* ------------------------------------------------------------- */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    margin-left: auto;
    background: #2563EB;
    color: #FFFFFF;
}
.nav-badge-amber {
    background: #F59E0B;
    color: #1E293B;
}
.nav-badge-emerald {
    background: #10B981;
    color: #FFFFFF;
}
.nav-badge-danger {
    background: #EF4444;
    color: #FFFFFF;
}

.nav-count-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #2563EB;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.4);
    border: 1.5px solid #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.nav-count-badge.badge-amber {
    background: #F59E0B;
    color: #FFFFFF;
}
.nav-count-badge.badge-danger {
    background: #EF4444;
    color: #FFFFFF;
}
.nav-count-badge.badge-emerald {
    background: #10B981;
    color: #FFFFFF;
}

.action-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid #DBEAFE;
}
.action-count-pill.pill-amber {
    background: #FEF3C7;
    color: #D97706;
    border-color: #FDE68A;
}
.action-count-pill.pill-emerald {
    background: #D1FAE5;
    color: #059669;
    border-color: #A7F3D0;
}
.action-count-pill.pill-danger {
    background: #FEE2E2;
    color: #DC2626;
    border-color: #FECACA;
}

.indicator-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563EB;
    box-shadow: 0 0 0 2px #FFFFFF;
    flex-shrink: 0;
}
.indicator-dot-pulse {
    animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.topbar-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid var(--mt-border);
    color: var(--mt-text);
    cursor: pointer;
    text-decoration: none;
    transition: all 160ms ease;
}
.topbar-bell-btn:hover {
    border-color: var(--mt-blue);
    color: var(--mt-blue);
}
.topbar-bell-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #2563EB;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #FFFFFF;
}

.update-drawer {
    position: fixed;
    top: 0;
    right: -380px;
    width: 100%;
    max-width: 380px;
    height: 100vh;
    background: #FFFFFF;
    box-shadow: -8px 0 28px rgba(15, 23, 42, 0.16);
    z-index: 100;
    transition: right 240ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.update-drawer.is-open {
    right: 0;
}
.update-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.update-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media print {
    .invoice-details {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .invoice-totals-section {
        max-width: 100%;
    }
}

.invoice-container {
    display: grid;
    gap: 20px;
}

.invoice-card {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mt-border);
    flex-wrap: wrap;
    gap: 16px;
}

.invoice-dates {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.date-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--mt-muted);
    text-transform: uppercase;
}

.date-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--mt-text);
}

.invoice-status {
    display: flex;
    align-items: center;
}

.invoice-table {
    margin-bottom: 24px;
}

.invoice-table table {
    border-collapse: separate;
    border-spacing: 0;
}

.invoice-table thead {
    background: var(--mt-bg);
}

.invoice-table th {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--mt-muted);
    text-transform: uppercase;
    border-bottom: 2px solid var(--mt-border);
}

.invoice-table td {
    padding: 16px;
    border-bottom: 1px solid var(--mt-border);
    font-size: 14px;
}

.invoice-table tbody tr:last-child td {
    border-bottom: none;
}

.invoice-totals {
    background: var(--mt-bg);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--mt-muted);
}

.total-row-main {
    font-size: 18px;
    font-weight: 800;
    color: var(--mt-text);
    padding-top: 8px;
    border-top: 1px solid var(--mt-border);
    margin-top: 4px;
}

.total-row-paid {
    font-size: 15px;
    font-weight: 600;
    color: #166534;
}

.total-row-balance {
    font-size: 16px;
    font-weight: 700;
    color: #DC2626;
}

.receipts-section {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    padding: 24px;
}

.receipts-section h2 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mt-text);
}

.receipts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.receipt-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mt-border);
    border-radius: 12px;
    background: var(--mt-bg);
    text-decoration: none;
    color: var(--mt-text);
    transition: all 160ms ease;
}

.receipt-item:hover {
    border-color: var(--mt-blue);
    background: var(--mt-soft);
    transform: translateY(-1px);
}

.receipt-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mt-blue);
    color: var(--mt-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.receipt-icon svg {
    width: 20px;
    height: 20px;
}

.receipt-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.receipt-info strong {
    font-size: 15px;
    font-weight: 600;
}

.receipt-info span {
    font-size: 12px;
    color: var(--mt-muted);
}

.receipt-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--mt-text);
}

@media (max-width: 899px) {
    .invoice-header {
        flex-direction: column;
    }

    .invoice-dates {
        width: 100%;
        justify-content: space-between;
    }

    .invoice-table {
        overflow-x: auto;
    }

    .invoice-table table {
        min-width: 500px;
    }
}

.empty { text-align: center; color: var(--mt-muted); padding: 36px 12px; }
.split { display: grid; gap: 16px; }
.muted { color: var(--mt-muted); font-size: 13px; }
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(148px, 1fr));
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 20px;
}
.day-col {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    min-height: 200px;
    padding: 14px;
}
.day-col.is-today { border-color: var(--mt-blue); }
.day-col h3 {
    margin: 0 0 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.day-col h3 span { color: var(--mt-muted); font-weight: 600; font-size: 12px; }
.booking-chip {
    display: block;
    padding: 10px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #1D4ED8;
    margin-bottom: 8px;
    text-decoration: none;
}
.booking-chip strong, .booking-chip span { display: block; }
.booking-chip span { font-size: 12px; }
.feed { display: grid; gap: 14px; }
.feed-item { display: grid; grid-template-columns: 16px 1fr; gap: 12px; }
.feed-item p { margin: 4px 0; }
.feed-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mt-blue);
    margin-top: 5px;
}
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mt-text);
    margin-top: 10px;
}
.age-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.age-total { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.action-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}
.action-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
}
.action-tile span { display: block; color: var(--mt-muted); font-size: 13px; margin-top: 4px; }
.action-tile:hover { border-color: var(--mt-blue); }
.reveal { animation: rise 320ms ease; }
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.88; transform: scale(1.02); }
}

@media (min-width: 900px) {
    .sidebar { display: flex; transform: translateX(0); }
    .mobile-nav, .mobile-nav-native { display: none; }
    .topbar { left: var(--mt-sidebar); padding: 0 28px; transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s ease; }
    .topbar-brand { display: none; }
    .topbar-context, .topbar-meta { display: flex; }
    .main { margin-left: var(--mt-sidebar); padding: calc(var(--mt-topbar) + 28px) 32px 40px; transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s ease; }

    /* Desktop Collapsed Sidebar State */
    html.sidebar-collapsed .sidebar,
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%) !important;
        pointer-events: none;
    }
    html.sidebar-collapsed .topbar,
    body.sidebar-collapsed .topbar {
        left: 0 !important;
        padding-left: 20px;
    }
    html.sidebar-collapsed .topbar .topbar-brand,
    body.sidebar-collapsed .topbar .topbar-brand {
        display: flex !important;
        margin-right: 14px;
    }
    html.sidebar-collapsed .main,
    body.sidebar-collapsed .main {
        margin-left: 0 !important;
        padding-left: 36px;
        padding-right: 36px;
    }
    html.sidebar-collapsed .sidebar-floating-btn,
    body.sidebar-collapsed .sidebar-floating-btn {
        display: inline-flex;
    }
    html.sidebar-collapsed .sidebar-toggle-btn,
    body.sidebar-collapsed .sidebar-toggle-btn {
        background: var(--mt-soft);
        color: var(--mt-blue);
        border-color: #93C5FD;
    }

    .hero { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 32px; }
    .hero h1 { font-size: 34px; }
    .page-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .stats { grid-template-columns: repeat(4, 1fr); }
    .facts { grid-template-columns: repeat(3, 1fr); }
    .photo-grid { grid-template-columns: repeat(3, 1fr); }
    .landing-features { grid-template-columns: repeat(3, 1fr); padding: 8px 48px 72px; }
    .form-grid-2 { grid-template-columns: 1fr 1fr; }
    .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .age-grid { grid-template-columns: repeat(4, 1fr); }
    .action-grid { grid-template-columns: repeat(3, 1fr); }
    .portal-grid { grid-template-columns: repeat(3, 1fr); }
    .landing-top { padding: 56px 48px 100px; }
    .landing-top h1 { font-size: 48px; }
    .landing-cards { padding: 0 48px 60px; }
    .auth-hero { display: grid; grid-template-columns: 0.44fr 0.56fr; }
    .auth-panel { padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; }
    .auth-card { max-width: 440px; margin: auto; padding: 36px 32px; }
    .split { grid-template-columns: 1.45fr 0.85fr; }
}

/* Mobile & Tablet Drawer (max-width: 899px) */
@media (max-width: 899px) {
    .sidebar {
        display: flex;
        transform: translateX(-100%);
        z-index: 100;
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.28);
    }
    body.sidebar-open-mobile .sidebar {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 95;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.sidebar-open-mobile .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.sidebar-open-mobile {
        overflow: hidden;
    }
}

@media print {
    .sidebar, .topbar, .mobile-nav, .mobile-nav-native, .doc-actions, .no-print { display: none !important; }
    .main { margin: 0; padding: 0; }
    .doc-sheet { border: 0; max-width: none; }
    body { background: #FFFFFF; }
}

/* ------------------------------------------------------------- */
/* CLIENT PORTAL — CALM PROFESSIONAL BLUE SYSTEM                 */
/* ------------------------------------------------------------- */
body.client-portal,
body.client-auth {
    --mt-blue: #1D4ED8;
    --mt-deep: #1D4ED8;
    --mt-soft: #F1F5F9;
    --mt-bg: #F8FAFC;
    --mt-text: #1E293B;
    --mt-muted: #64748B;
    --mt-border: #E2E8F0;
}

body.client-portal {
    --mt-sidebar: 272px;
    --mt-topbar: 64px;
    --mt-bottom: 92px;
}

body.client-portal .client-sidebar {
    padding: 18px 14px;
    border-right-color: #E2E8F0;
}

body.client-portal .sidebar-brand {
    min-height: 72px;
    padding: 6px 10px 18px;
    margin-bottom: 14px;
}

body.client-portal .sidebar-brand img {
    height: 50px;
    max-width: 208px;
}

body.client-portal .nav-group { margin-bottom: 18px; }

body.client-portal .nav-label {
    color: #94A3B8;
    font-size: 10px;
    letter-spacing: 1.2px;
    padding: 0 12px 7px;
}

body.client-portal .nav-link {
    min-height: 42px;
    gap: 11px;
    padding: 10px 12px 10px 9px;
    border-left: 3px solid transparent;
    border-radius: 10px;
    color: #64748B;
}

body.client-portal .nav-link:hover {
    background: #F8FAFC;
    color: #1D4ED8;
}

body.client-portal .nav-link.is-active {
    background: #F1F5F9;
    color: #1D4ED8;
    border-left-color: #1D4ED8;
}

body.client-portal .nav-link.is-active svg { stroke-width: 2.25px; }

body.client-portal .user-chip {
    padding: 11px;
    border-radius: 14px;
    background: #F8FAFC;
}

body.client-portal .avatar,
body.client-portal .topbar .avatar,
body.client-portal .list-row .avatar {
    background: #1E293B;
    color: #FFFFFF;
    border-radius: 11px;
}

body.client-portal .client-topbar {
    background: #FFFFFF;
    border-bottom-color: #E2E8F0;
}

body.client-portal .clock-pill,
body.client-portal .topbar-bell-btn {
    border-color: #E2E8F0;
    background: #F8FAFC;
    color: #475569;
    border-radius: 10px;
}

body.client-portal .topbar-bell-btn:hover {
    border-color: #CBD5E1;
    color: #1D4ED8;
}

body.client-portal .topbar-bell-count,
body.client-portal .nav-count-badge {
    background: #334155;
    box-shadow: none;
}

body.client-portal .nav-badge { background: #334155; }
body.client-portal .nav-badge-amber { background: #D97706; color: #FFFFFF; }
body.client-portal .nav-badge-emerald { background: #059669; color: #FFFFFF; }
body.client-portal .nav-badge-danger { background: #DC2626; }
body.client-portal .nav-count-badge.badge-amber { background: #D97706; color: #FFFFFF; }
body.client-portal .nav-count-badge.badge-danger { background: #DC2626; color: #FFFFFF; }
body.client-portal .nav-count-badge.badge-emerald { background: #059669; color: #FFFFFF; }

body.client-portal .client-emergency-trigger,
body.client-portal [style*="box-shadow"] {
    box-shadow: none !important;
}

body.client-portal .page-head:not(.emergency-page-head) {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px 20px;
    gap: 18px;
}

body.client-portal .page-head:not(.emergency-page-head) h1 {
    font-size: clamp(24px, 3vw, 30px);
    letter-spacing: -0.7px;
}

body.client-portal .page-head:not(.emergency-page-head) p {
    max-width: 720px;
    line-height: 1.55;
}

body.client-portal .hero {
    background: #FFFFFF;
    color: #1E293B;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #1D4ED8;
    border-radius: 18px !important;
    padding: 24px;
}

body.client-portal .hero h1 { color: #1E293B; }
body.client-portal .hero p { color: #64748B; line-height: 1.55; }
body.client-portal .hero .eyebrow { color: #1D4ED8; }
body.client-portal .hero .connected-pill {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0;
    color: #475569 !important;
}
body.client-portal .hero .btn-secondary {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
}

body.client-portal .card,
body.client-portal .tracker-card,
body.client-portal .invoice-card,
body.client-portal .receipts-section {
    border-color: #E2E8F0;
    border-radius: 16px;
    box-shadow: none;
}

body.client-portal .card-head,
body.client-portal .tracker-head {
    border-color: #E2E8F0;
}

body.client-portal .stats .stat,
body.client-portal .fact {
    border-color: #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
}

body.client-portal .stat-featured {
    background: #1E293B;
    border-color: #1E293B;
}

body.client-portal .stat-featured .stat-label,
body.client-portal .stat-featured .stat-note { color: #CBD5E1; }

body.client-portal .stat-featured .stat-icon {
    background: #334155;
    color: #FFFFFF;
}

body.client-portal .stat-icon,
body.client-portal .list-icon,
body.client-portal .native-quick-icon {
    background: #F1F5F9;
    color: #1D4ED8;
}

body.client-portal .list-row,
body.client-portal .feed-item,
body.client-portal .job-card,
body.client-portal .action-tile,
body.client-portal .native-quick-card,
body.client-portal .vehicle-app-card,
body.client-portal .receipt-item {
    border-color: #E2E8F0;
    box-shadow: none;
    transition: none;
}

body.client-portal .list-row:hover,
body.client-portal .feed-item:hover,
body.client-portal .job-card:hover,
body.client-portal .action-tile:hover,
body.client-portal .native-quick-card:hover,
body.client-portal .vehicle-app-card:hover,
body.client-portal .receipt-item:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
    box-shadow: none;
    transform: none;
}

body.client-portal .pills { gap: 7px; }
body.client-portal .pill {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #475569;
}
body.client-portal .pill:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #1D4ED8;
}
body.client-portal .pill.is-on,
body.client-portal .timeline .badge.is-on {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #1D4ED8;
}

body.client-portal .badge {
    background: #F1F5F9;
    color: #334155;
}
body.client-portal .badge-in_progress {
    background: #FFF7ED;
    color: #C2410C;
}
body.client-portal .badge-sent,
body.client-portal .badge-partial {
    background: #EAF0F7;
    color: #1D4ED8;
}
body.client-portal .badge-booked {
    background: #EFF6FF;
    color: #1D4ED8;
}
body.client-portal .badge-checked_in {
    background: #ECFEFF;
    color: #0E7490;
}
body.client-portal .badge-diagnosing {
    background: #EEF2FF;
    color: #4338CA;
}
body.client-portal .badge-awaiting_approval {
    background: #FFFBEB;
    color: #B45309;
}
body.client-portal .badge-quality_check {
    background: #F0FDFA;
    color: #0F766E;
}
body.client-portal .badge-ready_collection {
    background: #F0FDF4;
    color: #15803D;
}
body.client-portal .badge-invoiced {
    background: #E0E7FF;
    color: #3730A3;
}
body.client-portal .badge-completed,
body.client-portal .badge-accepted,
body.client-portal .badge-paid,
body.client-portal .badge-active {
    background: #DCFCE7;
    color: #166534;
}
body.client-portal .badge-awaiting_parts {
    background: #F5F3FF;
    color: #6D28D9;
}
body.client-portal .badge-expired {
    background: #FEF3C7;
    color: #92400E;
}
body.client-portal .badge-cancelled,
body.client-portal .badge-declined,
body.client-portal .badge-void,
body.client-portal .badge-fail,
body.client-portal .badge-inactive {
    background: #FEE2E2;
    color: #991B1B;
}

body.client-portal .tracker-step-dot {
    background: #F1F5F9;
    border-color: #CBD5E1;
}
body.client-portal .tracker-step.is-current .tracker-step-dot { box-shadow: none; }

body.client-portal .btn-secondary {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
}
body.client-portal .btn-secondary:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
    color: #1E293B;
}

body.client-portal input[type="text"],
body.client-portal input[type="email"],
body.client-portal input[type="password"],
body.client-portal input[type="number"],
body.client-portal input[type="date"],
body.client-portal input[type="datetime-local"],
body.client-portal input[type="tel"],
body.client-portal input[type="url"],
body.client-portal input[type="search"],
body.client-portal select,
body.client-portal textarea {
    background-color: #FFFFFF;
    border-color: #CBD5E1;
    border-radius: 10px;
}

body.client-portal input:hover,
body.client-portal select:hover,
body.client-portal textarea:hover { border-color: #94A3B8; }

body.client-portal input:focus,
body.client-portal select:focus,
body.client-portal textarea:focus {
    background-color: #FFFFFF;
    border-color: #1D4ED8;
    box-shadow: none;
    outline: 3px solid #DBEAFE;
    outline-offset: 0;
}

body.client-portal input[type="file"] {
    border-color: #94A3B8;
    background: #F8FAFC;
}
body.client-portal input[type="file"]:hover,
body.client-portal input[type="file"]:focus { background: #F1F5F9; }

body.client-portal .booking-chip,
body.client-portal .doc-tag-pill {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #334155;
}

body.client-portal .update-drawer {
    border-left: 1px solid #E2E8F0;
    box-shadow: none;
}

body.client-portal .reveal,
body.client-portal .indicator-dot-pulse,
body.client-portal [style*="transition:"] {
    animation: none;
    transition: none !important;
}

body.client-portal [style*="background:#EFF6FF"],
body.client-portal [style*="background: #EFF6FF"],
body.client-portal [style*="background:#EEF2FF"],
body.client-portal [style*="background: #EEF2FF"] {
    background: #F1F5F9 !important;
}

body.client-portal [style*="background:#DBEAFE"],
body.client-portal [style*="background: #DBEAFE"] {
    background: #EAF0F7 !important;
}

body.client-auth .auth-hero-centered { background: #F8FAFC; }
body.client-auth .auth-card-centered {
    border-color: #E2E8F0;
    border-radius: 20px !important;
    box-shadow: none !important;
}
body.client-auth .auth-logo-animated { animation: none; }
body.client-auth .auth-segmented {
    background: #F1F5F9;
    border-color: #E2E8F0;
}
body.client-auth .auth-segmented a.is-active {
    color: #1D4ED8;
    box-shadow: none;
}
body.client-auth [style*="box-shadow"] { box-shadow: none !important; }

@media (max-width: 899px) {
    body.client-portal .sidebar-toggle-btn,
    body.client-portal .sidebar-floating-btn,
    body.client-portal .sidebar,
    body.client-portal .sidebar-backdrop {
        display: none !important;
    }
    body.client-portal .client-topbar { padding: 0 14px; }
    body.client-portal .topbar-brand img { height: 32px; max-width: 176px; }
    body.client-portal .client-main {
        padding: calc(var(--mt-topbar) + 16px) 14px calc(var(--mt-bottom) + env(safe-area-inset-bottom));
    }
    body.client-portal .mobile-nav-native {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 99999 !important;
        padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        border-width: 1px 0 0 !important;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05) !important;
        border-top-color: rgba(226, 232, 240, 0.85) !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    body.client-portal .mobile-nav-native a {
        border-radius: 10px;
        color: #64748B;
        font-size: 10px;
        font-weight: 500;
    }
    body.client-portal .mobile-nav-native a.is-active {
        background: transparent;
        color: #2563EB;
        font-weight: 600;
    }
    body.client-portal .mobile-nav-native .nav-fab {
        background: transparent !important;
        margin-top: -14px !important;
    }
    body.client-portal .mobile-nav-native .nav-count-badge {
        background: #EF4444;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    body.client-portal .page-head:not(.emergency-page-head),
    body.client-portal .hero {
        padding: 16px;
        border-radius: 14px !important;
    }
    body.client-portal .hero .actions,
    body.client-portal .page-head:not(.emergency-page-head) .actions { width: 100%; }
    body.client-portal .hero .actions .btn,
    body.client-portal .page-head:not(.emergency-page-head) .actions .btn { flex: 1 1 100%; }
    body.client-portal .card,
    body.client-portal .tracker-card,
    body.client-portal .invoice-card,
    body.client-portal .receipts-section { border-radius: 14px; }
}

/* Chrome install experience for the Moz-Tech client PWA */
body.client-portal .client-install-trigger {
    min-height: 36px;
    padding: 0 11px;
    border-color: #CBD5E1;
    background: #FFFFFF;
    color: #334155;
    border-radius: 10px;
}

body.client-portal .client-install-trigger:hover {
    border-color: #94A3B8;
    background: #F8FAFC;
    color: #1D4ED8;
}

body.client-portal .client-install-trigger[hidden],
body.client-portal .client-mobile-install[hidden],
body.client-auth .auth-pwa-install[hidden] { display: none !important; }

body.client-portal .client-mobile-actions { display: none; }

body.client-portal .pwa-install-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: 20px;
    border: 1px solid #CBD5E1;
    border-left: 4px solid #1D4ED8;
    border-radius: 16px;
    background: #FFFFFF;
    scroll-margin-top: 84px;
}

body.client-portal .pwa-install-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #F1F5F9;
    color: #1D4ED8;
}

body.client-portal .pwa-install-icon svg { width: 23px; height: 23px; }
body.client-portal .pwa-install-copy { min-width: 0; }

body.client-portal .pwa-install-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #1D4ED8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

body.client-portal .pwa-install-card h2 {
    margin: 0;
    color: #1E293B;
    font-size: 17px;
    letter-spacing: -0.2px;
}

body.client-portal .pwa-install-card p {
    margin: 5px 0 0;
    color: #64748B;
    font-size: 13px;
    line-height: 1.55;
}

body.client-portal .pwa-install-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 9px;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    background: #F8FAFC;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

body.client-portal .pwa-install-status svg { width: 15px; height: 15px; }
body.client-portal .pwa-install-status[data-state="ready"] {
    background: #EAF0F7;
    border-color: #BFDBFE;
    color: #1D4ED8;
}
body.client-portal .pwa-install-status[data-state="installed"] {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
}
body.client-portal .pwa-install-status[data-state="guide"] {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

body.client-portal .pwa-install-instructions {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
}

body.client-portal .pwa-install-instructions strong {
    display: block;
    color: #334155;
    font-size: 12px;
}

body.client-portal .pwa-install-instructions p { margin-top: 4px; }

body.client-portal .pwa-install-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 152px;
}

body.client-portal .pwa-install-actions .btn { white-space: nowrap; }

body.client-auth .auth-pwa-install {
    width: 100%;
    min-height: 42px;
    margin: -4px 0 16px;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    background: #FFFFFF;
    color: #334155;
    cursor: pointer;
    font-weight: 700;
}

body.client-auth .auth-pwa-install:hover {
    border-color: #94A3B8;
    color: #1D4ED8;
}

@media (max-width: 899px) {
    body.client-portal .client-mobile-actions {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-left: auto;
    }
    body.client-portal .client-mobile-install,
    body.client-portal .client-mobile-account {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #E2E8F0;
        border-radius: 9px;
        background: #FFFFFF;
        color: #475569;
    }
    body.client-portal .client-mobile-install {
        cursor: pointer;
        color: #1D4ED8;
    }
    body.client-portal .client-mobile-install svg,
    body.client-portal .client-mobile-account svg { width: 17px; height: 17px; }
    body.client-portal .pwa-install-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 13px;
        padding: 16px;
        border-radius: 14px;
    }
    body.client-portal .pwa-install-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }
    body.client-portal .pwa-install-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-width: 0;
    }
    body.client-portal .pwa-install-actions .btn {
        min-width: 0;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE AUTHENTICATION SCREENS                                  */
/* ------------------------------------------------------------------ */
.auth-screen {
    background: #F8FAFC;
    color: #1E293B;
}

.auth-screen .auth-shell {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    background: #F8FAFC;
}

.auth-screen .auth-brand-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 24px;
    background: #1D4ED8;
    color: #FFFFFF;
}

.auth-screen .auth-brand-lockup,
.auth-screen .auth-mobile-lockup {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    color: #FFFFFF;
    text-decoration: none;
}

.auth-screen .auth-brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #BFDBFE;
    border-radius: 11px;
    background: #FFFFFF;
}

.auth-screen .auth-brand-mark img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.auth-screen .auth-brand-lockup strong {
    display: block;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.auth-screen .auth-brand-lockup small {
    display: block;
    margin-top: 2px;
    color: #DBEAFE;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.auth-screen .auth-brand-copy {
    max-width: 420px;
    margin: auto 0 26px;
}

.auth-screen .auth-kicker,
.auth-screen .auth-card-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.auth-screen .auth-kicker { color: #BFDBFE; }

.auth-screen .auth-brand-copy h2 {
    max-width: 380px;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(29px, 3.2vw, 44px);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.06;
}

.auth-screen .auth-brand-copy p {
    max-width: 390px;
    margin: 16px 0 0;
    color: #DBEAFE;
    font-size: 15px;
    line-height: 1.65;
}

.auth-screen .auth-brand-list {
    display: grid;
    gap: 10px;
    max-width: 420px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-screen .auth-brand-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid #3B82F6;
    border-radius: 10px;
    background: #1D4ED8;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
}

.auth-screen .auth-brand-list svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #BFDBFE;
}

.auth-screen .auth-brand-footer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #DBEAFE;
    font-size: 12px;
    font-weight: 700;
}

.auth-screen .auth-brand-footer svg {
    width: 16px;
    height: 16px;
    color: #BFDBFE;
}

.auth-screen .auth-form-pane {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 28px 20px;
    background: #F8FAFC;
}

.auth-screen .auth-mobile-lockup { display: none; }

.auth-screen .auth-form-card {
    width: 100%;
    max-width: 492px;
    margin: auto;
    padding: 30px;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    background: #FFFFFF;
}

.auth-screen .auth-form-card--register { max-width: 590px; }

.auth-screen .auth-card-heading {
    margin-bottom: 24px;
}

.auth-screen .auth-card-eyebrow {
    margin-bottom: 8px;
    color: #1D4ED8;
}

.auth-screen .auth-card-heading h1 {
    margin: 0;
    color: #1E293B;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.auth-screen .auth-card-heading p {
    margin: 8px 0 0;
    color: #64748B;
    font-size: 14px;
    line-height: 1.55;
}

.auth-screen .auth-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.auth-screen .auth-form-grid .field { gap: 7px; }

.auth-screen .auth-form-grid .field > label {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.auth-screen .auth-form-grid .control > svg {
    left: 15px;
    width: 18px;
    height: 18px;
    color: #1D4ED8;
}

.auth-screen .auth-form-grid input {
    min-height: 54px;
    border-color: #CBD5E1;
    border-radius: 11px;
    background: #FFFFFF;
    color: #1E293B;
    font-size: 15px;
}

.auth-screen .auth-form-grid input:hover { border-color: #94A3B8; }

.auth-screen .auth-form-grid input:focus {
    border-color: #1D4ED8;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px #DBEAFE;
}

.auth-screen .auth-pin-input {
    font-size: 18px !important;
    letter-spacing: 0.22em;
}

.auth-screen .auth-field-help {
    margin: 1px 0 0;
    color: #64748B;
    font-size: 12px;
    line-height: 1.45;
}

.auth-screen .auth-required {
    color: #1D4ED8;
    font-weight: 800;
}

.auth-screen .auth-optional {
    margin-left: 4px;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
}

.auth-screen .auth-submit {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
}

.auth-screen .auth-submit svg {
    width: 17px;
    height: 17px;
}

.auth-screen .auth-session-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 12px;
    line-height: 1.45;
}

.auth-screen .auth-session-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #1D4ED8;
}

.auth-screen .auth-route-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #E2E8F0;
}

.auth-screen .auth-route-links--single { justify-content: center; }

.auth-screen .auth-route-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.auth-screen .auth-route-links a:hover { color: #1D4ED8; }

.auth-screen .auth-route-links svg {
    width: 15px;
    height: 15px;
}

.auth-screen .auth-segmented {
    margin: 0 0 18px;
    padding: 4px;
    border-color: #E2E8F0;
    border-radius: 11px;
    background: #F8FAFC;
}

.auth-screen .auth-segmented a {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #64748B;
    font-size: 12px;
    transition: color 160ms ease, background-color 160ms ease;
}

.auth-screen .auth-segmented a svg {
    width: 15px;
    height: 15px;
}

.auth-screen .auth-segmented a.is-active {
    background: #FFFFFF;
    color: #1D4ED8;
    box-shadow: none;
}

body.client-auth.auth-screen .auth-pwa-install {
    min-height: 42px;
    margin: 0 0 16px;
    border-color: #CBD5E1;
    border-radius: 11px;
    background: #FFFFFF;
    color: #334155;
}

body.client-auth.auth-screen .auth-pwa-install:hover {
    border-color: #94A3B8;
    color: #1D4ED8;
}

body.client-auth.auth-screen .auth-pwa-install[hidden] { display: none !important; }

@media (min-width: 720px) {
    .auth-screen .auth-form-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }

    .auth-screen .auth-form-grid--two .auth-submit--wide { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
    .auth-screen .auth-shell {
        grid-template-columns: minmax(360px, 0.8fr) minmax(560px, 1.2fr);
    }

    .auth-screen .auth-brand-pane { padding: 48px clamp(36px, 5vw, 88px); }
    .auth-screen .auth-form-pane { padding: 48px clamp(36px, 6vw, 104px); }
    .auth-screen .auth-form-card { padding: 34px; }
}

@media (max-width: 899px) {
    .auth-screen .auth-brand-pane {
        min-height: 82px;
        padding: 18px 16px;
        border-bottom: 1px solid #1E40AF;
    }

    .auth-screen .auth-brand-copy,
    .auth-screen .auth-brand-list,
    .auth-screen .auth-brand-footer { display: none; }

    .auth-screen .auth-brand-lockup { gap: 10px; }

    .auth-screen .auth-brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .auth-screen .auth-brand-mark img {
        width: 27px;
        height: 27px;
    }

    .auth-screen .auth-brand-lockup strong { font-size: 13px; }
    .auth-screen .auth-brand-lockup small { font-size: 9px; }

    .auth-screen .auth-form-pane {
        align-items: flex-start;
        padding: 20px 14px calc(26px + env(safe-area-inset-bottom));
    }

    .auth-screen .auth-form-card {
        max-width: none;
        margin: 0;
        padding: 24px 18px;
        border-radius: 16px;
    }

    .auth-screen .auth-card-heading { margin-bottom: 20px; }
    .auth-screen .auth-card-heading h1 { font-size: 25px; }
    .auth-screen .auth-card-heading p { font-size: 13px; }
    .auth-screen .auth-form-grid { gap: 14px; }
    .auth-screen .auth-form-grid input { min-height: 52px; }
    .auth-screen .auth-route-links { margin-top: 18px; padding-top: 16px; }
}

@media (max-width: 420px) {
    .auth-screen .auth-segmented a { font-size: 11px; }
    .auth-screen .auth-segmented a svg { display: none; }
    .auth-screen .auth-route-links { gap: 10px; }
    .auth-screen .auth-route-links a { font-size: 11px; }
}

/* White, centered Moz-Tech authentication identity. */
.auth-screen .auth-shell { background: #FFFFFF; }

.auth-screen .auth-brand-pane {
    align-items: center;
    text-align: center;
    border-right: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #1E293B;
}

.auth-screen .auth-brand-lockup {
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.auth-screen .auth-brand-mark {
    width: 58px;
    height: 58px;
    border-color: #BFDBFE;
    border-radius: 14px;
    background: #FFFFFF;
}

.auth-screen .auth-brand-mark img {
    width: 40px;
    height: 40px;
}

.auth-screen .auth-brand-lockup strong { color: #1E293B; }
.auth-screen .auth-brand-lockup small { color: #64748B; }

.auth-screen .auth-brand-copy {
    margin: auto 0 26px;
    text-align: center;
}

.auth-screen .auth-kicker { color: #1D4ED8; }

.auth-screen .auth-brand-copy h2 {
    margin-right: auto;
    margin-left: auto;
    color: #1E293B;
}

.auth-screen .auth-brand-copy p {
    margin-right: auto;
    margin-left: auto;
    color: #64748B;
}

.auth-screen .auth-brand-list { width: 100%; }

.auth-screen .auth-brand-list li {
    justify-content: center;
    border-color: #E2E8F0;
    background: #F8FAFC;
    color: #334155;
}

.auth-screen .auth-brand-list svg,
.auth-screen .auth-brand-footer svg { color: #1D4ED8; }

.auth-screen .auth-brand-footer {
    justify-content: center;
    color: #64748B;
}

.auth-screen .auth-form-pane { background: #FFFFFF; }

@media (max-width: 899px) {
    .auth-screen .auth-brand-pane {
        min-height: 0;
        padding: 14px 16px;
        border-right: 0;
        border-bottom: 1px solid #E2E8F0;
    }

    .auth-screen .auth-brand-lockup {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .auth-screen .auth-brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .auth-screen .auth-brand-mark img {
        width: 27px;
        height: 27px;
    }
}

/* ------------------------------------------------------------------ */
/* PUBLIC CLIENT WEBSITE                                               */
/* ------------------------------------------------------------------ */
.marketing-site {
    min-height: 100vh;
    background: #FFFFFF;
    color: #1E293B;
}

.marketing-site *,
.marketing-site *::before,
.marketing-site *::after { box-sizing: border-box; }

.marketing-container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.marketing-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid #E2E8F0;
    background: #FFFFFF;
}

.marketing-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.marketing-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.marketing-brand img {
    width: auto;
    height: 42px;
    max-width: 198px;
    object-fit: contain;
    object-position: left center;
}

.marketing-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-left: auto;
}

.marketing-nav a,
.marketing-login-link {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.marketing-nav a:hover,
.marketing-login-link:hover { color: #1D4ED8; }

.marketing-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.marketing-site .btn {
    min-height: 44px;
    border-radius: 10px;
    box-shadow: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.marketing-site .btn:active { transform: none; }

.marketing-header-cta {
    min-height: 40px !important;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 800;
}

.marketing-menu-toggle,
.marketing-mobile-menu,
.marketing-menu-scrim { display: none; }

body.marketing-menu-open { overflow: hidden; }

.marketing-hero {
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.marketing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 56px 0;
}

.marketing-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #1D4ED8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.marketing-hero h1,
.marketing-section-heading h2,
.marketing-portal-callout h2 {
    margin: 0;
    color: #1E293B;
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.07;
}

.marketing-hero h1 {
    max-width: 680px;
    font-size: clamp(38px, 6vw, 64px);
}

.marketing-lead {
    max-width: 620px;
    margin: 20px 0 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.65;
}

.marketing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.marketing-primary-action,
.marketing-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    font-size: 13px;
    font-weight: 800;
}

.marketing-primary-action svg,
.marketing-secondary-action svg { width: 16px; height: 16px; }

.marketing-site .marketing-secondary-action {
    border-color: #CBD5E1;
    background: #FFFFFF;
    color: #334155;
}

.marketing-site .marketing-secondary-action:hover {
    border-color: #94A3B8;
    background: #FFFFFF;
    color: #1D4ED8;
}

.marketing-hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 22px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.marketing-hero-notes span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.marketing-hero-notes svg { width: 15px; height: 15px; color: #1D4ED8; }

.marketing-hero-panel {
    padding: 24px;
    border: 1px solid #CBD5E1;
    border-top: 4px solid #1D4ED8;
    border-radius: 16px;
    background: #FFFFFF;
}

.marketing-panel-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1D4ED8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.marketing-panel-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EFF6FF;
}

.marketing-panel-icon svg { width: 20px; height: 20px; }

.marketing-hero-panel h2 {
    margin: 20px 0 0;
    color: #1E293B;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.marketing-hero-panel > p {
    margin: 10px 0 0;
    color: #64748B;
    font-size: 14px;
    line-height: 1.6;
}

.marketing-panel-list {
    display: grid;
    gap: 10px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.marketing-panel-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.marketing-panel-list svg {
    width: 17px;
    height: 17px;
    padding: 2px;
    border-radius: 50%;
    background: #DBEAFE;
    color: #1D4ED8;
}

.marketing-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1D4ED8;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.marketing-panel-link svg { width: 16px; height: 16px; }

.marketing-assurance {
    border-bottom: 1px solid #E2E8F0;
    background: #FFFFFF;
}

.marketing-assurance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.marketing-assurance-grid > div {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 20px 0;
    border-bottom: 1px solid #E2E8F0;
}

.marketing-assurance-grid > div:last-child { border-bottom: 0; }

.marketing-assurance-grid > div > svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: #1D4ED8;
}

.marketing-assurance-grid strong,
.marketing-assurance-grid small { display: block; }
.marketing-assurance-grid strong { color: #334155; font-size: 13px; }
.marketing-assurance-grid small { margin-top: 3px; color: #64748B; font-size: 12px; line-height: 1.45; }

.marketing-uganda {
    padding: 68px 0;
    background:
        radial-gradient(circle at 92% 4%, rgba(59, 130, 246, 0.34), transparent 42%),
        linear-gradient(135deg, #0B1B3A 0%, #0F2550 100%);
}

.marketing-uganda-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.marketing-uganda .marketing-eyebrow { color: #93C5FD; }

.marketing-uganda h2 {
    max-width: 600px;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.marketing-uganda-copy p {
    max-width: 590px;
    margin: 16px 0 0;
    color: #C7D3E5;
    font-size: 14.5px;
    line-height: 1.7;
}

.marketing-uganda-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.marketing-uganda-facts span {
    padding: 9px 13px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.055);
    color: #C7D3E5;
    font-size: 11.5px;
    font-weight: 600;
}

.marketing-uganda-facts strong {
    margin-right: 3px;
    color: #FFFFFF;
    font-size: 13px;
}

.marketing-difference-list {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketing-difference-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
}

.marketing-difference-list li > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: #60A5FA;
}

.marketing-difference-list h3 {
    margin: 0 0 4px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.marketing-difference-list p {
    margin: 0;
    color: #AEBBD0;
    font-size: 12.5px;
    line-height: 1.55;
}

.marketing-section { padding: 72px 0; background: #FFFFFF; }
.marketing-section-muted { border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; background: #F8FAFC; }

.marketing-section-heading { max-width: 680px; }

.marketing-section-heading h2,
.marketing-portal-callout h2 { font-size: clamp(29px, 4vw, 42px); }

.marketing-section-heading p {
    margin: 15px 0 0;
    color: #64748B;
    font-size: 15px;
    line-height: 1.65;
}

.marketing-specialists {
    padding-top: 15px;
    border-top: 1px solid #E2E8F0;
    color: #475569 !important;
    font-size: 13px !important;
}

.marketing-specialists strong { color: #334155; }

.marketing-service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.marketing-service-card {
    padding: 22px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
}

.marketing-service-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EFF6FF;
    color: #1D4ED8;
}

.marketing-service-icon svg { width: 21px; height: 21px; }

.marketing-service-card h3 {
    margin: 18px 0 7px;
    color: #1E293B;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-service-card p {
    margin: 0;
    color: #64748B;
    font-size: 13px;
    line-height: 1.6;
}

.marketing-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.marketing-process-list {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: process;
}

.marketing-process-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
}

.marketing-process-list li > span {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 11px;
    font-weight: 800;
}

.marketing-process-list h3 {
    margin: 1px 0 4px;
    color: #334155;
    font-size: 15px;
    font-weight: 800;
}

.marketing-process-list p {
    margin: 0;
    color: #64748B;
    font-size: 13px;
    line-height: 1.5;
}

.marketing-portal-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 28px;
    border: 1px solid #CBD5E1;
    border-left: 4px solid #1D4ED8;
    border-radius: 16px;
    background: #FFFFFF;
}

.marketing-portal-callout p {
    max-width: 650px;
    margin: 13px 0 0;
    color: #64748B;
    font-size: 15px;
    line-height: 1.6;
}

.marketing-callout-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.marketing-contact { padding: 72px 0; background: #F8FAFC; }

.marketing-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 30px;
}

.marketing-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 17px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #334155;
    text-decoration: none;
}

a.marketing-contact-item:hover { border-color: #94A3B8; color: #334155; }

.marketing-contact-item > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: #1D4ED8;
}

.marketing-contact-item strong,
.marketing-contact-item span { display: block; }
.marketing-contact-item strong { color: #334155; font-size: 12px; font-weight: 800; }
.marketing-contact-item span { margin-top: 4px; color: #64748B; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

.marketing-footer {
    border-top: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.marketing-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "brand"
        "nav"
        "access"
        "meta";
    align-items: center;
    gap: 20px;
    padding: 30px 0 24px;
}

.marketing-footer-brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.marketing-footer-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.marketing-footer-logo img {
    width: auto;
    height: 34px;
    max-width: 166px;
    object-fit: contain;
    object-position: left center;
}

.marketing-footer-tagline {
    min-width: 0;
    color: #64748B;
    font-size: 12px;
    line-height: 1.45;
}

.marketing-footer-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.marketing-footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color 180ms ease;
}

.marketing-footer-nav a svg { display: none; }
.marketing-footer-nav a:hover { color: #1D4ED8; }

.marketing-footer-access {
    grid-area: access;
    display: flex;
    align-items: center;
    gap: 10px;
}

.marketing-footer-signin,
.marketing-footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.marketing-footer-access svg { width: 15px; height: 15px; }

.marketing-footer-signin {
    border-color: #CBD5E1;
    background: #FFFFFF;
    color: #334155;
}

.marketing-footer-signin:hover { border-color: #93C5FD; color: #1D4ED8; }

.marketing-footer-cta { background: #1D4ED8; color: #FFFFFF; }

.marketing-footer-cta:hover {
    background: #1E40AF;
    color: #FFFFFF;
    box-shadow: 0 14px 26px -18px rgba(29, 78, 216, 0.75);
}

.marketing-footer-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid #E2E8F0;
}

.marketing-footer-meta small {
    color: #64748B;
    font-size: 12px;
    line-height: 1.45;
}

.marketing-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #CBD5E1;
    border-radius: 50%;
    background: #FFFFFF;
    color: #334155;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.marketing-back-to-top svg { width: 16px; height: 16px; }

.marketing-back-to-top:hover {
    border-color: #1D4ED8;
    background: #1D4ED8;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* LANDING PAGE MOTION & POLISH                                        */
/* ------------------------------------------------------------------ */
@keyframes marketing-rise {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes marketing-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes marketing-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -24px, 0) scale(1.05); }
}

@keyframes marketing-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes marketing-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.28); }
    70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes marketing-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

html.marketing-motion {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

.marketing-header { transition: background-color 220ms ease, box-shadow 220ms ease; }

.marketing-header.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.marketing-nav a { position: relative; padding-bottom: 4px; }

.marketing-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease;
}

.marketing-nav a:hover::after,
.marketing-nav a:focus-visible::after { transform: scaleX(1); }

.marketing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 14%, rgba(37, 99, 235, 0.1), transparent 36%),
        radial-gradient(circle at 6% 92%, rgba(14, 165, 233, 0.08), transparent 40%),
        radial-gradient(rgba(29, 78, 216, 0.08) 1px, transparent 1px),
        #F8FAFC;
    background-size: auto, auto, 24px 24px, auto;
}

.marketing-hero::before,
.marketing-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.marketing-hero::before {
    width: 460px;
    height: 460px;
    top: -210px;
    right: -130px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0) 68%);
}

.marketing-hero::after {
    width: 520px;
    height: 520px;
    bottom: -310px;
    left: -190px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.14), rgba(14, 165, 233, 0) 70%);
}

.marketing-motion .marketing-hero::before { animation: marketing-drift 16s ease-in-out infinite; }
.marketing-motion .marketing-hero::after { animation: marketing-drift 20s ease-in-out infinite reverse; }

.marketing-motion .marketing-hero-copy > * {
    animation: marketing-rise 760ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.marketing-motion .marketing-hero-copy > :nth-child(1) { animation-delay: 90ms; }
.marketing-motion .marketing-hero-copy > :nth-child(2) { animation-delay: 170ms; }
.marketing-motion .marketing-hero-copy > :nth-child(3) { animation-delay: 250ms; }
.marketing-motion .marketing-hero-copy > :nth-child(4) { animation-delay: 330ms; }
.marketing-motion .marketing-hero-copy > :nth-child(5) { animation-delay: 410ms; }

.marketing-motion .marketing-hero-panel {
    animation: marketing-rise 880ms cubic-bezier(0.22, 0.61, 0.36, 1) 280ms backwards;
}

.marketing-motion .marketing-hero-panel .marketing-panel-list li {
    animation: marketing-fade-in 520ms ease backwards;
}

.marketing-motion .marketing-hero-panel .marketing-panel-list li:nth-child(1) { animation-delay: 700ms; }
.marketing-motion .marketing-hero-panel .marketing-panel-list li:nth-child(2) { animation-delay: 800ms; }
.marketing-motion .marketing-hero-panel .marketing-panel-list li:nth-child(3) { animation-delay: 900ms; }
.marketing-motion .marketing-hero-panel .marketing-panel-link { animation: marketing-fade-in 520ms ease 980ms backwards; }

.marketing-motion .marketing-hero .marketing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.marketing-motion .marketing-hero .marketing-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2563EB;
    animation: marketing-pulse-ring 2.8s ease-out 1.2s infinite;
}

.marketing-hero-accent {
    color: #1D4ED8;
    background-image: linear-gradient(100deg, #1D4ED8 0%, #3B82F6 38%, #0EA5E9 68%, #1D4ED8 100%);
    background-size: 220% 100%;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .marketing-hero-accent {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.marketing-motion .marketing-hero-accent { animation: marketing-gradient-shift 9s ease-in-out infinite; }

.marketing-panel-icon { transition: transform 240ms ease, background-color 240ms ease; }
.marketing-motion .marketing-panel-icon { animation: marketing-float 5.5s ease-in-out 1.4s infinite; }
.marketing-hero-panel:hover .marketing-panel-icon { background: #DBEAFE; }

.marketing-hero-panel {
    box-shadow: 0 24px 60px -46px rgba(15, 23, 42, 0.55);
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.marketing-hero-panel:hover {
    transform: translateY(-4px);
    border-color: #BFDBFE;
    border-top-color: #1D4ED8;
    box-shadow: 0 34px 72px -46px rgba(29, 78, 216, 0.5);
}

.marketing-panel-link svg { transition: transform 200ms ease; }
.marketing-panel-link:hover svg { transform: translateX(4px); }

.marketing-site .btn {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.marketing-site .marketing-primary-action:hover,
.marketing-site .marketing-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -16px rgba(37, 99, 235, 0.55);
}

.marketing-site .marketing-secondary-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -20px rgba(15, 23, 42, 0.45);
}

.marketing-site .btn:active { transform: translateY(0); }

.marketing-primary-action,
.marketing-header-cta { position: relative; overflow: hidden; }

.marketing-primary-action::after,
.marketing-header-cta::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -75%;
    width: 46%;
    height: 160%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-18deg);
    transition: left 560ms ease;
    pointer-events: none;
}

.marketing-primary-action:hover::after,
.marketing-header-cta:hover::after { left: 135%; }

.marketing-assurance-grid > div > svg { transition: transform 220ms ease; }
.marketing-assurance-grid > div:hover > svg { transform: translateY(-2px) scale(1.08); }

.marketing-service-card {
    position: relative;
    overflow: hidden;
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.marketing-service-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #1D4ED8, #38BDF8);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms ease;
}

.marketing-service-card:hover {
    transform: translateY(-5px);
    border-color: #BFDBFE;
    box-shadow: 0 22px 42px -28px rgba(29, 78, 216, 0.45);
}

.marketing-service-card:hover::before { transform: scaleX(1); }

.marketing-service-icon { transition: background-color 220ms ease, color 220ms ease, transform 220ms ease; }
.marketing-service-card:hover .marketing-service-icon { background: #1D4ED8; color: #FFFFFF; transform: translateY(-2px) rotate(-4deg); }

.marketing-difference-list li {
    transition: transform 240ms ease, border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}

.marketing-difference-list li:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 20px 40px -28px rgba(2, 6, 23, 0.85);
}

.marketing-difference-list li > svg { transition: transform 240ms ease; }
.marketing-difference-list li:hover > svg { transform: scale(1.12) rotate(-4deg); }

.marketing-process-list li { transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }

.marketing-process-list li:hover {
    transform: translateX(4px);
    border-color: #BFDBFE;
    box-shadow: 0 18px 34px -26px rgba(15, 23, 42, 0.35);
}

.marketing-process-list li > span { transition: background-color 220ms ease, color 220ms ease, transform 220ms ease; }
.marketing-process-list li:hover > span { background: #1D4ED8; color: #FFFFFF; transform: scale(1.06); }

.marketing-portal-callout {
    position: relative;
    overflow: hidden;
    transition: border-color 260ms ease, box-shadow 260ms ease;
}

.marketing-portal-callout::after {
    content: "";
    position: absolute;
    top: -150px;
    right: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.13), rgba(37, 99, 235, 0) 68%);
    opacity: 0;
    transition: opacity 320ms ease;
    pointer-events: none;
}

.marketing-portal-callout:hover {
    border-color: #93C5FD;
    border-left-color: #1D4ED8;
    box-shadow: 0 28px 60px -42px rgba(29, 78, 216, 0.5);
}

.marketing-portal-callout:hover::after { opacity: 1; }

.marketing-contact-item { transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }

a.marketing-contact-item:hover {
    transform: translateY(-3px);
    border-color: #93C5FD;
    box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.4);
}

.marketing-contact-item > svg { transition: transform 240ms ease; }
a.marketing-contact-item:hover > svg { transform: translateY(-1px) scale(1.08); }

.marketing-motion .marketing-reveal {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
        translate 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.marketing-motion .marketing-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
}

.marketing-motion .marketing-assurance-grid > .marketing-reveal:nth-child(2),
.marketing-motion .marketing-service-grid > .marketing-reveal:nth-child(2),
.marketing-motion .marketing-process-list > .marketing-reveal:nth-child(2),
.marketing-motion .marketing-difference-list > .marketing-reveal:nth-child(2),
.marketing-motion .marketing-contact-grid > .marketing-reveal:nth-child(2) { --reveal-delay: 80ms; }

.marketing-motion .marketing-assurance-grid > .marketing-reveal:nth-child(3),
.marketing-motion .marketing-service-grid > .marketing-reveal:nth-child(3),
.marketing-motion .marketing-process-list > .marketing-reveal:nth-child(3),
.marketing-motion .marketing-difference-list > .marketing-reveal:nth-child(3),
.marketing-motion .marketing-contact-grid > .marketing-reveal:nth-child(3) { --reveal-delay: 160ms; }

.marketing-motion .marketing-service-grid > .marketing-reveal:nth-child(4),
.marketing-motion .marketing-difference-list > .marketing-reveal:nth-child(4),
.marketing-motion .marketing-contact-grid > .marketing-reveal:nth-child(4) { --reveal-delay: 240ms; }

.marketing-motion .marketing-difference-list > .marketing-reveal:nth-child(5),
.marketing-motion .marketing-contact-grid > .marketing-reveal:nth-child(5) { --reveal-delay: 320ms; }

.marketing-motion .marketing-difference-list > .marketing-reveal:nth-child(6) { --reveal-delay: 400ms; }

@media (min-width: 640px) {
    .marketing-container { width: min(1120px, calc(100% - 48px)); }
    .marketing-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marketing-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
    .marketing-hero-grid { grid-template-columns: minmax(0, 1.14fr) minmax(330px, 0.86fr); gap: 54px; padding: 86px 0; }
    .marketing-assurance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .marketing-assurance-grid > div { min-height: 88px; padding: 24px 28px; border-right: 1px solid #E2E8F0; border-bottom: 0; }
    .marketing-assurance-grid > div:first-child { padding-left: 0; }
    .marketing-assurance-grid > div:last-child { padding-right: 0; border-right: 0; }
    .marketing-about-grid { grid-template-columns: minmax(0, 0.92fr) minmax(390px, 0.78fr); gap: 74px; }
    .marketing-uganda-grid { grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr); gap: 52px; align-items: center; }
    .marketing-difference-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marketing-portal-callout { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 34px; }
    .marketing-footer-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand access"
            "nav access"
            "meta meta";
        gap: 12px 40px;
        padding: 30px 0 22px;
    }

    .marketing-footer-nav { justify-content: flex-start; }
    .marketing-footer-access { align-self: center; justify-self: end; }
    .marketing-footer-meta { margin-top: 8px; }
}

@media (min-width: 1024px) {
    .marketing-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .marketing-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    /* No-JS fallback keeps the compact scrollable nav row */
    html:not(.marketing-motion) .marketing-header-inner {
        min-height: 62px;
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: 10px 0;
    }

    html:not(.marketing-motion) .marketing-nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 18px;
        overflow-x: auto;
        padding: 4px 0 2px;
        scrollbar-width: none;
    }

    html:not(.marketing-motion) .marketing-nav::-webkit-scrollbar { display: none; }
    html:not(.marketing-motion) .marketing-nav a { flex: 0 0 auto; padding-bottom: 2px; font-size: 12px; }
    html:not(.marketing-motion) .marketing-login-link { display: none; }
    html:not(.marketing-motion) .marketing-header-cta { min-height: 36px !important; padding: 0 11px; font-size: 11px; }

    html.marketing-motion .marketing-header-inner {
        flex-wrap: nowrap;
        min-height: 64px;
        gap: 12px;
        padding: 10px 0;
    }

    .marketing-brand img { height: 32px; max-width: 156px; }
    .marketing-header-actions { margin-left: auto; gap: 0; }
    html.marketing-motion .marketing-nav,
    html.marketing-motion .marketing-login-link,
    html.marketing-motion .marketing-header-cta { display: none; }

    html.marketing-motion .marketing-menu-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #E2E8F0;
        border-radius: 13px;
        background: #FFFFFF;
        color: #0F172A;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    }

    html.marketing-motion .marketing-menu-toggle:hover { border-color: #BFDBFE; background: #EFF6FF; }
    html.marketing-motion .marketing-menu-toggle:focus-visible {
        outline: none;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
    }

    html.marketing-motion .marketing-menu-toggle span {
        position: absolute;
        left: 14px;
        width: 16px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: top 240ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    html.marketing-motion .marketing-menu-toggle span:first-child { top: 17px; }
    html.marketing-motion .marketing-menu-toggle span:last-child { top: 23px; }
    html.marketing-motion .marketing-menu-toggle.is-open { border-color: #BFDBFE; background: #EFF6FF; color: #1D4ED8; }
    html.marketing-motion .marketing-menu-toggle.is-open span:first-child { top: 20px; transform: rotate(45deg); }
    html.marketing-motion .marketing-menu-toggle.is-open span:last-child { top: 20px; transform: rotate(-45deg); }

    html.marketing-motion .marketing-mobile-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 16px;
        right: 16px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px;
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 30px 60px -26px rgba(15, 23, 42, 0.45), 0 2px 8px rgba(15, 23, 42, 0.05);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        translate: 0 -8px;
        transition: opacity 220ms ease, translate 220ms ease, visibility 0s linear 220ms;
    }

    html.marketing-motion .marketing-mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
        transition: opacity 220ms ease, translate 220ms ease, visibility 0s;
    }

    html.marketing-motion .marketing-mobile-links { display: flex; flex-direction: column; gap: 2px; }

    html.marketing-motion .marketing-mobile-links a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 46px;
        padding: 0 12px;
        border-radius: 12px;
        color: #0F172A;
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 180ms ease, color 180ms ease;
    }

    html.marketing-motion .marketing-mobile-links a > svg:first-child { width: 18px; height: 18px; flex: 0 0 auto; color: #2563EB; }
    html.marketing-motion .marketing-mobile-links a > span { flex: 1 1 auto; }
    html.marketing-motion .marketing-mobile-links a > svg:last-child {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        color: #94A3B8;
        transition: color 180ms ease, transform 180ms ease;
    }

    html.marketing-motion .marketing-mobile-links a:hover,
    html.marketing-motion .marketing-mobile-links a:active { background: #EFF6FF; color: #1D4ED8; }
    html.marketing-motion .marketing-mobile-links a:hover > svg:last-child { color: #2563EB; transform: translate(1px, -1px); }

    html.marketing-motion .marketing-mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 13px;
        border-top: 1px solid #F1F5F9;
    }

    html.marketing-motion .marketing-mobile-actions-label {
        color: #94A3B8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    html.marketing-motion .marketing-mobile-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    html.marketing-motion .marketing-mobile-action-grid .btn,
    html.marketing-motion .marketing-mobile-signin {
        width: 100%;
        min-height: 46px !important;
        padding: 0 10px;
        border-radius: 11px;
        font-size: 12px;
        font-weight: 800;
    }

    html.marketing-motion .marketing-mobile-signin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #CBD5E1;
        background: #FFFFFF;
        color: #334155;
        text-decoration: none;
    }

    html.marketing-motion .marketing-mobile-signin svg,
    html.marketing-motion .marketing-mobile-action-grid .btn svg { width: 15px; height: 15px; }
    html.marketing-motion .marketing-mobile-signin:hover { border-color: #93C5FD; color: #1D4ED8; }

    html.marketing-motion .marketing-menu-scrim {
        position: fixed;
        inset: 0;
        z-index: 19;
        display: block;
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms ease, visibility 0s linear 220ms;
    }

    html.marketing-motion .marketing-menu-scrim.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 220ms ease, visibility 0s;
    }

    .marketing-hero-grid { padding: 42px 0; }
    .marketing-hero h1 { font-size: clamp(34px, 11vw, 48px); }
    .marketing-lead { font-size: 15px; }
    .marketing-hero-actions .btn { width: 100%; }
    .marketing-hero-panel { padding: 20px; }
    .marketing-section,
    .marketing-contact { padding: 54px 0; }
    .marketing-uganda { padding: 54px 0; }
    .marketing-uganda h2 { font-size: 32px; }
    .marketing-difference-list li { padding: 15px; }
    .marketing-section-heading h2,
    .marketing-portal-callout h2 { font-size: 30px; }
    .marketing-portal-callout { padding: 22px; }
    .marketing-callout-actions .btn { width: 100%; }
    .marketing-hero::before { width: 300px; height: 300px; top: -140px; right: -120px; }
    .marketing-hero::after { width: 340px; height: 340px; bottom: -210px; left: -150px; }
    html.marketing-motion { scroll-padding-top: 84px; }

    .marketing-footer {
        margin-top: 10px;
        border-top: 0;
        border-radius: 28px 28px 0 0;
        background:
            radial-gradient(110% 80% at 88% -10%, rgba(37, 99, 235, 0.42), rgba(37, 99, 235, 0) 58%),
            radial-gradient(90% 70% at -10% 110%, rgba(14, 165, 233, 0.16), rgba(14, 165, 233, 0) 60%),
            #0B1220;
        color: #E2E8F0;
        overflow: hidden;
    }

    .marketing-footer-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "nav"
            "access"
            "meta";
        gap: 18px;
        padding: 24px 0 calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .marketing-footer-brand {
        gap: 14px;
        padding: 12px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.045);
    }

    .marketing-footer-logo {
        padding: 9px 11px;
        border-radius: 12px;
        background: #FFFFFF;
        box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.8);
    }

    .marketing-footer-logo img { height: 24px; max-width: 138px; }
    .marketing-footer-tagline { color: #B6C2D4; font-size: 11.5px; line-height: 1.4; }

    .marketing-footer-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .marketing-footer-nav a {
        min-height: 47px;
        gap: 9px;
        padding: 0 13px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.05);
        color: #E2E8F0;
        font-size: 12px;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
    }

    .marketing-footer-nav a svg {
        display: inline-block;
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: #60A5FA;
    }

    .marketing-footer-nav a:hover,
    .marketing-footer-nav a:active {
        border-color: rgba(96, 165, 250, 0.45);
        background: rgba(37, 99, 235, 0.2);
        color: #FFFFFF;
    }

    .marketing-footer-access {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .marketing-footer-signin,
    .marketing-footer-cta { min-height: 48px; padding: 0 10px; border-radius: 13px; font-size: 12px; }

    .marketing-footer-signin {
        border-color: rgba(226, 232, 240, 0.24);
        background: rgba(255, 255, 255, 0.06);
        color: #F1F5F9;
    }

    .marketing-footer-signin:hover {
        border-color: rgba(147, 197, 253, 0.65);
        background: rgba(37, 99, 235, 0.18);
        color: #FFFFFF;
    }

    .marketing-footer-cta { background: #F8FAFC; color: #0F172A; }
    .marketing-footer-cta:hover { background: #FFFFFF; color: #1D4ED8; box-shadow: 0 16px 30px -22px rgba(255, 255, 255, 0.5); }
    .marketing-footer-access svg { width: 16px; height: 16px; }

    .marketing-footer-meta {
        padding-top: 15px;
        border-top-color: rgba(148, 163, 184, 0.16);
    }

    .marketing-footer-meta small { color: #8FA0B5; font-size: 11px; }

    .marketing-back-to-top {
        width: 40px;
        height: 40px;
        border-color: rgba(226, 232, 240, 0.22);
        background: rgba(255, 255, 255, 0.07);
        color: #F8FAFC;
    }

    .marketing-back-to-top:hover { border-color: #3B82F6; background: #2563EB; color: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
    html.marketing-motion { scroll-behavior: auto; }

    html.marketing-motion .marketing-menu-toggle,
    html.marketing-motion .marketing-menu-toggle span,
    html.marketing-motion .marketing-mobile-menu,
    html.marketing-motion .marketing-mobile-menu.is-open,
    html.marketing-motion .marketing-menu-scrim,
    html.marketing-motion .marketing-menu-scrim.is-open,
    html.marketing-motion .marketing-mobile-links a,
    html.marketing-motion .marketing-mobile-links a > svg:last-child {
        transition: none;
    }

    html.marketing-motion .marketing-mobile-links a:hover > svg:last-child { transform: none; }

    .marketing-motion .marketing-reveal,
    .marketing-motion .marketing-reveal.is-revealed {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }

    .marketing-motion .marketing-hero-copy > *,
    .marketing-motion .marketing-hero-panel,
    .marketing-motion .marketing-hero-panel .marketing-panel-list li,
    .marketing-motion .marketing-hero-panel .marketing-panel-link,
    .marketing-motion .marketing-hero::before,
    .marketing-motion .marketing-hero::after,
    .marketing-motion .marketing-panel-icon,
    .marketing-motion .marketing-hero-accent,
    .marketing-motion .marketing-hero .marketing-eyebrow::before {
        animation: none;
    }

    .marketing-primary-action::after,
    .marketing-header-cta::after,
    .marketing-service-card::before,
    .marketing-portal-callout::after {
        display: none;
    }

    .marketing-header,
    .marketing-nav a::after,
    .marketing-site .btn,
    .marketing-panel-icon,
    .marketing-hero-panel,
    .marketing-service-card,
    .marketing-service-icon,
    .marketing-difference-list li,
    .marketing-difference-list li > svg,
    .marketing-process-list li,
    .marketing-process-list li > span,
    .marketing-portal-callout,
    .marketing-contact-item,
    .marketing-contact-item > svg,
    .marketing-panel-link svg,
    .marketing-menu-toggle,
    .marketing-menu-toggle span,
    .marketing-mobile-menu,
    .marketing-menu-scrim,
    .marketing-mobile-links a,
    .marketing-mobile-links a > svg:last-child,
    .marketing-footer-nav a,
    .marketing-footer-signin,
    .marketing-footer-cta,
    .marketing-back-to-top,
    .marketing-assurance-grid > div > svg {
        transition: none;
    }

    .marketing-hero-panel:hover,
    .marketing-service-card:hover,
    .marketing-difference-list li:hover,
    .marketing-process-list li:hover,
    a.marketing-contact-item:hover,
    .marketing-site .marketing-primary-action:hover,
    .marketing-site .marketing-header-cta:hover,
    .marketing-site .marketing-secondary-action:hover,
    .marketing-back-to-top:hover,
    .marketing-mobile-links a:hover > svg:last-child {
        transform: none;
    }

    .marketing-service-card:hover .marketing-service-icon,
    .marketing-process-list li:hover > span,
    .marketing-difference-list li:hover > svg,
    .marketing-assurance-grid > div:hover > svg,
    a.marketing-contact-item:hover > svg {
        transform: none;
    }
}

/* ========================================
   Ugandan Digital Number Plate Styles
   Matching New National ITMS Security Plates
   ======================================== */
@font-face {
    font-family: 'FE-Font';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/FE-FONT.woff') format('woff'),
         url('https://fonts.cdnfonts.com/s/12066/FE-FONT.woff') format('woff');
    font-display: swap;
}

.ugandan-digital-plate,
.ugandan-number-plate {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFBFB 45%, #F0F3F6 55%, #FFFFFF 100%);
    border: 2px solid #0B0D12;
    border-radius: 6px;
    padding: 3px 6px 3px 4px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(0,0,0,0.05);
    font-family: 'FE-Font', 'FE-Schrift', 'Euro Plate', 'DIN Alternate', 'DIN Condensed', 'Arial Black', sans-serif;
    user-select: none;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

.ugandan-digital-plate .ug-plate-inner,
.ugandan-number-plate .plate-inner {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.ugandan-digital-plate .ug-plate-meta,
.ugandan-number-plate .plate-sidebar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    text-align: center;
    padding: 1px 2px;
    line-height: 1;
}

.ugandan-digital-plate .ug-plate-flag,
.ugandan-number-plate .plate-flag {
    width: 26px;
    height: 16px;
    border: 0.8px solid #0B0D12;
    border-radius: 1px;
    overflow: hidden;
    display: block;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.2);
}

.ugandan-digital-plate .ug-plate-flag svg,
.ugandan-number-plate .plate-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ugandan-digital-plate .ug-plate-text,
.ugandan-number-plate .plate-country-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0B0D12;
    font-weight: 800;
    margin: 2px 0;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.ugandan-digital-plate .ug-country-name,
.ugandan-number-plate .plate-country {
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.4px;
    line-height: 1;
    color: #0B0D12;
}

.ugandan-digital-plate .ug-country-code {
    font-size: 5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 1.1;
    color: #0B0D12;
    opacity: 0.95;
}

.ugandan-digital-plate .ug-plate-qr,
.ugandan-number-plate .plate-qr {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ugandan-digital-plate .ug-plate-qr svg,
.ugandan-number-plate .plate-qr svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ugandan-digital-plate .ug-plate-bar,
.ugandan-number-plate .plate-divider {
    width: 3px;
    background: #0B0D12;
    border-radius: 1px;
    align-self: stretch;
    margin: 1px 7px 1px 6px;
    flex-shrink: 0;
}

.ugandan-digital-plate .ug-plate-reg,
.ugandan-number-plate .plate-number {
    font-family: 'FE-Font', 'FE-Schrift', 'Euro Plate', 'DIN Alternate', 'DIN Condensed', 'Arial Black', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #0B0D12;
    letter-spacing: 3px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px 0 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.plate-placeholder {
    color: #94A3B8;
    font-size: 12px;
    font-style: italic;
}

/* ----------------------------------------
   Size Variants
   ---------------------------------------- */
.ugandan-digital-plate.ug-plate-lg,
.ugandan-number-plate.plate-large {
    border-width: 2.5px;
    border-radius: 8px;
    padding: 5px 10px 5px 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.ugandan-digital-plate.ug-plate-lg .ug-plate-flag,
.ugandan-number-plate.plate-large .plate-flag {
    width: 34px;
    height: 22px;
}
.ugandan-digital-plate.ug-plate-lg .ug-country-name,
.ugandan-number-plate.plate-large .plate-country {
    font-size: 7.5px;
    margin-top: 2px;
}
.ugandan-digital-plate.ug-plate-lg .ug-country-code {
    font-size: 6px;
}
.ugandan-digital-plate.ug-plate-lg .ug-plate-qr,
.ugandan-number-plate.plate-large .plate-qr {
    width: 20px;
    height: 20px;
}
.ugandan-digital-plate.ug-plate-lg .ug-plate-bar,
.ugandan-number-plate.plate-large .plate-divider {
    width: 3.5px;
    margin: 1px 12px 1px 10px;
}
.ugandan-digital-plate.ug-plate-lg .ug-plate-reg,
.ugandan-number-plate.plate-large .plate-number {
    font-size: 34px;
    letter-spacing: 4px;
    padding: 0 12px 0 4px;
}

.ugandan-digital-plate.ug-plate-sm,
.ugandan-number-plate.plate-small {
    border-width: 1.6px;
    border-radius: 5px;
    padding: 2px 5px 2px 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
.ugandan-digital-plate.ug-plate-sm .ug-plate-flag,
.ugandan-number-plate.plate-small .plate-flag {
    width: 18px;
    height: 11px;
}
.ugandan-digital-plate.ug-plate-sm .ug-country-name,
.ugandan-number-plate.plate-small .plate-country {
    font-size: 5px;
    margin: 1px 0 0;
}
.ugandan-digital-plate.ug-plate-sm .ug-country-code {
    font-size: 4px;
}
.ugandan-digital-plate.ug-plate-sm .ug-plate-qr,
.ugandan-number-plate.plate-small .plate-qr {
    width: 11px;
    height: 11px;
}
.ugandan-digital-plate.ug-plate-sm .ug-plate-bar,
.ugandan-number-plate.plate-small .plate-divider {
    width: 2px;
    margin: 1px 5px 1px 4px;
}
.ugandan-digital-plate.ug-plate-sm .ug-plate-reg,
.ugandan-number-plate.plate-small .plate-number {
    font-size: 16px;
    letter-spacing: 1.8px;
    padding: 0 4px 0 1px;
}

.ugandan-digital-plate.ug-plate-xs {
    border-width: 1.2px;
    border-radius: 3px;
    padding: 1px 4px 1px 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ugandan-digital-plate.ug-plate-xs .ug-plate-flag {
    width: 13px;
    height: 9px;
}
.ugandan-digital-plate.ug-plate-xs .ug-plate-text {
    display: none;
}
.ugandan-digital-plate.ug-plate-xs .ug-plate-qr {
    width: 9px;
    height: 9px;
}
.ugandan-digital-plate.ug-plate-xs .ug-plate-bar {
    width: 1.5px;
    margin: 0 4px 0 3px;
}
.ugandan-digital-plate.ug-plate-xs .ug-plate-reg {
    font-size: 12.5px;
    letter-spacing: 1.2px;
    padding: 0 2px 0 0;
}

@media (max-width: 640px) {
    .ugandan-digital-plate.ug-plate-lg,
    .ugandan-number-plate.plate-large {
        padding: 4px 6px;
    }
    .ugandan-digital-plate.ug-plate-lg .ug-plate-reg,
    .ugandan-number-plate.plate-large .plate-number {
        font-size: 26px;
        letter-spacing: 2.5px;
    }
}

/* ------------------------------------------------------------- */
/* JOB CARD INTAKE — TABLET-FIRST WORK ORDER FORM                */
/* ------------------------------------------------------------- */
.job-intake-page {
    max-width: 1180px;
    margin: 0 auto;
}

.intake-page-head {
    margin-bottom: 14px;
}

.intake-toolbar {
    position: sticky;
    top: calc(var(--mt-topbar) + 8px);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 7px;
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}
.intake-toolbar-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.intake-toolbar-links::-webkit-scrollbar { display: none; }
.intake-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: var(--mt-bg);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.intake-nav-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
}
.intake-nav-chip:hover {
    border-color: #93C5FD;
    background: var(--mt-soft);
    color: var(--mt-deep);
}
.intake-nav-chip:hover span { background: #DBEAFE; color: var(--mt-deep); }
.intake-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.intake-toolbar-no {
    display: none;
    font-size: 12px;
    font-weight: 900;
    color: #DC2626;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.intake-toolbar .intake-save-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.job-card-form {
    padding: 24px;
}
.job-card-form .intake-section-head {
    border-bottom: 1px solid var(--mt-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
    scroll-margin-top: calc(var(--mt-topbar) + 82px);
}
.job-card-form .intake-section-head.is-divided {
    border-top: 1px dashed var(--mt-border);
    padding-top: 18px;
    margin-top: 24px;
}
.intake-section-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.intake-section-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.intake-section-title i {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--mt-blue);
    flex-shrink: 0;
}
.intake-section-title h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.intake-section-head.is-green .intake-section-title i { color: #16A34A; }
.intake-section-head.is-red .intake-section-title i { color: #DC2626; }
.intake-section-head.is-amber .intake-section-title i { color: #D97706; }
.intake-section-note {
    display: block;
    margin-top: 3px;
    color: var(--mt-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.intake-section-top .intake-section-note { margin-top: 0; }
.intake-hint-badge {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.intake-hint-badge i { width: 12px; height: 12px; }

/* Vehicle intake photo bar */
.job-card-form .vehicle-photo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 11px 13px;
    border: 1px dashed #CBD5E1;
    border-radius: 12px;
    background: #F8FAFC;
}
.vehicle-photo-bar-text {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.vehicle-photo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EFF6FF;
    color: var(--mt-blue);
    flex-shrink: 0;
}
.vehicle-photo-icon i { width: 18px; height: 18px; }
.vehicle-photo-bar-text strong {
    display: block;
    color: var(--mt-text);
    font-size: 12.5px;
    font-weight: 800;
}
.vehicle-photo-bar-text span {
    display: block;
    margin-top: 1px;
    color: var(--mt-muted);
    font-size: 11.5px;
}
.job-card-form input[type="file"] {
    width: auto;
    max-width: 100%;
    min-height: 40px;
    padding: 3px 5px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 11px;
    color: var(--mt-muted);
}
.job-card-form input[type="file"]::file-selector-button {
    min-height: 30px;
    margin-right: 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: #EFF6FF;
    color: var(--mt-deep);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.job-card-form input[type="file"]:hover { background: #FFFFFF; border-color: #93C5FD; }

/* Native date-time control needs the same field styling */
.job-card-form input[type="datetime-local"] {
    width: 100%;
    min-height: 52px;
    border: 1.5px solid var(--mt-border);
    border-radius: 14px;
    padding: 12px 16px 12px 44px;
    background: var(--mt-bg);
    color: var(--mt-text);
    font-variant-numeric: tabular-nums;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

/* Attachment inventory as touch tiles */
.attachment-panel {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
}
.attachment-panel-title {
    display: block;
    margin-bottom: 10px;
    color: #1E293B;
    font-size: 13px;
    font-weight: 700;
}
.attachment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.attachment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: #FFFFFF;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.attachment-option:hover { border-color: #93C5FD; background: #F8FAFC; }
.attachment-option:has(input:checked) { border-color: #BFDBFE; background: #EFF6FF; }
.attachment-option input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--mt-blue);
    flex-shrink: 0;
}

/* Condition marking toolbar */
.job-card-form .condition-inspection-wrapper { padding: 16px; }
.job-card-form .condition-toolbar-main,
.job-card-form .condition-toolbar-side,
.job-card-form .condition-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.job-card-form .condition-toolbar-side { gap: 10px; }
.condition-toolbar-label {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}
.condition-toolbar-divider {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: #CBD5E1;
}
.condition-ink-group,
.condition-color-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.job-card-form .condition-toolbar .btn {
    min-height: 40px;
    border-radius: 9px;
    font-size: 12px;
    padding: 0 13px;
}
.job-card-form .condition-toolbar .btn i { width: 14px; height: 14px; }
.job-card-form .btn-draw-tool.active {
    background: #DC2626;
    border-color: transparent;
    color: #FFFFFF;
    font-weight: 800;
}
.job-card-form .condition-color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    touch-action: manipulation;
    transition: transform 150ms ease, border-color 150ms ease;
}
.job-card-form .condition-color-btn:hover { transform: scale(1.1); }
.job-card-form .quick-chip-btn {
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    touch-action: manipulation;
}
.job-card-form .quick-chip-btn:active { background: #DBEAFE; border-color: #93C5FD; }
.job-card-form .canvas-container { max-width: 100%; }

/* Tablet field rhythm */
@media (min-width: 720px) {
    .job-card-form .form-grid-2,
    .job-card-form .form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .job-card-form .field > label { font-size: 12.5px; }
    .job-card-form .field input,
    .job-card-form .field select { min-height: 54px; }
    .job-card-form .attachment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .job-card-form .attachment-option { min-height: 50px; font-size: 13px; }
    .job-card-form .quick-chip-btn { min-height: 40px; font-size: 12px; }
}
@media (min-width: 1024px) {
    .intake-toolbar-no { display: inline; }
}
@media (min-width: 1280px) {
    .job-card-form .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Responsive labour/parts rows: stacked cards on tablets */
@media (max-width: 1279px) {
    .job-card-form [data-line-items] thead { display: none; }
    .job-card-form [data-line-items],
    .job-card-form [data-line-items] tbody { display: block; }
    .job-card-form [data-line-items] tbody {
        display: grid;
        gap: 12px;
    }
    .job-card-form [data-line-items] tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--mt-border);
        border-radius: 14px;
        background: #FFFFFF;
    }
    .job-card-form [data-line-items] td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
    }
    .job-card-form [data-line-items] td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: var(--mt-muted);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .job-card-form [data-line-items] .line-cell-desc {
        grid-column: 1 / -1;
    }
    .job-card-form [data-line-items] td[data-line-total] {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-size: 16px;
        font-weight: 800;
        color: var(--mt-text);
    }
    .job-card-form [data-line-items] .line-cell-remove {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .job-card-form [data-line-items] .line-cell-remove::before { display: none; }
    .job-card-form [data-line-items] .line-cell-remove .btn { min-height: 44px; }
    .job-card-form [data-add-row] { width: 100%; min-height: 46px; }
}

/* The original bottom actions stay; make them easy targets */
.job-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--mt-border);
}
.job-form-actions .job-form-save {
    min-height: 50px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 800;
}
.job-form-actions .btn-secondary { min-height: 50px; padding: 0 22px; }
.job-form-hint {
    margin-left: auto;
    color: var(--mt-muted);
    font-size: 11.5px;
    line-height: 1.45;
}
.job-form-hint strong { color: #DC2626; }

@media (max-width: 899px) {
    .job-card-form { padding: 18px 14px; }
    .intake-page-head .actions { width: auto; }
    .intake-page-head .actions .btn { min-height: 46px; }
    .job-form-actions .job-form-save,
    .job-form-actions .btn-secondary { flex: 1 1 150px; }
    .job-form-hint { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
    .job-intake-page .intake-section-title h2 { font-size: 13.5px; }
    .intake-toolbar { gap: 6px; }
    .intake-toolbar .intake-save-btn { padding: 0 12px; }
    .intake-toolbar .intake-save-btn span { display: none; }
    .job-card-form .vehicle-photo-bar { align-items: flex-start; flex-direction: column; }
    .job-card-form input[type="file"] { width: 100%; }
}

/* =====================================================================
   GLOBAL TYPOGRAPHY SYSTEM: LIGHT FONT + BOLD PRICES & NUMBERS
   General interface font is light (font-weight: 300 / 400).
   ONLY prices, financial figures, metric values, and numbers are bold.
   ===================================================================== */
p, span, div, a, li, dt, dd, td {
    font-weight: 300;
}

label, .btn, .pill, .tab-btn, .nav-link, th, .card h2, .card h3 {
    font-weight: 400 !important;
}

strong:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not([style*="tabular-nums"]),
b:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not([style*="tabular-nums"]) {
    font-weight: 400 !important;
}

/* Neutralize legacy inline bold styles on non-numeric elements */
h1[style*="font-weight"],
h2[style*="font-weight"],
h3[style*="font-weight"],
h4[style*="font-weight"],
.btn[style*="font-weight"],
label[style*="font-weight"],
th[style*="font-weight"],
.nav-label[style*="font-weight"],
.nav-link[style*="font-weight"],
.badge:not(.nav-count-badge):not(.topbar-bell-count):not(.badge-count):not(.action-count-pill)[style*="font-weight"],
span[style*="font-weight"]:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not(.stat-value):not(.cf-value):not(.cf-channel-balance):not(.doc-balance-value):not(.doc-qty-pill):not(.action-count-pill):not(.nav-count-badge):not(.topbar-bell-count):not(.plate-number):not([style*="tabular-nums"]),
strong[style*="font-weight"]:not(.price-figure):not(.font-bold-figure):not(.font-bold-number):not(.stat-value):not(.cf-value):not(.cf-channel-balance):not(.doc-balance-value):not([style*="tabular-nums"]) {
    font-weight: 400 !important;
}

/* =====================================================================
   ONLY PRICES, FINANCIAL FIGURES & NUMBERS ARE BOLD (700 / 800)
   ===================================================================== */
.stat-value,
.cf-value,
.cf-channel-balance,
.doc-balance-value,
.receipt-amount-number,
.receipt-amount,
.receipt-hero-number,
.action-count-pill,
.nav-count-badge,
.topbar-bell-count,
.badge-count,
.doc-qty-pill,
.ug-plate-reg,
.plate-number,
.plate-code,
[data-count],
[data-line-total],
[data-subtotal],
[data-tax],
[data-total],
.doc-total-line strong,
.doc-total-grand strong,
.doc-total-paid strong,
.doc-totals strong,
.totals strong,
.doc-date-val,
.pipeline-count,
.price-figure,
.font-bold-figure,
.font-bold-number,
.price-bold,
.num-bold,
.font-price,
.font-numeric,
td.amount,
td.price,
td.total,
td.num,
td.text-right,
td[style*="text-align: right"],
td[style*="text-align:right"],
td[style*="font-variant-numeric"],
td[style*="tabular-nums"],
span[style*="tabular-nums"],
strong[style*="tabular-nums"],
div[style*="tabular-nums"],
strong.price-figure,
strong.font-bold-figure,
strong.font-bold-number,
span.price-figure,
span.font-bold-figure,
span.font-bold-number {
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}