html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Login page layout — NON-scoped so CSS custom props cascade into the shared LoginCard. */
.login-page {
    min-height: 100vh;
    background: #f8f9fb;
    display: flex;
    flex-direction: column;
}

.login-page__header {
    padding: 20px 28px;
}

.login-page__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #1f2328;
}

.login-page__brand:hover {
    text-decoration: none;
    color: #1f2328;
}

.login-page__brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.login-page__brand-name {
    font-size: 1rem;
    font-weight: 600;
}

.login-page__body {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px 64px;
}

.login-page__card {
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
    padding: 40px 28px 36px;
}

.warehouse-login {
    --dns-login-accent: var(--mud-palette-primary, #594ae2);
    --dns-login-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --dns-login-max-width: 100%;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Help documentation markdown rendering */
.help-content h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.help-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2rem 0 0.5rem 0;
}

.help-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.4rem 0;
}

.help-content p {
    margin: 0 0 0.75rem 0;
    line-height: 1.6;
}

.help-content ul {
    margin: 0 0 0.75rem 0;
    padding-left: 1.5rem;
}

.help-content li {
    margin-bottom: 0.25rem;
    line-height: 1.6;
}

.help-content hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.12);
}

.help-content strong {
    font-weight: 600;
}

.help-content code {
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    font-family: monospace;
    font-size: 0.9em;
}

.help-content a {
    color: #006bb7;
}

/* MudAppBar is position:fixed at top:0 (64px tall) and stays visually on top of the page
   regardless of scroll position. Native scrollIntoView() (used by Playwright's auto-scroll and by
   in-page anchor/details toggles) only considers the scrollable area, not fixed overlays, so a
   target scrolled flush to the top of the viewport lands underneath the app bar and swallows the
   click. scroll-padding-top reserves that space so scroll-into-view always leaves clearance.
   Reserves for the impersonation banner too (44px) since it stacks above the app bar — harmless
   extra headroom on pages where the banner isn't shown.
   scroll-padding-bottom is the same fix for the Task-app "I Need..." support widget's launcher
   button (position:fixed, bottom:20px, ~40px tall — see widget.js), which sits on top of anything
   scrolled flush to the bottom of the viewport, most visible on short (phone) viewports. 76px
   matches the clearance widget.js itself reserves above the launcher for its own popup frame. */
html {
    scroll-padding-top: 108px;
    scroll-padding-bottom: 76px;
}

/* Real reserved space for the same "I Need..." widget, for the case scroll-padding-bottom above
   can't help: a SHORT page (content shorter than the viewport) never triggers any scroll at all, so
   its last row/button can render permanently underneath the fixed launcher with nothing to scroll
   into view. Confirmed live on Admin > Validation Rules at iPhone13's 390x664 viewport — the row's
   delete button naturally landed at y=592-632 with zero scrolling, squarely inside the launcher's
   fixed footprint. Applied to MainLayout's content container (the only place the widget renders —
   see App.razor's isPortal/isMkt gate) rather than globally, so PortalLayout/marketing pages (which
   never show the widget) don't pay for unused clearance. */
.app-content-widget-clearance {
    padding-bottom: 76px;
}

/* Dev / super-admin impersonation banner.
   A fixed bar pinned above the (also-fixed) MudAppBar. Because the app bar, drawer,
   and main content are all anchored to top:0, we push each of them down by the banner
   height (--imp-h) so nothing overlaps. The variable is the single source of truth. */
.imp-active {
    --imp-h: 44px;
}

.imp-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--imp-h);
    z-index: 1400; /* above MudAppBar (1100) and drawer overlay (1300) */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 16px;
    background: var(--mud-palette-warning);
    color: rgba(0, 0, 0, 0.87);
    font-size: 0.875rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.imp-banner .imp-banner-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imp-active .mud-appbar {
    top: var(--imp-h);
}

.imp-active .mud-drawer {
    /* !important needed: MudBlazor's own responsive-drawer rule
       (.mud-drawer.mud-drawer-responsive.mud-drawer-pos-left, 3 classes) outranks this 2-class
       selector on specificity alone, so without !important the "top" push takes effect (nothing
       else sets it) but "height" silently falls back to MudBlazor's un-shrunk 100%, leaving the
       drawer's bottom edge extending past the actual viewport and permanently clipping its last
       ~44px of content (confirmed via Playwright: a nav item near the bottom became unclickable —
       "outside of viewport" — while impersonating). See NavMenuCoverageTests.cs. */
    top: var(--imp-h) !important;
    height: calc(100vh - var(--imp-h)) !important;
}

.imp-active .mud-main-content {
    margin-top: var(--imp-h);
}
/* Quick Start focus highlight — a temporary pulsing halo that draws the eye to a
   control a user was just directed to (added/removed by focusHighlight in warehouse.js). */
@keyframes focus-pulse-kf {
    0%   { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(15, 118, 110, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
}

.focus-pulse {
    animation: focus-pulse-kf 1.25s ease-out 8;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

/* Demo mode: pulse the nav links we want demo visitors to explore next. Global (not scoped)
   so it applies to the MudNavLink <a> rendered by the NavMenu child component. */
@keyframes demo-nav-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(15,118,110,0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(15,118,110,0); }
    100% { box-shadow: 0 0 0 0 rgba(15,118,110,0); }
}

.demo-pulse {
    animation: demo-nav-pulse 1.8s ease-out infinite;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Count My Boxes — marketing design system ("deep pine & amber")
   A calm, low-glare palette that works on a bright warehouse floor and in a
   dim office: deep petrol ink, pine teal, warm amber, warm paper neutrals.
   Headings use Manrope (loaded in App.razor); body stays Roboto.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --cmb-ink: #0B1F26;          /* darkest — hero / footer / dark sections */
    --cmb-ink-2: #123039;        /* raised surfaces on ink */
    --cmb-primary: #0F766E;      /* pine teal — links, buttons, accents */
    --cmb-primary-lift: #14887F; /* lighter teal — gradient highlight end */
    --cmb-primary-deep: #0B5D57;
    --cmb-primary-deepest: #0A4A46;
    --cmb-primary-bright: #2DD4BF; /* teal for use on dark backgrounds */
    --cmb-primary-tint: #E9F3F0; /* pale teal wash for chips / table column */
    --cmb-amber: #F5A524;        /* warm accent — badges, highlights */
    --cmb-amber-deep: #B45309;   /* amber that passes contrast on light bg */
    --cmb-amber-tint: #FCF1DC;
    --cmb-paper: #F7F6F1;        /* warm off-white section background */
    --cmb-card: #FFFFFF;
    --cmb-text: #152228;
    --cmb-text-2: #52626B;
    --cmb-line: #E6E4DC;
    --cmb-font-display: 'Manrope', 'Roboto', 'Segoe UI', sans-serif;
    --cmb-shadow-sm: 0 1px 2px rgba(11, 31, 38, 0.06), 0 2px 8px rgba(11, 31, 38, 0.05);
    --cmb-shadow-md: 0 2px 6px rgba(11, 31, 38, 0.07), 0 12px 32px rgba(11, 31, 38, 0.09);
    --cmb-shadow-teal: 0 10px 36px rgba(15, 118, 110, 0.22);
    --cmb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Page scaffold ── */
.cmb-page {
    min-height: 100vh;
    background: var(--cmb-paper);
    color: var(--cmb-text);
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    /* No overflow clipping here: every decorative element (auroras, crates, waves) lives
       inside a section with its own overflow:hidden, and clipping a page-height container
       triggers Chromium paint bugs on long pages under software rendering. */
}
.cmb-page h1, .cmb-page h2, .cmb-page h3, .cmb-page .cmb-display {
    font-family: var(--cmb-font-display);
    letter-spacing: -0.02em;
}
.cmb-section { padding: 88px 24px; position: relative; }
.cmb-section-tight { padding: 64px 24px; }
.cmb-wrap { max-width: 1180px; margin: 0 auto; }
.cmb-wrap-narrow { max-width: 860px; margin: 0 auto; }

.cmb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cmb-font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cmb-primary);
    background: var(--cmb-primary-tint);
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}
.cmb-eyebrow.amber { color: var(--cmb-amber-deep); background: var(--cmb-amber-tint); border-color: rgba(180, 83, 9, 0.2); }
.cmb-eyebrow.on-dark { color: var(--cmb-primary-bright); background: rgba(45, 212, 191, 0.1); border-color: rgba(45, 212, 191, 0.25); }

.cmb-h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 14px;
    color: var(--cmb-text);
}
.cmb-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--cmb-text-2);
    max-width: 620px;
    margin: 0 auto 48px;
}
.cmb-center { text-align: center; }
.cmb-center .cmb-sub { margin-left: auto; margin-right: auto; }

/* ── Buttons ── */
.cmb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--cmb-font-display);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 12px;
    padding: 15px 36px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--cmb-ease), box-shadow 0.25s var(--cmb-ease), background 0.2s ease;
}
.cmb-btn-primary {
    background: linear-gradient(160deg, var(--cmb-primary-lift) 0%, var(--cmb-primary) 55%, var(--cmb-primary-deep) 100%);
    color: #ffffff;
    box-shadow: var(--cmb-shadow-teal);
}
.cmb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(15, 118, 110, 0.32); color: #fff; }
/* ambient sheen that sweeps across primary buttons every few seconds */
.cmb-btn-primary::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 50%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: cmb-sheen 5.5s ease-in-out infinite;
}
@keyframes cmb-sheen {
    0%, 64% { left: -80%; }
    82%, 100% { left: 160%; }
}
.cmb-btn-ghost {
    background: rgba(255, 255, 255, 0.07);
    color: #E8F2F0;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.cmb-btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: #fff; transform: translateY(-2px); }
.cmb-btn-light {
    background: #ffffff;
    color: var(--cmb-primary-deep);
    box-shadow: var(--cmb-shadow-md);
}
.cmb-btn-light:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(11, 31, 38, 0.25); color: var(--cmb-primary-deep); }
.cmb-btn-outline {
    background: transparent;
    color: var(--cmb-primary);
    border: 2px solid rgba(15, 118, 110, 0.4);
}
.cmb-btn-outline:hover { border-color: var(--cmb-primary); background: var(--cmb-primary-tint); transform: translateY(-2px); color: var(--cmb-primary-deep); }

/* ── Scroll-reveal engine ──
   warehouse.js tags [data-reveal] elements with .rv-pending (only when JS +
   IntersectionObserver are available and the user allows motion), then swaps
   in .rv-in as they enter the viewport. Crawlers / no-JS see plain content. */
[data-reveal].rv-pending {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--cmb-ease), transform 0.8s var(--cmb-ease);
    transition-delay: var(--rv-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal="left"].rv-pending  { transform: translateX(-36px); }
[data-reveal="right"].rv-pending { transform: translateX(36px); }
[data-reveal="scale"].rv-pending { transform: scale(0.93) translateY(14px); }
[data-reveal].rv-pending.rv-in { opacity: 1; transform: none; }

/* ── Hero (dark ink + slow aurora + dot grid + drifting crates) ── */
.cmb-hero {
    position: relative;
    background: radial-gradient(120% 140% at 80% -20%, #16414A 0%, var(--cmb-ink) 55%) var(--cmb-ink);
    color: #fff;
    text-align: center;
    padding: 108px 24px 128px;
    overflow: hidden;
    isolation: isolate;
}
.cmb-hero::before { /* faint dot grid, fades toward the bottom */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 78%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 78%);
    z-index: -1;
}
/* Teal-gradient hero variant used by feature / landing / company pages.
   Padding and text-align vary per page, so they stay inline; combine with
   .cmb-hero when the dot grid + overflow containment are wanted. */
.cmb-hero-grad {
    background: linear-gradient(135deg, var(--cmb-primary) 0%, var(--cmb-primary-deep) 55%, var(--cmb-primary-deepest) 100%);
    color: #fff;
}

/* Soft gradient blobs (no filter: blur — a real blur on elements this large is too
   expensive under software rendering; the gradient fade already reads as a glow). */
.cmb-aurora {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}
.cmb-aurora.a1 { width: 620px; height: 620px; left: -180px; top: -220px; background: radial-gradient(circle, rgba(15, 118, 110, 0.85) 0%, rgba(15, 118, 110, 0.3) 38%, transparent 68%); animation: cmb-aurora-1 16s ease-in-out infinite alternate; }
.cmb-aurora.a2 { width: 560px; height: 560px; right: -160px; top: -80px;  background: radial-gradient(circle, rgba(21, 94, 117, 0.85) 0%, rgba(21, 94, 117, 0.3) 38%, transparent 68%); animation: cmb-aurora-2 21s ease-in-out infinite alternate; }
.cmb-aurora.a3 { width: 460px; height: 460px; left: 34%; bottom: -260px;  background: radial-gradient(circle, rgba(245, 165, 36, 0.4) 0%, rgba(245, 165, 36, 0.14) 40%, transparent 64%); animation: cmb-aurora-3 18s ease-in-out infinite alternate; }
@keyframes cmb-aurora-1 { from { transform: translate(0, 0) scale(1); }        to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes cmb-aurora-2 { from { transform: translate(0, 0) scale(1.1); }      to { transform: translate(-70px, 50px) scale(0.95); } }
@keyframes cmb-aurora-3 { from { transform: translate(0, 0) scale(1); }        to { transform: translate(60px, -50px) scale(1.2); } }

/* drifting outlined crates — quiet ambient motion in the hero corners */
.cmb-crate {
    position: absolute;
    color: rgba(255, 255, 255, 0.13);
    z-index: -1;
    pointer-events: none;
    animation: cmb-bob var(--bob-t, 9s) ease-in-out infinite alternate;
}
@keyframes cmb-bob {
    from { transform: translateY(-10px) rotate(var(--bob-r, -3deg)); }
    to   { transform: translateY(14px)  rotate(calc(var(--bob-r, -3deg) * -1)); }
}

.cmb-hero-h1 {
    font-family: var(--cmb-font-display);
    font-size: clamp(1.9rem, 5.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 900px;
    margin: 0 auto 22px;
}
.cmb-hero-p {
    font-size: clamp(1rem, 2.4vw, 1.22rem);
    color: rgba(232, 242, 240, 0.82);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 40px;
}
/* hand-drawn amber flourish under the h1 — draws itself in shortly after load */
.cmb-flourish {
    stroke: var(--cmb-amber);
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: cmb-draw 1.1s var(--cmb-ease) 0.85s forwards;
}
@keyframes cmb-draw { to { stroke-dashoffset: 0; } }

/* hero entrance — pure CSS so it needs no JS and always ends visible */
.cmb-hero-in { opacity: 0; animation: cmb-rise 0.9s var(--cmb-ease) forwards; animation-delay: var(--in-delay, 0ms); }
@keyframes cmb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.cmb-hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 26px auto 0;
    font-size: 0.86rem;
    color: rgba(232, 242, 240, 0.66);
}
.cmb-hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.cmb-hero-trust svg { color: var(--cmb-primary-bright); flex-shrink: 0; }

/* soft wave that hands the dark hero off to the light demo section */
.cmb-hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 0; }
.cmb-hero-wave svg { width: 100%; height: 70px; display: block; }

/* scroll cue — gentle bounce, hidden on short screens */
.cmb-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    animation: cmb-cue 2.2s ease-in-out infinite;
    z-index: 1;
}
@keyframes cmb-cue { 0%, 100% { transform: translate(-50%, 0); opacity: 0.55; } 50% { transform: translate(-50%, 9px); opacity: 1; } }
@media (max-height: 700px) { .cmb-scroll-cue { display: none; } }

/* ── Demo section ── */
.cmb-demo-shell {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    border-radius: 18px;
    padding: 10px;
    background: linear-gradient(140deg, rgba(15, 118, 110, 0.35), rgba(245, 165, 36, 0.25) 50%, rgba(15, 118, 110, 0.35));
    box-shadow: var(--cmb-shadow-md);
}
.cmb-demo-inner {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.cmb-demo-frame { height: 900px; }
/* Viewport-relative on phones: a fixed 900px box taller than the whole screen forced a nested
   scroll trap (page scroll + iframe's own scroll, wizard controls often below the fold). dvh
   (not vh) accounts for the mobile browser chrome that vh ignores. */
@media (max-width: 680px) {
    .cmb-demo-frame { height: min(900px, 80dvh); }
}
.cmb-demo-start {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(160deg, #14887F, var(--cmb-primary-deep));
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 18px 44px;
    font-family: var(--cmb-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: var(--cmb-shadow-teal);
    transition: transform 0.25s var(--cmb-ease), box-shadow 0.25s var(--cmb-ease);
    animation: cmb-demo-halo 2.6s ease-out infinite;
}
.cmb-demo-start:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 48px rgba(15, 118, 110, 0.36); }
@keyframes cmb-demo-halo {
    0%   { outline: 0 solid rgba(15, 118, 110, 0.35); outline-offset: 0; }
    70%  { outline: 12px solid rgba(15, 118, 110, 0); outline-offset: 6px; }
    100% { outline: 0 solid rgba(15, 118, 110, 0); outline-offset: 0; }
}
.cmb-demo-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

/* ── Cards (marketing) ── */
.mkt-card {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    cursor: pointer;
}
.mkt-card > div {
    transition: box-shadow 0.3s var(--cmb-ease), transform 0.3s var(--cmb-ease), border-color 0.3s var(--cmb-ease);
    cursor: pointer;
}
.mkt-card:hover > div {
    box-shadow: 0 14px 40px rgba(15, 118, 110, 0.18) !important;
    transform: translateY(-4px);
    outline: 2px solid rgba(15, 118, 110, 0.28);
    outline-offset: -1px;
}
.mkt-card:hover .mkt-card-more {
    text-decoration: underline;
}

/* Marketing page — clickable text-content blocks (no card border) */
.mkt-card-text {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 12px;
    padding: 4px;
    margin: -4px;
}
.mkt-card-text:hover {
    background: rgba(15, 118, 110, 0.05);
}
.mkt-card-text:hover h3 {
    color: var(--cmb-primary);
}
.mkt-card-text:hover .mkt-card-more {
    text-decoration: underline;
}
.mkt-card-more {
    color: var(--cmb-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.cmb-card {
    background: var(--cmb-card);
    border: 1px solid var(--cmb-line);
    border-radius: 16px;
    padding: 30px 26px;
    height: 100%;
    box-shadow: var(--cmb-shadow-sm);
    transition: box-shadow 0.3s var(--cmb-ease), transform 0.3s var(--cmb-ease), border-color 0.3s var(--cmb-ease);
}
a.cmb-card { display: block; text-decoration: none; color: inherit; }
.cmb-card:hover { box-shadow: var(--cmb-shadow-md); transform: translateY(-4px); border-color: rgba(15, 118, 110, 0.35); }
.cmb-card h3 { font-size: 1.08rem; font-weight: 800; margin: 0 0 10px; color: var(--cmb-text); }
.cmb-card p { font-size: 0.92rem; line-height: 1.7; color: var(--cmb-text-2); margin: 0; }

.cmb-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 13px;
    background: var(--cmb-primary-tint);
    color: var(--cmb-primary);
    margin-bottom: 16px;
    transition: transform 0.3s var(--cmb-ease), background 0.3s ease, color 0.3s ease;
}
.cmb-card:hover .cmb-icon-chip, .mkt-card:hover .cmb-icon-chip { background: var(--cmb-primary); color: #fff; transform: scale(1.07) rotate(-4deg); }
.cmb-icon-chip.amber { background: var(--cmb-amber-tint); color: var(--cmb-amber-deep); }
.cmb-card:hover .cmb-icon-chip.amber { background: var(--cmb-amber); color: #4A2A05; }

.cmb-badge {
    display: inline-block;
    background: var(--cmb-amber-tint);
    color: var(--cmb-amber-deep);
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.08em;
}
.cmb-badge.teal { background: var(--cmb-primary-tint); color: var(--cmb-primary-deep); }

/* ── FAQ — native <details> accordion (statically-rendered pages, no JS) ── */
.cmb-faq {
    border: 1px solid var(--cmb-line);
    border-radius: 14px;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--cmb-shadow-sm);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cmb-faq[open] { border-color: rgba(15, 118, 110, 0.4); box-shadow: var(--cmb-shadow-md); }
.cmb-faq > summary {
    list-style: none;
    cursor: pointer;
    padding: 19px 24px;
    font-family: var(--cmb-font-display);
    font-weight: 700;
    color: var(--cmb-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cmb-faq > summary::-webkit-details-marker { display: none; }
.cmb-faq > summary:hover { background: var(--cmb-primary-tint); }
.cmb-faq-chev {
    color: var(--cmb-primary);
    flex-shrink: 0;
    transition: transform 0.25s var(--cmb-ease);
}
.cmb-faq[open] > summary .cmb-faq-chev { transform: rotate(180deg); }
.cmb-faq-body {
    padding: 2px 24px 20px;
    color: var(--cmb-text-2);
    line-height: 1.75;
    font-size: 0.95rem;
}

/* ── Comparison table (Spreadsheets / Legacy ERP / Count My Boxes) ── */
.cmb-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 640px;
    font-size: 0.95rem;
    background: #fff;
    border: 1px solid var(--cmb-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--cmb-shadow-sm);
}
.cmb-compare th,
.cmb-compare td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #EFEEE8;
    vertical-align: top;
    color: var(--cmb-text-2);
}
.cmb-compare tbody tr:last-child th,
.cmb-compare tbody tr:last-child td { border-bottom: none; }
.cmb-compare thead th {
    font-family: var(--cmb-font-display);
    font-weight: 800;
    color: #7A8A92;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--cmb-line);
    background: #FCFBF8;
}
.cmb-compare .cmb-compare-row {
    font-weight: 700;
    color: var(--cmb-text);
}
.cmb-compare .cmb-compare-us {
    background: var(--cmb-primary-tint);
    color: var(--cmb-primary-deep);
    font-weight: 600;
    border-left: 2px solid rgba(15, 118, 110, 0.3);
}
.cmb-compare thead .cmb-compare-us {
    color: var(--cmb-primary);
    border-bottom: 2px solid var(--cmb-primary);
    background: var(--cmb-primary-tint);
}
.cmb-compare tbody tr:hover td { background: #F8F7F2; }
.cmb-compare tbody tr:hover .cmb-compare-us { background: #DDEEE9; }

/* ── Migration steps — connected by a line that draws in on reveal ── */
.cmb-steps { position: relative; }
.cmb-step-num {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(160deg, #14887F, var(--cmb-primary-deep));
    color: #fff;
    font-family: var(--cmb-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35);
    position: relative;
    z-index: 1;
}
.cmb-step-line {
    position: absolute;
    top: 23px;
    left: 18%; right: 18%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(15, 118, 110, 0.5) 0 8px, transparent 8px 16px);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s var(--cmb-ease) 0.3s;
}
.rv-in .cmb-step-line, .cmb-steps.no-rv .cmb-step-line { transform: scaleX(1); }

/* ── SEO link chips ── */
.cmb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--cmb-line);
    color: var(--cmb-primary-deep);
    padding: 13px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    box-shadow: var(--cmb-shadow-sm);
    transition: border-color 0.25s ease, box-shadow 0.25s var(--cmb-ease), transform 0.25s var(--cmb-ease), background 0.25s ease;
}
.cmb-chip:hover { border-color: rgba(15, 118, 110, 0.45); background: var(--cmb-primary-tint); transform: translateY(-2px); box-shadow: var(--cmb-shadow-md); }

/* ── Dark sections (scan spotlight, final CTA) ── */
.cmb-dark {
    position: relative;
    background: radial-gradient(110% 130% at 15% -10%, #16414A 0%, var(--cmb-ink) 60%) var(--cmb-ink);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.cmb-dark .cmb-h2 { color: #fff; }
.cmb-dark .cmb-sub { color: rgba(232, 242, 240, 0.75); }

.cmb-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.cmb-check-list li { display: flex; align-items: flex-start; gap: 11px; color: rgba(255, 255, 255, 0.88); line-height: 1.6; }
.cmb-check-list svg, .cmb-check-list .mud-icon-root { color: var(--cmb-primary-bright); flex-shrink: 0; }

/* ── Small shared marketing atoms (extracted from repeated inline styles) ── */
/* related-feature pill link at the bottom of feature / landing pages */
.cmb-pill-link {
    background: var(--cmb-primary-tint);
    color: var(--cmb-primary);
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}
.cmb-pill-link.amber { background: var(--cmb-amber-tint); color: var(--cmb-amber-deep); }

/* pale-teal icon holders: chip hugs the icon, tile is a fixed 52px square */
.cmb-icon-chip { background: var(--cmb-primary-tint); border-radius: 10px; padding: 12px; flex-shrink: 0; }
.cmb-icon-tile {
    background: var(--cmb-primary-tint);
    border-radius: 12px;
    height: 52px; width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

/* plain teal inline text link */
.cmb-link { color: var(--cmb-primary); text-decoration: none; font-weight: 500; }

/* centred section heading; .lg for the roomier variant */
.cmb-sec-title { text-align: center; font-size: 1.4rem; font-weight: 700; color: var(--cmb-text); margin: 0 0 32px; }
.cmb-sec-title.lg { font-size: 1.6rem; margin-bottom: 48px; }

/* ── Motion preferences: kill all ambient animation for reduced-motion users ── */
@media (prefers-reduced-motion: reduce) {
    .cmb-aurora, .cmb-crate, .cmb-scroll-cue, .cmb-demo-start, .cmb-btn-primary::after,
    .cmb-hero-in, .cmb-flourish {
        animation: none !important;
    }
    .cmb-hero-in { opacity: 1; }
    .cmb-flourish { stroke-dashoffset: 0; }
    .cmb-step-line { transform: scaleX(1); transition: none; }
}

@media (max-width: 680px) {
    .cmb-section { padding: 60px 18px; }
    .cmb-hero { padding: 72px 20px 100px; }
    .cmb-scroll-cue { display: none; }
}

/* ---- Command palette (Ctrl/⌘+K) ---- */
.cmdp-appbar-kbd {
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1.3;
    font-family: inherit;
    opacity: 0.85;
}

.cmdp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
}

.cmdp-panel {
    width: 100%;
    max-width: 620px;
    margin: 0 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.cmdp-search {
    padding: 10px 14px 4px;
    border-bottom: 1px solid #eceff3;
}

.cmdp-results {
    overflow-y: auto;
    padding: 6px;
}

.cmdp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.cmdp-row--selected {
    background: #eef4ff;
}

.cmdp-row__icon {
    color: #5a6b85;
    flex: 0 0 auto;
}

.cmdp-row__label {
    flex: 1 1 auto;
    font-size: 0.92rem;
    color: #1f2328;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdp-row__group {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: #8a94a6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cmdp-empty {
    padding: 24px;
    text-align: center;
    color: #8a94a6;
    font-size: 0.9rem;
}

.cmdp-footer {
    display: flex;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid #eceff3;
    background: #fafbfc;
    font-size: 0.72rem;
    color: #8a94a6;
}

.cmdp-footer kbd {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    margin-right: 3px;
    border: 1px solid #d6dae1;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    font-family: inherit;
    font-size: 0.7rem;
    color: #5a6b85;
}

/* ── MudTabs: horizontally-scrollable tabstrips (swipe/wheel, no click-to-scroll) ──
   MudBlazor clips overflowing tabs (overflow:hidden) and only reveals them via the
   prev/next scroll buttons. Every tabstrip in the app is horizontal, so we swap that
   for native scrolling — drag, trackpad, shift+wheel — and drop the now-redundant
   buttons instead of leaving two conflicting ways to reach an off-screen tab. */
.mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-tabbar-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-tabbar-content::-webkit-scrollbar {
    height: 4px;
}

.mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-tabbar-content::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default, #d6dae1);
    border-radius: 4px;
}

.mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-scroll-button {
    display: none !important;
}

/* ---- Page-header action row on phones -------------------------------------------------------
   Every index page here opens with the same copy-pasted shape (101 of them, no shared component):

     <MudStack Row AlignItems="Center" Justify="Justify.SpaceBetween" Class="mb-4" Wrap="Wrap.Wrap">
       <MudText Typo="Typo.h5">Title</MudText>
       <MudStack Row Spacing="1" Wrap="Wrap.Wrap"> ...5-6 action buttons... </MudStack>
     </MudStack>

   Below the sm breakpoint those buttons wrap at their natural text widths, so each line ends at a
   different place and the block reads as a ragged pile rather than a toolbar (measured on /items at
   400px: 111/134/112 then 26/131/125, leaving a different gap on every line). Letting them grow
   makes each line end flush; the line COUNT is unchanged, so this costs no vertical space.

   `:not(.mud-icon-button)` keeps genuinely icon-only controls (ColumnPicker's, and anything wrapped
   in a MudTooltip) at their natural square size instead of stretching one icon across half a row.

   Deliberately here and not in DotNetShared.MudMobile: that library's editing rule is that anything
   keyed to a consuming app's own markup shape stays in the consuming app. The selector below leans
   on the exact utility classes MudStack emits for THIS header idiom, so it is warehouse's to own.
   If the same shape shows up in two more apps, promote it there (it needs no markup opt-in). */
@media (max-width: 599.98px) {
    .mud-container--gutters > .d-flex.justify-space-between.flex-wrap > .d-flex.flex-wrap > .mud-button-root:not(.mud-icon-button) {
        flex: 1 1 auto;
    }
}