/* ===================================================================
   Design tokens — single source of truth
   =================================================================== */
:root {
    /* Brand palette (navy primary + complementary blue accent) */
    --primary: #1f2d4d;
    --primary-hover: #16213a;
    --primary-light: #3a4a6d;
    --primary-dark: #141c30;
    --accent: #2f6fed;
    --accent-hover: #1d59cf;
    --accent-light: #7aa6f5;
    /* Neutrals */
    --heading-color: #1b2336;
    --bg-light: #f7f8fa;
    --bg-white: #fff;
    --text-main: #222733;
    --text-secondary: #444;
    --text-muted: #666;
    /* Effects */
    --shadow: 0 4px 24px rgba(0,0,0,0.07);
    --shadow-hover: 0 6px 24px rgba(0,0,0,0.13);
    --radius: 12px;
    --radius-lg: 16px;
    --transition: 0.2s;
    /* Layout system */
    --content-max: 1150px; /* single source of truth for page width */
    --gutter: 1.5rem; /* horizontal page padding */
    --section-gap: 4rem; /* vertical rhythm between sections */
    /* Fonts */
    /* Fonts (system stacks — no external requests) */
    --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-script: 'Segoe Script', 'Brush Script MT', cursive;
}

/* ============================================================
   Brand colors for Bootstrap (via CSS custom properties)
   Primary palette: navy, with complementary blue accent
   ============================================================ */
:root {
    --bs-primary: #1f2d4d;
    --bs-primary-rgb: 31, 45, 77;
    --bs-link-color: #1f2d4d;
    --bs-link-hover-color: #16213a;
}

/* Lock background scrolling while the mobile navigation drawer is open.
   Toggled from site.js (window.appNavDrawer) which also preserves and restores
   the scroll position via an inline top offset. Scoped component CSS cannot
   target <body>, so this lives in the global stylesheet. */
body.nav-drawer-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* Bootstrap 5.3 buttons hardcode their own --bs-btn-* colors, so the brand
   must be mapped onto the button component variables explicitly. */
.btn-primary {
    --bs-btn-bg: #1f2d4d;
    --bs-btn-border-color: #1f2d4d;
    --bs-btn-hover-bg: #16213a;
    --bs-btn-hover-border-color: #16213a;
    --bs-btn-active-bg: #141c30;
    --bs-btn-active-border-color: #141c30;
    --bs-btn-disabled-bg: #1f2d4d;
    --bs-btn-disabled-border-color: #1f2d4d;
}

.btn-outline-primary {
    --bs-btn-color: #1f2d4d;
    --bs-btn-border-color: #1f2d4d;
    --bs-btn-hover-bg: #1f2d4d;
    --bs-btn-hover-border-color: #1f2d4d;
    --bs-btn-active-bg: #16213a;
    --bs-btn-active-border-color: #16213a;
    --bs-btn-disabled-color: #1f2d4d;
    --bs-btn-disabled-border-color: #1f2d4d;
}

/* ===================================================================
   Base
   =================================================================== */
html, body {
    font-family: var(--font-main);
    background: var(--bg-light);
    color: var(--text-main);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    font-family: var(--font-main);
    font-weight: 700;
    margin-bottom: 1rem;
}

a, .about-link {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
    font-weight: 600;
}

    a:hover, .about-link:hover {
        color: var(--accent-hover);
        text-decoration: underline;
    }

h1:focus {
    outline: none;
}

.content {
    padding-top: 1.1rem;
}

img {
    max-width: 100%;
}

/* ===================================================================
   Framework defaults (used by Blazor / EditForm validation — keep)
   =================================================================== */
.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.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,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpeDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI26My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTEuNDE2IDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTcuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMsIDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTcuNTA6IDkyLjI4MzcgMjYxLjA4MSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* ===================================================================
   Mobile touch targets & input sizing (<= 640px)
   Ensures interactive controls meet the ~44px minimum tap target
   (WCAG 2.5.5 / Apple HIG) and inputs use a 16px font so iOS Safari
   does not auto-zoom on focus.
   =================================================================== */
@media (max-width: 640px) {
    .btn,
    .btn-brand-lg,
    .nav-link,
    .form-select,
    .form-control,
    .page-link,
    .dropdown-item {
        min-height: 44px;
    }

    /* Vertically center label text now that controls are taller */
    .btn,
    .btn-brand-lg,
    .form-select,
    .form-control {
        display: inline-flex;
        align-items: center;
    }

    /* Icon-only / small buttons still need a comfortable square target */
    .btn-sm,
    .btn-icon {
        min-width: 44px;
    }

    /* 16px minimum prevents iOS Safari zoom-on-focus */
    .form-control,
    .form-select,
    input,
    textarea,
    select {
        font-size: 16px;
    }

    /* A little more breathing room between stacked actions */
    .d-flex.gap-2 {
        row-gap: 0.5rem;
    }
}

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

/* Shared base: shape, sizing, weight, transitions */
.btn,
.btn-brand-lg {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform 0.15s ease;
}

    /* Shared hover lift */
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-hover);
        text-decoration: none;
    }

/* PRIMARY (filled brand gold) */
.btn-brand-lg {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

    .btn-brand-lg:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: #fff;
    }

/* Disabled state */
.btn:disabled, .btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===================================================================
   Forms
   =================================================================== */
.form-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.form-control,
input:not([type=checkbox]):not([type=radio]),
textarea {
    margin-bottom: 0.7rem;
    padding: 0.6rem 1rem;
    box-sizing: border-box;
}

    input:not([type=checkbox]):not([type=radio]):focus,
    textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
    }

.alert {
    font-size: 1.1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

/* ===================================================================
   Cards / shared containers
   =================================================================== */
.card, .about-section, .contact-container {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    margin: 0 auto 2.5rem auto;
    max-width: 1200px;
}

/* ===================================================================
   Pricing page
   =================================================================== */
.pricing-intro {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}

.pricing-trial-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.pricing-trial-note {
    font-size: 0.875rem;
    color: var(--muted-color, #6c757d);
}

.trial-banner {
    border: 1px solid var(--border-color, #dee2e6);
    border-top: 3px solid var(--brand-accent, #0d6efd);
    max-width: 960px;
    margin-inline: 0;
}

    .trial-banner .card-body {
        padding: 1.5rem 1.25rem;
    }

.pricing-subtitle {
    text-align: center;
    margin-top: var(--section-gap);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--heading-color);
}

.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin-inline: auto;
}

/* Balanced layout for the 6-tile "Where Values Come From" grid: 3 x 2 on desktop,
   2 across on tablets, 1 on phones — so cards never wrap to a lone orphan row. */
.addon-grid--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
}

@media (max-width: 720px) {
    .addon-grid--trio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .addon-grid--trio {
        grid-template-columns: 1fr;
    }
}

.addon-card {
    background: var(--bg-white);
    border: 1px solid #eee;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

    .addon-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }

.addon-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.5rem;
}

.addon-name {
    font-weight: 700;
    color: var(--heading-color);
}

.addon-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.pricing-cta {
    text-align: center;
    max-width: 640px;
    margin: 2rem auto 0;
}

.pricing-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 640px;
    margin: 0.75rem auto 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

    .pricing-disclaimer .addon-icon {
        margin-bottom: 0;
        font-size: 1.1rem;
        line-height: 1.4;
    }

/* Subscription plan cards (public /pricing) */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    max-width: 960px;
    margin: 1rem 0 0;
}

/* Section intro above the plan grid */
.plan-section-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 2.5rem 0 0.5rem;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--surface, #fff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.plan-card--featured {
    border-color: var(--brand-accent, #2563eb);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}

.plan-card--current {
    border-color: #198754;
    background: #f6fcf8;
}

.plan-card--current .plan-badge {
    background: #198754;
}

.plan-badge {
    position: absolute;
    top: -0.75rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand-accent, #2563eb);
    border-radius: 999px;
}

.plan-name {
    margin: 0;
    font-size: 1.25rem;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.plan-amount {
    font-size: 2rem;
    font-weight: 700;
}

.plan-period {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.plan-sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.plan-savings {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #198754;
    background: #e8f6ee;
    border-radius: 999px;
}

.plan-cta {
    margin-top: 0.75rem;
    width: 100%;
}

/* ===================================================================
   Checkboxes (global, brand-styled)
   =================================================================== */
input[type="checkbox"],
.form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0 0.15rem 0 0;
    padding: 0;
    vertical-align: middle;
    border: 2px solid #adb5bd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    transition: background-color var(--transition), border-color var(--transition);
}

    input[type="checkbox"]:hover,
    .form-check-input[type="checkbox"]:hover {
        border-color: var(--primary);
    }

    input[type="checkbox"]:focus-visible,
    .form-check-input[type="checkbox"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.25);
    }

    /* Checked: brand fill + white tick */
    input[type="checkbox"]:checked,
    .form-check-input[type="checkbox"]:checked {
        background: var(--primary);
        border-color: var(--primary);
    }

        input[type="checkbox"]:checked::after,
        .form-check-input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

    /* Disabled */
    input[type="checkbox"]:disabled,
    .form-check-input[type="checkbox"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ===================================================================
   Horizontal NavMenu (public) — desktop-first, mobile overrides
   =================================================================== */

/* Container */
.nav-horizontal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    /* Links row — VISIBLE by default (desktop) */
    .nav-horizontal .nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: auto;
    }

    .nav-horizontal .nav-link {
        color: #333;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
        position: relative;
    }

        .nav-horizontal .nav-link:hover {
            color: var(--primary);
        }

        /* Current page: bold accent text + persistent underline bar so it is clearly
           distinct from the transient hover state. */
        .nav-horizontal .nav-link.active {
            color: var(--accent);
            font-weight: 700;
        }

            .nav-horizontal .nav-link.active::after {
                content: "";
                position: absolute;
                left: 0.25rem;
                right: 0.25rem;
                bottom: -0.35rem;
                height: 3px;
                border-radius: 3px;
                background: var(--accent);
            }

/* Hamburger — hidden on desktop */
.navbar-toggle-horizontal {
    display: none;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 0;
}


@media (max-width: 805px) {
    .nav-horizontal {
        position: relative;
    }

    /* Show the hamburger */
    .navbar-toggle-horizontal {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Collapse the links into a full-width dropdown */
    .nav-horizontal .nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        padding: 0.5rem 0;
        z-index: 1040;
    }

    /* Reveal when toggled */
    .nav-horizontal.open .nav {
        display: flex;
    }

    .nav-horizontal .nav-item {
        width: 100%;
    }

    .nav-horizontal .nav-link {
        display: block;
        width: 100%;
        padding: 0.75rem 1.5rem;
        color: #333 !important; /* beat any Bootstrap navbar text color */
    }

        .nav-horizontal .nav-link:hover {
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            color: var(--primary) !important;
        }

        /* Current page in the collapsed menu: stronger tint, bold accent text, left bar. */
        .nav-horizontal .nav-link.active {
            background: color-mix(in srgb, var(--accent) 16%, transparent);
            color: var(--accent) !important;
            font-weight: 700;
            box-shadow: inset 3px 0 0 0 var(--accent);
        }

            .nav-horizontal .nav-link.active::after {
                display: none;
            }

    /* Remove inner container padding so the panel reaches the edges */
    .nav-horizontal .container-fluid {
        padding: 0;
        position: static;
    }
}

/* ===================================================================
   About
   =================================================================== */
.about-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    margin: 0 auto 2.5rem auto;
    max-width: 1200px;
    gap: 3rem;
}

.about-intro {
    max-width: 560px;
}

.about-name {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.65rem;
    color: var(--heading-color);
    letter-spacing: -0.3px;
    text-wrap: balance;
}

.about-tagline {
    font-size: 1.2rem;
    color: var(--accent);
    margin-bottom: 1.2rem;
    font-weight: 600;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--primary-light);
}

.about-text {
    font-size: 1.13rem;
    color: var(--text-secondary);
    margin-bottom: 1.1rem;
    line-height: 1.7;
}

.about-section hr {
    margin: 2rem 0;
    border: none;
    border-top: 1.5px solid #eee;
}

.about-list {
    padding-left: 1.2rem;
    margin-bottom: 1.1rem;
}

    .about-list li {
        margin-bottom: 0.7rem;
        font-size: 1.13rem;
        color: var(--text-secondary);
    }

/* Smaller screens: stack photo on top */
@media (max-width: 768px) {
    .about-hero {
        flex-direction: column;
    }
}

/* Mobile: full-width sections */
@media (max-width: 480px) {
    .about-hero,
    .about-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .about-text {
        font-size: 1rem;
    }
}

/* ===================================================================
   Contact
   =================================================================== */
.contact-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* ===================================================================
   Responsive adjustments (About)
   =================================================================== */
@media (max-width: 900px) {
    .about-hero, .card, .about-section, .contact-container {
        padding: 1.5rem 0.5rem;
    }
}

@media (max-width: 600px) {
    .about-hero {
        flex-direction: column;
        gap: 1.2rem;
    }
}

/* ============================================================
   Shared nav icon glyphs (used by both horizontal & vertical nav)
   Base .bi sizing/color lives in each nav's scoped CSS.
   Dark fill here; the vertical nav's brightness(0) filter recolors it.
   ============================================================ */
.bi-lock-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-lock' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-shield-lock-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-shield-lock' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.180.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.42 11.234.036 7.916.632 3.44A1.54 1.54 0 0 1 1.678 2.18c.658-.214 1.777-.57 2.887-.87z'/%3E%3Cpath d='M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2.5-1.415z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-gear-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-person-gear-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-person-gear' viewBox='0 0 16 16'%3E%3Cpath d='M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382zM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E");
}

.bi-images-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-images' viewBox='0 0 16 16'%3E%3Cpath d='M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3'/%3E%3Cpath d='M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 12V3a1 1 0 0 0-1-1M2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

.bi-credit-card-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-credit-card' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z'/%3E%3Cpath d='M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-box-arrow-right-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E");
}

.bi-star-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-star-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E");
}

.bi-house-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z'/%3E%3C/svg%3E");
}

.bi-collection-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-collection-fill' viewBox='0 0 16 16'%3E%3Cpath d='M0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3m2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1'/%3E%3C/svg%3E");
}

.bi-graph-up-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-graph-up-arrow' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}

.bi-envelope-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-envelope-fill' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
}

.bi-info-circle-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-info-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E");
}

.bi-search-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
}

.bi-cloud-upload-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-cloud-arrow-up-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.bi-speedometer-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-speedometer2' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3'/%3E%3C/svg%3E");
}

.bi-shop-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-shop' viewBox='0 0 16 16'%3E%3Cpath d='M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.37 2.37 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0M1.5 8.5A.5.5 0 0 1 2 9v6h12V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5m2 .5a.5.5 0 0 1 .5.5V13h4V9.5a.5.5 0 0 1 1 0V13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5a.5.5 0 0 1 .5-.5m9 0a.5.5 0 0 1 .5.5V13a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V9.5a.5.5 0 0 1 1 0V13h1V9.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

.bi-bar-chart-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-bar-chart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-tools-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-tools' viewBox='0 0 16 16'%3E%3Cpath d='M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L11.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1-.708.708l-2.5-2.5a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'/%3E%3C/svg%3E");
}

.bi-download-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-download' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z'/%3E%3C/svg%3E");
}

.bi-stack-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-stack' viewBox='0 0 16 16'%3E%3Cpath d='m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.6.6 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0zM7.733.063a.6.6 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.6.6 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535z'/%3E%3Cpath d='m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.6.6 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0z'/%3E%3C/svg%3E");
}

.bi-upc-scan-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-upc-scan' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5M.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5M3 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0z'/%3E%3C/svg%3E");
}

.bi-people-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3Cpath d='M5.216 14A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

.bi-newspaper-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-newspaper' viewBox='0 0 16 16'%3E%3Cpath d='M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z'/%3E%3Cpath d='M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z'/%3E%3C/svg%3E");
}

.bi-chat-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-chat-dots-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}

.bi-calendar-event-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-calendar-event-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5-6.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-life-preserver-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232b2b2b' class='bi bi-life-preserver' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M4.858 1.311A7 7 0 0 1 7.5 .758V3.6a4.5 4.5 0 0 0-1.4.454l-1.242-2.743zM8.5 .758a7 7 0 0 1 2.642.553L9.9 4.054A4.5 4.5 0 0 0 8.5 3.6zm3.57.968 1.908 2.106a7 7 0 0 0-1.858-1.858l-.05.1zm.646 2.584a4.5 4.5 0 0 1 .454 1.4H16a7 7 0 0 0-.553-2.642zM12.4 8.5a4.5 4.5 0 0 1-.454 1.4l2.743 1.242A7 7 0 0 0 15.242 8.5zm-.646 2.584a4.5 4.5 0 0 1-.97.97l1.858 1.858a7 7 0 0 0 1.858-1.858zm-2.95 2.342 1.242 2.743A7 7 0 0 1 8.5 15.242V12.4a4.5 4.5 0 0 0 1.4-.454zM7.5 15.242a7 7 0 0 1-2.642-.553L6.1 11.946a4.5 4.5 0 0 0 1.4.454zm-3.57-.968L2.022 12.17a7 7 0 0 0 1.858 1.858zm-.646-2.584a4.5 4.5 0 0 1-.454-1.4H0a7 7 0 0 0 .553 2.642zM3.6 7.5a4.5 4.5 0 0 1 .454-1.4L1.311 4.858A7 7 0 0 0 .758 7.5zm.646-2.584a4.5 4.5 0 0 1 .97-.97L3.358 2.088A7 7 0 0 0 1.5 3.946zM8 5.5A2.5 2.5 0 1 0 8 10.5 2.5 2.5 0 0 0 8 5.5'/%3E%3C/svg%3E");
}



/* ============================================================
   Collapsed sidebar rail — driven by the persistent <html> class
   ============================================================ */
@media (min-width: 641px) {
    html.sidebar-collapsed .sidebar {
        width: 64px;
        overflow: hidden;
    }

        html.sidebar-collapsed .sidebar .sidebar-header {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
        }

        html.sidebar-collapsed .sidebar .sidebar-header-label {
            display: none;
        }

        html.sidebar-collapsed .sidebar .sidebar-chevron {
            margin-left: 0.4rem;
            transform: rotate(-45deg); /* points right = expand */
        }

        html.sidebar-collapsed .sidebar .nav-link {
            justify-content: center;
            gap: 0;
            font-size: 0;
            white-space: nowrap;
        }
}

/* ===================================================================
   Layout primitives — use on EVERY page for consistency
   =================================================================== */

/* Centered, width-capped page container */
.page-container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
}

/* Consistent vertical spacing between stacked sections */
.section {
    margin-block: var(--section-gap);
}

/* One heading style for all page/section titles */
.section-title {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem); /* was clamp(1.6rem, 3vw, 2.25rem) */
    font-weight: 700;
    color: var(--heading-color);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

    .section-title::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: var(--primary);
        margin: 0.75rem auto 0;
        border-radius: 2px;
    }

/* Left-aligned variant (e.g., legal / long-form pages) */
.section-title--left {
    text-align: left;
}

    .section-title--left::after {
        margin-inline: 0;
    }

/* Unified surface/card */
.surface {
    background: var(--bg-white);
    border: 1px solid #eee;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem;
}

/* Consistent body copy */
.prose {
    color: var(--text-secondary);
    line-height: 1.7;
}

    .prose p {
        margin: 0 0 1rem;
    }

/* ===================================================================
   Landing hero
   =================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
    margin-bottom: var(--section-gap);
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.9rem;
}

.hero-title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 18ch;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    max-width: 52ch;
    margin: 0 0 1.75rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Hero CTA buttons */
.hero .btn-hero,
.hero .btn-hero-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 1.02rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow var(--transition), background-color var(--transition), color var(--transition);
}

.hero .btn-hero {
    background: #fff;
    color: var(--primary);
}

    .hero .btn-hero:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
        color: var(--primary-hover);
        text-decoration: none;
    }

.hero .btn-hero-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

    .hero .btn-hero-outline:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        text-decoration: none;
    }

/* ===================================================================
   Feature-card grid (landing categories / value props)
   =================================================================== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: var(--section-gap);
}

.feature-card {
    background: var(--bg-white);
    border: 1px solid #ececec;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.75rem 1.5rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

    .feature-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
        border-color: var(--accent-light);
    }

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0 0 0.4rem;
}

.feature-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Closing call-to-action band */
.cta-band {
    text-align: center;
    background: var(--bg-white);
    border: 1px solid #ececec;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--section-gap);
}

.cta-band h2 {
    margin-bottom: 0.75rem;
}

.cta-band p {
    color: var(--text-secondary);
    max-width: 48ch;
    margin: 0 auto 1.5rem;
}

.legal {
    max-width: var(--content-max);
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    /* Let the main content area grow to fill leftover space,
   pushing the footer to the bottom on short pages. */
    .page > .page-body {
        flex: 1 0 auto;
    }

    .page > footer {
        flex-shrink: 0;
    }

/* ===================================================================
   Legal documents — formal, professional styling
   (applies to Privacy, Terms, Service Terms, Cookie Policy, Copyright)
   =================================================================== */
.legal {
    max-width: 820px; /* comfortable reading measure */
    margin-inline: auto;
    color: var(--text-secondary);
    counter-reset: legal-section; /* auto-number the sections */
}

    /* Muted "Last updated" line with a divider under the title */
    .legal .legal-updated {
        color: var(--text-muted);
        font-size: 0.9rem;
        margin-top: -0.5rem;
        margin-bottom: 2rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid #eee;
    }

    /* Refined, auto-numbered section headings (smaller than the page title) */
    .legal h3 {
        counter-increment: legal-section;
        font-family: var(--font-main);
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--heading-color);
        margin: 2rem 0 0.6rem;
    }

        .legal h3::before {
            content: counter(legal-section) ". ";
            color: var(--primary);
            font-weight: 700;
        }

    /* Body copy rhythm */
    .legal p {
        line-height: 1.7;
        margin: 0 0 1rem;
    }

    /* Let the section counter drive numbering; hide the <ol>'s native
   markers so ServiceTerms doesn't double-number. */
    .legal ol.legal-list {
        list-style: none;
        padding-left: 0;
    }

        .legal ol.legal-list > li {
            margin-bottom: 1.5rem;
        }

        /* Nested detail bullets inside a section keep normal bullets */
        .legal ul,
        .legal ol.legal-list ul {
            list-style: disc;
            line-height: 1.7;
            padding-left: 1.25rem;
            margin: 0.4rem 0 1rem;
        }

    .legal li {
        margin-bottom: 0.4rem;
    }

    /* On-brand links */
    .legal a {
        color: var(--primary);
    }

        .legal a:hover {
            color: var(--primary-hover);
        }



/* Footer legal/about links: wrap gracefully on small screens instead of
   shrinking the font to an unreadable size. */
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.9rem;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    list-style: none;
}

    .site-footer-links .about-link {
        font-size: 0.9rem;
        white-space: nowrap;
    }

@media (max-width: 400px) {
    .site-footer-links {
        gap: 0.25rem 0.75rem;
    }

        .site-footer-links .about-link {
            font-size: 0.82rem;
        }
}


.contact-service-terms-note {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ===================================================================
   Scrollable modal with an EditForm wrapper
   Bootstrap's .modal-dialog-scrollable expects .modal-header/.modal-body/
   .modal-footer to be direct children of .modal-content. When an EditForm
   (<form>) sits in between, the flex/height chain breaks and the body can't
   scroll. display:contents removes the form's own box so its children become
   the flex children Bootstrap expects, restoring the scrollable body.
   =================================================================== */
.modal-dialog-scrollable .modal-content > .modal-scrollable-form {
    display: contents;
}

/* Flex children default to min-height:auto, which refuses to shrink below
   content height and prevents the body from scrolling. Force it to allow
   shrinking so overflow-y:auto takes effect. */
.modal-dialog-scrollable .modal-content > .modal-scrollable-form > .modal-body {
    min-height: 0;
    overflow-y: auto;
}

/* Compact validation errors shown in the modal footer next to the buttons. */
.manual-footer-errors .validation-errors {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .manual-footer-errors .validation-message {
        font-size: 0.875rem;
    }

/* ===================================================================
   Auto-sizing textarea - grows to fit its content (no scrollbar) in
   browsers that support field-sizing, with a sensible fallback.
   =================================================================== */
textarea.auto-size {
    field-sizing: content;
    resize: none;
    overflow: hidden;
    min-height: calc(1.5em + 0.75rem + 2px);
}