/* NaijaHomes Premium Design System */
:root {
    --primary: #008751; /* Nigerian Emerald Green */
    --primary-dark: #005a36;
    --accent: #D4AF37; /* Metallic Gold */
    --accent-hover: #bfa02e;
    --dark: #121824; /* Deep Slate Navy */
    --light: #f8fafc;
    --white: #ffffff;
    --gray-100: #f1f5f9;
    --gray-300: #cbd5e1;
    --gray-600: #475569;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --radius: 12px;
}

.text-warning, .bi-star-fill, .bi-star-half {
    color: #D4AF37 !important;
}

body {
    background-color: var(--light);
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--dark);
}

/* Premium Navbar */
.navbar {
    background: rgba(18, 24, 36, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--accent);
    padding: 15px 0;
}

.navbar-brand {
    font-weight: 800;
    color: var(--white) !important;
    letter-spacing: -0.5px;
}

.navbar-brand span {
    color: var(--accent);
}

/* The real logo, sized so it never pushes the bar taller than the text does. */
.navbar-logo {
    /* Bigger mark, same bar height: the extra size is absorbed by trimming the
       navbar's own vertical padding below, so the header does not grow.
       The logo art carries its own padding, so the wordmark is pulled back
       against it rather than sitting a whole gap away. */
    width: 46px;
    height: 46px;
    object-fit: contain;
    margin-right: -6px;
}

/* Keep the bar exactly the height it was before the logo grew: pin the height
   and let the padding absorb the difference, so a future logo-size change
   cannot move the header either. */
.navbar.navbar-expand-lg {
    min-height: 72px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.footer-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    /* Same as the navbar: the artwork carries its own padding, so the wordmark
       is pulled back against it instead of sitting a full gap away. */
    margin-right: -5px;
}

/* Notification bell ------------------------------------------------------- */
.notif-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e63946;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #1a1a1a;
}

.notif-menu {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
}

.notif-item {
    white-space: normal;
    border-left: 3px solid transparent;
}

.notif-item.notif-unread {
    border-left-color: var(--accent, #008751);
    background: rgba(255, 255, 255, 0.04);
}

/* The signed-in user's own picture stands in for their name in the header. */
.nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-avatar-initials {
    background: var(--accent, #008751);
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--accent) !important;
}

/* Hero Section */
.hero-section {
    /* The hero image this used to reference was never in the repo, and the
       manifest storage refuses to build while it is missing - which broke
       collectstatic, and so every deploy. The gradient alone is what has
       actually been rendering all along. */
    background: linear-gradient(135deg, rgba(0, 135, 81, 0.95), rgba(18, 24, 36, 0.97));
    padding: 100px 0;
    color: var(--white);
    text-align: center;
    border-bottom: 5px solid var(--accent);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* Glassmorphism Search Container */
.search-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    padding: 25px;
    box-shadow: var(--shadow-lg);
}

/* Luxury Premium Cards */
.property-card {
    background: var(--white);
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.property-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.property-card-img-container {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.property-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.property-card:hover .property-card-img {
    transform: scale(1.08);
}

.property-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.property-price {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(18, 24, 36, 0.85);
    backdrop-filter: blur(5px);
    color: var(--accent);
    padding: 6px 14px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
}

.trusted-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--accent);
    color: var(--dark);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

/* Floating AI Chatbot overlay */
.ai-chatbot-bubble {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ai-chatbot-bubble:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 35px rgba(0, 135, 81, 0.4);
}

.ai-chatbot-modal {
    position: fixed;
    bottom: 105px;
    right: 30px;
    width: 400px;
    height: 550px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--primary);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chatbot-header {
    background: var(--dark);
    border-bottom: 2.5px solid var(--accent);
    color: var(--white);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatbot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--gray-100);
}

.chat-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 15px;
    max-width: 80%;
    font-size: 0.9rem;
    line-height: 1.4;
}

.chat-bubble.ai {
    background: var(--white);
    color: var(--dark);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    box-shadow: var(--shadow-sm);
}

.chat-bubble.user {
    background: var(--primary);
    color: var(--white);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chatbot-input-area {
    padding: 15px;
    border-top: 1px solid var(--gray-300);
    display: flex;
    background: var(--white);
}

.chatbot-input {
    flex: 1;
    border: 1px solid var(--gray-300);
    border-radius: 30px;
    padding: 8px 18px;
    outline: none;
    font-size: 0.9rem;
}

.chatbot-send-btn {
    background: var(--primary);
    border: none;
    color: var(--white);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.chatbot-send-btn:hover {
    background: var(--primary-dark);
}

/* Custom UI Badges & Buttons */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-accent {
    background-color: var(--accent);
    color: var(--dark);
    font-weight: 700;
    border: none;
    border-radius: 8px;
}

.btn-accent:hover {
    background-color: var(--accent-hover);
}

/* Dashboard Stats */
.stat-card {
    border-radius: var(--radius);
    padding: 20px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--primary);
}

/* Explicit dropdown-menu and item styling to prevent dark-on-dark or white-on-white text */
.dropdown-menu {
    background-color: var(--white) !important;
    border: 1px solid var(--gray-300) !important;
    box-shadow: var(--shadow-md) !important;
}

.dropdown-item {
    color: var(--dark) !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover {
    background-color: var(--gray-100) !important;
    color: var(--primary) !important;
}

.dropdown-menu-dark {
    background-color: var(--dark) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.dropdown-menu-dark .dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dropdown-menu-dark .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--accent) !important;
}

.dropdown-menu-dark .dropdown-item-text {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Fix visibility inside lists and detail components */
.text-muted {
    color: var(--gray-600);
}

.bg-dark, .bg-secondary, .card.bg-dark, .card.bg-secondary {
    color: var(--white) !important;
}

.bg-light {
    color: var(--dark) !important;
}

/* Explicit footer styling overrides to prevent black-on-black text */
footer, footer p, footer span, footer small, footer .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer a {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.2s ease;
}

footer a:hover {
    color: var(--accent) !important;
}

footer h5, footer h6 {
    color: var(--white) !important;
}

/* Fix paragraphs formatting */
.property-description-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.property-description-content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Explicit Bootstrap nav-tabs styling overrides to prevent white-on-white text */
.nav-tabs .nav-link {
    color: var(--dark) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    background-color: var(--white) !important;
    border-color: var(--gray-300) var(--gray-300) transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--primary) !important;
    border-color: var(--gray-300) var(--gray-300) transparent !important;
}


/* Toasts raised by UI.toast() in ui_dialog.js ---------------------------- */
.ui-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 12px);
    z-index: 2000;
    max-width: min(90vw, 380px);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: #0f172a;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.ui-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ui-toast-success { background: #0f5132; }
.ui-toast-danger { background: #842029; }

.modal-sm-plus { max-width: 420px; }

/* Footer compliance badge (SCUML). White chip so the logo's grey panel reads on the dark footer. */
.footer-scuml {
    display: inline-block;
    padding: 6px 10px;
    background: #fff;
    border-radius: 8px;
    line-height: 0;
}

.footer-scuml img {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
}

/* ============================================================
   Listing quality meter (properties/quality.py, _quality_meter.html)
   ============================================================ */
.lq {
    border: 1px solid #e6ebe8;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 12px 0;
    background: #fff;
}

.lq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lq-label { font-size: 0.82rem; font-weight: 700; color: #5b6472; text-transform: uppercase; letter-spacing: 0.04em; }
.lq-score { font-size: 1.15rem; font-weight: 800; color: #121824; }
.lq-score span { font-size: 0.78rem; font-weight: 600; color: #8a93a0; }

.lq-bar {
    height: 8px;
    border-radius: 999px;
    background: #eef1f4;
    overflow: hidden;
    margin: 8px 0 10px;
}

.lq-bar > span { display: block; height: 100%; border-radius: 999px; background: #008751; transition: width 0.3s ease; }
.lq-poor .lq-bar > span { background: #dc3545; }
.lq-fair .lq-bar > span { background: #ffc107; }
.lq-good .lq-bar > span { background: #3fa06b; }
.lq-excellent .lq-bar > span { background: #008751; }

.lq-next { margin: 0; font-size: 0.86rem; color: #5b6472; line-height: 1.45; }
.lq-done { color: #006b40; font-weight: 600; }

.lq-list { list-style: none; padding: 0; margin: 10px 0 0; }
.lq-list li { font-size: 0.87rem; color: #3f4652; line-height: 1.5; margin-bottom: 8px; }
.lq-list li i { color: #8a93a0; margin-right: 6px; }
.lq-list-done li { color: #8a93a0; }
.lq-list-done li i { color: #008751; }
.lq-compact { padding: 10px 12px; margin: 10px 0 0; }
.lq-compact .lq-next { font-size: 0.8rem; }

/* ============================================================
   Trust panel on a listing (properties/trust.py, _trust_panel.html)
   ============================================================ */
.tp {
    border: 1px solid #e6ebe8;
    border-radius: 14px;
    padding: 18px;
    margin: 20px 0;
    background: #fff;
}

.tp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tp-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: #121824; }
.tp-sub { margin: 2px 0 0; font-size: 0.85rem; color: #5b6472; }
.tp-score-box { display: flex; align-items: center; gap: 10px; }
.tp-score { font-size: 1.5rem; font-weight: 800; color: #121824; line-height: 1; }
.tp-score span { font-size: 0.8rem; font-weight: 600; color: #8a93a0; }

.tp-level {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.tp-level-none { background: #eef1f4; color: #5b6472; }
.tp-bar { height: 8px; border-radius: 999px; background: #eef1f4; overflow: hidden; margin: 14px 0; }
.tp-bar > span { display: block; height: 100%; border-radius: 999px; }

.tp-list { list-style: none; padding: 0; margin: 0; }
.tp-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; margin-bottom: 8px; }
.tp-list i { margin-top: 2px; }
.tp-ok { color: #121824; }
.tp-ok i { color: #008751; }
.tp-ok em { color: #8a93a0; font-style: normal; font-size: 0.82rem; }
.tp-bad { color: #b02a37; }
.tp-bad i { color: #dc3545; }
.tp-todo { color: #8a93a0; }
.tp-todo i { color: #cfd6dd; }

.tp-caveat {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef1f4;
    font-size: 0.8rem;
    color: #5b6472;
    line-height: 1.5;
}

.tp-caveat a { color: #008751; font-weight: 600; }

@media (max-width: 575.98px) {
    .tp { padding: 14px; }
    .tp-score-box { width: 100%; justify-content: space-between; }
}

/* ============================================================
   Floating action bar on a listing (detail.html, phones only)
   ============================================================ */
.pd-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e6ebe8;
    box-shadow: 0 -6px 20px rgba(18, 24, 36, 0.12);
}

.pd-action-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pd-action-amount { font-size: 1.05rem; font-weight: 800; color: #121824; white-space: nowrap; }
.pd-action-kind { font-size: 0.72rem; color: #8a93a0; text-transform: uppercase; letter-spacing: 0.04em; }

.pd-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #008751;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    text-align: center;
}

.pd-action-btn:hover, .pd-action-btn:focus { background: #006b40; color: #fff; }

/* Room for the bar, so it never covers the last thing on the page. */
@media (max-width: 991.98px) {
    body.pd-has-action-bar { padding-bottom: 84px; }
}

/* ============================================================
   Match score on a search result (properties/matching.py)
   ============================================================ */
.ms-match { display: inline-block; max-width: 100%; }

.ms-match > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 135, 81, 0.1);
    color: #006b40;
    font-size: 0.82rem;
    cursor: pointer;
    list-style: none;
}

.ms-match > summary::-webkit-details-marker { display: none; }
.ms-match > summary span { color: #5b6472; text-decoration: underline; font-size: 0.76rem; }
.ms-good > summary { background: rgba(0, 135, 81, 0.1); color: #006b40; }
.ms-fair > summary { background: rgba(255, 193, 7, 0.16); color: #8a6d00; }
.ms-weak > summary { background: #eef1f4; color: #5b6472; }

.ms-match ul { list-style: none; margin: 8px 0 0; padding: 10px 12px; background: #f8faf9; border-radius: 10px; }
.ms-match li { display: grid; grid-template-columns: 92px 70px 1fr; gap: 8px; align-items: center; font-size: 0.78rem; margin-bottom: 5px; }
.ms-factor { color: #121824; font-weight: 600; }
.ms-detail { color: #5b6472; }
.ms-meter { height: 6px; border-radius: 999px; background: #e6ebe8; overflow: hidden; }
.ms-meter > span { display: block; height: 100%; background: #008751; border-radius: 999px; }

@media (max-width: 575.98px) {
    .ms-match li { grid-template-columns: 84px 52px 1fr; font-size: 0.74rem; }
}

/* ============================================================
   "Need help with this property?" (professionals/for_property.py)
   ============================================================ */
.fp-block {
    border: 1px solid #e6ebe8;
    border-radius: 14px;
    padding: 20px;
    margin: 20px 0;
    background: #fff;
}

.fp-title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; color: #121824; }
.fp-sub { margin: 0 0 16px; font-size: 0.88rem; color: #5b6472; }

.fp-role { padding: 14px 0; border-top: 1px solid #eef1f4; }
.fp-role:first-of-type { border-top: 0; padding-top: 0; }
.fp-role-head h5 { margin: 0 0 2px; font-size: 0.98rem; font-weight: 700; color: #121824; }
.fp-role-head p { margin: 0 0 10px; font-size: 0.85rem; color: #5b6472; }

.fp-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.fp-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    text-decoration: none;
    color: #121824;
    background: #fff;
}

.fp-person:hover { border-color: #008751; }
.fp-person img, .fp-initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    flex-shrink: 0;
}

.fp-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #008751;
    color: #fff;
    font-weight: 800;
}

.fp-person-body { display: flex; flex-direction: column; min-width: 0; }
.fp-person-body strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-meta { font-size: 0.78rem; color: #5b6472; }
.fp-meta .bi-star-fill { color: #ffc107; }
.fp-sponsored { font-size: 0.68rem; font-weight: 700; color: #8a6d00; text-transform: uppercase; }
.fp-arrow { margin-left: auto; color: #cfd6dd; font-size: 0.8rem; }

.fp-quote { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: #008751; text-decoration: none; }
.fp-quote:hover { text-decoration: underline; }

.fp-caveat { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #eef1f4; font-size: 0.8rem; color: #5b6472; }
.fp-caveat a { color: #008751; font-weight: 600; }

@media (max-width: 575.98px) {
    .fp-block { padding: 14px; }
    .fp-people { grid-template-columns: 1fr; }
}

/* ============================================================
   Asking-price history on a listing (properties/price_history.py)
   ============================================================ */
.ph-story {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px auto 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: left;
}

.ph-down { background: rgba(0, 135, 81, 0.18); color: #b9f6d5; }
.ph-up { background: rgba(255, 193, 7, 0.18); color: #ffe08a; }
.ph-story strong { font-weight: 800; }

.ph-list { margin-top: 10px; font-size: 0.8rem; }
.ph-list > summary { cursor: pointer; color: rgba(255, 255, 255, 0.75); }
.ph-list ul { list-style: none; margin: 8px 0 0; padding: 10px; background: rgba(255, 255, 255, 0.07); border-radius: 10px; }
.ph-list li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   Investment view on a listing (properties/investment.py)
   ============================================================ */
.iv-block { border: 1px solid #e6ebe8; border-radius: 14px; padding: 18px; margin: 20px 0; background: #fff; }
.iv-title { margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; color: #121824; }
.iv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.iv-stat {
    padding: 12px 14px;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.iv-stat-accent { border-color: #cdebdc; background: #f2faf6; }
.iv-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #8a93a0; line-height: 1.3; }
.iv-value { font-size: 1.25rem; font-weight: 800; color: #121824; }
.iv-value small { font-size: 0.78rem; font-weight: 600; color: #8a93a0; }

.iv-caveat { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef1f4; font-size: 0.8rem; color: #5b6472; line-height: 1.5; }
.iv-caveat a { color: #008751; font-weight: 600; }

@media (max-width: 767.98px) {
    .iv-grid { grid-template-columns: 1fr; }
}