/* ========================================
   NAH Management - Brand Stylesheet
   Version: 1.3.0 - Complete Fixes
   ======================================== */

/* ----------------------------------------
   CSS Custom Properties (Light Mode Default)
   ---------------------------------------- */
:root {
    /* Brand Colors */
    --color-gold: #B8956B;
    --color-gold-hover: #A6845D;
    --color-gold-light: rgba(184, 149, 107, 0.1);
    --color-slate: #1E293B;
    --color-champagne: #F5EFE6;
    --color-charcoal: #374151;
    --color-warm-gray: #9CA3AF;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Light Mode Theme Colors */
    --bg-primary: var(--color-champagne);
    --bg-secondary: var(--color-white);
    --bg-dark: var(--color-slate);
    --text-primary: var(--color-slate);
    --text-secondary: var(--color-charcoal);
    --text-muted: var(--color-warm-gray);
    /* Readable muted text. Use for ALL readable muted text.
       --text-muted (#9CA3AF) is reserved for decorative non-text (borders, dividers,
       disabled-state icons) only.
       dev-refine-v3 (P3): the measurement basis is the REAL painted surface, not
       white. Every funnel card is .lg-surface rgba(255,255,255,0.42) composited
       over the .conciergematch-bg gradient (#F5EFE6 to #EFE6D6), so the card
       paints #F9F6F1 to #F6F1E7. The old #6B7280 measured 4.83:1 on white but
       only 4.29:1 on the card and 4.23:1 on flat champagne, i.e. below the 4.5:1
       AA floor at 13px in real use. #4B5563 is 6.71:1 on the worst real surface
       and still clearly muted against the #374151 body at 9.16:1. Dark mode
       (#B0B7C3, :96) already measures 7.25:1 and is unchanged. */
    --text-muted-readable: #4B5563;
    --text-on-dark: var(--color-white);
    --accent: var(--color-gold);
    --accent-hover: var(--color-gold-hover);
    --border-color: #E5E0D8;

    /* Typography */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Container */
    --container-max: 1200px;
    --container-padding: 1.5rem;

    /* Header */
    --header-height: 80px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.05);
    --shadow-md: 0 4px 6px rgba(30, 41, 59, 0.07);
    --shadow-lg: 0 10px 25px rgba(30, 41, 59, 0.1);
    --shadow-xl: 0 20px 40px rgba(30, 41, 59, 0.15);
}

/* ----------------------------------------
   Dark Mode
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: var(--color-slate);
        --bg-secondary: #263244;
        --bg-dark: #151D2B;
        --text-primary: var(--color-champagne);
        --text-secondary: #D1CCC3;
        --text-muted: var(--color-warm-gray);
        --text-muted-readable: #B0B7C3;
        --text-on-dark: var(--color-champagne);
        --border-color: #3D4A5C;
        --color-gold-light: rgba(184, 149, 107, 0.15);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4);
    }
}

/* ----------------------------------------
   Reset & Base
   ---------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--weight-regular);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

body.no-scroll {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ----------------------------------------
   Typography
   ---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--text-primary);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

h4 {
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
}

p {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

.text-gold {
    color: var(--color-gold);
}

.text-muted {
    color: var(--text-muted-readable);
}

.lead {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* ----------------------------------------
   Container & Layout
   ---------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-4xl) 0;
}

.section-dark {
    background-color: var(--bg-dark);
    color: var(--text-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--text-on-dark);
}

.section-dark p {
    color: rgba(255, 255, 255, 0.8);
}

.section-alt {
    background-color: var(--bg-secondary);
}

/* Section Header */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.section-header h2 {
    margin-bottom: var(--space-md);
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.0625rem;
}

/* ----------------------------------------
   Header - Matching NAH Management
   ---------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-xl);
}

/* ----------------------------------------
   Logo System - Matching NAH Management
   ---------------------------------------- */
.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo-key-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

.logo-key {
    height: 28px;
    width: auto;
    cursor: pointer;
    transform-style: preserve-3d;
}

.logo-key:hover {
    animation: keyUnlock 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.logo-key.flip {
    animation: keyUnlock 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes keyUnlock {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(-180deg);
    }
    100% {
        transform: rotateX(-360deg);
    }
}

.logo-wordmark {
    font-family: var(--font-primary);
    font-weight: var(--weight-extrabold);
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    line-height: 1;
    display: flex;
    align-items: center;
}

.logo-text {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    /* dev-0.5.3: subtitle spelled out to "NORTH AMERICAN HOME RENTALS" (parallels
       the management lockup). 27 characters do not fit the ~130px lockup at 8px, so
       the size drops to 0.375rem with a gentle 0.12em track, calibrated so the
       subtitle spans ~99% of the full lockup (key left edge to the H right edge)
       on one line. Header and footer share this size and track. */
    font-size: 0.375rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    margin-top: 2px;
    display: block;
    white-space: nowrap;
}

/* Light mode logo (default) */
.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

/* Dark mode logo adjustments */
@media (prefers-color-scheme: dark) {
    .logo-wordmark {
        color: var(--color-gold);
    }

    .logo-text {
        color: var(--color-champagne);
    }

    .logo-light {
        display: none;
    }

    .logo-dark {
        display: block;
    }
}

/* ----------------------------------------
   dev-0.32.0: material key, dark scheme only. The brushed-gold plate
   (images/NAH_key_material_brushed.webp, provenance in g1-key-material/README.md)
   renders through the REAL key vector applied as a CSS mask; the path is never
   redrawn. The plate URL lives only inside this dark media block, so a
   light-scheme browser never fetches it. Where mask is unsupported the flat
   gold SVG img (#logoKeyDark) keeps rendering unchanged, flip and all. Motion
   tokens carry literal fallbacks because liquid-glass.css does not load on
   every header-carrying page; the values are the dev-0.28.0 scale, not new.
   ---------------------------------------- */
.logo-key-material {
    display: none;
}

@media (prefers-color-scheme: dark) {
    @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) {
        .logo-dark {
            display: none;
        }

        .logo-key-material {
            display: block;
            position: relative;
            overflow: hidden;
            aspect-ratio: 130 / 76;
            background-image: url('/images/NAH_key_material_brushed.webp');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            -webkit-mask-image: url('/images/NAH_key_gold_transparent.svg');
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-size: contain;
            mask-image: url('/images/NAH_key_gold_transparent.svg');
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
        }

        /* One light-sweep pass per hover, clipped by the same mask. This
           REPLACES the keyUnlock flip in dark scheme only (two simultaneous
           effects read as noise); light scheme keeps the flip. No idle or
           looping motion: the sheen rests off-canvas and runs exactly once
           per hover entry. */
        .logo-key-material:hover {
            animation: none;
        }

        .logo-key-material::after {
            content: '';
            position: absolute;
            inset: 0;
            transform: translateX(-101%);
            background: linear-gradient(105deg, transparent 30%, rgba(245, 239, 230, 0.55) 50%, transparent 70%);
        }

        .logo-key-material:hover::after {
            animation: logoKeySweep var(--lg-dur-cine, 1300ms) var(--lg-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) 1;
        }
    }
}

@keyframes logoKeySweep {
    0% {
        transform: translateX(-101%);
    }
    100% {
        transform: translateX(101%);
    }
}

/* ----------------------------------------
   Main Navigation
   ---------------------------------------- */
.main-nav {
    display: none;
    align-items: center;
    gap: var(--space-md);
}

.main-nav a {
    font-weight: var(--weight-medium);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    padding: var(--space-sm) 0;
    position: relative;
    /* dev-0.32.1: keep two-word labels (Browse Homes, Private Collection,
       TenantMatch) on a single line so the bar never wraps. */
    white-space: nowrap;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: width var(--transition-fast);
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--text-primary);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

/* Header Actions */
.header-actions {
    display: none;
    align-items: center;
    gap: var(--space-sm);
}

/* Mobile Toggle */
.mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--text-primary);
}

.mobile-toggle .icon-close {
    display: none;
}

.site-header.menu-open .mobile-toggle .icon-menu {
    display: none;
}

.site-header.menu-open .mobile-toggle .icon-close {
    display: block;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    padding: var(--space-xl) var(--container-padding);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    z-index: 999;
    display: flex;
    flex-direction: column;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-header {
    /* dev-0.31: stack the primary CTA and the auth control full-width so they
       align cleanly (the auth block is injected after load; a row left it
       vertically off-center). Mobile-only surface; desktop menu is hidden. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.mobile-login-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* dev-0.31: 44px touch target */
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-align: center;
}

.mobile-login-btn:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.mobile-login-btn-primary {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

.mobile-login-btn-primary:hover {
    background-color: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
    color: var(--color-white);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mobile-nav a {
    font-size: 1.125rem;
    font-weight: var(--weight-medium);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.mobile-nav a.active {
    color: var(--color-gold);
}

.mobile-menu-footer {
    margin-top: auto;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.mobile-menu-footer a {
    font-size: 0.875rem;
    color: var(--text-muted-readable);
    display: flex;
    align-items: center;
    min-height: 44px; /* dev-0.31: 44px touch target */
}

/* Desktop Navigation */
@media (min-width: 1024px) {
    .main-nav {
        display: flex;
    }

    .header-actions {
        display: flex;
    }

    .mobile-toggle {
        display: none;
    }

    .mobile-menu {
        display: none;
    }
}

/* dev-0.32.1: between 1024px and 1200px the eight nav links plus the Find Your
   Home button and the account icon are tight (the new Private Collection link
   pushed it over). Step the gap and link size down so the whole bar stays on
   one clean line. Targets the desktop .main-nav only; the mobile menu, which is
   the .mobile-nav list shown below 1024px, is untouched. */
@media (max-width: 1200px) {
    .main-nav {
        gap: var(--space-sm);
    }

    .main-nav a {
        font-size: 0.875rem;
    }
}

/* ----------------------------------------
   Mobile Logo Adjustments
   ---------------------------------------- */
@media (max-width: 767px) {
    .logo-key {
        height: 24px;
    }

    .logo-wordmark {
        font-size: 1.5rem;
    }

    .logo-text {
        /* dev-0.5.3: scales with the smaller 1.5rem wordmark so the subtitle keeps
           spanning the shrunken lockup at the 0.12em base track. */
        font-size: 0.3125rem;
    }

    .logo-mark {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .logo-key {
        height: 20px;
    }

    .logo-wordmark {
        font-size: 1.25rem;
    }

    .logo-text {
        /* dev-0.5.3: scales with the 1.25rem mobile wordmark and keeps the 0.12em
           track so "NORTH AMERICAN HOME RENTALS" stays one line under the wordmark,
           no wrap, no overflow. */
        font-size: 0.2679rem;
        letter-spacing: 0.12em;
    }

    .logo-mark {
        gap: 5px;
    }
}

/* ----------------------------------------
   Footer - Matching NAH Management
   ---------------------------------------- */
.site-footer {
    background-color: var(--color-slate);
    color: var(--color-champagne);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    margin-bottom: var(--space-lg);
}

.footer-logo-mark {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-key {
    height: 28px;
    width: auto;
}

.footer-wordmark {
    font-family: var(--font-primary);
    font-weight: var(--weight-extrabold);
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    line-height: 1;
    display: flex;
    align-items: center;
}

.footer-logo-text {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    /* dev-0.5.3: "NORTH AMERICAN HOME RENTALS" spelled out to fill the lockup.
       Size and track match .logo-text exactly (0.375rem / 0.12em) so the header
       and footer lockups are identical; warm gray reads on dark slate. */
    font-size: 0.375rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-top: 2px;
    white-space: nowrap;
}

.footer-brand p {
    color: rgba(245, 239, 230, 0.8);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);
}

.footer-tagline {
    color: var(--color-gold);
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: var(--space-md);
    overflow-wrap: break-word;
}

.footer-location {
    color: var(--color-gold) !important;
    font-weight: var(--weight-medium);
}

.footer-links h4 {
    color: var(--color-champagne);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
}

.footer-links a {
    display: block;
    color: rgba(245, 239, 230, 0.7);
    font-size: 0.9375rem;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-gold);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(245, 239, 230, 0.1);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: rgba(245, 239, 230, 0.6);
    border: 1px solid rgba(245, 239, 230, 0.2);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-2px);
}

.copyright {
    color: rgba(245, 239, 230, 0.5);
    font-size: 0.875rem;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer-legal-links a {
    color: rgba(245, 239, 230, 0.6);
    font-size: 0.8125rem;
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: var(--color-gold);
}

.footer-legal-divider {
    color: rgba(245, 239, 230, 0.3);
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-social {
        flex: 1;
        justify-content: flex-start;
    }

    .copyright {
        flex: 1;
        text-align: center;
    }

    .footer-legal-links {
        flex: 1;
        justify-content: flex-end;
    }
}

/* ----------------------------------------
   Buttons
   ---------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--color-gold);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(184, 149, 107, 0.3);
}

.btn-secondary {
    background-color: var(--color-slate);
    color: var(--color-white);
}

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

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-champagne);
    color: var(--color-champagne);
}

.btn-outline:hover {
    background-color: var(--color-champagne);
    color: var(--color-slate);
    transform: translateY(-2px);
}

.btn-outline-gold {
    background-color: transparent;
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
}

.btn-outline-gold:hover {
    background-color: var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* dev-0.9.0: outline button for LIGHT or theme-aware page surfaces (the
   listing-detail sidebar, the For Owners CTA). Border and
   text are driven by the theme variables, so it reads as Deep Slate on a light
   surface and flips to champagne in dark mode, tracking the surface underneath.
   The base .btn-outline stays champagne for the always-dark hero and
   .cta-section bands (index, about, private-listings, area/longtail/hub CTAs),
   which are Deep Slate in both themes. */
.btn-outline-slate {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.btn-outline-slate:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    transform: translateY(-2px);
}

.btn-text {
    background: none;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
}

.btn-text:hover {
    color: var(--color-gold);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* ----------------------------------------
   Hero Section
   ---------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-height) + var(--space-2xl)) var(--container-padding) var(--space-2xl);
    background-color: var(--color-slate);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-bg img,
.hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(30, 41, 59, 0.85) 0%,
        rgba(30, 41, 59, 0.70) 35%,
        rgba(30, 41, 59, 0.50) 100%
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    text-align: center;
}

.hero h1 {
    color: var(--color-champagne);
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero h1 span {
    display: block;
    color: var(--color-gold);
}

.hero .lead {
    color: rgba(245, 239, 230, 0.95);
    margin-bottom: var(--space-xl);
    font-weight: var(--weight-medium);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

.hero-animate {
    opacity: 0;
    transform: translateY(20px);
}

.hero.ready .hero-animate,
.page-hero.ready .hero-animate,
.about-hero.ready .hero-animate {
    animation: heroFadeIn 0.8s ease-out forwards;
}

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Search Box */
.hero-search {
    position: relative;
    z-index: 3;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 900px;
}

.hero-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--space-md);
    align-items: end;
}

.hero-search .form-group {
    margin-bottom: 0;
}

.hero-search .form-label {
    font-size: 0.8125rem;
    margin-bottom: var(--space-xs);
    color: var(--color-slate);
}

.hero-search .form-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.hero-search .btn {
    height: 100%;
    min-height: 48px;
}

@media (max-width: 900px) {
    .hero-search-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .hero-search {
        margin: var(--space-xl) 0 0;
        padding: var(--space-md);
    }
    
    .hero-search-form {
        grid-template-columns: 1fr;
    }
    
    .hero-search .btn {
        width: 100%;
    }
}

/* Page Hero (Inner Pages) */
.page-hero {
    position: relative;
    padding: calc(var(--header-height) + var(--space-4xl)) 0 var(--space-4xl);
    background: var(--color-slate);
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero-content {
    max-width: 700px;
}

.page-hero h1 {
    color: var(--color-champagne);
    margin-bottom: var(--space-lg);
}

.page-hero h1 span {
    color: var(--color-gold);
}

.page-hero .lead {
    color: rgba(245, 239, 230, 0.85);
    margin-bottom: var(--space-xl);
}

/* Page Header (Simple) */
.page-header {
    padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-2xl);
    background-color: var(--color-slate);
    text-align: center;
}

.page-header h1 {
    color: var(--color-champagne);
    margin-bottom: var(--space-sm);
}

.page-header p,
.page-header .lead {
    color: rgba(245, 239, 230, 0.85);
    max-width: 600px;
    margin: 0 auto;
}

/* ----------------------------------------
   Cards
   ---------------------------------------- */
.card {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gold-light);
    color: var(--color-gold);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
}

.card:hover .card-icon {
    background-color: var(--color-gold);
    color: var(--color-white);
    transform: scale(1.05);
}

.card h3 {
    margin-bottom: var(--space-md);
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----------------------------------------
   Listings Grid
   ---------------------------------------- */
.listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .listings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.listing-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

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

.listing-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.listing-card:hover .listing-image img {
    transform: scale(1.05);
}

.listing-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}
/* dev-0.15: NAH-listed private inventory badge (gold, top-left). When a card is
   both private and featured, the featured chip drops below it. */
.listing-badge-private {
    background: linear-gradient(135deg, #B8956B, #a6845d);
    box-shadow: 0 2px 8px rgba(184, 149, 107, 0.4);
    z-index: 2;
}
.listing-badge-private ~ .listing-badge { top: calc(var(--space-md) + 28px); }

.listing-content {
    padding: var(--space-lg);
}

.listing-price {
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.listing-address {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.listing-city {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.listing-features {
    display: flex;
    gap: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.listing-feature {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.listing-feature svg {
    width: 16px;
    height: 16px;
    color: var(--color-gold);
}

/* ----------------------------------------
   Areas Grid
   ---------------------------------------- */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .areas-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.area-card {
    display: block;
    text-align: center;
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.area-card:hover {
    border-color: var(--color-gold);
    background: var(--color-gold-light);
}

.area-card h4 {
    font-size: 0.9375rem;
    font-weight: var(--weight-semibold);
    margin: 0;
}

/* ----------------------------------------
   CTA Section
   ---------------------------------------- */
.cta-section {
    text-align: center;
    padding: var(--space-4xl) 0;
    background-color: var(--bg-dark);
}

.cta-section h2 {
    color: var(--color-champagne);
    margin-bottom: var(--space-md);
}

.cta-section p {
    color: rgba(245, 239, 230, 0.85);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .cta-actions {
        flex-direction: row;
    }
}

/* ----------------------------------------
   Forms
   ---------------------------------------- */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-weight: var(--weight-medium);
    font-size: 0.875rem;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(184, 149, 107, 0.15);
}

.form-input::placeholder {
    color: var(--text-muted-readable);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Form Checkbox */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-gold);
    cursor: pointer;
    flex-shrink: 0;
}

.form-checkbox span {
    line-height: 1.4;
}

/* ----------------------------------------
   Scroll Animations
   ---------------------------------------- */
.animate-on-scroll,
.reveal-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated,
.reveal-section.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------
   Utilities
   ---------------------------------------- */
.text-center {
    text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* ----------------------------------------
   Responsive Adjustments
   ---------------------------------------- */
@media (max-width: 767px) {
    .section {
        padding: var(--space-2xl) 0;
    }

    .hero {
        min-height: auto;
        padding-bottom: var(--space-3xl);
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .footer-bottom {
        text-align: center;
    }
    
    .page-hero {
        padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
    }
}

/* ----------------------------------------
   Listing detail mosaic + lightbox
   ---------------------------------------- */
.listing-mosaic {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--space-sm);
    height: 520px;
    margin-bottom: var(--space-2xl);
    position: relative;
}

.mosaic-hero {
    height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
}

.mosaic-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.mosaic-hero:hover img {
    transform: scale(1.02);
}

.mosaic-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-sm);
    height: 100%;
    position: relative;
}

.mosaic-thumb {
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
}

.mosaic-thumb:nth-child(2) {
    border-radius: 0 var(--radius-lg) 0 0;
}

.mosaic-thumb:nth-child(4) {
    border-radius: 0 0 var(--radius-lg) 0;
}

.mosaic-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.mosaic-thumb:hover img {
    transform: scale(1.05);
}

.mosaic-view-all {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(30, 41, 59, 0.92);
    color: var(--color-champagne);
    border: 1px solid var(--color-gold);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    z-index: 2;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.mosaic-view-all:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .listing-mosaic {
        grid-template-columns: 1fr;
        height: auto;
        gap: var(--space-xs);
    }
    .mosaic-hero {
        height: 280px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .mosaic-thumbs {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        height: 140px;
    }
    .mosaic-thumb:nth-child(3),
    .mosaic-thumb:nth-child(4) {
        display: none;
    }
    .mosaic-thumb:nth-child(2) {
        border-radius: 0 0 0 var(--radius-lg);
    }
    .mosaic-thumb:nth-child(2) ~ .mosaic-thumb {
        border-radius: 0 0 var(--radius-lg) 0;
    }
    .mosaic-view-all {
        bottom: 12px;
        right: 12px;
        font-size: 0.8125rem;
        padding: var(--space-xs) var(--space-sm);
    }
}

.listing-detail-header {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-lg);
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}
.lightbox.open { display: flex; }
.lightbox-image {
    max-width: 92vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(184, 149, 107, 0.85);
    color: #fff;
    border: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
    z-index: 2;
}
.lightbox-nav:hover { background: rgba(184, 149, 107, 1); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 2;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* dev-0.13: hardened lightbox (js/lightbox.js). The image sits in its own
   flex-centered stage and renders as a single clean block image: transparent
   background, no border-radius (which can leave a hairline on downscaled wide
   aerials), object-fit:contain against an explicit box. This replaced the
   brittle inline styling that produced a faint vertical seam down wide photos. */
/* Lightbox: styled entirely inline by js/lightbox.js (rewritten dev-0.13.2,
   el.style.cssText) so no CSS rule can hide or mis-size the overlay. The old
   .nahr-lightbox / .nahr-lb-* rules were removed deliberately. */

/* Similar properties */
.similar-properties {
    padding: var(--space-3xl) 0;
    background: var(--bg-secondary);
}
.similar-properties h2 {
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
}
.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
}

/* ----------------------------------------
   Intake forms
   ---------------------------------------- */
.intake-section {
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-3xl);
    background: var(--bg-primary);
}
.intake-hero {
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.intake-hero h1 {
    /* dev-0.10.0: was a fixed 2.5rem (40px) with no clamp; scale down on narrow
       screens so the intake hero does not dominate the first mobile viewport. */
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}
.intake-hero p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    max-width: 640px;
    margin: 0 auto;
}
.intake-form {
    max-width: 820px;
    margin: 0 auto;
    background: var(--bg-secondary);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}
.intake-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
@media (max-width: 640px) {
    .intake-form .form-row { grid-template-columns: 1fr; }
}
.intake-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
}
.intake-form label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-xs);
}
.intake-form input[type="text"],
.intake-form input[type="number"],
.intake-form input[type="email"],
.intake-form input[type="tel"],
.intake-form select,
.intake-form textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
}
.intake-form textarea { min-height: 100px; resize: vertical; }
.intake-form .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}
.intake-form .checkbox-grid label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.intake-form .checkbox-grid label:hover { border-color: var(--color-gold); }
.intake-form fieldset {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}
.intake-form fieldset legend {
    color: var(--color-gold);
    font-weight: 700;
    padding: 0 var(--space-sm);
}
.intake-submit-row {
    display: flex;
    justify-content: center;
    margin-top: var(--space-xl);
}
.intake-status {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    display: none;
}
.intake-status.error {
    display: block;
    background: rgba(220, 38, 38, 0.1);
    color: #f87171;
    border: 1px solid #b91c1c;
}
.intake-status.success {
    display: block;
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid #166534;
}
.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.photo-preview-grid .preview-tile {
    position: relative;
    height: 100px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.photo-preview-grid .preview-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Results matches */
.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
.match-card {
    position: relative;
}
.score-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-gold);
    color: #fff;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 700;
    z-index: 2;
}

/* CTA banners on buyers/sellers/home */
.cta-banner {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-hover) 100%);
    color: #fff;
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    margin: var(--space-2xl) 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.cta-banner h2 {
    color: #fff;
    margin-bottom: var(--space-md);
}
.cta-banner p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--space-lg);
    font-size: 1.0625rem;
}
.cta-banner .btn {
    background: #fff;
    color: var(--color-gold);
    font-weight: 700;
}
.cta-banner .btn:hover {
    background: var(--bg-secondary);
    color: var(--color-gold-hover);
}

.cta-duo {
    padding: var(--space-3xl) 0;
    background: var(--bg-secondary);
}
.cta-duo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}
@media (max-width: 768px) {
    .cta-duo-grid { grid-template-columns: 1fr; }
}
.cta-duo-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.cta-duo-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
}
.cta-duo-card h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}
.cta-duo-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

/* ----------------------------------------
   TenantMatch results
   ---------------------------------------- */
.cm-results-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
}
.cm-results-summary {
    text-align: center;
    margin-bottom: var(--space-2xl);
    color: var(--text-secondary);
}
.cm-results-summary strong { color: var(--text-primary); }
.cm-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}
.listing-card-blurred {
    position: relative;
}
.listing-card-blurred .listing-image img {
    filter: brightness(0.85) blur(2px);
    transform: scale(1.03);
}
.listing-card-blurred .listing-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.45) 0%, rgba(30, 41, 59, 0.65) 100%);
    pointer-events: none;
}
.blurred-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: #fff;
    text-align: center;
    z-index: 3;
    padding: var(--space-md);
}
.blurred-overlay svg {
    width: 32px;
    height: 32px;
    color: var(--color-gold);
}
.blurred-overlay span {
    font-weight: var(--weight-bold);
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}
.fit-bullets {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
}
.fit-bullets li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}
.fit-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-gold);
    font-weight: var(--weight-bold);
}
/* Tier 1 unlocked card extras */
.listing-card .listing-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: var(--space-md) 0;
}
.listing-card .listing-content .btn {
    width: 100%;
    margin-top: var(--space-md);
}
/* dev-0.5.1: public card unlock treatment. A warm-gray lock micro-label sits
   above the solid-gold "Unlock with TenantMatch" CTA. */
.listing-unlock-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-md);
    /* dev-0.9.0: was --color-warm-gray (#9CA3AF) at 11.5px, ~2.6:1 on the light
       card and a violation of the #9CA3AF-decorative-only rule. Moved to the
       readable muted token (#4B5563 light, 6.71:1; #B0B7C3 in dark) and bumped
       the size for legibility. */
    color: var(--text-muted-readable);
    font-size: 12.5px;
    font-weight: var(--weight-medium);
    line-height: 1.3;
}
.listing-unlock-note svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.listing-card .listing-content .btn.listing-unlock-btn {
    margin-top: 6px;
}
.cm-mosaic-mini {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.cm-mosaic-mini .cm-mosaic-hero {
    grid-row: 1 / span 2;
    overflow: hidden;
}
.cm-mosaic-mini .cm-mosaic-thumb {
    overflow: hidden;
    background: var(--color-warm-gray);
}
.cm-mosaic-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----------------------------------------
   Platform Terms page
   ---------------------------------------- */
.platform-terms-section {
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-3xl);
    background: var(--color-champagne);
}
.platform-terms-wrap {
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-champagne);
    color: var(--color-charcoal);
    padding: var(--space-2xl);
}
.platform-terms-wrap h1 {
    color: var(--color-slate);
    margin-bottom: var(--space-sm);
}
.platform-terms-wrap .pt-meta {
    color: var(--text-muted-readable);
    font-size: 0.875rem;
    margin-bottom: var(--space-xl);
}
.platform-terms-wrap h2 {
    color: var(--color-slate);
    font-size: 1.25rem;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}
.platform-terms-wrap p,
.platform-terms-wrap li {
    color: var(--color-charcoal);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}
.platform-terms-wrap a {
    color: var(--color-gold);
    text-decoration: underline;
}

/* ----------------------------------------
   Print Styles
   ---------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .mobile-menu,
    .btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

@media (max-width: 480px) {
    .copyright { white-space: normal; font-size: 0.8125rem; }
}

/* ----------------------------------------
   Listing Detail Premium (dev-0.11)
   Destination-grade Tier 2 detail: 60/40 hero gallery, pinned sidebar,
   AI Match Narrative card, vision chips, proximity intelligence, similar.
   ---------------------------------------- */

/* Hero gallery */
.ld-gallery { max-width: 1280px; margin: var(--space-lg) auto 0; padding: 0 var(--space-lg); }
.ld-gallery-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 4px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ld-g-hero, .ld-g-cell {
    padding: 0; border: none; margin: 0;
    background: #e9e4db;
    cursor: pointer;
    display: block;
    position: relative;
    overflow: hidden;
}
.ld-g-hero { aspect-ratio: 4 / 3; max-height: 560px; width: 100%; }
.ld-g-hero img, .ld-g-cell img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.ld-g-hero img.loaded, .ld-g-cell img.loaded { opacity: 1; }
.ld-g-hero:hover img, .ld-g-cell:hover img { transform: scale(1.02); }
.ld-g-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.ld-g-empty { background: #e9e4db; cursor: default; }
.ld-g-more {
    position: absolute; inset: 0;
    background: rgba(30, 41, 59, 0.78);
    color: var(--color-champagne);
    display: flex; align-items: center; justify-content: center;
    font: 600 0.9375rem/1.2 'Outfit', sans-serif;
    text-align: center; padding: var(--space-sm);
}
.ld-gallery-mobile-btn { display: none; }

/* Head: address + vision chips */
.ld-head { max-width: 1200px; margin: var(--space-xl) auto 0; padding: 0 var(--space-lg); }
.ld-head h1 { font-size: 1.75rem; color: var(--text-primary); margin: 0 0 var(--space-sm); }
.vision-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0 0; }
.vision-chip {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-gold-light);
    color: var(--color-gold);
    border: 1px solid rgba(184, 149, 107, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem; font-weight: var(--weight-semibold);
}
.vision-chip svg { width: 14px; height: 14px; }

/* dev-0.17: "What Makes This Home Stand Out" standout-highlights section. */
.ld-highlights-wrap { margin: var(--space-lg) 0 0; }
.ld-highlights { margin: 0; }
.ldh-title {
    font-size: 1.15rem; font-weight: var(--weight-bold);
    color: var(--text-primary); margin: 0 0 var(--space-md);
}
.ldh-signature { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.ldh-pill {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-gold); color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 0.8125rem; font-weight: var(--weight-semibold);
    box-shadow: 0 2px 8px rgba(184, 149, 107, 0.3);
}
.ldh-pill svg { width: 14px; height: 14px; }
.ldh-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); }
.ldh-group {
    background: var(--bg-secondary);
    border: 1px solid rgba(184, 149, 107, 0.18);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}
.ldh-group h3 {
    font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-gold); font-weight: var(--weight-bold);
    margin: 0 0 var(--space-sm);
}
.ldh-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ldh-chip {
    display: inline-flex; align-items: center;
    padding: 4px var(--space-sm);
    background: var(--color-gold-light); color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem; font-weight: var(--weight-medium);
}
.ldh-shimmer {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-md) 0;
}
.ldh-shimmer-bar {
    flex: 0 0 120px; height: 14px; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--color-gold-light) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%; animation: ld-shimmer 1.5s infinite;
}
.ldh-shimmer-text { color: var(--text-muted-readable); font-size: 0.875rem; font-style: italic; }

/* Two-column layout: main + pinned sidebar */
.ld-layout {
    max-width: 1200px; margin: var(--space-xl) auto 0;
    padding: 0 var(--space-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-2xl);
    align-items: start;
}
.ld-block {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    backdrop-filter: blur(6px) saturate(1.1);
}
.ld-block h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0 0 var(--space-md); }
.ld-desc p { color: var(--text-secondary); line-height: 1.8; font-size: 0.9375rem; margin: 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); }
.feature-item { padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.feature-item .fi-label { color: var(--text-muted-readable); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.feature-item .fi-value { color: var(--text-primary); font-weight: var(--weight-semibold); font-size: 0.9375rem; margin-top: 4px; }

/* Pinned sidebar */
.listing-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    align-self: flex-start;
    opacity: 0;
    transform: translateX(20px);
    animation: sidebarSlideIn 0.5s ease 0.2s forwards;
}
@keyframes sidebarSlideIn { to { opacity: 1; transform: translateX(0); } }
.sidebar-price { font-size: 2rem; font-weight: var(--weight-extrabold); color: var(--color-gold); line-height: 1.1; margin-bottom: var(--space-xs); }
/* dev-0.21: NAH-managed badge on the standard detail sidebar (Section 1.9).
   Fixed brand-gold pill with white text, same treatment as the card badges,
   so it reads identically in light and dark themes. */
.ld-nah-badge { display: inline-block; padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); background: linear-gradient(135deg, #B8956B, #a6845d); color: #fff; font-size: 0.75rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(184, 149, 107, 0.4); }
.sidebar-meta { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border-color); }
.sidebar-quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); }
.sidebar-quick-stats > div { display: flex; flex-direction: column; gap: 2px; }
.sidebar-quick-stats span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-readable); }
.sidebar-quick-stats strong { font-size: 0.9375rem; color: var(--text-primary); font-weight: var(--weight-semibold); }
.sidebar-cta, .sidebar-save { width: 100%; margin-bottom: var(--space-sm); justify-content: center; }
/* dev-0.14: helper line under the "Request a Showing" CTA. */
.sidebar-cta-help { font-size: 0.75rem; color: var(--text-muted-readable); text-align: center; margin: -2px 0 var(--space-sm); }
/* dev-0.16: server-rendered "Showing Requested" state. A steady gold-outline
   pill with a check; no hover lift since the request is already in. */
.sidebar-cta-requested, .sidebar-cta-requested:hover {
    background-color: rgba(184, 149, 107, 0.08);
    color: var(--color-gold);
    border-color: var(--color-gold);
    cursor: default;
    transform: none;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sidebar-cta-requested .btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-save.saved { background: var(--color-gold); color: #fff; border-color: var(--color-gold); }
/* dev-0.13.1: single heart toggle (no trash icon). Unsaved = outline; saved =
   filled. The button fill is driven by the svg's own fill attr in JS. */
.sidebar-save svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Listing-card heart (browse view) */
.listing-card-fav { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 5px rgba(30, 41, 59, 0.25); z-index: 2; padding: 0; transition: transform var(--transition-fast), background var(--transition-fast); }
@supports (backdrop-filter: blur(4px)) { .listing-card-fav { backdrop-filter: blur(4px); } }
.listing-card-fav:hover { transform: scale(1.06); background: #fff; }
.listing-card-fav svg { width: 19px; height: 19px; color: var(--text-primary); fill: none; pointer-events: none; }
.listing-card-fav.saved svg { color: var(--color-gold); fill: var(--color-gold); }
.listing-card-fav-toast { position: absolute; top: 54px; right: 12px; background: var(--color-slate); color: #fff; font-size: 0.75rem; font-family: var(--font-secondary); padding: 6px 10px; border-radius: var(--radius-md); z-index: 3; box-shadow: 0 4px 14px rgba(30, 41, 59, 0.3); white-space: nowrap; }
.listing-card-fav-toast a { color: var(--color-gold); text-decoration: underline; }
.sidebar-fine-print { font-size: 0.75rem; color: var(--text-muted-readable); text-align: center; margin: var(--space-md) 0 0; }

/* AI Match Narrative card */
.match-narrative-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
}
.narrative-eyebrow { display: inline-block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); font-weight: var(--weight-bold); margin-bottom: var(--space-sm); }
.narrative-heading { margin: 0 0 var(--space-xl); color: var(--text-primary); font-size: 1.375rem; }
.narrative-loading { color: var(--text-muted-readable); }
.narrative-highlights { display: flex; flex-direction: column; gap: var(--space-lg); }
.narrative-highlight { display: flex; gap: var(--space-md); align-items: flex-start; }
.narrative-icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--color-gold-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-gold); }
.narrative-icon svg { width: 22px; height: 22px; }
.narrative-text h3 { margin: 0 0 var(--space-xs); font-size: 1.0625rem; color: var(--text-primary); }
.narrative-text p { margin: 0; color: var(--text-secondary); line-height: 1.6; }

/* Proximity intelligence */
.proximity-section { margin-bottom: var(--space-xl); }
.proximity-section > .ld-section-inner > h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0 0 var(--space-lg); }
.proximity-category { margin-bottom: var(--space-xl); }
.proximity-category-header { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold); font-weight: var(--weight-bold); margin-bottom: var(--space-md); }
.proximity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); align-items: stretch; }
/* dev-0.13.2: CSS GRID replaces flex (3rd attempt at long POI names). The icon
   and distance columns are fixed; the name column is minmax(0, 1fr); plain 1fr
   is minmax(auto, 1fr) whose auto min-track equals max-content, which blocked
   shrinking and forced overflow / mid-word breaks on long names like
   "Orlando Regional Medical Center". minmax(0, 1fr) lets the cell shrink so the
   name wraps cleanly to 2 lines within its column. */
.proximity-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.proximity-icon { width: 34px; height: 34px; background: var(--color-gold-light); color: var(--color-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.proximity-icon svg { width: 18px; height: 18px; }
.proximity-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.proximity-text strong { min-width: 0; max-width: 100%; font-size: 0.875rem; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; }
.proximity-text span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-readable); }
.proximity-distance { font-size: 0.875rem; color: var(--color-gold); font-weight: var(--weight-bold); text-align: right; white-space: nowrap; }
.proximity-distance .pd-primary, .poi-distance .pd-primary { display: block; color: var(--color-gold); font-size: 1rem; font-weight: var(--weight-bold); }
.proximity-distance .pd-sub, .poi-distance .pd-sub { display: block; color: var(--text-muted-readable); font-size: 0.75rem; font-weight: var(--weight-medium); }
/* dev-0.12: cards with a map pin are clickable (highlight the pin) */
.personal-poi-card, .proximity-featured { transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
[data-poi-index] { cursor: pointer; }
.proximity-item[data-poi-index]:hover, .personal-poi-card[data-poi-index]:hover, .proximity-featured[data-poi-index]:hover { transform: translateY(-2px); border-color: var(--color-gold); }
.proximity-item.poi-active, .personal-poi-card.poi-active, .proximity-featured.poi-active { border-color: var(--color-gold); box-shadow: 0 0 0 2px var(--color-gold-light); }
.proximity-featured { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); margin-bottom: var(--space-xl); background: var(--color-gold-light); border-left: 3px solid var(--color-gold); border-radius: var(--radius-md); }
.proximity-featured > svg { width: 28px; height: 28px; color: var(--color-gold); flex-shrink: 0; }
.proximity-featured strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold); }
.proximity-featured span { color: var(--text-primary); font-weight: var(--weight-semibold); }
.proximity-featured .proximity-distance { margin-left: auto; }

/* Personal anchors (buyer-supplied secular places) */
.proximity-personal { background: linear-gradient(135deg, var(--color-gold-light) 0%, transparent 100%); padding: var(--space-xl); border-radius: var(--radius-lg); border-left: 3px solid var(--color-gold); margin-bottom: var(--space-2xl); }
.proximity-personal h3 { color: var(--color-gold); margin: 0 0 var(--space-md); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.personal-pois-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.personal-poi-card { background: var(--bg-secondary); padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.poi-label { font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: 2px; }
.poi-address { font-size: 0.75rem; color: var(--text-muted-readable); margin-bottom: var(--space-sm); }
.poi-distance { font-size: 0.9375rem; color: var(--color-gold); font-weight: var(--weight-semibold); }

/* dev-0.12: curated regional anchor cards (name-first, drive-time). Rendered on
   the tier-2 matched view and the private listing detail. Explicit light values
   here; the prefers-color-scheme:dark block below flips the surface, border, and
   text (site-wide dark mode) while keeping the Refined Gold icon. */
.anchor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); align-items: stretch; margin-top: var(--space-lg); }
.anchor-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.anchor-card[data-poi-index] { cursor: pointer; }
.anchor-card[data-poi-index]:hover { transform: translateY(-2px); border-color: var(--color-gold); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10); }
.anchor-card.poi-active { border-color: var(--color-gold); box-shadow: 0 0 0 2px var(--color-gold-light); }
.anchor-chip { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #F5EFE6; color: #B8956B; display: flex; align-items: center; justify-content: center; }
.anchor-chip svg { width: 20px; height: 20px; }
.anchor-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.anchor-name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; color: #1E293B; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; }
.anchor-drive { font-size: 13px; color: #374151; }
/* dev-refine-v3 (P3): was #9CA3AF, 2.22:1 on champagne and a violation of the
   #9CA3AF-decorative-only rule at the top of this file. */
.anchor-caption { margin-top: var(--space-md); font-size: 12px; color: var(--text-muted-readable); }
@media (prefers-color-scheme: dark) {
  .anchor-card { background: #263244; border-color: #3D4A5C; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
  .anchor-card[data-poi-index]:hover { border-color: var(--color-gold); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
  .anchor-chip { background: #1E293B; color: #B8956B; }
  .anchor-name { color: #F5EFE6; }
  .anchor-drive { color: #D1CCC3; }
  .anchor-caption { color: #B0B7C3; }
}

/* Similar properties (full-width band) */
.similar-properties { padding: var(--space-2xl) 0; background: var(--bg-secondary); margin-top: var(--space-2xl); border-top: 1px solid var(--border-color); }
.similar-properties .ld-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.similar-properties h2 { margin: 0 0 var(--space-sm); }
.similar-properties > .ld-section-inner > p { color: var(--text-secondary); margin: 0 0 var(--space-xl); }
.similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.similar-card-link { text-decoration: none; color: inherit; display: block; }

/* Attribution */
.ld-attr { max-width: 1200px; margin: var(--space-md) auto 0; padding: var(--space-md) var(--space-lg); color: var(--text-muted-readable); font-size: 0.75rem; line-height: 1.5; }

/* dev-0.12: AI Match Narrative elevated to a full-width band after the gallery,
   before the two-column body. Gets the first content moment (it is the #1
   differentiator). Highlights flow into up-to-3 columns on wide screens. */
.ld-narrative-band { max-width: 1200px; margin: var(--space-xl) auto 0; padding: 0 var(--space-lg); }
.ld-narrative-band .match-narrative-card { margin-bottom: 0; padding: var(--space-2xl); }
.ld-narrative-band .narrative-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }

/* dev-0.12: collapsible MLS public remarks ("About this home") */
.mls-description-text { position: relative; overflow: hidden; transition: max-height 0.45s ease; color: var(--text-secondary); line-height: 1.8; font-size: 0.9375rem; }
.mls-description-text.collapsed { max-height: 5.4em; }
.mls-description-text.collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2.4em; background: linear-gradient(transparent, var(--bg-secondary)); pointer-events: none; }
.mls-description-text.expanded { max-height: 2400px; }
.mls-toggle { background: none; border: none; color: var(--color-gold); font-weight: var(--weight-semibold); cursor: pointer; padding: var(--space-sm) 0 0; margin-top: var(--space-xs); font-size: 0.875rem; font-family: inherit; }
.mls-toggle:hover { text-decoration: underline; }

/* dev-0.12: Leaflet neighborhood map (free OSM tiles). z-index:0 + relative
   confines Leaflet's internal pane/control z-indices to this stacking context so
   they never bleed over the fixed header. */
.neighborhood-map { height: 420px; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-color); margin-bottom: var(--space-xl); overflow: hidden; position: relative; z-index: 0; background: var(--bg-secondary); }
.map-skeleton { position: absolute; inset: 0; z-index: 500; background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--color-gold-light) 50%, var(--bg-secondary) 100%); background-size: 200% 100%; animation: ld-shimmer 1.5s infinite; }
.map-skeleton.hide { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
@keyframes ld-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.map-prop-pin { color: var(--color-gold); filter: drop-shadow(0 2px 4px rgba(30, 41, 59, 0.45)); }
.map-prop-pin svg { display: block; width: 38px; height: 38px; }
.map-popup-title { font-weight: var(--weight-bold); color: var(--text-primary); font-size: 0.9375rem; }
.map-popup-sub { color: var(--text-muted-readable); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.map-popup-dist { color: var(--color-gold); font-weight: var(--weight-semibold); font-size: 0.8125rem; margin-top: 2px; }
.leaflet-popup-content { font-family: 'Outfit', 'Montserrat', sans-serif; margin: 10px 14px; line-height: 1.4; }
/* dev-0.13: reset-view control, matches the Leaflet zoom button aesthetic. */
.map-reset-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--color-gold); border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 6px; cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); padding: 0; }
.map-reset-btn:hover { background: var(--color-gold-light); }
@media (max-width: 768px) {
    .neighborhood-map { height: 280px; }
}

/* Responsive: stack at <=1024px, sidebar static above content */
@media (max-width: 1024px) {
    .ld-gallery-grid { grid-template-columns: 1fr; }
    .ld-g-mosaic { display: none; }
    .ld-g-hero { aspect-ratio: 4 / 3; max-height: 380px; }
    .ld-gallery-mobile-btn { display: inline-flex; margin-top: var(--space-md); }
    .ld-layout { display: flex; flex-direction: column; }
    .listing-sidebar { position: static; order: -1; animation: none; opacity: 1; transform: none; }
    .similar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ld-head h1 { font-size: 1.375rem; }
    .similar-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-md); padding-bottom: var(--space-md); }
    .similar-grid > * { flex: 0 0 280px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
    .listing-sidebar { animation: none; opacity: 1; transform: none; }
    .ld-g-hero img, .ld-g-cell img { transition: none; }
}

/* =========================================================================
   dev-0.13: progressive auth header, buyer dashboard, inline Save prompts.
   ========================================================================= */

/* Person-icon trigger + dropdown */
.auth-trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); width: auto; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); }
.auth-trigger:hover { border-color: var(--color-gold); color: var(--color-gold); }
.auth-trigger.is-auth { border-color: var(--color-gold); }
.auth-name { font-family: var(--font-secondary); font-size: 0.875rem; font-weight: var(--weight-semibold); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dev-0.13.1: the dropdown is gated by an explicit .open class, not the [hidden]
   attribute. Any author display rule overrides UA [hidden], so the attribute
   approach was fragile; the class is deterministic. */
/* dev-0.13.2: z-index lifted from 1200 to 10000 so the dropdown floats above the
   listing-detail sticky sidebar (right column, same screen region as the open
   dropdown) and every other stacking context on the page. position:fixed +
   body-appended (js/components.js) keeps it in the root stacking context. */
.auth-dropdown { position: fixed; top: calc(var(--header-height) + 8px); right: 16px; width: 300px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(30, 41, 59, 0.18); padding: var(--space-lg); z-index: 10000; display: none; }
.auth-dropdown.open { display: block; z-index: 10000 !important; animation: authDropdownIn 0.16s ease; }
@keyframes authDropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .auth-dropdown.open { animation: none; } }
.auth-panel h3 { margin: 0 0 var(--space-sm); font-size: 1.0625rem; color: var(--text-primary); }
.auth-panel form { display: flex; flex-direction: column; gap: 8px; }
.auth-panel input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: 0.9375rem; }
.auth-panel input:focus { outline: none; border-color: var(--color-gold); }
.auth-block-btn { width: 100%; justify-content: center; }
.auth-text-link { background: none; border: none; color: var(--color-gold); font-family: var(--font-secondary); font-size: 0.8125rem; cursor: pointer; padding: 8px 0 4px; text-align: left; }
.auth-text-link:hover { text-decoration: underline; }
.auth-msg { font-size: 0.8125rem; margin: 2px 0 0; min-height: 1em; }
.auth-msg.err { color: #C62828; }
.auth-msg.ok { color: #2E7D32; }
.auth-item { display: block; padding: 10px 8px; border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-secondary); font-weight: var(--weight-medium); text-align: left; width: 100%; background: none; border: none; cursor: pointer; font-size: 0.9375rem; }
.auth-item:hover { background: var(--color-gold-light); color: var(--color-gold); }
.auth-signout { color: var(--text-secondary); border-top: 1px solid var(--border-color); margin-top: 4px; border-radius: 0; }
.mobile-auth { display: flex; flex-direction: column; gap: 8px; } /* dev-0.31: drop margin-top; parent gap spaces it, keeps it aligned with the CTA */

/* Inline Save / identify / password prompts on the listing detail sidebar */
.ld-inline-prompt { margin-top: var(--space-md); padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); position: relative; }
.ld-inline-prompt p { margin: 0 0 var(--space-sm); font-size: 0.875rem; color: var(--text-secondary); }
.ld-pw-prompt { border-color: var(--color-gold); background: var(--color-gold-light); }
.ld-pw-prompt input { width: 100%; padding: 9px 11px; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: 0.9375rem; }
.ld-pw-x { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 20px; line-height: 1; color: var(--text-muted-readable); cursor: pointer; }
.ld-pw-msg { font-size: 0.8125rem; margin: 6px 0 0; min-height: 1em; }
.ld-pw-msg.err { color: #C62828; }
.ld-pw-msg.ok { color: #2E7D32; }

/* Buyer dashboard */
.dash-wrap { max-width: 1120px; margin: 0 auto; padding: calc(var(--header-height) + var(--space-xl)) var(--space-lg) var(--space-3xl); }
.dash-hero { margin-bottom: var(--space-2xl); }
.dash-eyebrow { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gold); font-weight: var(--weight-bold); margin-bottom: var(--space-xs); }
.dash-hero h1 { font-size: 2rem; color: var(--text-primary); margin: 0 0 var(--space-md); }
.dash-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-chip { background: var(--color-gold-light); color: var(--color-gold); border: 1px solid var(--color-gold); border-radius: 999px; padding: 5px 14px; font-size: 0.8125rem; font-weight: var(--weight-semibold); }
.dash-section { margin-bottom: var(--space-2xl); }
.dash-section > h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0 0 var(--space-lg); }
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.dash-section-head h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0; }
.dash-link { color: var(--color-gold); font-weight: var(--weight-semibold); font-size: 0.9375rem; }
.dash-link:hover { text-decoration: underline; }
.dash-subhead { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-readable); margin: var(--space-md) 0 var(--space-sm); }
.dash-muted { color: var(--text-muted-readable); font-size: 0.9375rem; }
.dash-empty { color: var(--text-secondary); font-size: 0.9375rem; padding: var(--space-lg); background: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: var(--radius-md); }
.dash-badge { display: inline-block; font-size: 0.75rem; font-weight: var(--weight-bold); padding: 4px 10px; border-radius: 999px; margin-bottom: 6px; }
.dash-badge-good { background: rgba(46, 125, 50, 0.12); color: #2E7D32; }
.dash-badge-up { background: rgba(198, 40, 40, 0.10); color: #C62828; }
.dash-badge-muted { background: var(--bg-secondary); color: var(--text-muted-readable); border: 1px solid var(--border-color); }
/* dev-0.14: Verified Buyer badge + amber "in review / pending" badge. */
.dash-badge-verified { display: inline-flex; align-items: center; gap: 6px; background: rgba(46, 125, 50, 0.12); color: #2E7D32; }
.dash-badge-verified .dash-rep-icon { width: 15px; height: 15px; }
.dash-badge-amber { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
/* dev-0.13.3: relaxed-fallback banner + amber stretch badges (shown only when the
   strict pass returns zero matches). */
.dash-relax-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; background: #FEF3C7; border: 1px solid #FCD34D; border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); color: #92400E; font-size: 0.9375rem; }
.dash-relax-banner .dash-link { color: #92400E; text-decoration: underline; white-space: nowrap; }
.dash-stretch-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dash-stretch-badge { display: inline-block; background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; border-radius: 999px; padding: 3px 10px; font-size: 0.6875rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.03em; }
.dash-card-delisted { opacity: 0.85; }
.dash-card-delisted .listing-content { padding: var(--space-lg); }
.dash-find-similar { margin-top: var(--space-md); }
.dash-tour { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) 0; border-bottom: 1px solid var(--border-color); }
.dash-tour-when { font-weight: var(--weight-semibold); color: var(--text-primary); min-width: 180px; }
.dash-tour-where { flex: 1; color: var(--text-secondary); }
.dash-rep-active { display: flex; align-items: center; gap: 8px; color: #2E7D32; font-weight: var(--weight-semibold); }
.dash-rep-icon { width: 22px; height: 22px; }
/* dev-0.14: Verification section card + expiry reminder + showing-request note. */
.dash-verify-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-lg); }
.dash-verify-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--space-sm); }
.dash-verify-dates { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--space-sm); }
.dash-verify-date { font-size: 0.9375rem; font-weight: 600; color: var(--color-gold, #B8956B); }
.dash-verify-reminder { background: #FEF3C7; border: 1px solid #FCD34D; border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-md); color: #92400E; font-size: 0.9375rem; }
.dash-verify-reminder .btn { margin-top: var(--space-sm); }
.dash-tour-note { flex-basis: 100%; color: var(--text-secondary); font-size: 0.875rem; font-style: italic; }
.dash-pw-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.dash-pw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; color: var(--text-secondary); }
.dash-pw-form input { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: 1rem; } /* dev-0.30.0: 16px, the iOS no-zoom floor */
.dash-pw-msg { font-size: 0.8125rem; min-height: 1em; margin: 0; }
.dash-pw-msg.err { color: #C62828; }
.dash-pw-msg.ok { color: #2E7D32; }
.dash-privacy { margin-top: var(--space-lg); font-size: 0.75rem; }
.dash-section .similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); }
@media (max-width: 640px) {
    .dash-hero h1 { font-size: 1.5rem; }
    .dash-section .similar-grid { grid-template-columns: 1fr; }
    .dash-tour-when { min-width: 0; }
}

/* =========================================================================
   dev-0.31: mobile optimization. Scope is header / nav / chat only; desktop
   layout and all copy are unchanged.
   ========================================================================= */

/* The mobile menu slides in from off-canvas (.mobile-menu transform:
   translateX(100%)). A transformed fixed element parked to the right of the
   viewport can add horizontal scroll on iOS Safari. overflow-x: clip stops it
   WITHOUT establishing a scroll container, so position: sticky (e.g. the
   listing-detail sidebar between 769-1023px) keeps working. */
@media (max-width: 1023px) {
    html { overflow-x: clip; }
}

/* Respect reduced motion on the menu slide. */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu { transition: none; }
}

/* Touch tap targets: the header controls that only appear at >=1024px still
   need a 44px hit area on touch screens (e.g. a tablet). Gate on coarse
   pointers so mouse-desktop visuals are untouched (no desktop regression). */
@media (pointer: coarse) {
    .auth-trigger { min-height: 44px; }
    .header-actions .btn-sm { min-height: 44px; }
}

/* Nora (Retell) chat widget. retell-widget-v2.js injects
   <div id="retell-widget-root"> into <body> (inline position:fixed;
   bottom/right:24px; z-index:999999) and renders its FAB + panel inside (React,
   partly shadow DOM); this id is the only stable light-DOM hook. The widget's
   own CSS already fits the OPEN panel to the viewport with safe areas
   (max-height: calc(100dvh - 72px - env(safe-area-inset-*))) and uses
   overscroll-behavior: contain, so the panel is handled; here we fix the
   LAUNCHER. */
/* z-index 999999 sits above the header (1000) and the open mobile menu (999),
   so the FAB and its auto-popup overlap the open hamburger panel. Hide the
   widget whenever the mobile menu is open (body.no-scroll tracks the menu). */
body.no-scroll #retell-widget-root { display: none !important; }
/* Lift the launcher clear of the iOS home indicator / right safe-area inset. */
#retell-widget-root {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

/* =========================================================================
   dev-0.32: three mobile fixes (Retell container, Sign-in modal, CM nav).
   Header / nav / chat only; desktop layout and all copy unchanged.
   ========================================================================= */

/* (a) Retell/Nora: constrain the widget container to the mobile viewport so the
   open panel can never exceed the screen width or sit under a safe-area inset.
   The launcher itself is positioned above; this caps the container box. */
@media (max-width: 600px) {
    #retell-widget-root {
        max-width: 100vw !important;
        max-width: 100dvw !important;
        box-sizing: border-box !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }
}

/* (b) Sign-in modal (the body-appended .auth-dropdown). On phones it spans the
   viewport width with safe margins, centers, scrolls if tall, and sits on the
   top layer above the nav (1000) and the TenantMatch card. */
@media (max-width: 600px) {
    .auth-dropdown {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--header-height) - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 100000;
    }
    .auth-dropdown.open { z-index: 100000 !important; }
}

/* ----------------------------------------
   dev-0.11.0: site-wide dark-mode completion
   Surfaces outside the earlier funnel/for-owners scope that were hardcoded
   light and never flipped, so their var-driven text rendered light-on-light in
   dark mode. Every rule here is dark-mode only; light mode is untouched.
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
    /* Account/user dropdown (the header person-icon popover). The panel was
       #fff, so the champagne item text and "Hi, [name]" label washed out.
       Border, item text, and hover already flip via the theme vars. */
    .auth-dropdown { background: #1E293B; }
    .auth-panel input { background: #263244; color: var(--color-champagne); }

    /* Listing-detail content blocks: 72% white glass -> 72% slate glass so the
       var-driven heading and body copy stay readable. Border flips via var. */
    .ld-block { background: rgba(38, 50, 68, 0.72); }

    /* Homepage hero search panel: near-opaque white card -> dark slate card,
       with its hardcoded-slate field labels lifted to champagne. The selects
       inside already flip via the .form-select vars. */
    .hero-search { background: rgba(30, 41, 59, 0.92); }
    .hero-search .form-label { color: var(--color-champagne); }
}

/* dev-0.28.0: reduced-motion coverage for the previously unguarded
   animations (the Section 16.2 motion pass). The three pre-existing guards
   earlier in this file stay untouched; under reduced motion every surface
   renders its complete final state with zero animation, and nothing that
   starts hidden for an entrance effect may remain hidden. */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll, .reveal-section { opacity: 1; transform: none; transition: none; }
    .hero-animate { opacity: 1; transform: none; }
    .hero.ready .hero-animate, .page-hero.ready .hero-animate, .about-hero.ready .hero-animate { animation: none; }
    .logo-key:hover, .logo-key.flip { animation: none; }
    .logo-key-material:hover::after { animation: none; } /* dev-0.32.0: no sweep under reduced motion */
    .ldh-shimmer-bar, .map-skeleton { animation: none; }
    .mobile-menu { transition: none; }
    .btn-primary:hover, .btn-outline:hover, .btn-outline-gold:hover, .btn-outline-slate:hover,
    .footer-social a:hover, .listing-card:hover, .cta-duo-card:hover,
    .proximity-item[data-poi-index]:hover, .personal-poi-card[data-poi-index]:hover,
    .proximity-featured[data-poi-index]:hover, .anchor-card[data-poi-index]:hover { transform: none; }
    .ld-g-hero:hover img, .ld-g-cell:hover img, .mosaic-hero:hover img { transform: none; }
}

/* ----------------------------------------
   dev-0.31.0: dashboard re-skin + account settings.
   Theme-aware via the shared vars only; motion consumes the dev-0.28.0 token
   scale (liquid-glass.css :root), which /dashboard and /account/* both link.
   New interactive targets hold the 44px floor; new inputs hold the 16px floor.
   ---------------------------------------- */
.dash-hero-top { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-md); }
.dash-hero-text { flex: 1; min-width: 220px; }
.dash-ring { position: relative; width: 76px; height: 76px; flex: 0 0 auto; }
.dash-ring svg { transform: rotate(-90deg); display: block; }
.dash-ring-track { fill: none; stroke: var(--border-color); stroke-width: 6; }
.dash-ring-fill { fill: none; stroke: var(--color-gold); stroke-width: 6; stroke-linecap: round; }
.dash-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-primary); font-weight: var(--weight-extrabold); font-size: 1.25rem; color: var(--color-gold); }
.dash-hint { color: var(--text-muted-readable); font-size: 0.9375rem; margin: 2px 0 0; }
.dash-rail { display: grid; gap: 10px; margin-bottom: var(--space-2xl); }
@media (min-width: 620px) { .dash-rail { grid-template-columns: 1fr 1fr 1fr; } }
.dash-pill { display: flex; align-items: center; gap: 11px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 13px 15px; min-height: 44px; box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; }
a.dash-pill { transition: transform var(--lg-dur-fast) var(--lg-ease-out), border-color var(--lg-dur-fast) var(--lg-ease-out); }
a.dash-pill:hover { transform: translateY(-1px); border-color: var(--color-gold); }
.dash-pill-next { border-color: var(--color-gold); background: linear-gradient(135deg, var(--color-gold-light), var(--bg-secondary)); }
.dash-pill-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--color-gold-light); display: grid; place-items: center; flex: 0 0 auto; }
.dash-pill-ic svg { width: 16px; height: 16px; stroke: var(--color-gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-pill-k { display: block; font-family: var(--font-secondary); font-size: 0.65625rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted-readable); font-weight: var(--weight-semibold); }
.dash-pill-v { display: block; font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.875rem; color: var(--text-primary); }
/* Row cards: the saved-search / tour / activity rows pick up the card rhythm
   without any markup change (the Restore form POST and delete wiring are
   untouched). The border shorthand overrides the legacy border-bottom rule. */
.dash-tour { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 13px 15px; margin-bottom: 9px; box-shadow: var(--shadow-sm); }
.dash-acct-links { display: grid; gap: 9px; margin-bottom: var(--space-lg); }
.dash-acct-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 13px 15px; min-height: 44px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--lg-dur-fast) var(--lg-ease-out), border-color var(--lg-dur-fast) var(--lg-ease-out); }
.dash-acct-row:hover { transform: translateY(-1px); border-color: var(--color-gold); }
.dash-acct-t { display: block; font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.9375rem; color: var(--text-primary); }
.dash-acct-d { display: block; font-size: 0.8125rem; color: var(--text-muted-readable); }
.dash-acct-open { color: var(--color-gold); font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.875rem; flex: 0 0 auto; }

/* Account settings surfaces */
.acct-wrap { max-width: 760px; }
.acct-hero { margin-bottom: var(--space-lg); }
.acct-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--space-xl); padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tab { flex: 0 0 auto; display: inline-flex; align-items: center; font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.8125rem; color: var(--text-muted-readable); border: 1px solid transparent; border-radius: 999px; padding: 10px 16px; min-height: 44px; text-decoration: none; white-space: nowrap; transition: background-color var(--lg-dur-fast) var(--lg-ease-out), color var(--lg-dur-fast) var(--lg-ease-out); }
.acct-tab:hover { color: var(--text-primary); background: var(--color-gold-light); }
.acct-tab[aria-current="page"] { background: var(--color-gold); color: var(--color-slate); border-color: var(--color-gold); }
.acct-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-md); padding: var(--space-lg); margin-bottom: var(--space-md); }
.acct-card h3 { font-size: 1.0625rem; color: var(--text-primary); margin: 0 0 4px; }
.acct-sub { font-size: 0.84375rem; color: var(--text-muted-readable); margin: 0 0 var(--space-md); }
.acct-note { font-size: 0.8125rem; color: var(--text-muted-readable); margin: 10px 0 0; }
.acct-row { display: flex; align-items: center; gap: var(--space-md); padding: 14px 0; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.acct-row:last-child { border-bottom: 0; padding-bottom: 0; }
.acct-row-txt { flex: 1; min-width: 190px; }
.acct-row-t { display: block; font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.90625rem; color: var(--text-primary); }
.acct-row-d { display: block; font-size: 0.8125rem; color: var(--text-muted-readable); margin-top: 1px; }
.acct-badge { display: inline-flex; align-items: center; font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.71875rem; letter-spacing: 0.05em; border-radius: 999px; padding: 5px 11px; flex: 0 0 auto; }
.acct-badge-ok { color: #2E7D32; background: rgba(46, 125, 50, 0.12); }
.acct-badge-pend { color: var(--color-gold); background: var(--color-gold-light); border: 1px solid var(--color-gold); }
.acct-locked { font-family: var(--font-secondary); font-size: 0.65625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-readable); border: 1px solid var(--border-color); border-radius: 999px; padding: 5px 10px; font-weight: var(--weight-semibold); flex: 0 0 auto; }
.acct-form { margin-top: var(--space-md); }
.acct-label { display: block; font-family: var(--font-secondary); font-size: 0.71875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted-readable); font-weight: var(--weight-semibold); margin-bottom: 6px; }
.acct-form input { width: 100%; font-family: var(--font-secondary); font-size: 1rem; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; min-height: 48px; margin-bottom: 12px; } /* 16px: the iOS no-zoom floor */
.acct-form .btn, .acct-card .btn { min-height: 44px; }
.acct-msg { font-size: 0.84375rem; margin: 10px 0 0; min-height: 1.2em; }
.acct-msg.ok { color: #2E7D32; }
.acct-msg.err { color: #C62828; }
.acct-honest { font-size: 0.84375rem; color: var(--text-secondary); background: var(--color-gold-light); border: 1px solid var(--color-gold); border-radius: 12px; padding: 10px 14px; margin: 0 0 var(--space-sm); }
.acct-pending { background: var(--color-gold-light); border: 1px dashed var(--color-gold); border-radius: 12px; padding: 12px 14px; margin: var(--space-md) 0; font-size: 0.875rem; color: var(--text-secondary); }
.acct-pending p { margin: 8px 0 0; }
.acct-sw { position: relative; width: 52px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 999px; background: transparent; cursor: pointer; padding: 0; }
.acct-sw::before { content: ""; position: absolute; left: 0; top: 7px; width: 52px; height: 30px; border-radius: 999px; background: var(--text-muted); transition: background-color var(--lg-dur-base) var(--lg-ease-out); }
.acct-sw[aria-checked="true"]::before { background: var(--color-gold); }
.acct-sw::after { content: ""; position: absolute; top: 10px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-white); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform var(--lg-dur-base) var(--lg-ease-out); }
.acct-sw[aria-checked="true"]::after { transform: translateX(22px); }
.acct-sw:disabled { opacity: 0.55; cursor: not-allowed; }
.acct-seg { display: inline-flex; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 999px; padding: 3px; gap: 2px; flex: 0 0 auto; }
.acct-seg button { font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.78125rem; border: 0; background: transparent; color: var(--text-muted-readable); border-radius: 999px; padding: 0 12px; min-height: 44px; cursor: pointer; transition: background-color var(--lg-dur-fast) var(--lg-ease-out), color var(--lg-dur-fast) var(--lg-ease-out); }
.acct-seg button.on { background: var(--color-gold); color: var(--color-slate); }
.acct-card-danger { border-color: #C86A63; }
.acct-btn-danger { font-family: var(--font-secondary); font-weight: var(--weight-semibold); font-size: 0.9375rem; background: transparent; border: 1.5px solid #A6423C; color: #A6423C; border-radius: 999px; padding: 10px 22px; min-height: 44px; cursor: pointer; }
.acct-back { margin-top: var(--space-xl); }
.acct-back .dash-link { display: inline-flex; align-items: center; min-height: 44px; }
.acct-tab:focus-visible, .acct-sw:focus-visible, .acct-seg button:focus-visible,
.acct-btn-danger:focus-visible, .dash-acct-row:focus-visible, a.dash-pill:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    .acct-badge-ok { color: #6FBF97; background: rgba(111, 191, 151, 0.14); }
    .acct-msg.ok { color: #6FBF97; }
    .acct-msg.err { color: #E0857F; }
    .acct-card-danger { border-color: #8A4A45; }
    .acct-btn-danger { border-color: #E0857F; color: #E0857F; }
}
@media (max-width: 480px) {
    .acct-seg { width: 100%; }
    .acct-seg button { flex: 1; padding: 0 8px; }
}
/* Reduced motion: every dev-0.31.0 surface renders its complete final state
   with zero animation (the ring is server-rendered static; only transitions
   exist here, and they are disabled). */
@media (prefers-reduced-motion: reduce) {
    a.dash-pill, a.dash-pill:hover, .dash-acct-row, .dash-acct-row:hover { transform: none; transition: none; }
    .acct-tab, .acct-seg button, .acct-sw::before, .acct-sw::after { transition: none; }
}

/* ----------------------------------------
   dev-0.33.0: "See how it works" tutorial block
   One component on two surfaces (the /tenantmatch intake and the homepage
   TenantMatch intro). Collapsed it is a single compact row; the panel holds a
   pre-sized 16/9 shell so metadata load can never shift layout. Motion rides
   the dev-0.28.0 tokens with literal fallbacks because index.html does not
   load liquid-glass.css. The player field is Deep Slate in both schemes
   deliberately (a video surface is a dark cinema field); the trigger row is
   theme-aware via the shared vars. ::cue carries literal brand values because
   ::cue cannot reliably read custom properties.
   ---------------------------------------- */
.tut-block { margin: 16px 0 0; }
.tut-trigger {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 44px; padding: 10px 14px; text-align: left;
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    font-family: var(--font-secondary); cursor: pointer;
    transition: border-color var(--lg-dur-base, 280ms) var(--lg-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.tut-trigger:hover { border-color: var(--color-gold); }
.tut-trigger:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.tut-play { flex: 0 0 auto; color: var(--color-gold); }
.tut-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tut-label { font-size: 16px; font-weight: var(--weight-semibold); line-height: 1.3; }
.tut-sub { font-size: 14px; line-height: 1.4; color: var(--text-muted-readable); }
.tut-chev {
    flex: 0 0 auto; color: var(--text-muted-readable);
    transition: transform var(--lg-dur-base, 280ms) var(--lg-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.tut-trigger[aria-expanded="true"] .tut-chev { transform: rotate(180deg); }
.tut-panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--lg-dur-slow, 550ms) var(--lg-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.tut-panel[hidden] { display: none; }
.tut-panel.tut-open { grid-template-rows: 1fr; }
.tut-panel-inner { overflow: hidden; min-height: 0; }
.tut-shell {
    aspect-ratio: 16 / 9; margin-top: 12px; border-radius: var(--radius-lg);
    overflow: hidden; background: #1E293B; border: 1px solid var(--border-color);
}
.tut-shell video { display: block; width: 100%; height: 100%; background: #1E293B; }
video::cue {
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #F5EFE6;
    background-color: rgba(30, 41, 59, 0.85);
}

/* dev-0.34.0: the homepage poster-led media row. The collapsed trigger drops
   the lone-card border and elevated field and sits directly on the section
   background (a SOLID var(--bg-primary), never transparent, so contrast
   always computes against a real backdrop), reading as the closing element
   of the TenantMatch intro above; the negative top margin pulls the row into
   that section's pinned bottom padding. The whole row stays the ONE button.
   The thumb field is Deep Slate in both schemes (a video surface is a dark
   cinema field, the dev-0.33.0 precedent). The sub line steps up to
   --text-secondary here because --text-muted-readable is 4.23 on the
   champagne section field, under the 4.5 floor it clears on the white card
   it was designed for. */
.tut-section .tut-block { margin-top: calc(-1 * var(--space-2xl)); }
.tut-trigger-media {
    background: var(--bg-primary);
    border-color: transparent;
    padding: 0;
    gap: 20px;
}
.tut-trigger-media:hover { border-color: transparent; }
.tut-trigger-media .tut-sub { color: var(--text-secondary); }
.tut-poster-wrap {
    position: relative; flex: 0 0 240px; border-radius: var(--radius-lg);
    overflow: hidden; background: #1E293B; border: 1px solid var(--border-color);
    transition: box-shadow var(--lg-dur-base, 280ms) var(--lg-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.tut-poster { display: block; width: 100%; height: auto; }
.tut-poster-badge {
    position: absolute; top: 50%; left: 50%; width: 48px; height: 48px;
    margin: -24px 0 0 -24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-gold); background: rgba(30, 41, 59, 0.72);
    transition: transform var(--lg-dur-base, 280ms) var(--lg-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.tut-trigger-media:hover .tut-poster-wrap,
.tut-trigger-media:focus-visible .tut-poster-wrap { box-shadow: 0 0 0 2px var(--color-gold); }
.tut-trigger-media:hover .tut-poster-badge { transform: scale(1.08); }
@media (max-width: 640px) {
    /* Poster full-width above the text; still the same single button (the
       grid re-flows the flex children, no markup change). */
    .tut-trigger-media { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
    .tut-trigger-media .tut-poster-wrap { grid-column: 1 / -1; }
}

/* dev-0.34.0: the captions toggle, created lazily with the video (zero
   collapsed footprint). Desktop native controls carry a captions menu; iOS
   Safari inline does NOT (no captions control outside fullscreen, and the
   system caption setting can override default-on), so this small brand
   control guarantees the renter a reachable switch. Label text stays
   --text-primary in BOTH pressed states for the contrast floor; gold may
   carry the state on the border and icon only. */
.tut-cc-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.tut-cc {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 14px;
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    font-family: var(--font-secondary); font-size: 14px; font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--lg-dur-base, 280ms) var(--lg-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.tut-cc:hover { border-color: var(--color-gold); }
.tut-cc:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.tut-cc svg { color: var(--text-muted-readable); }
.tut-cc[aria-pressed="true"] { border-color: var(--color-gold); }
.tut-cc[aria-pressed="true"] svg { color: var(--color-gold); }

@media (prefers-reduced-motion: reduce) {
    .tut-panel, .tut-chev, .tut-trigger, .tut-poster-wrap, .tut-poster-badge, .tut-cc { transition: none; }
    .tut-trigger-media:hover .tut-poster-badge { transform: none; }
}