/* ================================================
   Portal Door Navigation System
   Dual-header: slim parent bar + API nav bar
   ================================================ */

/* ===== Accent Colors ===== */
:root {
    --portal-blue: #3b82f6;
}

.portal-icon-blue {
    color: var(--portal-blue);
}

/* --- Parent Bar (40px, white) --- */
.portal-parent-bar {
    position: relative;
    height: 40px;
    background: #fff;
    border-bottom: 1px solid #dde1e6;
    font-size: 13px;
    font-weight: 600;
    z-index: 1030;
}

.portal-parent-bar .portal-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    max-width: 1320px;
    margin: 0 auto;
}

.portal-parent-brand {
    flex-shrink: 0;
}

.portal-parent-brand img {
    height: 28px;
    width: auto;
}

.portal-parent-divider {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    margin: 0 12px;
    flex-shrink: 0;
}

/* Parent bar nav links */
.portal-parent-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.portal-parent-nav > li {
    position: relative;
}

.portal-parent-nav > li > a {
    color: #2c3038;
    text-decoration: none;
    padding: 10px 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: color 0.15s;
}

.portal-parent-nav > li > a:hover {
    color: #e42707;
}

.portal-parent-nav > li > a.active {
    color: #e42707;
    position: relative;
}

.portal-parent-nav > li > a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #e42707;
}

/* Disable Bootstrap's default caret on parent bar dropdowns */
.portal-parent-nav .dropdown-toggle::after {
    display: none;
}

/* Parent bar dropdown arrow character */
.portal-parent-nav .dropdown-arrow {
    font-size: 10px;
    margin-left: 2px;
}

/* Parent bar dropdown menus */
.portal-parent-nav .dropdown-menu {
    font-size: 13px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border: 1px solid #dde1e6;
    margin-top: 2px;
    min-width: 220px;
}

.portal-parent-nav .dropdown-menu .dropdown-item {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #2c3038;
}

.portal-parent-nav .dropdown-menu .dropdown-item:hover {
    background: transparent;
    color: #e42707;
}

/* Parent bar: open dropdowns on hover (desktop) */
@media (min-width: 992px) {
    .portal-parent-nav .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

.portal-parent-nav .dropdown-menu .dropdown-item.active {
    background: transparent;
    color: #e42707;
}

/* Parent bar pill buttons (matching zip-codes.com main site) */
.portal-btn-phone {
    --bs-btn-bg: #406020;
    --bs-btn-border-color: #83b345;
    --bs-btn-hover-bg: #4a7026;
    --bs-btn-hover-border-color: #93c350;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-disabled-bg: #F84525;
    --bs-btn-disabled-border-color: #F84525;
    font-size: 13px;
    padding: 4px 14px;
    white-space: nowrap;
}

.portal-btn-account {
    --bs-btn-bg: #5053b0;
    --bs-btn-border-color: #5053b0;
    --bs-btn-hover-bg: #5d60c0;
    --bs-btn-hover-border-color: #5d60c0;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-disabled-bg: #5053b0;
    --bs-btn-disabled-border-color: #5053b0;
    font-size: 13px;
    padding: 4px 14px;
    white-space: nowrap;
}

.portal-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}


/* --- API Nav Bar (52px, warm off-white) --- */
.portal-api-bar {
    background: rgb(248, 244, 243);
    border-bottom: 1px solid #e8eaee;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 0;
}

.portal-api-bar .portal-inner {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    max-width: 1320px;
    margin: 0 auto;
}

.portal-api-brand {
    font-size: 15px;
    font-weight: 600;
    color: #2c3038;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.portal-api-brand:hover {
    color: #2c3038;
    text-decoration: none;
}

.portal-api-brand i {
    font-size: 14px;
    color: #6b7280;
}

/* API nav links */
.portal-api-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    gap: 0;
}

.portal-api-link {
    font-size: 14px;
    font-weight: 500;
    color: #2c3038;
    text-decoration: none;
    padding: 15px 12px;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s;
}

.portal-api-link:hover {
    color: #1a1a1a;
}

.portal-api-link.active {
    color: #1a1a1a;
    font-weight: 700;
    background: transparent;
}

.portal-api-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #1a1a1a;
}

/* API bar action buttons */
.portal-api-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.portal-api-btn.dashboard-outline {
    color: #2c3038;
    border: 1.5px solid #9ca3af;
    background: transparent;
}

.portal-api-btn.dashboard-outline:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1a1a1a;
    border-color: #6b7280;
    text-decoration: none;
}

.portal-api-btn.dashboard-solid {
    color: #fff;
    background: #3b82f6;
    border: 1.5px solid #3b82f6;
}

.portal-api-btn.dashboard-solid:hover {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

.portal-api-btn.signup-cta {
    color: #fff;
    background: #e42707;
    border: 1.5px solid #e42707;
}

.portal-api-btn.signup-cta:hover {
    background: #c92206;
    color: #fff;
    text-decoration: none;
}


/* API bar hamburger toggle */
.portal-api-bar .portal-toggler {
    display: none;
    background: none;
    border: 1px solid #2c3038;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    margin-left: auto;
}

.portal-api-bar .portal-toggler span {
    display: block;
    width: 20px;
    height: 2px;
    background: #2c3038;
    margin: 4px 0;
}


/* --- Responsive (< lg / 992px) --- */
@media (max-width: 991.98px) {
    /* Parent bar: hide nav links and divider on mobile */
    .portal-parent-nav,
    .portal-parent-divider {
        display: none !important;
    }

    /* API bar: stack vertically */
    .portal-api-bar .portal-inner {
        flex-wrap: wrap;
    }

    .portal-api-bar .portal-toggler {
        display: block;
    }


    /* Bootstrap collapse handles show/hide; style the expanded state */
    .portal-api-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 8px 0;
        border-top: 1px solid #dde1e6;
        margin-top: 8px;
        gap: 2px;
    }

    .portal-api-nav li {
        width: 100%;
    }

    .portal-api-link {
        padding: 10px 12px;
        display: block;
        border-radius: 4px;
    }

    .portal-api-link.active::after {
        display: none;
    }

    .portal-api-link.active {
        border-radius: 4px;
    }

    .portal-api-nav .portal-nav-actions {
        display: flex;
        gap: 8px;
        padding: 8px 12px;
    }
}

/* Extra small: tighten parent bar buttons */
@media (max-width: 575.98px) {
    .portal-btn-phone,
    .portal-btn-account {
        padding: 4px 8px;
        font-size: 12px;
    }
}


/* --- Section Background Stripes (from zip-codes.com) --- */
.bg-light2 {
    background-color: rgba(166, 182, 208, var(--bs-bg-opacity, 1)) !important;
}

.bg-light3 {
    background-color: rgba(170, 204, 204, var(--bs-bg-opacity, 1)) !important;
}

.bg-light4 {
    background-color: rgba(168, 208, 166, var(--bs-bg-opacity, 1)) !important;
}

body {
    overflow-x: hidden;
}

.bg-light5 {
    background-color: rgba(80, 83, 176, var(--bs-bg-opacity, 1)) !important;
}

/* --- Full-width Section Stripe --- */
.portal-stripe {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 48px 0;
}


/* ================================================
   Overview Page — Hero, Features, Code, CTA
   ================================================ */

/* --- Hero Section --- */
.portal-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-top: -1.5rem; /* offset container py-4 */
    background: #fff;
    color: #212529;
    padding: 64px 24px 48px;
    overflow: hidden;
}

/* ── Hero Background Options (toggle via JS) ── */

/* Option A: Soft blue-gray gradient — clean, airy */
/* Option B: Warm gradient with subtle radial glow */
.portal-hero.bg-opt-b {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(228, 39, 7, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
        linear-gradient(160deg, #f8f9fc 0%, #eef1f6 50%, #f5f7fa 100%);
}

/* C1: Dark navy + topographic contour lines */
.portal-hero.bg-opt-c1 {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cellipse cx='300' cy='300' rx='280' ry='200' fill='none' stroke='%23cbd5e1' stroke-width='0.8' opacity='0.28'/%3E%3Cellipse cx='300' cy='300' rx='220' ry='155' fill='none' stroke='%23cbd5e1' stroke-width='0.8' opacity='0.24'/%3E%3Cellipse cx='300' cy='300' rx='160' ry='110' fill='none' stroke='%23cbd5e1' stroke-width='0.7' opacity='0.20'/%3E%3Cellipse cx='300' cy='300' rx='100' ry='70' fill='none' stroke='%23cbd5e1' stroke-width='0.7' opacity='0.16'/%3E%3Cellipse cx='140' cy='450' rx='180' ry='130' fill='none' stroke='%23cbd5e1' stroke-width='0.8' opacity='0.22'/%3E%3Cellipse cx='140' cy='450' rx='120' ry='85' fill='none' stroke='%23cbd5e1' stroke-width='0.7' opacity='0.18'/%3E%3Cellipse cx='500' cy='120' rx='150' ry='100' fill='none' stroke='%23cbd5e1' stroke-width='0.8' opacity='0.20'/%3E%3Cellipse cx='500' cy='120' rx='90' ry='60' fill='none' stroke='%23cbd5e1' stroke-width='0.7' opacity='0.16'/%3E%3C/svg%3E") center / 600px 600px repeat,
        linear-gradient(135deg, #1e293b 0%, #2d3a4e 40%, #3b4a5e 100%);
    color: #f1f5f9;
}

/* C2: Dark navy + geometric low-poly triangles */
.portal-hero.bg-opt-c2 {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cpolygon points='0,0 200,0 100,100' fill='%2364748b' opacity='0.30'/%3E%3Cpolygon points='200,0 400,0 300,100' fill='%23475569' opacity='0.25'/%3E%3Cpolygon points='100,100 300,100 200,200' fill='%2364748b' opacity='0.18'/%3E%3Cpolygon points='0,0 100,100 0,200' fill='%23475569' opacity='0.22'/%3E%3Cpolygon points='400,0 400,200 300,100' fill='%2364748b' opacity='0.22'/%3E%3Cpolygon points='0,200 100,100 200,200' fill='%23475569' opacity='0.16'/%3E%3Cpolygon points='200,200 300,100 400,200' fill='%2364748b' opacity='0.20'/%3E%3Cpolygon points='0,200 200,200 100,300' fill='%2364748b' opacity='0.25'/%3E%3Cpolygon points='200,200 400,200 300,300' fill='%23475569' opacity='0.22'/%3E%3Cpolygon points='0,200 0,400 100,300' fill='%23475569' opacity='0.18'/%3E%3Cpolygon points='400,200 400,400 300,300' fill='%2364748b' opacity='0.16'/%3E%3Cpolygon points='100,300 300,300 200,400' fill='%23475569' opacity='0.24'/%3E%3Cpolygon points='0,400 100,300 200,400' fill='%2364748b' opacity='0.14'/%3E%3Cpolygon points='200,400 300,300 400,400' fill='%23475569' opacity='0.20'/%3E%3C/svg%3E") center / 400px 400px repeat,
        linear-gradient(135deg, #1e293b 0%, #2d3a4e 50%, #3b4a5e 100%);
    color: #f1f5f9;
}

/* C3: Dark navy + subtle dot grid */
.portal-hero.bg-opt-c3 {
    background:
        radial-gradient(circle at 1px 1px, rgba(148,163,184,0.38) 1.2px, transparent 0) 0 0 / 32px 32px,
        radial-gradient(ellipse at 30% 70%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 40%),
        linear-gradient(135deg, #1e293b 0%, #2d3a4e 50%, #3b4a5e 100%);
    color: #f1f5f9;
}
.portal-hero[class*="bg-opt-c"] .portal-hero-title { color: #fff; }
.portal-hero[class*="bg-opt-c"] .portal-hero-sub { color: #94a3b8; }
.portal-hero[class*="bg-opt-c"] .portal-hero-sub .accent { color: #f87171; }
.portal-hero[class*="bg-opt-c"] .portal-hero-btn.outline { color: #e2e8f0; border-color: #64748b; }
.portal-hero[class*="bg-opt-c"] .portal-hero-btn.outline:hover { background: rgba(255,255,255,0.08); border-color: #94a3b8; color: #fff; }
.portal-hero[class*="bg-opt-c"] .portal-demo-link { color: #93c5fd; }
.portal-hero[class*="bg-opt-c"] .portal-hero-dot { border-color: #64748b; }

/* Option D: Abstract mesh — bold multi-color gradient */
.portal-hero.bg-opt-d {
    background:
        radial-gradient(ellipse at 10% 90%, rgba(59, 130, 246, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 10%, rgba(139, 92, 246, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(228, 39, 7, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 45%),
        linear-gradient(170deg, #e8ecf4 0%, #f0f2f8 40%, #e8edf6 100%);
}

/* Option E: Geo-inspired grid on light bg */
.portal-hero.bg-opt-e {
    background-color: #f0f3f8;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(59,130,246,0.10) 40px, rgba(59,130,246,0.10) 41px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(59,130,246,0.10) 40px, rgba(59,130,246,0.10) 41px),
        radial-gradient(ellipse at 70% 40%, rgba(59,130,246,0.12) 0%, transparent 50%);
}

.portal-hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
}

.portal-hero-text {
    flex: 1 1 55%;
    text-align: left;
}

.portal-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    color: #1a1a1a;
}

.portal-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.portal-hero-sub {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* --- Hero Visual (layered images) --- */
.portal-hero-visual {
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 340px;
}

.portal-hero-img-stack {
    position: relative;
    width: 440px;
    height: 430px;
}

.portal-hero-img-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    border-radius: 12px;
    transform: rotate(-6deg);
    opacity: 0.85;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 1;
}

.portal-hero-slide {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 350px;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 2;
    pointer-events: none;
    text-decoration: none;
}

.portal-hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.portal-hero-img-front {
    width: 350px;
    height: 350px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.10);
    border: 3px solid #fff;
    display: block;
}

.portal-hero-caption {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    line-height: 1.4;
    height: 56px;
    overflow: hidden;
}
.portal-hero-caption strong {
    display: block;
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 700;
    margin-bottom: 2px;
}
.portal-hero-caption > span {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
}

.portal-hero-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.portal-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.portal-hero-dot.active {
    background: #e42707;
    border-color: #e42707;
    transform: scale(1.2);
}

.portal-hero-dot:hover {
    border-color: #e42707;
}

/* Responsive: stack on smaller screens */
@media (max-width: 860px) {
    .portal-hero-inner {
        flex-direction: column;
        text-align: center;
    }
    .portal-hero-text {
        text-align: center;
    }
    .portal-hero-actions {
        justify-content: center;
    }
    .portal-hero-trust {
        justify-content: center;
    }
    .portal-hero-visual {
        min-height: 320px;
    }
    .portal-hero-img-stack {
        width: 320px;
        height: 340px;
    }
    .portal-hero-slide {
        width: 250px;
        height: 280px;
    }
    .portal-hero-img-front {
        width: 250px;
        max-height: 220px;
    }
    .portal-hero-caption > span {
        display: none;
    }
    .portal-hero-img-back {
        width: 250px;
    }
    .portal-hero-img-front {
        width: 250px;
    }
}

.portal-hero-sub .accent {
    color: #e42707;
    font-weight: 600;
}

.portal-hero-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.portal-hero-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.portal-hero-btn.primary {
    background: #e42707;
    color: #fff;
    border: 2px solid #e42707;
}

.portal-hero-btn.primary:hover {
    background: #c92206;
    border-color: #c92206;
    color: #fff;
}

.portal-hero-btn.outline {
    background: transparent;
    color: #2c3038;
    border: 2px solid #d1d5db;
}

.portal-hero-btn.outline:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #1a1a1a;
}


/* --- Feature Cards --- */
.portal-features {
    padding: 0;
}

.portal-feature-card {
    text-align: center;
    padding: 28px 20px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.15s;
    height: 100%;
}

.portal-feature-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.portal-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--portal-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.portal-feature-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1e3a8a;
}

.portal-feature-card p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 0;
    line-height: 1.5;
}


/* --- Code Example Section --- */
.portal-code-section {
    padding: 48px 0;
}

.portal-checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.portal-checklist li {
    padding: 5px 0;
    font-size: 15px;
    color: #374151;
}

.portal-checklist li i {
    color: #3b82f6;
    margin-right: 8px;
    font-size: 13px;
}

.portal-code-block {
    background: #1e293b;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.portal-code-header {
    background: #334155;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.portal-code-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.portal-code-dot.red { background: #ef4444; }
.portal-code-dot.yellow { background: #eab308; }
.portal-code-dot.green { background: #22c55e; }

.portal-code-label {
    margin-left: 10px;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.portal-code-body {
    padding: 20px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
    overflow-x: auto;
    background: transparent;
    border: none;
}

.portal-code-body code {
    color: #e2e8f0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.portal-code-body code strong {
    color: #7dd3fc;
    font-weight: 700;
}

/* --- Code carousel tabs --- */
.portal-code-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.portal-code-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.portal-code-tab:hover {
    color: #cbd5e1;
    background: rgba(255,255,255,0.06);
}

.portal-code-tab.active {
    color: #fff;
    background: rgba(59,130,246,0.25);
    border-color: rgba(59,130,246,0.4);
}

/* --- Code carousel slides --- */
.portal-code-carousel {
    position: relative;
    min-height: 280px;
}

.portal-code-carousel .portal-code-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.portal-code-carousel .portal-code-slide.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}


/* --- CTA Banner (bottom) --- */
.portal-cta-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background:
        radial-gradient(circle at 1px 1px, rgba(148,163,184,0.38) 1.2px, transparent 0) 0 0 / 32px 32px,
        radial-gradient(ellipse at 30% 70%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 40%),
        linear-gradient(135deg, #1e293b 0%, #2d3a4e 50%, #3b4a5e 100%);
    color: #fff;
    text-align: center;
    padding: 56px 24px;
    margin-top: 32px;
    margin-bottom: -1.5rem; /* offset container py-4 bottom */
}

.portal-cta-banner .portal-hero-actions {
    justify-content: center;
}

.portal-cta-banner h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.portal-cta-banner p {
    font-size: 1.05rem;
    opacity: 0.85;
    margin-bottom: 28px;
}

.portal-cta-banner .portal-hero-btn.outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.portal-cta-banner .portal-hero-btn.outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}

/* --- Hero Trust Strip --- */
.portal-hero-trust {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: #94a3b8;
}
.portal-hero-trust i {
    color: #22c55e;
    margin-right: 4px;
    font-size: 0.8rem;
}

/* --- Trust Eyebrow --- */
.portal-trust-eyebrow {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 6px;
}

/* --- FAQ Section --- */
.portal-faq {
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

.portal-faq-title {
    font-size: 1.75rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 28px;
    color: #1e293b;
}

.portal-faq-accordion .accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}

.portal-faq-accordion .accordion-button {
    font-weight: 600;
    font-size: 0.97rem;
    color: #1e293b;
    background: #fff;
    padding: 16px 20px;
    box-shadow: none;
}

.portal-faq-accordion .accordion-button:not(.collapsed) {
    color: #2563eb;
    background: #f8fafc;
    box-shadow: none;
}

.portal-faq-accordion .accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

.portal-faq-accordion .accordion-body {
    padding: 0 20px 16px;
    font-size: 0.93rem;
    line-height: 1.65;
    color: #475569;
}

.portal-faq-accordion .accordion-body code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.88em;
    color: #e11d48;
}


/* --- Spatial FAQ: comparison layout --- */
.faq-spatial-intro {
    margin-bottom: 18px;
}

.faq-spatial-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.faq-spatial-panel {
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
}

.faq-spatial-panel.panel-centroid {
    background: #fafafa;
    border-color: #e2e8f0;
}

.faq-spatial-panel.panel-spatial {
    background: #f0f7ff;
    border-color: #bfdbfe;
}

.faq-spatial-panel-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.faq-spatial-panel.panel-centroid .faq-spatial-panel-label {
    color: #64748b;
}

.faq-spatial-panel.panel-spatial .faq-spatial-panel-label {
    color: #1d4ed8;
}

.faq-spatial-panel-label i {
    font-size: 13px;
}

.faq-spatial-panel-verdict {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.panel-centroid .faq-spatial-panel-verdict {
    background: #fee2e2;
    color: #b91c1c;
}

.panel-spatial .faq-spatial-panel-verdict {
    background: #dcfce7;
    color: #15803d;
}

.faq-spatial-panel p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
    margin-bottom: 0;
}

.faq-spatial-panel.panel-centroid p {
    color: #64748b;
}

.faq-spatial-example {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.faq-spatial-example-img {
    flex-shrink: 0;
    width: 220px;
}

.faq-spatial-example-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.faq-spatial-example-body {
    flex: 1;
    min-width: 0;
}

.faq-spatial-example-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 8px;
}

.faq-spatial-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.faq-spatial-stat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    line-height: 1.3;
}

.faq-spatial-stat-val {
    font-weight: 700;
    color: #1e293b;
    display: block;
}

.faq-spatial-stat-key {
    color: #94a3b8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.faq-spatial-pct-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 5px 10px;
    margin-bottom: 10px;
}

.faq-spatial-example-body p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #475569;
    margin-bottom: 0;
}

.faq-spatial-usecases {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.faq-spatial-usetag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(59,130,246,0.07);
    color: #1e3a8a;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 10px;
    border: 1px solid #bfdbfe;
}

.faq-spatial-usetag i {
    font-size: 11px;
    color: #2563eb;
}

.faq-spatial-modes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.faq-spatial-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
}

.faq-spatial-mode-chip.chip-speed {
    background: #fafafa;
    border: 1px solid #e2e8f0;
    color: #374151;
}

.faq-spatial-mode-chip.chip-precision {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.faq-spatial-mode-chip i {
    font-size: 13px;
    flex-shrink: 0;
}

.faq-spatial-mode-chip.chip-speed i { color: #64748b; }
.faq-spatial-mode-chip.chip-precision i { color: #2563eb; }

.faq-spatial-mode-chip code {
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.88em;
    color: inherit !important;
}

/* Zoomable thumbnail */
.faq-spatial-zoomable {
    cursor: zoom-in;
    transition: opacity 0.15s;
}
.faq-spatial-zoomable:hover {
    opacity: 0.85;
}

/* Lightbox overlay */
.spatial-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.spatial-lightbox.active {
    display: flex;
}
.spatial-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.spatial-lightbox-close:hover {
    opacity: 1;
}
.spatial-lightbox-content {
    max-width: 900px;
    width: 100%;
    text-align: center;
}
.spatial-lightbox-content img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.spatial-lightbox-caption {
    color: #e2e8f0;
    font-size: 0.9rem;
    margin-top: 1rem;
    line-height: 1.5;
}
.spatial-lightbox-caption strong {
    color: #fff;
}

@media (max-width: 600px) {
    .faq-spatial-compare {
        grid-template-columns: 1fr;
    }

    .faq-spatial-example {
        flex-direction: column;
    }

    .faq-spatial-example-img {
        width: 100%;
    }

    .spatial-lightbox {
        padding: 1rem;
    }

    .portal-hero-trust {
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }
}

/* --- Logo Strip (social proof) --- */
.portal-logo-strip {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background: #302f8a;
    padding: 24px 24px 28px;
    text-align: center;
}

.portal-logo-strip p {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 14px;
}

.portal-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: auto;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.portal-logo-row::-webkit-scrollbar {
    display: none;
}

.portal-logo-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 10px 16px;
    flex-shrink: 0;
    transition: box-shadow 0.3s;
}

.portal-logo-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.portal-logo-card img {
    height: 34px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.portal-logo-card:hover img {
    opacity: 1;
}


/* --- Demo Link (hero) --- */
.portal-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #302f8a;
    text-decoration: none;
}

.portal-demo-link:hover {
    color: #24236a;
    text-decoration: underline;
}

.portal-demo-link i {
    font-size: 12px;
    transition: transform 0.15s;
}

.portal-demo-link:hover i {
    transform: translateX(3px);
}

/* --- Handwritten Accent --- */
.portal-handwritten {
    font-family: 'Caveat', cursive;
    color: #3b82f6;
    font-size: 1.15em;
}


/* --- Testimonial Cards --- */
.portal-testimonial {
    background: #fff;
    border-radius: 10px;
    padding: 28px 24px;
    border: 1px solid #e5e7eb;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portal-testimonial-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #3b82f6;
    margin-bottom: 8px;
}

.portal-testimonial-stars {
    color: #f59e0b;
    font-size: 16px;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.portal-testimonial blockquote {
    font-size: 14px;
    color: #374151;
    line-height: 1.7;
    margin: 0 0 16px;
    flex: 1;
    font-style: italic;
}

.portal-testimonial-author {
    font-weight: 700;
    font-size: 14px;
    color: #1e3a8a;
}

.portal-testimonial-role {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.portal-testimonial-verified {
    font-size: 12px;
    color: #3b82f6;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    margin-top: auto;
}

.portal-testimonial-verified i {
    margin-right: 4px;
}


/* --- Trust Section (Why Zip-Codes.com) --- */
.portal-trust-section {
    padding: 48px 0 40px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: max(24px, calc(50vw - 570px));
    padding-right: max(24px, calc(50vw - 570px));
}

.portal-trust-card {
    text-align: center;
    padding: 28px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    height: 100%;
    transition: box-shadow 0.2s ease;
}

.portal-trust-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.portal-trust-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 20px;
}

.portal-trust-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1e293b;
}

.portal-trust-card p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #64748b;
    margin-bottom: 0;
}


/* --- Pricing Teaser (Overview page) --- */
.portal-pricing-teaser {
    padding: 48px 0;
}

.portal-pricing-card {
    text-align: center;
    padding: 28px 20px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.portal-pricing-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.portal-pricing-card.featured {
    border-color: #3b82f6;
    border-width: 2px;
    position: relative;
}

.portal-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 14px;
    border-radius: 12px;
    white-space: nowrap;
}

.portal-pricing-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 8px;
}

.portal-pricing-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 4px;
}

.portal-pricing-period {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

.portal-pricing-volume {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    padding: 8px 0;
    border-top: 1px solid #e5e7eb;
}

.portal-pricing-detail {
    font-size: 13px;
    color: #6b7280;
    padding-top: 8px;
    margin-bottom: 0;
}

.portal-pricing-card .portal-plan-btn {
    margin-top: auto;
    padding: 8px 16px;
    font-size: 13px;
}

.portal-pricing-card .portal-plan-btn.stretched-link::after {
    border-radius: 10px;
}


/* --- Pricing Page: Plan Cards with Top Color Bars --- */
.portal-plan-card {
    text-align: center;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: box-shadow 0.2s, transform 0.15s;
}

.portal-plan-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.portal-plan-bar {
    height: 4px;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
}

.portal-plan-bar.gray   { background: #9ca3af; }
.portal-plan-bar.teal   { background: #06b6d4; }
.portal-plan-bar.blue   { background: #3b82f6; }
.portal-plan-bar.purple { background: #302f8a; }

.portal-plan-body {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.portal-plan-body h5 {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 8px;
}

.portal-plan-amount {
    font-size: 2.6rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 4px;
}

.portal-plan-period {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.portal-plan-desc {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 20px;
}

.portal-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
    flex: 1;
}

.portal-plan-features li {
    padding: 5px 0;
    font-size: 14px;
    color: #374151;
}

.portal-plan-features li i {
    color: #3b82f6;
    margin-right: 8px;
    font-size: 12px;
}

.portal-plan-btn {
    display: block;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    margin-top: auto;
}

.portal-plan-btn.outline {
    color: #3b82f6;
    border: 1.5px solid #3b82f6;
    background: transparent;
}

.portal-plan-btn.outline:hover {
    background: rgba(59, 130, 246, 0.08);
    text-decoration: none;
}

.portal-plan-btn.solid {
    color: #fff;
    background: #3b82f6;
    border: 1.5px solid #3b82f6;
}

.portal-plan-btn.solid:hover {
    background: #2563eb;
    text-decoration: none;
    color: #fff;
}

/* Featured (Professional) — scaled up, heavier shadow, thicker bar */
.portal-plan-card.featured {
    border-color: #3b82f6;
    border-width: 2px;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    transform: scale(1.04);
    z-index: 1;
    position: relative;
}

.portal-plan-card.featured:hover {
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
}

.portal-plan-card.featured .portal-plan-bar {
    height: 6px;
}

/* Pricing page "All Plans Include" section */
.portal-plans-include {
    padding: 48px 0;
}

.portal-plans-include .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.portal-plans-include .feature-item i {
    color: #3b82f6;
    margin-top: 3px;
    flex-shrink: 0;
}

.portal-plans-include .feature-item strong {
    display: block;
    font-size: 15px;
    color: #1e3a8a;
    margin-bottom: 2px;
}

.portal-plans-include .feature-item p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Pricing page comparison table */
.portal-compare-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.portal-compare-table table {
    margin-bottom: 0;
}

.portal-compare-table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e7eb;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    padding: 12px 16px;
    white-space: nowrap;
}

.portal-compare-table thead th:first-child {
    text-align: left;
}

.portal-compare-table thead th.col-featured {
    background: rgba(59, 130, 246, 0.06);
    color: #1e3a8a;
}

.portal-compare-table tbody td {
    padding: 10px 16px;
    font-size: 14px;
    color: #374151;
    vertical-align: middle;
    border-color: #f0f0f0;
}

.portal-compare-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
    color: #1e3a8a;
    font-size: 13px;
}

.portal-compare-table tbody td.col-featured {
    background: rgba(59, 130, 246, 0.03);
}

.portal-compare-table .compare-check {
    color: #3b82f6;
    font-size: 14px;
}

.portal-compare-table .compare-dash {
    color: #d1d5db;
    font-size: 14px;
}

.portal-compare-table .compare-value {
    font-weight: 600;
    font-size: 13px;
}

/* Pricing page credit packs table */
.portal-packs-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.portal-packs-table table {
    margin-bottom: 0;
}

.portal-packs-table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e7eb;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    padding: 12px 16px;
}

.portal-packs-table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    vertical-align: middle;
}


/* --- Overview responsive --- */
@media (max-width: 767.98px) {
    .portal-hero {
        padding: 40px 20px 32px;
    }

    .portal-hero-title {
        font-size: 2rem;
    }

    .portal-logo-strip {
        padding: 20px 16px 24px;
    }

    .portal-logo-card {
        padding: 8px 12px;
    }

    .portal-logo-card img {
        height: 28px;
    }

    .portal-cta-banner {
        padding: 40px 20px;
    }

    .portal-cta-banner h2 {
        font-size: 1.6rem;
    }

    .portal-faq {
        margin-top: 36px;
    }

    .portal-faq-title {
        font-size: 1.4rem;
    }

    .portal-faq-accordion .accordion-button {
        font-size: 0.9rem;
        padding: 14px 16px;
    }

    .portal-faq-accordion .accordion-body {
        font-size: 0.88rem;
        padding: 0 16px 14px;
    }
}


/* ================================================
   Interactive Demo Page
   ================================================ */

/* ── Mini Hero ── */
.page-hero,
.demo-hero {
    text-align: center;
    background:
        radial-gradient(circle at 1px 1px, rgba(148,163,184,0.38) 1.2px, transparent 0) 0 0 / 32px 32px,
        radial-gradient(ellipse at 30% 70%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 40%),
        linear-gradient(135deg, #1e293b 0%, #2d3a4e 50%, #3b4a5e 100%);
    color: #f1f5f9;
    /* Break out of container to go full-width */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    margin-top: -32px;
    margin-bottom: 28px;
    padding: 48px 20px 32px;
}
.page-hero-title,
.demo-hero-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.page-hero-sub,
.demo-hero-sub {
    font-size: 1.05rem;
    color: #94a3b8;
    margin-top: 8px;
}

/* ── Widen container for Demo page ── */
.container:has(.demo-workspace) {
    max-width: 1440px;
}

/* ── Split-Pane Workspace ── */
.demo-workspace {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 12px 48px;
}
.demo-input-panel {
    width: 38%;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    z-index: 10;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 2px 4px 4px 4px;
    margin: -2px -4px -4px -4px;
}
.demo-input-panel::-webkit-scrollbar { width: 4px; }
.demo-input-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.demo-input-panel.suggest-dd-open { overflow: visible; }
.demo-results-panel {
    flex: 1;
    min-width: 0;
}

/* ── Empty State ── */
.demo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    text-align: center;
    padding: 48px 20px;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #fafbff 0%, #f5f7fa 100%);
}
.demo-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff3ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.demo-empty-icon i {
    font-size: 1.8rem;
    color: #3b82f6;
    opacity: 0.7;
}
.demo-empty-state h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 8px;
}
.demo-empty-state p {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0;
}
.demo-empty-hint {
    margin-top: 28px;
    font-size: 0.82rem;
    color: #b0b7c3;
}
.demo-empty-hint i {
    margin-right: 6px;
    animation: demo-hint-nudge 2s ease-in-out infinite;
}
@keyframes demo-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

/* ── Endpoint Tabs (inside demo-card) ── */
.demo-tabs {
    display: flex;
    gap: 6px;
    margin: -24px -24px 20px -24px;
    padding: 16px 24px 12px;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 11px 11px 0 0;
}
.demo-tab {
    padding: 7px 11px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #495057;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.demo-tab:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.demo-tab.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
.demo-tab i { display: none; }

/* ── Form Card ── */
.demo-card {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 24px;
    margin-bottom: 24px;
}
.demo-description {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 16px;
    display: none; /* hidden for now — re-enable when descriptions are finalized */
}

/* ── Form Fields ── */
.demo-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.demo-field {
    flex: 1;
    min-width: 180px;
}
.demo-field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}
.demo-field-req { color: #dc3545; }
.demo-field-optional { font-weight: 400; color: #adb5bd; }
.demo-enr-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.demo-enr-global-actions { font-size: 0.78rem; display: inline-flex; align-items: center; gap: 4px; }
.demo-enr-count {
    display: inline-block;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    margin: 0 6px;
    vertical-align: middle;
}
.demo-enr-count.has-selection {
    background: #3b82f6;
    color: #fff;
}

.demo-input {
    font-size: 0.9rem;
    padding: 5px 10px;
}
.demo-input::placeholder {
    color: #c8ccd0;
    opacity: 1;
}
/* ── GPS Input Wrapper (all endpoints) ── */
.demo-gps-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.demo-gps-input-wrap .demo-input {
    flex: 1;
    min-width: 0;
}
.demo-gps-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #3b82f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.15s;
}
.demo-gps-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}
.demo-gps-toast {
    font-size: 12px;
    color: #3b82f6;
    padding: 4px 0 0;
    opacity: 0;
    transition: opacity 0.3s;
}
.demo-gps-toast.show { opacity: 1; }
.demo-gps-toast.error { color: #dc2626; }
.demo-gps-toast i { margin-right: 4px; }

/* ── Field-Anchored Validation Toast ── */
.demo-field { position: relative; }
.demo-field-toast {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: #1e293b;
    color: #f8fafc;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    z-index: 20;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.demo-field-toast::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    width: 10px;
    height: 10px;
    background: #1e293b;
    transform: rotate(45deg);
    border-radius: 2px;
}
.demo-field-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.demo-input.is-invalid {
    animation: demo-shake 0.35s ease-in-out;
}
@keyframes demo-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.demo-select {
    font-size: 0.9rem;
    padding: 5px 10px;
}

/* ── Tooltips on Labels ── */
.demo-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    color: #adb5bd;
    cursor: help;
    position: relative;
    margin-left: 4px;
    vertical-align: middle;
}
.demo-tip-icon:hover { color: #6c757d; }
.demo-tip-icon .demo-tip-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #2c3038;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    line-height: 1.4;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    pointer-events: none;
}
.demo-tip-icon .demo-tip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2c3038;
}
.demo-tip-icon:hover .demo-tip-text { display: block; }

/* Auto-pick positioning: tooltip aligns right to avoid overflow */
.demo-auto-pick .demo-tip-text {
    left: auto;
    right: -8px;
    transform: none;
}
.demo-auto-pick .demo-tip-text::after {
    left: auto;
    right: 12px;
    transform: none;
}

/* ── Auto-Radius Picks ── */
.demo-auto-picks {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.demo-auto-picks-label {
    font-size: 0.72rem;
    color: #adb5bd;
}
.demo-auto-pick {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.demo-auto-pick:hover {
    background: #e8f0fe;
    border-color: #3b82f6;
    color: #3b82f6;
}
.demo-auto-pick.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
.demo-auto-pick.active .demo-tip-icon { color: rgba(255,255,255,0.7); }

/* ── Sample Pills ── */
.demo-sample-row {
    margin-bottom: 16px;
}
.demo-sample-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.demo-sample-pill {
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s;
}
.demo-sample-pill:hover {
    background: #e8f0fe;
    border-color: #3b82f6;
    color: #3b82f6;
}
.demo-sample-pill.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* ── Enrichment Sections (collapsible cards) ── */
.demo-enr-section {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
.demo-enr-section:last-child { margin-bottom: 0; }

.demo-enr-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.demo-enr-header:hover { background: #f8f9fa; }

.demo-enr-icon { font-size: 1rem; flex-shrink: 0; }
.demo-enr-title { font-size: 0.88rem; font-weight: 700; color: #1f2937; flex: 1; }
.demo-enr-chevron {
    font-size: 0.7rem;
    color: #9ca3af;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.demo-enr-section.collapsed .demo-enr-chevron { transform: rotate(-90deg); }
.demo-enr-section.collapsed .demo-enr-body { display: none; }

.demo-enr-body {
    padding: 0 14px 12px;
    border-top: 1px solid #f0f0f0;
}

.demo-enr-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 6px;
    font-size: 0.78rem;
}
.demo-enr-action {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 500;
}
.demo-enr-action:hover { text-decoration: underline; }
.demo-enr-action-sep { color: #d1d5db; font-size: 0.78rem; }

.demo-enr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 4px;
}
.demo-enr-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.demo-enr-chip input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.demo-enr-chip-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid #dee2e6;
    background: #fff;
    font-size: 0.78rem;
    color: #495057;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}
.demo-enr-chip-text:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}
.demo-enr-chip input:checked + .demo-enr-chip-text {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
    font-weight: 600;
}
.demo-enr-chip-flag { font-size: 0.68rem; color: #6b7280; margin-right: 2px; }
.demo-enr-chip-flag .fa-flag-usa { color: #3b82f6; }
.demo-enr-chip-flag .fa-leaf { color: #dc2626; }
.demo-enr-chip-flag .fa-globe-americas { color: #059669; }

/* ── ACS year sub-headers & note ── */
.demo-enr-year-label {
    width: 100%;
    font-size: 0.76rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 0 2px;
    margin-top: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.demo-enr-year-label:first-child { margin-top: 0; }
.demo-enr-subgroup {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 2px;
}
.demo-enr-note {
    font-size: 0.76rem;
    color: #6b7280;
    padding: 6px 0 0;
    font-style: italic;
}
.demo-enr-note i { margin-right: 4px; color: #3b82f6; }

/* ── Enrichment Callout (toast overlay — no layout shift) ── */
.demo-enr-callout {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -110%) scale(0.95);
    z-index: 10;
    background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e40af;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(59,130,246,0.18);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo-enr-callout.show {
    opacity: 1;
    transform: translate(-50%, -110%) scale(1);
    pointer-events: auto;
}

/* ── Typing cursor ── */
.demo-typing {
    border-right: 2px solid #3b82f6 !important;
    animation: demo-blink-cursor 0.6s step-end infinite;
}
@keyframes demo-blink-cursor {
    50% { border-right-color: transparent; }
}

/* ── Submit Area ── */
.demo-submit-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 16px 0 4px;
    border-top: 1px solid #e9ecef;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, #fff 30%);
    z-index: 2;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}
.demo-go-btn {
    padding: 12px 36px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}
.demo-go-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.demo-go-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.demo-go-btn i { margin-right: 6px; }


/* ── Results Area ── */
.demo-results {
    margin-bottom: 32px;
}

/* ── Timing Bar ── */
.demo-timing-value { font-size: 1.3rem; font-weight: 700; font-family: 'Cascadia Code','Fira Code',monospace; }
.demo-timing-label { font-size: 0.82rem; color: #6c757d; }
.timing-good { color: #198754; }
.timing-warn { color: #fd7e14; }
.timing-bad { color: #dc3545; }

/* ── Status Badges ── */
.demo-status-badge {
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600;
}
.status-success { background: #d1e7dd; color: #0f5132; }
.status-error { background: #f8d7da; color: #842029; }

/* ── Map ── */
.demo-map-wrap {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.demo-map-auto-notice {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-bottom: 1px solid #f59e0b;
    padding: 6px 12px;
    font-size: 0.82rem;
    color: #78350f;
}
.demo-map-auto-notice i {
    color: #d97706;
    margin-right: 4px;
}
.demo-map-expand-btn {
    background: #fff;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
}
.demo-map-expand-btn:hover {
    background: #f0f0f0;
}
.demo-map-tooltip {
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.demo-map-badge {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.75rem;
    color: #555;
    line-height: 1.4;
}
.demo-map-dist-label span {
    background: rgba(111, 66, 193, 0.88);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ── View Tabs ── */
.demo-view-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #dee2e6;
}
.demo-view-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    color: #6c757d;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.demo-view-tab:hover { color: #212529; }
.demo-view-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}
.demo-view-tab i { margin-right: 6px; }

.demo-back-top {
    margin-left: auto;
    padding: 6px 14px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #6c757d;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 4px;
}
.demo-back-top:hover { color: #3b82f6; border-color: #3b82f6; }
.demo-back-top i { margin-right: 4px; }

/* ── Notices (per-item) ── */
.dv-notices { margin-bottom: 12px; }
.dv-notice {
    background: #fff8e1;
    border-left: 3px solid #ffc107;
    padding: 6px 12px;
    margin-bottom: 4px;
    border-radius: 0 4px 4px 0;
    font-size: 0.82rem;
    color: #664d03;
}
.dv-notice-code {
    font-family: 'Cascadia Code','Fira Code',monospace;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255,193,7,0.2);
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px;
}

/* ── JSON Tree ── */
.json-tree {
    font-family: 'Cascadia Code','Fira Code','Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 8px;
    padding: 16px;
    overflow: auto;
    max-height: 500px;
}
.json-tree .jk { color: #ce91d8; }
.json-tree .js { color: #6aab73; }
.json-tree .jn { color: #cf8e6d; }
.json-tree .jb { color: #569cd6; }
.json-tree .jnl { color: #e06c75; font-style: italic; }
.json-tree .jbr { color: #888; }
.json-tree .jcm { color: #888; }
.json-tree .toggle { cursor: pointer; user-select: none; display: inline; }
.json-tree .toggle:hover { background: rgba(255,255,255,0.06); border-radius: 3px; }
.json-tree .toggle .arrow { display: inline-block; width: 16px; text-align: center; color: #888; font-size: 11px; }
.json-tree .collapsed-preview { color: #666; font-style: italic; }
.json-tree .hidden { display: none; }

.demo-json-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

/* ── Summary Card (combined timing + data + status) ── */
.demo-summary-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
}
.demo-summary-timing {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.demo-summary-status-wrap {
    margin-left: auto;
}
.demo-summary-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.demo-summary-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}
.demo-summary-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}
.demo-summary-value-mono {
    font-family: 'Cascadia Code','Fira Code',monospace;
}
.demo-summary-sep {
    width: 1px;
    height: 28px;
    background: #e2e8f0;
}

/* ── Request URL View ── */
.demo-url-content {
    padding: 4px 0;
}
.demo-url-content .portal-code-block {
    margin-top: 12px;
}
.demo-url-get-row {
    display: flex;
    align-items: flex-start;
    background: #1e1e1e;
    border-radius: 8px;
    padding: 12px 16px;
    gap: 10px;
}
.demo-url-method {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: #22c55e;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    margin-top: 1px;
}
.demo-url-get-url {
    flex: 1;
    font-size: 0.8rem;
    color: #6aab73;
    font-family: 'Cascadia Code','Fira Code',monospace;
    word-break: break-all;
    white-space: pre-wrap;
}
.demo-url-copy {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: #d4d4d4;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
}
.demo-url-copy:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.demo-url-hint {
    font-size: 0.82rem;
    color: #6c757d;
    margin-top: 12px;
}
.demo-url-hint i { margin-right: 4px; color: #3b82f6; }
.demo-url-hint code {
    background: #e8f0fe;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.78rem;
    color: #1e40af;
}

/* ── Detail View (ported from playground) ── */
.dv-hero {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dv-hero-code {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Cascadia Code','Fira Code',monospace;
    color: #212529;
    letter-spacing: 1px;
}
.dv-hero-location { font-size: 1.1rem; color: #495057; margin-top: 4px; }
.dv-hero-sub { font-size: 0.85rem; color: #6c757d; margin-top: 2px; }
.dv-country-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}
.dv-country-us { background: #cfe2ff; color: #084298; }
.dv-country-ca { background: #f8d7da; color: #842029; }

.dv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}
.dv-section {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    overflow: hidden;
}
.dv-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    padding: 8px 14px;
    background: #f1f3f5;
    border-bottom: 1px solid #e9ecef;
}
.dv-section-body { padding: 0; }
.dv-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dv-table td { padding: 5px 14px; border-bottom: 1px solid #f0f0f0; }
.dv-table tr:last-child td { border-bottom: none; }
.dv-label { color: #6c757d; font-weight: 500; width: 45%; }
.dv-value { color: #212529; }
.dv-value-mono { font-family: 'Cascadia Code','Fira Code',monospace; font-size: 0.84rem; }
.dv-value-null { color: #adb5bd; font-style: italic; }

/* Info sections (Timezone, Geography) */
.dv-info-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-top: 20px;
    overflow: hidden;
}
.dv-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}
.dv-info-title i { color: #6c757d; font-size: 0.82rem; }
.dv-info-body { padding: 0; }
.dv-info-body .dv-table td { padding: 7px 16px; }

/* ── Address Detail ── */
.addr-hero {
    border-left-color: #0d6efd;
    position: relative;
}
.addr-input-block {
    font-family: 'Cascadia Code','Fira Code',monospace;
    font-size: 0.82rem;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
}
.addr-transform-arrow {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0d6efd;
}
.addr-transform-arrow i { font-size: 0.65rem; }
.addr-output-block {
    animation: addrFadeIn 0.25s ease forwards;
}
.addr-name-line {
    font-size: 0.82rem;
    color: #6c757d;
    margin-bottom: 4px;
}
.addr-name-line i {
    width: 16px;
    text-align: center;
    margin-right: 4px;
    opacity: 0.6;
}
.addr-formatted {
    font-size: 1.15rem;
    font-weight: 700;
    color: #212529;
    letter-spacing: 0.3px;
    line-height: 1.4;
}
.addr-building-name {
    font-size: 0.82rem;
    color: #495057;
    margin-top: 4px;
}
.addr-building-name i { color: #6c757d; margin-right: 4px; }
.addr-govt-badge {
    display: inline-block;
    background: #cfe2ff;
    color: #084298;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.addr-confidence {
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}
.addr-conf-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.addr-conf-high { color: #198754; }
.addr-conf-high .addr-conf-dot { background: #198754; }
.addr-conf-med { color: #fd7e14; }
.addr-conf-med .addr-conf-dot { background: #fd7e14; }
.addr-conf-low { color: #dc3545; }
.addr-conf-low .addr-conf-dot { background: #dc3545; }
.addr-match-path {
    font-size: 0.78rem;
    color: #6c757d;
    margin-top: 2px;
}
.addr-candidates {
    font-size: 0.72rem;
    color: #adb5bd;
}
.addr-multi-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 10px;
}
.addr-multi-header i { margin-right: 6px; }

/* Address accordion for multiple matches */
.addr-accordion {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
.addr-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: #f8f9fa;
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}
.addr-accordion-header:hover { background: #e9ecef; }
.addr-accordion-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.addr-accordion-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
}
.addr-accordion-body {
    display: none;
    padding: 12px;
}
.addr-accordion-open .addr-accordion-body { display: block; }
.addr-accordion-open .addr-accordion-chevron { transform: rotate(180deg); }

/* Address map */
.addr-map-wrap {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.addr-map-pin {
    background: #dc3545;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(220,53,69,0.2);
}

/* Input format showcase */
.addr-format-showcase {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fafbfc;
}
.addr-format-header {
    font-size: 0.78rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}
.addr-format-header i { color: #f59e0b; margin-right: 6px; }
.addr-format-examples { display: flex; flex-direction: column; gap: 6px; }
.addr-format-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.addr-format-item:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
    border-left: 2px solid #0d6efd;
}
.addr-format-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6c757d;
    min-width: 120px;
    max-width: 120px;
    flex-shrink: 0;
    line-height: 1.3;
}
.addr-format-value {
    font-family: 'Cascadia Code','Fira Code',monospace;
    font-size: 0.8rem;
    color: #374151;
}

@keyframes addrFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    .addr-format-item { flex-direction: column; align-items: flex-start; gap: 2px; }
    .addr-format-label { min-width: auto; }
    .addr-formatted { font-size: 0.95rem; }
}

/* Distance detail */
.dv-dist-hero {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    border-left: 4px solid #6f42c1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-align: center;
}
.dv-dist-miles { font-size: 2.4rem; font-weight: 700; font-family: 'Cascadia Code','Fira Code',monospace; color: #212529; }
.dv-dist-km { font-size: 1.1rem; color: #6c757d; margin-top: 2px; }
.dv-dist-bearing { font-size: 0.85rem; color: #6c757d; margin-top: 6px; }
.dv-dist-bearing-deg { font-family: 'Cascadia Code','Fira Code',monospace; font-weight: 600; color: #495057; }
.dv-dist-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    color: #6c757d;
}
.dv-dist-arrow-code { font-family: 'Cascadia Code','Fira Code',monospace; font-weight: 700; font-size: 1rem; color: #212529; }
.dv-dist-arrow i { color: #6f42c1; font-size: 1.2rem; }

/* Radius summary */
.dv-summary-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dv-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.82rem;
}
.dv-summary-pill-val { font-weight: 700; font-family: 'Cascadia Code','Fira Code',monospace; }
.dv-summary-pill-label { color: #6c757d; }

/* Radius results table */
.dv-table-wrap {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    overflow: auto;
    max-height: 400px;
    margin-bottom: 14px;
}
.dv-sort-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.dv-sort-table thead th {
    position: sticky;
    top: 0;
    background: #f1f3f5;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #495057;
    padding: 6px 10px;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}
.dv-sort-table tbody td { padding: 5px 10px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
.dv-sort-table tbody tr:nth-child(even) { background: #f8f9fa; }
.dv-sort-table tbody tr:hover { background: #e8f0fe; }
.dv-sort-table .num { text-align: right; font-family: 'Cascadia Code','Fira Code',monospace; font-size: 0.78rem; }

/* Empty state */
.dv-empty {
    text-align: center;
    color: #adb5bd;
    padding: 60px 20px;
    font-size: 0.9rem;
}
.dv-empty-error { color: #dc3545; }
.dv-empty i { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ── Census Boundary Tables ── */
.dv-boundary-wrap { margin-bottom: 14px; scroll-margin-top: 10px; }
.dv-boundary-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #495057; margin-bottom: 4px; padding: 0 2px; }
.dv-major-section { margin-top: 24px; }
.dv-major-title { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #212529; padding-bottom: 6px; border-bottom: 2px solid #dee2e6; margin-bottom: 8px; }
.dv-major-title .dv-major-count { font-weight: 400; font-size: 0.82rem; color: #6c757d; text-transform: none; letter-spacing: 0; }
.dv-major-meta { font-size: 0.76rem; color: #6c757d; margin-bottom: 14px; padding: 0 2px; }

/* ── ACS Sections ── */
.dv-acs-section { background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); margin-bottom: 10px; overflow: hidden; }
.dv-acs-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; user-select: none; background: #f1f3f5; border: none; border-left: 3px solid transparent; width: 100%; text-align: left; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #495057; font-family: inherit; }
.dv-acs-toggle:hover { filter: brightness(0.96); }
.dv-acs-toggle[data-sec="demographic"] { background: #eef3ff; border-left-color: #4c6ef5; color: #364fc7; }
.dv-acs-toggle[data-sec="social"] { background: #edf9ee; border-left-color: #51a256; color: #2b7a30; }
.dv-acs-toggle[data-sec="economic"] { background: #fff8ed; border-left-color: #e8a23a; color: #9a6700; }
.dv-acs-toggle[data-sec="housing"] { background: #fdf0f0; border-left-color: #cf6679; color: #a33e50; }
.dv-acs-toggle .arrow { font-size: 0.65rem; color: #6c757d; transition: transform 0.15s; }
.dv-acs-toggle.collapsed .arrow { transform: rotate(-90deg); }
.dv-acs-body { padding: 0; }
.dv-acs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.dv-acs-table th { position: sticky; top: 0; background: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #adb5bd; padding: 4px 12px; border-bottom: 1px solid #e9ecef; text-align: right; }
.dv-acs-table th:first-child { text-align: left; }
.dv-acs-cat td { font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.3px; color: #495057; background: #f8f9fa; padding: 6px 12px; border-bottom: 1px solid #e9ecef; cursor: pointer; user-select: none; font-family: inherit; }
.dv-acs-cat:hover td { background: #eef0f2; }
.dv-acs-cat .cat-arrow { font-size: 0.6rem; color: #6c757d; margin-right: 4px; display: inline-block; transition: transform 0.15s; }
.dv-acs-cat.collapsed .cat-arrow { transform: rotate(-90deg); }
.dv-acs-field td { padding: 4px 12px; border-bottom: 1px solid #f5f5f5; }
.dv-acs-field td:first-child { padding-left: 24px; color: #495057; }
.dv-acs-field td.acs-est { text-align: right; font-family: 'Cascadia Code','Fira Code',monospace; font-size: 0.8rem; color: #212529; }
.dv-acs-field td.acs-moe { text-align: right; font-family: 'Cascadia Code','Fira Code',monospace; font-size: 0.78rem; color: #adb5bd; }
.dv-acs-field td.acs-pct { text-align: right; font-size: 0.8rem; color: #6c757d; }
.dv-acs-field td.acs-pct-moe { text-align: right; font-size: 0.78rem; color: #ced4da; }
.dv-acs-field:hover td { background: #f0f7ff; }
.dv-acs-meta { font-size: 0.78rem; color: #6c757d; padding: 8px 14px; background: #f8f9fa; border-top: 1px solid #e9ecef; }

/* ── ACS Comparison Mode ── */
.dv-acs-compare-note {
    font-size: 0.76rem;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 3px solid #adb5bd;
    border-radius: 4px;
    padding: 8px 14px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.dv-acs-compare-note i { color: #adb5bd; margin-right: 4px; }
.dv-acs-compare-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.dv-acs-sub-row td { font-size: 0.72rem; color: #868e96; background: #f8f9fa; border-top: none; padding-top: 1px; padding-bottom: 3px; }
.dv-acs-sub-row td:first-child { font-style: italic; }
.dv-acs-sub-row td.acs-est { text-align: right; font-family: 'Cascadia Code','Fira Code',monospace; }
.dv-acs-sub-row td.acs-moe { text-align: right; font-family: 'Cascadia Code','Fira Code',monospace; }
.dv-acs-sub-row td.acs-pct { text-align: right; }
.dv-acs-sub-row td.dv-acs-delta { text-align: right; }
.dv-acs-delta { text-align: right; font-family: 'Cascadia Code','Fira Code',monospace; font-size: 0.78rem; white-space: nowrap; }
.dv-acs-delta-up { color: #1971c2; }
.dv-acs-delta-down { color: #e8590c; }
.dv-acs-delta-zero { color: #adb5bd; }
.dv-acs-delta-na { color: #dee2e6; }
.dv-acs-delta-sig { font-weight: 700; }
.dv-acs-field.delta-sig > td:first-child { border-left: 3px solid; border-left-color: inherit; }
.dv-acs-section[data-sec="demographic"] .dv-acs-field.delta-sig > td:first-child { border-left-color: #4c6ef5; }
.dv-acs-section[data-sec="social"] .dv-acs-field.delta-sig > td:first-child { border-left-color: #51a256; }
.dv-acs-section[data-sec="economic"] .dv-acs-field.delta-sig > td:first-child { border-left-color: #e8a23a; }
.dv-acs-section[data-sec="housing"] .dv-acs-field.delta-sig > td:first-child { border-left-color: #cf6679; }
.dv-acs-body.filter-changed .dv-acs-field[data-delta="none"] { display: none; }
.dv-acs-body.filter-changed .dv-acs-sub-row[data-delta="none"] { display: none; }
.dv-acs-body.filter-significant .dv-acs-field[data-delta="none"] { display: none; }
.dv-acs-body.filter-significant .dv-acs-sub-row[data-delta="none"] { display: none; }
.dv-acs-body.filter-significant .dv-acs-field:not(.delta-sig) { display: none; }
.dv-acs-body.filter-significant .dv-acs-sub-row:not(.delta-sig) { display: none; }
.dv-acs-body.filter-increased .dv-acs-field:not([data-delta="up"]) { display: none; }
.dv-acs-body.filter-increased .dv-acs-sub-row:not([data-delta="up"]) { display: none; }
.dv-acs-body.filter-decreased .dv-acs-field:not([data-delta="down"]) { display: none; }
.dv-acs-body.filter-decreased .dv-acs-sub-row:not([data-delta="down"]) { display: none; }
.dv-compare-filter { display: inline-flex; border: 1px solid #dee2e6; border-radius: 4px; overflow: hidden; font-size: 0.72rem; }
.dv-compare-filter button { background: #fff; border: none; padding: 3px 10px; cursor: pointer; color: #495057; border-right: 1px solid #dee2e6; font-family: inherit; }
.dv-compare-filter button:last-child { border-right: none; }
.dv-compare-filter button:hover { background: #f1f3f5; }
.dv-compare-filter button.active { background: #d0ebff; color: #1864ab; font-weight: 600; }

/* ── Demo Responsive ── */
@media (max-width: 960px) {
    .demo-workspace {
        flex-direction: column;
        gap: 20px;
        padding: 0 16px 32px;
    }
    .demo-input-panel {
        width: 100%;
        position: static;
        max-height: none;
        overflow: visible;
    }
    .demo-results-panel { width: 100%; }
    .demo-empty-state { min-height: 200px; padding: 32px 16px; }
    .demo-empty-hint { display: none; }
}
@media (max-width: 768px) {
    .page-hero, .demo-hero { padding: 28px 16px 16px; }
    .page-hero-title, .demo-hero-title { font-size: 1.8rem; }
    .demo-tabs { gap: 4px; margin: -14px -14px 16px -14px; padding: 12px 14px 10px; }
    .demo-tab { padding: 6px 12px; font-size: 0.78rem; }
    .demo-tab i { display: none; }
    .demo-card { padding: 14px; }
    .demo-fields { flex-direction: column; gap: 8px; }
    .demo-field { min-width: 100%; }
    .demo-enr-chips { gap: 4px; }
    .demo-enr-chip-text { font-size: 0.72rem; padding: 4px 10px; }
    .demo-submit-area { flex-direction: column; align-items: stretch; gap: 10px; }
    .demo-go-btn { width: 100%; text-align: center; }
    .demo-summary-card { gap: 8px 16px; padding: 12px 14px; }
    .dv-grid { grid-template-columns: 1fr; }
    .dv-hero-code { font-size: 1.4rem; }
    .dv-sort-table { font-size: 0.75rem; }
    .dv-sort-table thead th { font-size: 0.65rem; padding: 4px 6px; }
    .dv-sort-table tbody td { padding: 3px 6px; }
    .json-tree { font-size: 12px; max-height: 400px; }
    .dv-dist-miles { font-size: 1.8rem; }
    .dv-acs-table { font-size: 0.75rem; }
    .dv-acs-field td:first-child { padding-left: 14px; }
    .dv-acs-sub-row td { font-size: 0.66rem; }
    .dv-acs-delta { font-size: 0.7rem; }
    .dv-acs-compare-bar { gap: 4px; }
}


/* ================================================
   Samples Page
   ================================================ */

.sample-section {
    padding: 40px 0;
    border-top: 1px solid #e5e7eb;
}

.sample-section:first-of-type {
    border-top: none;
}

.sample-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.sample-section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a2e;
}

.sample-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sample-endpoint-badge {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.sample-pitch {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 20px;
    max-width: 700px;
}

/* Language tabs in code header */
.sample-lang-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.sample-lang-tab {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.sample-lang-tab:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.sample-lang-tab.active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

/* Copy button */
.sample-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    z-index: 2;
}

.sample-copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

.sample-copy-btn.copied {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

/* Code panes (tab content) */
.sample-pane {
    margin: 0;
    white-space: pre;
}

.sample-pane:not(.active) {
    display: none;
}

/* Response toggle */
.sample-response {
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.sample-response-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: #f8f9fa;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    transition: background 0.15s;
}

.sample-response-toggle:hover {
    background: #f1f3f5;
}

.sample-response-toggle i {
    font-size: 11px;
    transition: transform 0.2s;
    color: #adb5bd;
}

.sample-response-toggle.open i {
    transform: rotate(90deg);
}

.sample-response-body {
    border-top: 1px solid #e5e7eb;
    background: #1e293b;
}

.sample-response-body pre {
    margin: 0;
    padding: 16px 20px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow-x: auto;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Jump nav */
.sample-jump-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sample-jump-link {
    padding: 7px 16px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #495057;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.15s;
}

.sample-jump-link:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    text-decoration: none;
}

/* Try-it link */
.sample-tryit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
}

.sample-tryit:hover {
    text-decoration: underline;
    color: #2563eb;
}

/* ── Samples Mobile ── */
@media (max-width: 768px) {
    .sample-section { padding: 28px 0; }
    .sample-section-header { gap: 8px; }
    .sample-section-header h2 { font-size: 1.25rem; }
    .sample-lang-tabs { gap: 0; }
    .sample-lang-tab { padding: 4px 7px; font-size: 10px; }
    .sample-jump-nav { gap: 6px; }
    .sample-jump-link { padding: 6px 12px; font-size: 0.78rem; }
    .sample-endpoint-badge { font-size: 10px; }
}


/* ================================================
   Account Dashboard — Tab Nav, Cards, Key Panels
   ================================================ */

/* --- Account Tab Navigation --- */
.account-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.account-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.15s;
}

.account-tab:hover {
    color: #334155;
    background: #e2e8f0;
    text-decoration: none;
}

.account-tab.active {
    color: #1e293b;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-weight: 600;
}

.account-tab i {
    font-size: 0.8rem;
}

/* --- Dashboard Cards --- */
.dash-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
}

.dash-card-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.dash-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.dash-card-value small {
    font-size: 0.5em;
    font-weight: 500;
    color: #94a3b8;
}

.dash-card-sub {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
}

/* Progress bar inside dash card */
.dash-progress {
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    margin-top: 12px;
    overflow: hidden;
}

.dash-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.dash-progress-bar.green { background: #22c55e; }
.dash-progress-bar.yellow { background: #eab308; }
.dash-progress-bar.red { background: #ef4444; }

/* Portal form fields — consistent spacing without grid gutter interference.
   Use on Keys, Login, Signup, Settings, etc. */
.portal-form-group { margin-top: 0.75rem; }
.portal-form-group:first-child { margin-top: 0.25rem; }

/* Portal modals — shared overrides for Deactivate, Regenerate, etc. */
.portal-modal .modal-content { border-radius: 8px; }
.portal-modal .modal-title { font-size: 1.1rem; }
.portal-modal .modal-footer { gap: 0.5rem; }

/* --- Key Expand/Collapse Panel --- */
.key-row {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}

.key-row-inactive {
    opacity: 0.6;
    border-left: 3px solid #94a3b8;
}

.key-row-inactive .btn,
.key-row-inactive .key-reveal-toggle,
.key-row-inactive .key-copy-btn {
    opacity: 1;
}

.key-row-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.key-row-header:hover {
    background: #f8fafc;
}

.key-row-header .key-chevron {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.2s;
}

.key-row.expanded .key-chevron {
    transform: rotate(90deg);
}

.key-row-body {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid #f1f5f9;
}

/* Override site theme's 45px left padding on form fields without SVG icons */
.form-nopad { padding-left: 10px !important; }

.key-row.expanded .key-row-body {
    display: block;
}

.key-meta {
    flex: 1;
    min-width: 0;
}

.key-meta-name {
    font-weight: 600;
    color: #1e293b;
}

.key-meta-prefix {
    font-family: monospace;
    font-size: 0.8rem;
    color: #64748b;
}

/* --- Key Reveal --- */
.key-reveal-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.key-reveal-value {
    font-family: monospace;
    font-size: 0.85rem;
    color: #334155;
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    word-break: break-all;
    user-select: all;
    flex: 1;
}

.key-reveal-toggle,
.key-copy-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.key-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
}

/* --- Pill Input Component --- */
.pill-input-container {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    padding: 6px 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pill-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.pill-input-container.pill-disabled {
    background: #f9fafb;
    opacity: 0.7;
    cursor: not-allowed;
}

.pill-input-container.pill-error-flash {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pill-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 20px;
    font-size: 0.8rem;
    font-family: monospace;
    color: #1e40af;
    white-space: nowrap;
}

.pill-item .pill-text-val {
    line-height: 1;
}

.pill-item .pill-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #60a5fa;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    font-weight: 600;
}

.pill-item .pill-remove:hover {
    color: #dc2626;
}

.pill-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 140px;
}

.pill-text {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem;
    flex: 1;
    min-width: 100px;
    padding: 2px 0;
}

.pill-text:disabled {
    cursor: not-allowed;
}

.pill-add-btn {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.pill-add-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.pill-error {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 4px;
    padding-left: 2px;
}

/* New key alert */
.new-key-display {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.new-key-display code {
    font-size: 1rem;
    color: #15803d;
    background: #dcfce7;
    padding: 4px 8px;
    border-radius: 4px;
    user-select: all;
    word-break: break-all;
}

/* --- Upgrade CTA Banner --- */
.upgrade-cta {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.upgrade-cta-text {
    font-size: 0.875rem;
    color: #1e40af;
}

.upgrade-cta-text strong {
    font-weight: 600;
}

.upgrade-cta .btn-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.upgrade-cta .btn-upgrade:hover {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

/* --- Gated/Disabled Feature --- */
.feature-gated {
    position: relative;
    opacity: 0.6;
}

.feature-gated .gated-overlay {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
}

/* --- Section Card (reused across account pages) --- */
.account-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.account-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.account-section-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.account-section-body {
    padding: 20px;
}

.account-section-body.no-pad {
    padding: 0;
}

/* Compact table inside sections */
.account-table {
    width: 100%;
    border-collapse: collapse;
}

.account-table th {
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.account-table td {
    padding: 10px 16px;
    font-size: 0.875rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

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

.account-table .text-right {
    text-align: right;
}

/* Table: alternating stripes + hover */
.account-table tbody tr:nth-child(even) { background: #f8fafc; }
.account-table tbody tr:hover { background: #eef2f7; }

/* Key filter dropdown — fix Bootstrap focus adding left padding */
.account-section-header .form-select {
    border-color: #d1d5db;
    box-shadow: none;
}
.account-section-header .form-select:focus {
    padding-left: 0.5rem;
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    outline: none;
}

/* Sortable table headers */
.sortable-table th[data-sort] { cursor: pointer; user-select: none; }
.sortable-table th[data-sort]:hover { background: #eef2f7; }
.sortable-table th[data-sort]::after { content: ' \21C5'; opacity: 0.3; font-size: 0.7em; }
.sortable-table th.sort-asc::after { content: ' \25B2'; opacity: 0.8; }
.sortable-table th.sort-desc::after { content: ' \25BC'; opacity: 0.8; }

/* Stub/placeholder sections */
.stub-section {
    text-align: center;
    padding: 32px 20px;
    color: #94a3b8;
}

.stub-section i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.stub-section p {
    margin: 0;
    font-size: 0.875rem;
}

/* --- Danger Zone --- */
.danger-zone {
    border-color: #fecaca;
    border-left: 3px solid #fca5a5;
}

.danger-zone .account-section-header {
    border-bottom-color: #fecaca;
}

/* --- API Bar Status (inline nav item) --- */
.api-bar-dot { font-size: 0.45rem; vertical-align: middle; color: #9ca3af; }
.api-bar-status.healthy .api-bar-dot { color: #22c55e; }
.api-bar-status.degraded .api-bar-dot { color: #eab308; }
.api-bar-status.unhealthy .api-bar-dot { color: #ef4444; }

/* --- Account tab nav: logout button (right-aligned) --- */
.account-tab-logout {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
}

.account-tab-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.account-tab-logout-btn:hover {
    color: #dc2626;
    background: #fef2f2;
}

.account-tab-logout-btn i {
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .account-tab-logout-label {
        display: none;
    }
}

/* --- Usage page: date range info bar --- */
.usage-range-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #475569;
    flex-wrap: wrap;
}

.usage-range-bar > i {
    color: #94a3b8;
    flex-shrink: 0;
}

.usage-range-limit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef9c3;
    border: 1px solid #fde047;
    color: #854d0e;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

.usage-range-limit-badge i {
    color: #b45309;
    font-size: 0.7rem;
}

.usage-range-upgrade {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    white-space: nowrap;
}

.usage-range-upgrade:hover {
    text-decoration: underline;
}

/* --- Usage by Key: relative bar --- */
.key-usage-bar-cell {
    padding: 10px 16px 10px 8px;
    vertical-align: middle;
}

.key-usage-bar-track {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.key-usage-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
    transition: width 0.3s;
    min-width: 3px;
}

/* --- Billing: coming soon banner --- */
.billing-coming-soon-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #94a3b8;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #475569;
}

.billing-coming-soon-banner i {
    color: #94a3b8;
    margin-top: 2px;
    flex-shrink: 0;
}

.billing-coming-soon-banner strong {
    color: #1e293b;
}

/* --- Billing: plan comparison recommended row --- */
.billing-plan-recommended {
    background: rgba(59, 130, 246, 0.04) !important;
    outline: 2px solid #bfdbfe;
    outline-offset: -2px;
}

.billing-plan-recommended:hover {
    background: rgba(59, 130, 246, 0.07) !important;
}

.billing-badge-recommended {
    background: #3b82f6;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
}

/* --- Billing: best value badge (credit packs) --- */
.billing-badge-best-value {
    background: #3b82f6;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
}

/* --- Billing: plan action context note --- */
.billing-plan-actions-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    color: #64748b;
}

.billing-plan-actions-note i {
    color: #94a3b8;
    margin-top: 1px;
    flex-shrink: 0;
}

/* --- Billing: stub sections (coming soon) --- */
.billing-stub {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.billing-stub-icon {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 1rem;
}

.billing-stub-body {
    flex: 1;
    min-width: 0;
}

.billing-stub-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

.billing-stub-note {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}

.billing-stub-action {
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .billing-stub {
        flex-wrap: wrap;
    }
    .billing-stub-action {
        margin-left: 52px;
    }
}

/* --- Settings: gated toggle --- */
.settings-toggle-gated .form-check-label {
    opacity: 0.5;
}

.settings-toggle-gated-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 3px;
}

.settings-toggle-gated-note i {
    font-size: 0.65rem;
    color: #cbd5e1;
}

.settings-toggle-gated-note a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
}

.settings-toggle-gated-note a:hover {
    text-decoration: underline;
}

/* --- Settings: tier badges --- */
.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.tier-badge-free {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.tier-badge-paid {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* --- Settings: password rule checklist --- */
.pw-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.pw-rule {
    font-size: 0.78rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}

.pw-rule i {
    font-size: 0.4rem;
    transition: color 0.15s;
}

.pw-rule.pw-rule-pass {
    color: #16a34a;
}

.pw-rule.pw-rule-pass i {
    color: #22c55e;
}

.pw-rule.pw-rule-fail {
    color: #dc2626;
}

.pw-rule.pw-rule-fail i {
    color: #ef4444;
}

/* --- Account Mobile --- */
@media (max-width: 768px) {
    .account-tabs {
        gap: 2px;
        padding: 3px;
    }
    .account-tab {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
    .account-tab i { display: none; }
    .dash-card { padding: 14px; }
    .dash-card-value { font-size: 1.4rem; }
    .key-row-header { flex-wrap: wrap; }
    .upgrade-cta { flex-direction: column; text-align: center; }
}

/* ── Usage Chart ── */
.usage-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.usage-pill {
    display: inline-block; padding: 4px 14px; border-radius: 999px;
    background: #f3f4f6; font-size: 0.8rem; color: #4b5563; white-space: nowrap;
}
.usage-pill strong { color: #1f2937; }
.usage-upgrade-hint { margin-top: 10px; font-size: 0.78rem; color: #9ca3af; text-align: center; }
.usage-upgrade-hint a { color: #3b82f6; text-decoration: none; }
.usage-upgrade-hint a:hover { text-decoration: underline; }

/* ── Email Toggle Overrides ── */
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.form-check-input:focus {
    border-color: #86b7fe;
}
.form-check-label {
    padding-left: 0.35em;
}

/* ── Demo: narrow fields for single-input endpoints (not address — long inputs need full width) ── */
@media (min-width: 768px) {
    .demo-fields-narrow .demo-field { max-width: 50%; }
    .demo-fields-narrow .demo-field:has(#demo_address) { max-width: 100%; }
}

/* ================================================
   Suggest Tab — Typeahead, Dropdown, Config Panel
   ================================================ */

/* ── Country Segmented Button Group ── */
.suggest-country-group {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    margin-top: 4px;
    max-width: 240px;
}
.suggest-country-btn {
    flex: 1;
    background: #fff;
    border: none;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid #d1d5db;
    text-align: center;
}
.suggest-country-btn:last-child { border-right: none; }
.suggest-country-btn:hover { background: #f3f4f6; }
.suggest-country-btn.active {
    background: #3b82f6;
    color: #fff;
}

/* ── Suggest Config Panel ── */
.suggest-config {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 8px;
}
.suggest-config-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.suggest-config-row .demo-field-label {
    margin-bottom: 0;
}

/* ── Include Type Toggle Group ── */
.suggest-type-group {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    width: 100%;
}
.suggest-type-btn {
    flex: 1;
    background: #fff;
    border: none;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid #d1d5db;
    text-align: center;
}
.suggest-type-btn:last-child { border-right: none; }
.suggest-type-btn:hover { background: #f3f4f6; }
.suggest-type-btn.active {
    background: #3b82f6;
    color: #fff;
}
.suggest-limit-select {
    width: 80px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}
/* ── Proximity Bias Button Group ── */
.suggest-prox-group {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    width: 100%;
}
.suggest-prox-btn {
    flex: 1;
    background: #fff;
    border: none;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid #d1d5db;
    text-align: center;
    white-space: nowrap;
}
.suggest-prox-btn i { margin-right: 3px; }
.suggest-prox-btn:last-child { border-right: none; }
.suggest-prox-btn:hover { background: #f3f4f6; }
.suggest-prox-btn.active {
    background: #3b82f6;
    color: #fff;
}
.suggest-prox-coord-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    max-width: 320px;
}
.suggest-prox-coord-input {
    flex: 1;
    font-size: 13px;
}
.suggest-prox-gps-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #3b82f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.15s;
}
.suggest-prox-gps-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}
.suggest-prox-code-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    max-width: 320px;
}
.suggest-prox-code-input {
    flex: 1;
    font-size: 13px;
}
.suggest-prox-coord-wrap .demo-tip-icon,
.suggest-prox-code-wrap .demo-tip-icon {
    width: 24px;
    height: 24px;
    font-size: 16px;
    flex-shrink: 0;
}
.suggest-gps-toast {
    font-size: 12px;
    color: #3b82f6;
    padding: 5px 0 0;
    opacity: 0;
    transition: opacity 0.3s;
}
.suggest-gps-toast.show { opacity: 1; }
.suggest-gps-toast.error { color: #dc2626; }
.suggest-gps-toast i { margin-right: 4px; }

/* ── Typeahead Search Input ── */
.suggest-search-wrap {
    position: relative;
    margin-top: 8px;
}
.suggest-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    font-size: 15px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.suggest-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.suggest-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
    pointer-events: none;
}
.suggest-search-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #3b82f6;
    font-size: 14px;
    display: none;
}
.suggest-search-spinner.active { display: block; }

/* ── Debounce Notice ── */
.suggest-debounce-notice {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.3s;
}
.suggest-debounce-notice.animate-border {
    animation: suggestBorderPulse 2s ease-in-out infinite;
}
@keyframes suggestBorderPulse {
    0%, 100% { border-color: transparent; }
    50% { border-color: #3b82f644; }
}

/* ── Suggest Dropdown ── */
.suggest-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 400px;
    overflow-y: auto;
    display: none;
}
.suggest-dropdown.open { display: block; }

.suggest-dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}
.suggest-dropdown-item:last-child { border-bottom: none; }
.suggest-dropdown-item:hover,
.suggest-dropdown-item.active {
    background: #eff6ff;
}
.suggest-dropdown-item.active {
    border-left: 3px solid #3b82f6;
    padding-left: 11px;
}

.sdi-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}
.sdi-line2 {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    padding-left: 0;
}
.sdi-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.sdi-badge-zip { background: #dbeafe; color: #1e40af; }
.sdi-badge-place { background: #d1fae5; color: #065f46; }
.sdi-badge-county { background: #fef3c7; color: #92400e; }
.sdi-badge-cbsa { background: #ede9fe; color: #5b21b6; }
.sdi-badge-fsa { background: #fce7f3; color: #9d174d; }
.sdi-badge-uspscity { background: #ccfbf1; color: #115e59; }
.sdi-badge-ca_postal { background: #fce7f3; color: #9d174d; }

/* ── Suggest First-Time Toast ── */
.suggest-hint-toast {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1051;
}
.suggest-hint-toast::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1f2937;
}
.suggest-hint-toast.show { opacity: 1; }

/* ── Suggest Modal ── */
#suggestDetailModal .modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 20px;
}
#suggestDetailModal .modal-title {
    font-size: 16px;
    font-weight: 600;
}
.suggest-modal-map {
    height: 200px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.suggest-modal-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    font-size: 13px;
    margin-bottom: 16px;
}
.suggest-modal-field {
    display: flex;
    flex-direction: column;
}
.suggest-modal-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
}
.suggest-modal-value {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}
.suggest-modal-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.suggest-modal-json {
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 8px;
    padding: 14px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    overflow-x: auto;
    max-height: 300px;
    white-space: pre;
}
.suggest-modal-usecases {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.suggest-usecase-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}
.suggest-usecase-icon {
    font-size: 24px;
    color: #3b82f6;
    margin-bottom: 6px;
}
.suggest-usecase-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.suggest-usecase-desc {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

/* ── Suggest Modal View Tabs ── */
.suggest-modal-views {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}
.suggest-modal-view-btn {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.suggest-modal-view-btn:hover { background: #f3f4f6; }
.suggest-modal-view-btn.active {
    background: #eff6ff;
    color: #3b82f6;
}

@media (max-width: 767px) {
    .suggest-modal-card { grid-template-columns: 1fr; }
    .suggest-modal-usecases { grid-template-columns: 1fr; }
}

/* ── Suggest Formatted Detail View ── */
.dv-suggest-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff 100%);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.dv-suggest-count {
    font-size: 1.3rem;
    font-weight: 700;
    color: #3b82f6;
}
.dv-suggest-label {
    font-size: 0.82rem;
    color: #6c757d;
}
.dv-suggest-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #fff;
    transition: box-shadow 0.15s;
}
.dv-suggest-card-clickable { cursor: pointer; }
.dv-suggest-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dv-suggest-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dv-suggest-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.dv-suggest-badge i { font-size: 0.6rem; }
.dv-suggest-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
}
.dv-suggest-region {
    color: #6c757d;
    font-size: 0.85rem;
}
.dv-suggest-country {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #f1f5f9;
    color: #475569;
}
.dv-suggest-country-us { background: #dbeafe; color: #1e40af; }
.dv-suggest-country-ca { background: #fce7f3; color: #9d174d; }
.dv-suggest-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 0.8rem;
}
.dv-suggest-chip-label {
    color: #6c757d;
}
.dv-suggest-mono {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.78rem;
}
.dv-suggest-zips {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #6c757d;
}

/* ================================================
   Keys Page — Visual Enhancements
   Active edit glow, unsaved-changes banner,
   help drawers, tier nudge bar
   ================================================ */

/* ── Active/Editing key row ── */
.key-row.editing {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14), 0 2px 8px rgba(59, 130, 246, 0.10);
}

.key-row.editing .key-row-header {
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
}

.key-row.editing .key-meta-name {
    color: #1d4ed8;
}

.key-row.editing .key-chevron {
    color: #3b82f6;
}

/* Editing-state indicator dot on header */
.key-editing-dot {
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    animation: key-dot-pulse 2s ease-in-out infinite;
}

.key-row.editing .key-editing-dot {
    display: inline-block;
}

@keyframes key-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); }
    50%       { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12); }
}

/* Unsaved badge shown in header when form is dirty */
.key-unsaved-badge {
    display: none;
    font-size: 0.68rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.key-row.editing.key-dirty .key-unsaved-badge {
    display: inline-block;
}

/* ── Unsaved-changes inline warning (shown in action bar) ── */
.key-unsaved-warning {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
    width: 100%;
}

.key-unsaved-warning i {
    flex-shrink: 0;
}

/* Modal warning for switch-key-while-dirty */
#unsavedModal .modal-header {
    background: #fffbeb;
    border-bottom-color: #fde68a;
}

/* ── Help drawer (IP / CORS inline help) ── */
.help-toggle-btn {
    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.8rem;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s;
}

.help-toggle-btn:hover {
    color: #3b82f6;
}

.help-toggle-btn.active {
    color: #3b82f6;
}

.help-drawer {
    display: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #334155;
    line-height: 1.55;
}

.help-drawer.open {
    display: block;
}

.help-drawer h6 {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.help-drawer p {
    margin: 0 0 8px;
}

.help-drawer p:last-child {
    margin-bottom: 0;
}

.help-drawer code {
    font-size: 0.78rem;
    background: #e2e8f0;
    border-radius: 3px;
    padding: 1px 4px;
    color: #1e293b;
}

.help-drawer ul {
    margin: 4px 0 8px 0;
    padding-left: 16px;
}

.help-drawer ul li {
    margin-bottom: 3px;
}

.help-drawer .help-gotcha {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 7px 10px;
    margin-top: 8px;
    color: #78350f;
}

.help-drawer .help-gotcha i {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Tier nudge bar (non-pushy, discovery-style) ── */
.tier-nudge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #d1d5db;
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin-top: 16px;
    font-size: 0.8rem;
    color: #6b7280;
}

.tier-nudge i {
    color: #9ca3af;
    flex-shrink: 0;
}

.tier-nudge a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.tier-nudge a:hover {
    text-decoration: underline;
}

.tier-nudge-sep {
    margin-left: auto;
}

/* ── Enterprise contact nudge (Business tier at cap) ── */
.enterprise-nudge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 0.82rem;
    color: #166534;
}

.enterprise-nudge i {
    flex-shrink: 0;
    font-size: 1rem;
}

.enterprise-nudge a {
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
}

.enterprise-nudge a:hover {
    text-decoration: underline;
}

/* ── Free tier CTA — upgraded style ── */
.upgrade-cta-v2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #e42707;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-top: 16px;
}

.upgrade-cta-v2-icon {
    font-size: 1.25rem;
    color: #e42707;
    flex-shrink: 0;
    margin-top: 1px;
}

.upgrade-cta-v2-body {
    flex: 1;
    min-width: 0;
}

.upgrade-cta-v2-body strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
}

.upgrade-cta-v2-body p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
}

.upgrade-cta-v2 .btn-upgrade-v2 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #e42707;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.upgrade-cta-v2 .btn-upgrade-v2:hover {
    background: #c72106;
    color: #fff;
    text-decoration: none;
}

/* ── "Only active key" deactivate button — improved disabled state ── */
.deactivate-only-key {
    position: relative;
}

/* ── New key display — copy button ── */
.new-key-copy-btn {
    background: none;
    border: 1px solid #86efac;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.78rem;
    color: #15803d;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 6px;
    vertical-align: middle;
}

.new-key-copy-btn:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

/* ── Key row body — smooth open animation ── */
.key-row-body {
    animation: none;
}

.key-row.expanded .key-row-body {
    animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Inactive key — "last used" metadata line ── */
.key-meta-date {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ── Action bar spacing fix for mobile ── */
@media (max-width: 576px) {
    .key-action-bar {
        flex-wrap: wrap;
        gap: 6px;
    }
    .key-action-bar .ms-auto {
        margin-left: 0 !important;
    }
    .upgrade-cta-v2 {
        flex-direction: column;
    }
}

/* ============================================================
   Edit Panel (ep-*) — Sectioned key edit form interior
   Three named zones: Key Details, Identity, Security
   ============================================================ */

/* Base section block */
.ep-section {
    margin: 12px 0 0;
    border-radius: 7px;
    border: 1px solid #e8edf3;
    overflow: hidden;
}

/* Section label bar (left-column label) */
.ep-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf3;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.ep-section-icon {
    font-size: 0.68rem;
    flex-shrink: 0;
}

/* Section body — content area */
.ep-section-body {
    padding: 12px 14px;
}

/* ── Key Details section — slightly elevated ── */
.ep-section-key {
    border-color: #dde3ec;
    background: #fcfcfd;
}

.ep-section-key .ep-section-label {
    background: #f1f5f9;
    border-bottom-color: #dde3ec;
    color: #475569;
}

/* Metadata row beneath the key reveal */
.ep-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eef1f6;
}

.ep-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
}

.ep-meta-icon {
    font-size: 0.67rem;
    flex-shrink: 0;
}

.ep-meta-used {
    color: #15803d;
}

.ep-meta-used .ep-meta-icon {
    color: #22c55e;
}

.ep-meta-unused {
    color: #94a3b8;
    font-style: italic;
}

.ep-meta-test {
    color: #92400e;
}

/* ── Identity section ── */
.ep-section-identity .ep-section-label {
    color: #475569;
}

/* Hint text under name input */
.ep-field-hint {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 5px;
    line-height: 1.4;
}

/* Read-only field pair (inactive key view) */
.ep-readonly-field {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
}

.ep-readonly-field + .ep-readonly-field {
    border-top: 1px solid #f1f5f9;
    padding-top: 7px;
    margin-top: 4px;
}

.ep-readonly-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 72px;
    flex-shrink: 0;
}

.ep-readonly-value {
    font-size: 0.82rem;
    color: #334155;
}

/* ── Security section — paid users ── */
.ep-section-security {
    border-color: #c7d7f0;
}

.ep-section-security .ep-section-label {
    background: #eff6ff;
    border-bottom-color: #c7d7f0;
    color: #1d4ed8;
}

.ep-section-security .ep-section-icon {
    color: #3b82f6;
}

/* Spacing between IP and CORS fields inside security section */
.ep-security-field {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e8edf3;
}

.ep-security-field-last {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* ── Security section — free/gated ── */
.ep-section-security-gated {
    border-color: #e2e8f0;
    border-style: dashed;
}

.ep-section-security-gated .ep-section-label {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
    color: #94a3b8;
}

.ep-section-security-gated .ep-section-icon {
    color: #cbd5e1;
}

.ep-section-badge-locked {
    margin-left: auto;
    font-size: 0.67rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ep-section-badge-locked i {
    font-size: 0.6rem;
    margin-right: 2px;
}

/* Gated block — upgrade surface replacing disabled inputs */
.ep-gated-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ep-gated-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ep-gated-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ep-gated-feature > i {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.ep-gated-feature strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 1px;
}

.ep-gated-feature p {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.45;
}

.ep-gated-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: #e42707;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.ep-gated-upgrade-btn:hover {
    background: #c72106;
    color: #fff;
    text-decoration: none;
}

/* ── Mobile adjustments for ep-* sections ── */
@media (max-width: 576px) {
    .ep-section-label {
        font-size: 0.68rem;
        padding: 6px 12px;
    }
    .ep-section-body {
        padding: 10px 12px;
    }
    .ep-meta-row {
        gap: 4px 10px;
    }
    .ep-readonly-field {
        flex-direction: column;
        gap: 2px;
    }
    .ep-readonly-label {
        min-width: unset;
    }
}

/* ── Toast Notification ── */
.key-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.key-toast {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}
.key-toast-show {
    opacity: 1;
    transform: translateX(0);
}
.key-toast-hide {
    opacity: 0;
    transform: translateX(40px);
}
.key-toast-success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.key-toast-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
.key-toast-info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ── Create New Key section polish ── */
.create-key-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.create-key-section .create-key-icon {
    font-size: 2rem;
    color: #3b82f6;
    margin-bottom: 8px;
}
.create-key-section .create-key-hint {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 8px;
}
.create-key-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.create-key-inline .form-control {
    flex: 1;
}
.create-key-counter {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 6px;
}

/* ================================================
   Beta Gate Page
   ================================================ */

/* Hero eyebrow pill */
.beta-hero-eyebrow {
    margin-bottom: 12px;
}

.beta-badge-pill {
    display: inline-block;
    background: rgba(228, 39, 7, 0.15);
    color: #e42707;
    border: 1px solid rgba(228, 39, 7, 0.3);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
}

/* JSON ticker */
.beta-ticker-wrap {
    max-width: 560px;
    margin: 0 auto 36px;
    background: #0f172a;
    border-radius: 10px;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    overflow: hidden;
    position: relative;
}

.beta-ticker-label {
    background: #1e293b;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-bottom: 1px solid #334155;
}

.beta-ticker-pre {
    color: #7dd3fc;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    padding: 16px 20px;
    height: 270px;
    white-space: pre;
    overflow: hidden;
}

/* After the pseudo-cursor blink */
.beta-ticker-pre::after {
    content: '\25ae';
    color: #3b82f6;
    animation: beta-cursor-blink 0.8s step-end infinite;
    margin-left: 1px;
    font-size: 11px;
    vertical-align: middle;
}

@keyframes beta-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Features section */
.beta-features-section {
    padding: 8px 0 36px;
}

.beta-section-heading {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1e3a8a;
    text-align: center;
    margin-bottom: 6px;
}

.beta-section-sub {
    font-size: 0.95rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 28px;
}

/* Reuse .feature-item but override icon color for beta variant */
.beta-feature-item {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    height: 100%;
    transition: box-shadow 0.15s, transform 0.12s;
}

.beta-feature-item:hover {
    box-shadow: 0 4px 14px rgba(59,130,246,0.09);
    transform: translateY(-2px);
}

.beta-feature-item i {
    color: #3b82f6;
    font-size: 17px;
    margin-top: 2px;
    flex-shrink: 0;
}

.beta-feature-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 3px;
}

.beta-feature-item p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* Stats callout bar */
.beta-callout-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 32px;
    margin-top: 28px;
}

.beta-callout-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px;
    text-align: center;
}

.beta-callout-num {
    font-size: 2rem;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1;
}

.beta-callout-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    white-space: nowrap;
}

.beta-callout-divider {
    width: 1px;
    height: 40px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* Access request card */
.beta-access-section {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 48px 0;
    /* Full-width bleed matching portal-stripe pattern */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
}

.beta-access-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    padding: 36px 36px 28px;
    text-align: center;
}

.beta-access-icon {
    font-size: 2.2rem;
    color: #3b82f6;
    margin-bottom: 12px;
}

.beta-access-heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}

.beta-access-sub {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

.beta-input-group {
    max-width: 420px;
    margin: 0 auto 8px;
}

.beta-email-input {
    border-radius: 6px 0 0 6px !important;
    border-right: 0;
    font-size: 14px;
    padding: 10px 14px;
}

.beta-email-input:focus {
    border-color: #3b82f6;
    box-shadow: none;
    border-right: 0;
    z-index: 2;
}

/* Keep border visible when input focused + button adjacent */
.beta-input-group:focus-within .beta-submit-btn {
    border-color: #3b82f6;
}

.beta-submit-btn {
    background: #e42707;
    color: #fff;
    border: 1.5px solid #e42707;
    border-radius: 0 6px 6px 0 !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    white-space: nowrap;
    transition: background 0.15s;
}

.beta-submit-btn:hover {
    background: #c41e06;
    border-color: #c41e06;
    color: #fff;
}

.beta-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.beta-access-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 8px;
    color: #166534;
    font-size: 15px;
    margin-bottom: 16px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.beta-access-success i {
    color: #22c55e;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.beta-access-note {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 16px;
    margin-bottom: 0;
}

.beta-access-note a {
    color: #6b7280;
}

/* Trust row */
.beta-trust-row {
    padding: 0 12px;
}

/* Responsive */
@media (max-width: 576px) {
    .beta-callout-bar {
        gap: 16px;
        padding: 20px 16px;
    }

    .beta-callout-item {
        padding: 0 12px;
    }

    .beta-callout-divider {
        display: none;
    }

    .beta-access-card {
        padding: 28px 20px 24px;
    }

    .beta-input-group {
        flex-direction: column;
    }

    .beta-email-input {
        border-radius: 6px !important;
        border-right: 1px solid #dee2e6 !important;
        margin-bottom: 8px;
    }

    .beta-submit-btn {
        border-radius: 6px !important;
        width: 100%;
    }

    .beta-ticker-pre {
        font-size: 11px;
        padding: 12px 14px;
    }
}

/* ═══════════════════════════════════════════
   LEGAL PAGES (TOS, SLA)
   ═══════════════════════════════════════════ */
.legal-layout {
    display: flex;
    gap: 48px;
    padding: 8px 0 80px;
}

/* Sidebar TOC */
.legal-toc {
    position: sticky;
    top: 110px;
    align-self: flex-start;
    width: 230px;
    min-width: 230px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-right: 8px;
}
.legal-toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin: 0 0 12px;
    padding: 0;
}
.legal-toc a {
    display: block;
    padding: 4px 0 4px 12px;
    font-size: 0.82rem;
    color: #6b7280;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s;
    line-height: 1.45;
}
.legal-toc a:hover {
    color: #3b82f6;
    border-left-color: #d1d5db;
}
.legal-toc a.active {
    color: #3b82f6;
    border-left-color: #3b82f6;
    font-weight: 600;
}

/* Main content */
.legal-body {
    flex: 1;
    min-width: 0;
}
.legal-body h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
    margin: 48px 0 18px;
    letter-spacing: -0.01em;
    scroll-margin-top: 120px;
}
.legal-body h2:first-child {
    margin-top: 0;
}
.legal-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #374151;
    margin: 28px 0 10px;
    scroll-margin-top: 120px;
}
.legal-body p {
    font-size: 0.94rem;
    line-height: 1.75;
    color: #374151;
    margin: 0 0 14px;
}
.legal-body ol, .legal-body ul {
    font-size: 0.94rem;
    line-height: 1.75;
    color: #374151;
    padding-left: 24px;
    margin: 0 0 14px;
}
.legal-body li {
    margin-bottom: 6px;
}
.legal-body .clause {
    margin-bottom: 16px;
}
.legal-body .clause-id {
    font-weight: 700;
    color: #6b7280;
    font-size: 0.85rem;
    margin-right: 4px;
}
.legal-body .legal-caps {
    text-transform: uppercase;
    font-size: 0.88rem;
    line-height: 1.7;
    background: #f9fafb;
    border-left: 3px solid #d1d5db;
    padding: 14px 18px;
    margin: 12px 0 16px;
    border-radius: 0 6px 6px 0;
}
.legal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px;
    font-size: 0.9rem;
}
.legal-body table th {
    background: #f9fafb;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    padding: 8px 12px;
    text-align: left;
}
.legal-body table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}
.legal-body code {
    background: #f3f4f6;
    color: #dc2626;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.legal-body a {
    color: #3b82f6;
    text-decoration: none;
}
.legal-body a:hover {
    text-decoration: underline;
}

/* Formula callout (SLA) */
.legal-body .formula-box {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    padding: 14px 18px;
    margin: 12px 0 16px;
    border-radius: 0 6px 6px 0;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.88rem;
    color: #1e3a5f;
}

/* Metric callout (SLA 99.9% badge) */
.legal-metric {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 16px 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.legal-metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: #166534;
    line-height: 1;
}
.legal-metric-label {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 860px) {
    .legal-layout {
        flex-direction: column;
        gap: 0;
    }
    .legal-toc {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: none;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 16px;
        margin-bottom: 24px;
    }
}
@media (max-width: 600px) {
    .legal-toc {
        display: none;
    }
}

/* Feature card "Try it" links */
.portal-feature-try {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s;
}
.portal-feature-try:hover {
  color: #3b82f6;
}

/* USPS migration page — context bar */
.usps-context-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
.usps-context-item {
    text-align: center;
}
.usps-context-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}
.usps-context-label {
    font-size: 0.85rem;
    color: #64748b;
}