/* WeReferAgents premium marketing theme — dark navy/gold/electric-blue SaaS design.
   Scoped to .wra-* classes so it layers safely on top of the legacy public-site CSS
   without needing to touch or remove any existing includes. */

:root {
    --wra-navy: #070c16;
    --wra-navy-2: #0d1526;
    --wra-navy-3: #131e36;
    --wra-border: rgba(255, 255, 255, 0.08);
    --wra-text: #eef1f7;
    --wra-text-muted: #9aa7bd;
    /* Round-3 design-language rollout: aligned to the same Bullion/Voltage/Mint values as
       app-shell.css's --wr-money/--wr-accent/--wr-success, so public and authenticated pages
       share one palette. Values only -- token names and every existing consumer are unchanged,
       and marketing.css's own dark navy/glass surface treatment is untouched here (that's a
       separate, later pass). */
    --wra-gold: #e7a83d;
    --wra-gold-dark: #c1841f;
    --wra-blue: #3e7bfa;
    --wra-green: #2fd48a;
    --wra-radius: 14px;
    --wra-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    --wra-glass-bg: rgba(19, 30, 54, 0.55);
}

* {
    box-sizing: border-box;
}

/* ---------- Scroll-in animation ---------- */
.wra-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.wra-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Glass surface ---------- */
.wra-glass {
    background: var(--wra-glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.wra-body {
    background: var(--wra-navy);
}

/* Legacy bsCustom1d35.css has a bare `main { margin-top: 157px }` rule sized for the old
   position:fixed #site-header. Our sticky header takes its own space in normal flow, so that
   spacer just leaves a dead gap above the hero -- neutralize it here (same specificity, loads later). */
main {
    margin-top: 0;
}

/* ---------- Header ---------- */
/* position: sticky, not fixed -- this is the structural fix for "header overlaps hero content,"
   not another patch on top of it. A fixed header is taken out of flow entirely and always
   overlaps whatever is at that viewport position, which is what caused every prior header/hero
   collision this page went through (baked image text bleeding through, nav text crossing hero
   copy on mobile, etc.) -- each fix was really papering over the same root cause. A sticky header
   instead occupies its own normal position in the document flow (so the hero starts right after
   it, zero overlap at page load, no clearance hacks needed anywhere) and only pins to the
   viewport top -- overlapping whatever scrolls underneath, same as any sticky header on any
   site -- once the user has actually scrolled past it. */
.wra-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(5, 8, 16, 0.6) 0%, rgba(5, 8, 16, 0.32) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

    .wra-header.scrolled {
        background: rgba(7, 11, 22, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom-color: var(--wra-border);
    }

.wra-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    height: 72px;
    padding: 0 32px;
    gap: 28px;
}

.wra-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.wra-brand-logo {
    display: block;
    width: 200px;
    height: auto;
    /* The source asset is dark-navy/gold text on an opaque white background (no dedicated
       light/dark variant) -- inverted to solid white so the wordmark stays legible against the
       dark header in both its transparent-over-hero and scrolled/solid states. Losing the gold
       accent here is a deliberate trade-off for guaranteed contrast; revisit if a proper white
       or reversed logo variant is ever produced. */
    filter: brightness(0) invert(1);
}

.wra-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.wra-nav-link {
    color: var(--wra-text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

    .wra-nav-link:focus-visible {
        outline: 2px solid var(--wra-gold);
        outline-offset: 2px;
    }

    .wra-nav-link:hover,
    .wra-nav-link.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
    }

.wra-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* .wra-nav's own content wants ~1400px unrestricted (flex:1 on .wra-nav-links can't shrink a
   nowrap flex item below its content width) -- untightened, it overflows any viewport narrower
   than that (confirmed directly at 1366px). Below 1250px the nav-links collapse into the
   hamburger menu entirely (see the 1250px breakpoint further down), so the fit problem only
   exists in this 1250-1400px band, where a laptop-width viewport should still show the full nav,
   just more compactly. Placed after the base nav rules it overrides -- same specificity, so
   source order decides which one wins.

   Threshold raised from 1400px to 1500px after the homepage redesign's nav-label changes (How
   It Works / Seller Opportunities / Agent Network / AI Tools / Resources) measured a slightly
   wider natural floor than the original 9-label set -- confirmed directly that the untightened
   nav now overflows at 1440px (a required responsive-test breakpoint) by ~18px, and that the
   tightened styling below already has margin to spare at 1440px, so extending this band upward
   is the minimal fix rather than re-shortening every label. */
@media (max-width: 1500px) {
    .wra-nav {
        padding: 0 20px;
        gap: 16px;
    }

    .wra-brand-logo {
        width: 170px;
    }

    .wra-nav-links {
        gap: 0;
    }

    .wra-nav-link {
        padding: 10px 10px;
        font-size: 0.85rem;
    }
}

/* Above 1500px the nav is un-compacted (full-size logo/links), but the header content was still
   capped at 1400px -- on wide screens (>=1920px) that squeezed .wra-nav-actions enough to wrap
   the "Join Free" label onto two lines. Give the header a little more room on very wide viewports
   so the existing, unchanged nav fits on one line. Purely additive: only applies above 1500px, so
   the <=1500px and mobile layouts are untouched. */
@media (min-width: 1501px) {
    .wra-nav {
        max-width: 1600px;
    }
}

/* Small/secondary by design: login already redirects an authenticated user to their dashboard,
   so this only shows up if they manually navigate back to the public site afterward -- it
   shouldn't compete visually with the page's own marketing CTAs the way a full .wra-btn would. */
.wra-nav-dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wra-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.wra-nav-dashboard-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.wra-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

    .wra-btn:hover {
        transform: translateY(-2px);
    }

    .wra-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
        box-shadow: 0 0 0 5px rgba(242, 182, 50, 0.35);
    }

.wra-btn-gold {
    background: linear-gradient(135deg, var(--wra-gold), var(--wra-gold-dark));
    color: #1a1400;
    box-shadow: 0 8px 24px rgba(242, 182, 50, 0.35);
}

    .wra-btn-gold:hover {
        box-shadow: 0 12px 32px rgba(242, 182, 50, 0.45);
    }

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

    .wra-btn-outline:hover {
        border-color: var(--wra-blue);
        color: var(--wra-blue);
    }

.wra-btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    border-radius: 10px;
}

.wra-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--wra-border);
    border-radius: 8px;
    color: #fff;
    padding: 8px 10px;
    font-size: 1.1rem;
}

/* ---------- Hero ---------- */
/* Clean-architecture hero: a real <img>, not a CSS background-image or object-fit crop. The
   container takes its height from the image (width:100%; height:auto preserves the file's own
   aspect ratio), so there is no container-vs-image size mismatch left to crop, zoom, stretch, or
   letterbox away -- the full artwork (headline, people, dashboard cards, testimonial, bottom
   feature row) is always entirely visible, at every viewport, by construction. */
.hero {
    position: relative;
    width: 100%;
    background: var(--wra-navy);
}

.hero-banner {
    display: block;
    width: 100%;
    height: auto;
}

/* Real, clickable buttons over the (non-functional) button graphics baked into the artwork.
   left/top/width/height are all percentages of .hero's own box, which is exactly the rendered
   image's box (see above) -- since the image is never cropped and always scales uniformly, a
   percentage offset lands on the same relative point of the artwork at every viewport size with
   no per-breakpoint tuning, unlike the pixel offsets an object-fit: cover crop would have needed. */
.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-cta {
    /* Recomputed directly against the artwork file's real pixel dimensions (1536x1024 -- the
       <img> width/height attributes previously declared 1774x887, a different aspect ratio,
       which the browser's default UA-stylesheet `aspect-ratio: attr(width)/attr(height)` mapping
       used to size .hero-banner's rendered box, distorting it away from the image's true
       proportions. That distortion silently shifted every percentage-based coordinate below out
       of alignment with the artwork's own baked-in button graphics, so the real overlay button
       rendered visibly below/left of the artwork's painted one instead of exactly on top of it --
       "two buttons" for the same action, drifting down into the testimonial panel. Fixing the
       <img> attributes to the correct 1536x1024 and re-deriving these percentages from pixel
       measurements taken directly against that file (via a canvas pixel scan, not eyeballing)
       is what actually closes the gap -- verified by rendering a test overlay against the raw
       file and confirming pixel-for-pixel alignment before applying here. */
    position: absolute;
    top: 64.35%;
    height: 4.69%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    font-size: clamp(0.72rem, 1.05vw, 1rem);
    padding: 0 clamp(10px, 1.4vw, 22px);
    border-radius: 8px;
    white-space: nowrap;
}

.hero-cta-join {
    left: 2.47%;
    width: 15.17%;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(242, 182, 50, 0.35);
}

.hero-cta-browse {
    left: 19.53%;
    width: 12.8%;
    /* Opaque, not wra-btn-outline's default transparent background -- reads as a clean
       replacement for the artwork's own baked "Browse Agents" button instead of a ghost with
       that baked text showing through underneath. */
    background: rgba(7, 12, 22, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.6);
}

    .hero-cta-browse:hover {
        background: rgba(7, 12, 22, 1);
    }

@media (max-width: 640px) {
    /* Below 640px the artwork's own button row gets too small to comfortably tap even though
       it's still perfectly visible (nothing is cropped) -- a full-width stacked pair under the
       image is a dedicated mobile treatment for tap-target size, not a re-crop of the desktop
       banner. */
    .hero-overlay {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px 20px;
        background: var(--wra-navy);
    }

    .hero-cta {
        position: static;
        width: 100%;
        height: auto;
        min-height: 48px;
        font-size: 1rem;
        padding: 12px 20px;
    }
}

.wra-stats-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
    padding: 32px 24px;
    background: #fff;
    border-bottom: 1px solid #e8ebf2;
}

.wra-stat {
    text-align: center;
}

.wra-stat strong {
    display: block;
    color: #1a2030;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wra-stat span {
    display: block;
    margin-top: 6px;
    color: #7b8494;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .wra-stats-strip {
        flex-direction: column;
        gap: 20px;
        padding: 24px 20px;
    }
}

.wra-panel {
    background: var(--wra-glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--wra-radius);
    padding: 20px;
    box-shadow: var(--wra-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Tier-1 (elevated): the one-per-page primary panel gets a gold top hairline to read as
   "the important one" instead of one of fifteen identical cards. */
.wra-panel-elevated {
    border-top: 2px solid var(--wra-gold);
    padding: 32px;
}

/* Tier-2 (flat): secondary lists (activity, recommendations) separated by whitespace only --
   not every section needs card chrome, or the page reads as "cards on a dark background." */
.wra-tier-2 {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

    .wra-tier-2:hover {
        transform: none;
    }

/* Hover-lift is opt-in (clickable cards only) -- it used to fire on every .wra-panel
   unconditionally, which implied every panel was clickable even when most aren't. */
.wra-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* Type scale: SectionHeader/CRMCard both render a bare <div class="wra-panel-title">, so the
   base rule is the larger "section title" scale (used standalone, page-level breaks like
   "Recommended Actions"); nesting inside .wra-panel (i.e. used inside a CRMCard) demotes it to
   the smaller "panel title" scale automatically -- no per-call-site changes needed anywhere. */
.wra-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #fff;
    margin: 8px 0 20px;
    font-size: 1.5rem;
}

.wra-panel .wra-panel-title {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
}

.wra-badge-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(242, 182, 50, 0.15);
    color: var(--wra-gold);
    white-space: nowrap;
}

.wra-badge-chip.blue {
    background: rgba(47, 178, 255, 0.15);
    color: var(--wra-blue);
}

/* ---------- Generic content sections ---------- */
.wra-section {
    padding: 80px 24px;
}

.wra-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.wra-section-dark {
    background: var(--wra-navy);
    color: var(--wra-text);
}

.wra-section-light {
    background: #f7f8fb;
    color: #1a2030;
}

.wra-eyebrow {
    color: var(--wra-blue);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.wra-section-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 14px;
}

.wra-section-lead {
    color: var(--wra-text-muted);
    font-size: 1.05rem;
    max-width: 640px;
    margin-bottom: 48px;
}

.wra-section-light .wra-section-lead {
    color: #566;
}

.wra-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.wra-step-card {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 28px 24px;
}

.wra-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wra-gold), var(--wra-gold-dark));
    color: #1a1400;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.wra-step-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 8px;
}

.wra-step-copy {
    color: var(--wra-text-muted);
    font-size: 0.92rem;
}

.wra-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.wra-feature-card {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 26px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

    .wra-feature-card:hover {
        transform: translateY(-3px);
        border-color: rgba(47, 178, 255, 0.4);
    }

.wra-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(47, 178, 255, 0.12);
    color: var(--wra-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.wra-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.wra-feature-card p {
    color: var(--wra-text-muted);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.wra-feature-link {
    color: var(--wra-blue);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.wra-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---------- Social proof ---------- */
.wra-social-proof-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    gap: 28px;
}

.wra-social-proof-stat {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 26px;
    color: var(--wra-text);
}

.wra-social-proof-stat-value {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--wra-gold);
    margin-bottom: 8px;
}

.wra-social-proof-stat-label {
    color: var(--wra-text-muted);
    font-size: 0.9rem;
}

.wra-social-proof-col {
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: var(--wra-radius);
    padding: 26px;
}

    .wra-social-proof-col h4 {
        color: #1a2030;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 14px;
    }

.wra-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .wra-recent-list li {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: baseline;
        padding: 8px 0;
        border-bottom: 1px solid #eef0f5;
        font-size: 0.88rem;
    }

        .wra-recent-list li:last-child {
            border-bottom: none;
        }

.wra-recent-name {
    color: #1a2030;
    font-weight: 700;
}

.wra-recent-loc {
    color: #566;
}

.wra-recent-when {
    color: var(--wra-blue);
    font-size: 0.78rem;
    margin-left: auto;
}

.wra-brokerage-line {
    color: #3a4256;
    font-size: 0.92rem;
    line-height: 1.7;
}

.wra-testimonial-grid .wra-testimonial-card {
    max-width: none;
    flex-direction: column;
}

/* ---------- Final CTA band ---------- */
.wra-cta-band {
    background: linear-gradient(135deg, #10192e, #0b1220);
    border-top: 1px solid var(--wra-border);
    border-bottom: 1px solid var(--wra-border);
    padding: 70px 24px;
    text-align: center;
}

.wra-cta-band h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 12px;
}

.wra-cta-band p {
    color: var(--wra-text-muted);
    margin-bottom: 28px;
}

/* ---------- Page hero (sub-pages: Pricing/About/Contact/Privacy/Terms) ---------- */
.wra-page-hero {
    background: linear-gradient(180deg, var(--wra-navy) 0%, var(--wra-navy-2) 100%);
    color: #fff;
    padding: 128px 24px 64px;
    text-align: center;
}

.wra-page-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    margin-bottom: 12px;
}

.wra-page-hero p {
    color: var(--wra-text-muted);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.05rem;
}

.wra-content-section {
    background: #fff;
    color: #1a2030;
    padding: 60px 24px;
}

.wra-content-inner {
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.7;
}

    .wra-content-inner h2 {
        margin-top: 36px;
        margin-bottom: 12px;
        font-weight: 800;
        font-size: 1.4rem;
    }

    .wra-content-inner p, .wra-content-inner li {
        color: #3a4256;
    }

/* ---------- Pricing ---------- */
.wra-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.wra-price-card {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 26px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .wra-price-card:hover {
        transform: translateY(-4px);
        border-color: rgba(242, 182, 50, 0.4);
        box-shadow: var(--wra-shadow);
    }

.wra-price-card {
    position: relative;
}

.wra-price-card.featured {
    border-color: var(--wra-gold);
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(242, 182, 50, 0.35), 0 20px 44px rgba(242, 182, 50, 0.18);
    padding: 34px 28px;
    transform: scale(1.04);
    z-index: 1;
}

    .wra-price-card.featured:hover {
        transform: scale(1.04) translateY(-4px);
    }

.wra-price-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wra-gold);
    color: #1a1400;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(242, 182, 50, 0.4);
}

.wra-price-value {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 10px 0;
}

.wra-price-value span {
    font-size: 0.9rem;
    color: var(--wra-text-muted);
    font-weight: 500;
}

.wra-price-list {
    list-style: none;
    padding: 0;
    margin: 18px 0;
    text-align: left;
    font-size: 0.85rem;
    color: var(--wra-text-muted);
    flex-grow: 1;
}

    .wra-price-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 0;
        line-height: 1.4;
        border-bottom: 1px solid var(--wra-border);
    }

    .wra-price-list li i {
        color: var(--wra-gold);
        font-size: 0.78rem;
        margin-top: 3px;
        flex-shrink: 0;
    }

/* ---------- Pricing comparison table ---------- */
.wra-compare-wrap {
    margin-top: 32px;
    overflow-x: auto;
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
}

.wra-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

    .wra-compare-table th, .wra-compare-table td {
        padding: 12px 16px;
        text-align: center;
        border-bottom: 1px solid var(--wra-border);
        color: var(--wra-text);
    }

    .wra-compare-table th:first-child, .wra-compare-table td:first-child {
        text-align: left;
        color: var(--wra-text);
        font-weight: 600;
    }

    .wra-compare-table thead th {
        color: var(--wra-text-muted);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: var(--wra-navy-2);
        position: sticky;
        top: 0;
    }

    .wra-compare-table tbody tr:nth-child(odd) {
        background: rgba(255, 255, 255, 0.02);
    }

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

.wra-compare-yes {
    color: var(--wra-gold);
}

.wra-compare-no {
    color: var(--wra-text-muted);
    opacity: 0.5;
}

.wra-pricing-grid-6 {
    grid-template-columns: repeat(3, 1fr);
}

.wra-price-card {
    display: flex;
    flex-direction: column;
}

.wra-price-card-desc {
    color: var(--wra-text-muted);
    font-size: 0.82rem;
    min-height: 34px;
}

.price-annual {
    display: none;
}

.wra-pricing-grid.annual .price-monthly {
    display: none;
}

.wra-pricing-grid.annual .price-annual {
    display: inline;
}

/* ---------- Pricing toggle ---------- */
.wra-pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 36px;
    color: var(--wra-text-muted);
    font-weight: 600;
}

.wra-toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    cursor: pointer;
    padding: 0;
}

.wra-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wra-blue);
    transition: transform 0.2s ease;
}

.wra-toggle-switch[aria-checked="true"] .wra-toggle-knob {
    transform: translateX(24px);
    background: var(--wra-gold);
}

/* ---------- Add-ons ---------- */
.wra-addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.wra-addon-card {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 20px;
    text-align: center;
}

    .wra-addon-card h4 {
        color: #1a2030;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

.wra-addon-price {
    color: var(--wra-gold);
    font-size: 1.3rem;
    font-weight: 800;
}

    .wra-addon-price span {
        color: var(--wra-text-muted);
        font-size: 0.8rem;
        font-weight: 500;
    }

.wra-section-light .wra-addon-card h4 {
    color: #1a2030;
}

.wra-section-light .wra-addon-card {
    background: #fff;
    border: 1px solid #e4e7ee;
}

/* ---------- FAQ ---------- */
.wra-faq-list {
    max-width: 800px;
}

.wra-faq-item {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 18px 22px;
    margin-bottom: 14px;
}

    .wra-faq-item summary {
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

        .wra-faq-item summary::-webkit-details-marker {
            display: none;
        }

        .wra-faq-item summary::after {
            content: "+";
            float: right;
            color: var(--wra-blue);
            font-size: 1.2rem;
        }

    .wra-faq-item[open] summary::after {
        content: "\2212";
    }

    .wra-faq-item p {
        color: var(--wra-text-muted);
        font-size: 0.9rem;
        margin-top: 12px;
        margin-bottom: 0;
    }

/* ---------- Contact ---------- */
.wra-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.wra-form-control {
    width: 100%;
    padding: 12px 14px;
    border-radius: 9px;
    border: 1px solid #d6dbe6;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

/* ---------- List Your Business form ---------- */
.wra-lyb-form {
    max-width: 900px;
}

.wra-lyb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
}

.wra-lyb-full {
    grid-column: 1 / -1;
}

.wra-lyb-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    background: #f7f8fb;
    border: 1px solid #e4e7ee;
    border-radius: var(--wra-radius);
    padding: 18px;
    margin-bottom: 16px;
}

.wra-lyb-category-group strong {
    display: block;
    color: #1a2030;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.wra-lyb-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #3a4256;
    margin-bottom: 6px;
    cursor: pointer;
}

/* ---------- Plan selection cards (radio-styled price cards) ---------- */
.wra-plan-select-card {
    display: block;
    cursor: pointer;
    position: relative;
}

    .wra-plan-select-card input[type="radio"] {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 18px;
        height: 18px;
        accent-color: var(--wra-gold);
    }

    .wra-plan-select-card:has(input:checked) {
        border-color: var(--wra-gold);
        box-shadow: 0 0 0 2px rgba(242, 182, 50, 0.4), var(--wra-shadow);
    }

/* ---------- Footer ---------- */
.wra-footer {
    background: #05090f;
    color: var(--wra-text-muted);
    padding: 64px 24px 24px;
}

.wra-footer-inner {
    max-width: 1320px;
    margin: 0 auto;
}

.wra-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
    gap: 32px;
    margin-bottom: 40px;
}

.wra-footer-brand {
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.wra-footer-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 18px;
}

.wra-footer-social {
    display: flex;
    gap: 10px;
}

    .wra-footer-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--wra-border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--wra-text-muted);
        text-decoration: none;
        font-size: 0.85rem;
    }

        .wra-footer-social a:hover {
            color: #fff;
            border-color: var(--wra-blue);
        }

.wra-footer-col h4 {
    color: #fff;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

.wra-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .wra-footer-col ul li {
        margin-bottom: 10px;
    }

    .wra-footer-col a {
        color: var(--wra-text-muted);
        text-decoration: none;
        font-size: 0.88rem;
    }

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

.wra-footer-bottom {
    border-top: 1px solid var(--wra-border);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
}

.wra-footer-bottom a {
    color: var(--wra-text-muted);
    text-decoration: none;
    margin-left: 16px;
}

    .wra-footer-bottom a:hover {
        color: #fff;
    }

/* ---------- Directory pages (Find Agents / Vendor Marketplace / Market Ownership) ---------- */
.wra-filter-bar {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 20px;
    margin-bottom: 32px;
}

.wra-filter-bar label {
    font-size: 0.78rem;
    color: var(--wra-text-muted);
    margin-bottom: 6px;
    display: block;
}

.wra-filter-bar .form-control,
.wra-filter-bar .form-select {
    background: var(--wra-navy-2);
    border: 1px solid var(--wra-border);
    color: #fff;
}

    .wra-filter-bar .form-control::placeholder {
        color: var(--wra-text-muted);
    }

    .wra-filter-bar .form-control:focus,
    .wra-filter-bar .form-select:focus {
        background: var(--wra-navy-2);
        border-color: var(--wra-blue);
        color: #fff;
        box-shadow: 0 0 0 3px rgba(47, 178, 255, 0.15);
    }

.wra-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.wra-directory-card {
    position: relative;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 24px;
    text-align: center;
    text-decoration: none;
    color: var(--wra-text);
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .wra-directory-card:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 178, 255, 0.4);
        box-shadow: var(--wra-shadow);
        color: var(--wra-text);
    }

.wra-directory-card-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 14px;
    border: 3px solid var(--wra-border);
}

.wra-directory-card h3 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.wra-directory-card .loc {
    color: var(--wra-text-muted);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.wra-directory-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
}

/* ---------- Featured Agents (real agents pulled from Profile) ---------- */
.wra-avatar-initials,
.wra-avatar-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    border: 3px solid var(--wra-border);
}

.wra-avatar-photo {
    object-fit: cover;
    background: var(--wra-navy-2);
}

.wra-featured-agent-card {
    position: relative;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 24px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .wra-featured-agent-card:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 178, 255, 0.4);
        box-shadow: var(--wra-shadow);
    }

    .wra-featured-agent-card h3 {
        color: #fff;
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .wra-featured-agent-card .brokerage {
        color: var(--wra-blue);
        font-size: 0.82rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .wra-featured-agent-card .loc {
        color: var(--wra-text-muted);
        font-size: 0.85rem;
        margin-bottom: 12px;
    }

.wra-featured-agent-meta {
    text-align: left;
    font-size: 0.82rem;
    color: var(--wra-text-muted);
    margin-bottom: 14px;
}

    .wra-featured-agent-meta div {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid var(--wra-border);
    }

        .wra-featured-agent-meta div:last-child {
            border-bottom: none;
        }

    .wra-featured-agent-meta strong {
        color: var(--wra-text);
        font-weight: 600;
    }

.wra-featured-agent-actions {
    display: flex;
    gap: 10px;
}

    .wra-featured-agent-actions .wra-btn {
        flex: 1;
        padding: 9px 12px;
        font-size: 0.82rem;
    }

/* ---------- Featured Agents v3 (landing page, premium-marketplace-style cards) ----------
   Light section (.wra-section-light, reused from the "Platform" section elsewhere on this page)
   + genuinely white cards -- a deliberate departure from every other card on this dark-themed
   landing page, per an explicit UI/UX redesign request: reduce visual weight, shrink the oversized
   portrait treatment, and read as a Zillow/Compass/Airbnb/LinkedIn-style directory card rather
   than a marketing tile. Small circular photo capped well under 25% of card height, name/brokerage/
   location/specialties/service-areas stacked below it, full-width primary button pinned to the
   bottom so button position lines up across every card regardless of how much optional text
   (specialties/service areas are real, sometimes-empty data) a given agent has. */
.wra-featured-section {
    background: #f7f8fb;
}

.wra-featured-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media (max-width: 1279px) {
    .wra-featured-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1023px) {
    .wra-featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .wra-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 559px) {
    .wra-featured-grid {
        grid-template-columns: 1fr;
    }
}

.wra-featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.07);
    border-radius: 18px;
    padding: 24px 18px 20px;
    /* Grid items default to min-width: auto, which for a flex container resolves to the max
       min-content width of its children (e.g. a long agent/brokerage name with no natural break
       point) -- that silently overrides the grid's own 1fr track sizing and pushes the whole
       grid wider than its container ("grid blowout"), which is what caused real horizontal page
       overflow at the 3-column (768-1023px) breakpoint. min-width: 0 lets this item shrink to
       its actual track width, so the white-space:nowrap/text-overflow:ellipsis rules already on
       .wra-featured-card-brokerage/-loc/-areas below can actually take effect instead of forcing
       the card wider. */
    min-width: 0;
    /* A floor, not a fixed height -- content (2 chips + 3 service areas) can still push a card
       taller, and CSS Grid's default row stretch then keeps every card in that row equally tall.
       The floor exists so the ~108px circular photo never exceeds ~25% of the card even for the
       shortest-content agents (no specialties/service areas on file), and so every row -- not
       just cards within one row -- reads as a consistent, premium card size. */
    min-height: 460px;
    text-decoration: none;
    color: #101828;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .wra-featured-card:hover {
        transform: translateY(-6px);
        border-color: var(--wra-blue);
        color: #101828;
        box-shadow: 0 0 0 3px rgba(47, 178, 255, 0.12), 0 20px 40px rgba(16, 24, 40, 0.12);
    }

@media (max-width: 1023px) {
    .wra-featured-card {
        min-height: 380px;
    }
}

@media (max-width: 559px) {
    .wra-featured-card {
        min-height: 340px;
    }
}

/* Circular photo, capped at 100-120px (desktop) and shrinking at each breakpoint below -- always
   a small fraction of total card height (well under the 25% cap against the card's min-height),
   never the dominant element the way the old 4:5 portrait frame was. */
.wra-featured-card-photo {
    width: 108px;
    height: 108px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 14px;
    background: #eef1f7;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08);
}

    .wra-featured-card-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 22%; /* biases the crop toward the upper portion of the photo, where a face typically sits, without ever stretching the image */
        display: block;
    }

@media (max-width: 1023px) {
    .wra-featured-card-photo {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 559px) {
    .wra-featured-card-photo {
        width: 80px;
        height: 80px;
    }
}

.wra-featured-card-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}

    .wra-featured-card-name h3 {
        font-size: 1rem;
        font-weight: 700;
        color: #101828;
        margin: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

.wra-featured-card-icon {
    flex: none;
    font-size: 0.85rem;
}

    .wra-featured-card-icon.verified {
        color: var(--wra-blue);
    }

    .wra-featured-card-icon.featured {
        color: var(--wra-gold-dark);
    }

.wra-featured-card-brokerage {
    width: 100%;
    margin-top: 4px;
    color: var(--wra-blue);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wra-featured-card-loc {
    width: 100%;
    margin-top: 2px;
    color: #667085;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .wra-featured-card-loc i {
        font-size: 0.72rem;
        margin-right: 3px;
    }

.wra-featured-card-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.wra-featured-card-chip {
    background: rgba(47, 178, 255, 0.09);
    color: #1c7fb8;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wra-featured-card-areas {
    width: 100%;
    margin-top: 8px;
    color: #8a94a6;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wra-featured-card-actions {
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
}

.wra-featured-card-btn {
    width: 100%;
    height: 42px;
}

.wra-featured-agents-footer {
    text-align: center;
    margin-top: 28px;
}

.wra-empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--wra-text-muted);
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
}

    .wra-empty-state-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 18px;
        border-radius: 50%;
        background: rgba(47, 178, 255, 0.12);
        color: var(--wra-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
    }

    .wra-empty-state h3 {
        color: #fff;
        font-size: 1.15rem;
        margin-bottom: 8px;
    }

    .wra-empty-state p {
        margin-bottom: 20px;
    }

/* ---------- Category tiles ---------- */
.wra-category-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wra-category-tile {
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    color: var(--wra-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .wra-category-tile:hover {
        transform: translateY(-2px);
        border-color: var(--wra-blue);
        color: var(--wra-blue);
    }

.wra-market-card {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .wra-market-card:hover {
        transform: translateY(-4px);
        border-color: rgba(47, 178, 255, 0.35);
        box-shadow: var(--wra-shadow);
    }

    .wra-market-card h3 {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .wra-market-card .spec {
        color: var(--wra-text-muted);
        font-size: 0.88rem;
        margin-bottom: 18px;
    }

.wra-market-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--wra-border);
}

    .wra-market-tier-row:last-child {
        border-bottom: none;
    }

.wra-market-tier-name {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.wra-market-tier-meta {
    color: var(--wra-text-muted);
    font-size: 0.78rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .wra-directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .wra-social-proof-grid {
        grid-template-columns: 1fr;
    }

    .wra-pricing-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wra-steps, .wra-features-grid, .wra-testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wra-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wra-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* 9 nowrap nav link labels have a hard combined minimum content width that padding/font-size
   trimming can reduce but not make elastic -- the tightened spacing above (1300-1400px band)
   has a fixed natural floor of ~1260px (measured directly: nav-actions' right edge lands at
   x=1260 in a 1280px viewport, ~20px to spare), not a range that keeps shrinking with the
   viewport. Below that floor, tightened-but-visible nav overflows exactly like the untightened
   version did, just starting at a narrower width -- confirmed directly at 820px (360px of
   overflow) and, when this breakpoint was first set to 1300px, at 1280px too (1280px is
   Playwright's own "Desktop Chrome" default viewport, and the previous 1300px threshold
   collapsed the nav right at that exact width, breaking every test written against a normally-
   visible desktop nav). 1250px sits with margin on both sides: safely below 1280 (so that
   viewport keeps the tightened *visible* nav) and safely above the ~1260px floor (so anything
   narrower collapses instead of silently overflowing). */
@media (max-width: 1250px) {
    .wra-nav-links, .wra-nav-actions .wra-btn-outline {
        display: none;
    }

    .wra-nav-toggle {
        display: inline-flex;
    }

    /* Without this, Login/Dashboard (the outline button living in .wra-nav-actions rather
       than .wra-nav-links) stays hidden even with the menu open -- anonymous mobile visitors
       would have no way to reach Login at all, only the "Join Free" gold button. */
    .wra-nav.open .wra-nav-actions .wra-btn-outline {
        display: inline-flex;
    }

    .wra-nav.open .wra-nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--wra-navy-2);
        padding: 12px 24px 20px;
        border-bottom: 1px solid var(--wra-border);
    }
}

@media (max-width: 768px) {
    .wra-brand-logo {
        width: 150px;
    }

    .wra-steps, .wra-features-grid, .wra-testimonial-grid, .wra-pricing-grid {
        grid-template-columns: 1fr;
    }

    .wra-footer-grid {
        grid-template-columns: 1fr;
    }

    .wra-directory-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Admin ---------- */
.wra-admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.wra-admin-subnav a {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    color: var(--wra-text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

    .wra-admin-subnav a:hover {
        color: #fff;
        border-color: var(--wra-blue);
    }

    .wra-admin-subnav a.active {
        color: #1a1400;
        background: var(--wra-gold);
        border-color: var(--wra-gold);
    }

.wra-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px;
}

.wra-stat-tile {
    position: relative;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 22px;
    text-align: center;
}

    .wra-stat-tile .value {
        font-size: 2rem;
        font-weight: 800;
        color: #fff;
        display: block;
    }

    .wra-stat-tile .label {
        color: var(--wra-text-muted);
        font-size: 0.82rem;
        margin-top: 4px;
    }

    .wra-stat-tile a {
        display: inline-block;
        margin-top: 12px;
        color: var(--wra-blue);
        font-size: 0.8rem;
        font-weight: 700;
        text-decoration: none;
    }

.wra-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
}

.wra-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

    .wra-table th, .wra-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--wra-border);
        color: var(--wra-text);
        white-space: nowrap;
    }

    .wra-table th {
        color: var(--wra-text-muted);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: var(--wra-navy-2);
    }

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

.wra-status-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

    .wra-status-pill.green { background: rgba(52, 211, 153, 0.15); color: var(--wra-green); }
    .wra-status-pill.gold { background: rgba(242, 182, 50, 0.15); color: var(--wra-gold); }
    .wra-status-pill.red { background: rgba(239, 68, 68, 0.15); color: #f87171; }
    .wra-status-pill.blue { background: rgba(47, 178, 255, 0.15); color: var(--wra-blue); }

.wra-btn-sm {
    padding: 6px 14px;
    font-size: 0.78rem;
    border-radius: 7px;
}

.wra-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.wra-form-row label {
    color: var(--wra-text-muted);
    font-size: 0.78rem;
    min-width: 90px;
}

.wra-form-row .wra-form-control {
    flex: 1;
    min-width: 120px;
    margin-bottom: 0;
    background: var(--wra-navy-2);
    border-color: var(--wra-border);
    color: #fff;
}

/* ---------- Shared dashboard components (Components/Shared/) ---------- */
.wra-stat-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 178, 255, 0.12);
    color: var(--wra-blue);
    font-size: 1.1rem;
    margin: 0 auto 12px;
}

.wra-loading-panel {
    text-align: center;
    padding: 48px 24px;
    color: var(--wra-text-muted);
}

.wra-loading-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid var(--wra-border);
    border-top-color: var(--wra-gold);
    animation: wra-spin 0.8s linear infinite;
}

@keyframes wra-spin {
    to { transform: rotate(360deg); }
}

.wra-plan-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.wra-plan-badge.free { background: rgba(154, 167, 189, 0.15); color: var(--wra-text-muted); }
.wra-plan-badge.pro { background: rgba(47, 178, 255, 0.15); color: var(--wra-blue); }
.wra-plan-badge.partner { background: rgba(242, 182, 50, 0.15); color: var(--wra-gold); }
.wra-plan-badge.elite {
    background: linear-gradient(135deg, var(--wra-gold), var(--wra-gold-dark));
    color: #1a1400;
    box-shadow: 0 0 12px rgba(242, 182, 50, 0.5);
}

.wra-completion-card .wra-completion-percent {
    color: var(--wra-gold);
    font-weight: 800;
}

.wra-completion-bar {
    background: var(--wra-navy-2);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.wra-completion-fill {
    background: linear-gradient(135deg, var(--wra-gold), var(--wra-gold-dark));
    height: 100%;
    transition: width 0.4s ease;
}

.wra-completion-tips {
    color: var(--wra-text-muted);
    font-size: 0.85rem;
    margin-top: 12px;
}

.wra-completion-action {
    display: inline-flex;
    margin-top: 14px;
}

.wra-quick-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 16px 18px;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

    .wra-quick-action-card:hover {
        transform: translateY(-2px);
        border-color: rgba(47, 178, 255, 0.35);
    }

    .wra-quick-action-card h4 {
        color: #fff;
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .wra-quick-action-card p {
        color: var(--wra-text-muted);
        font-size: 0.8rem;
        margin: 0;
    }

.wra-quick-action-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(242, 182, 50, 0.12);
    color: var(--wra-gold);
    font-size: 1.1rem;
}

.wra-quick-action-arrow {
    margin-left: auto;
    color: var(--wra-text-muted);
    flex-shrink: 0;
}

.wra-recommendation-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 14px;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

    .wra-recommendation-card:hover {
        transform: translateY(-2px);
        border-color: rgba(47, 178, 255, 0.35);
    }

    .wra-recommendation-card img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .wra-recommendation-card h4 {
        color: #fff;
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .wra-recommendation-card .loc {
        color: var(--wra-text-muted);
        font-size: 0.78rem;
        margin-bottom: 6px;
    }

.wra-activity-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .wra-activity-feed li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--wra-border);
    }

        .wra-activity-feed li:last-child {
            border-bottom: none;
        }

.wra-activity-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 178, 255, 0.12);
    color: var(--wra-blue);
    font-size: 0.85rem;
}

.wra-activity-text {
    flex: 1;
    color: var(--wra-text);
    font-size: 0.88rem;
}

.wra-activity-time {
    color: var(--wra-text-muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

/* ==========================================================================
   Dashboard shell (DashboardLayout / SidebarNav / TopBar) -- the authenticated
   app experience. Public marketing pages stay on MainLayout and are untouched.
   ========================================================================== */

.wra-dashboard-shell {
    display: flex;
    min-height: 100vh;
    background: var(--wra-navy);
}

/* ---------- Sidebar ---------- */
.wra-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--wra-navy-2);
    border-right: 1px solid var(--wra-border);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    z-index: 100;
}

.wra-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px;
    border-bottom: 1px solid var(--wra-border);
}

.wra-sidebar-brand {
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}

.wra-sidebar-collapse-btn {
    background: transparent;
    border: 1px solid var(--wra-border);
    color: var(--wra-text-muted);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .wra-sidebar-collapse-btn:hover {
        color: #fff;
        border-color: var(--wra-blue);
    }

.wra-sidebar-nav {
    padding: 16px 12px;
    flex: 1;
}

.wra-sidebar-section-label {
    display: block;
    color: var(--wra-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 12px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.wra-sidebar-nav ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.wra-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--wra-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

    .wra-sidebar-link i {
        width: 18px;
        text-align: center;
        flex-shrink: 0;
        font-size: 0.9rem;
    }

    .wra-sidebar-link:hover {
        background: var(--wra-navy-3);
        color: #fff;
    }

    .wra-sidebar-link.active {
        background: rgba(242, 182, 50, 0.12);
        color: var(--wra-gold);
    }

/* Collapsed (desktop icon-only) state */
.wra-sidebar-collapsed .wra-sidebar {
    width: 76px;
}

    .wra-sidebar-collapsed .wra-sidebar-brand,
    .wra-sidebar-collapsed .wra-sidebar-section-label,
    .wra-sidebar-collapsed .wra-sidebar-link span {
        display: none;
    }

    .wra-sidebar-collapsed .wra-sidebar-header {
        justify-content: center;
    }

    .wra-sidebar-collapsed .wra-sidebar-collapse-btn i {
        transform: rotate(180deg);
    }

    .wra-sidebar-collapsed .wra-sidebar-link {
        justify-content: center;
    }

/* ---------- Main column ---------- */
.wra-dashboard-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wra-dashboard-content {
    flex: 1;
}

    /* The public wra-page-hero reserves top space to clear MainLayout's fixed
       header; there is no fixed header inside the dashboard shell (the top bar
       sits in normal flow), so that reserved space would just be a dead gap. */
    .wra-dashboard-content .wra-page-hero {
        padding-top: 48px;
    }

/* ---------- Top bar ---------- */
.wra-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(13, 21, 38, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--wra-border);
    position: sticky;
    top: 0;
    z-index: 90;
}

.wra-topbar-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--wra-border);
    color: #fff;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.wra-topbar-search {
    flex: 1;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: 10px;
    padding: 9px 14px;
    color: var(--wra-text-muted);
}

    .wra-topbar-search input {
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        font-size: 0.85rem;
        width: 100%;
    }

        .wra-topbar-search input::placeholder {
            color: var(--wra-text-muted);
        }

.wra-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wra-topbar-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    color: var(--wra-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .wra-topbar-icon-btn:hover {
        color: #fff;
        border-color: var(--wra-blue);
    }

.wra-topbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--wra-gold);
    color: #1a1400;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wra-topbar-dropdown {
    position: relative;
}

.wra-topbar-dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: var(--wra-navy-2);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    box-shadow: var(--wra-shadow);
    padding: 10px;
    z-index: 200;
}

.wra-topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--wra-border);
    border-radius: 999px;
    padding: 5px 12px 5px 5px;
    color: #fff;
    cursor: pointer;
}

    .wra-topbar-user-btn img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }

    .wra-topbar-user-name {
        font-size: 0.82rem;
        font-weight: 600;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wra-topbar-user-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .wra-topbar-user-panel a,
    .wra-topbar-user-panel button {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
        color: var(--wra-text);
        text-decoration: none;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

        .wra-topbar-user-panel a:hover,
        .wra-topbar-user-panel button:hover {
            background: var(--wra-navy-3);
            color: #fff;
        }

    .wra-topbar-user-panel form {
        margin: 0;
    }

/* ---------- Breadcrumbs ---------- */
.wra-breadcrumbs {
    padding: 14px 24px 0;
    font-size: 0.8rem;
    color: var(--wra-text-muted);
}

    .wra-breadcrumbs a {
        color: var(--wra-text-muted);
        text-decoration: none;
    }

        .wra-breadcrumbs a:hover {
            color: var(--wra-blue);
        }

    .wra-breadcrumb-sep {
        margin: 0 8px;
        opacity: 0.5;
    }

    .wra-breadcrumb-current {
        color: #fff;
        font-weight: 600;
    }

/* ---------- Mobile drawer ---------- */
@media (max-width: 992px) {
    .wra-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        height: 100vh;
        transition: left 0.25s ease;
        box-shadow: var(--wra-shadow);
    }

    .wra-sidebar-collapse-btn {
        display: none;
    }

    .wra-sidebar-mobile-open .wra-sidebar {
        left: 0;
    }

    .wra-sidebar-mobile-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }

    /* .wra-topbar is a position:sticky stacking context of its own (z-index:90), so raising a
       child's z-index alone can't lift it above .wra-sidebar (z-index:100) -- the topbar's own
       z-index has to beat the sidebar's, or the open drawer covers the toggle button that's
       supposed to close it. */
    .wra-topbar {
        z-index: 150;
    }

    .wra-topbar-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wra-topbar-search {
        display: none;
    }

    .wra-topbar-user-name {
        display: none;
    }
}

/* ---------- MetricCard ---------- */
.wra-metric-tile {
    position: relative;
}

.wra-metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 0.74rem;
    font-weight: 700;
}

    .wra-metric-trend.up {
        color: var(--wra-green);
    }

    .wra-metric-trend.down {
        color: #f87171;
    }

/* ---------- ChartCard ---------- */
.wra-chart-card {
    width: 100%;
}

.wra-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.wra-chart-axis {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
}

.wra-chart-bar-fill {
    fill: var(--wra-gold);
    transition: opacity 0.15s ease;
}

    .wra-chart-bar-fill:hover {
        opacity: 0.8;
    }

.wra-chart-value-label {
    fill: var(--wra-text-muted, #94a3b8);
    font-size: 11px;
    font-weight: 700;
}

.wra-chart-category-label {
    fill: var(--wra-text-muted, #94a3b8);
    font-size: 10px;
}

.wra-chart-caption {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--wra-text-muted, #94a3b8);
    text-align: center;
}

.wra-chart-line-area {
    fill: var(--wra-gold);
    opacity: 0.12;
}

.wra-chart-line-stroke {
    stroke: var(--wra-gold);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wra-chart-line-marker {
    fill: var(--wra-navy, #0d1526);
    stroke: var(--wra-gold);
    stroke-width: 2;
}

/* ---------- Dashboard hero CTA row ---------- */
.wra-dashboard-hero-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}

.wra-dashboard-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Secondary (preview/sample) KPI row ---------- */
.wra-stat-grid-secondary {
    margin-top: 14px;
    opacity: 0.88;
}

    .wra-stat-grid-secondary .wra-stat-tile {
        padding: 16px;
    }

.wra-stat-tile-preview {
    position: relative;
}

.wra-preview-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--wra-text-muted, #94a3b8);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* ---------- SparklineCard ---------- */
.wra-sparkline-tile {
    position: relative;
}

.wra-sparkline-svg {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 10px;
}

.wra-sparkline-stroke {
    stroke: var(--wra-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Match score chip (RecommendationCard) ---------- */
.wra-match-score-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(242, 182, 50, 0.16);
    color: var(--wra-gold);
    border: 1px solid rgba(242, 182, 50, 0.35);
}

/* ---------- AI Insights panel ---------- */
.wra-ai-insights-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wra-ai-insight-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wra-ai-insight-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(242, 182, 50, 0.14);
    color: var(--wra-gold);
    font-size: 0.85rem;
}

.wra-ai-insight-item p {
    margin: 0;
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.86rem;
    line-height: 1.5;
    padding-top: 6px;
}

/* ---------- Subscription usage gauge ---------- */
.wra-usage-gauge {
    margin-top: 14px;
}

.wra-usage-gauge-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--wra-text-muted, #94a3b8);
    margin-bottom: 6px;
}

.wra-usage-gauge-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.wra-usage-gauge-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wra-gold), var(--wra-gold-dark, var(--wra-gold)));
}

/* ---------- ListingPerformanceCard ---------- */
.wra-listing-count-badge {
    background: rgba(242, 182, 50, 0.16);
    color: var(--wra-gold);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 2px 10px;
    border-radius: 999px;
}

.wra-listing-mini-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .wra-listing-mini-list a {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--wra-border);
        text-decoration: none;
        transition: border-color 0.15s ease;
    }

        .wra-listing-mini-list a:hover {
            border-color: var(--wra-gold);
        }

.wra-listing-mini-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wra-listing-mini-meta {
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.wra-listing-empty-hint {
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.86rem;
    margin: 0 0 16px;
}

.wra-listing-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* ---------- HeroMetric ---------- */
.wra-hero-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.wra-hero-metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wra-text-muted, #94a3b8);
    margin-bottom: 6px;
}

.wra-hero-metric-value {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.wra-hero-metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

    .wra-hero-metric-trend.up {
        color: var(--wra-green);
    }

    .wra-hero-metric-trend.down {
        color: #f87171;
    }

/* ---------- Horizontal scroll row (Tier-2 flat sections: Recommended Actions, Suggested
   Agents) -- avoids a boxed grid repeating the same rhythm as every other section. ---------- */
.wra-scroll-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
}

    .wra-scroll-row::-webkit-scrollbar {
        height: 6px;
    }

    .wra-scroll-row::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 999px;
    }

    .wra-scroll-row > * {
        flex: 0 0 320px;
        scroll-snap-align: start;
    }

/* Named grid-ratio modifiers for .wra-directory-grid, used instead of inline
   style="grid-template-columns:..." -- an inline style always beats a class-based media query
   (higher specificity regardless of source order), so any inline ratio silently never collapses
   on mobile. These compound selectors (0,2,0 specificity) safely override the base single-class
   responsive rules and always collapse to one column below 1200px. */
.wra-directory-grid.wra-grid-hero {
    grid-template-columns: 0.9fr 2fr;
}

.wra-directory-grid.wra-grid-wide {
    grid-template-columns: 2.4fr 1fr;
}

.wra-directory-grid.wra-grid-primary {
    grid-template-columns: 1.6fr 1fr;
}

@media (max-width: 1200px) {
    .wra-directory-grid.wra-grid-hero,
    .wra-directory-grid.wra-grid-wide,
    .wra-directory-grid.wra-grid-primary {
        grid-template-columns: 1fr;
    }
}

/* ---------- Find Agents ---------- */
.wra-find-agents-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

.wra-filter-rail {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: var(--wra-radius);
    background: rgba(255, 255, 255, 0.02);
}

.wra-filter-rail-group label {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--wra-text-muted, #94a3b8);
    margin-bottom: 6px;
}

.wra-filter-rail-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--wra-text-muted, #94a3b8);
    cursor: pointer;
}

.wra-filter-rail-chart {
    padding-top: 12px;
    border-top: 1px solid var(--wra-border);
}

.wra-filter-rail-chart-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--wra-text-muted, #94a3b8);
    margin-bottom: 8px;
}

.wra-find-agents-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.86rem;
    margin-bottom: 16px;
}

.wra-agent-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.wra-agent-card {
    position: relative;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 16px;
    transition: border-color 0.15s ease;
}

    .wra-agent-card.selected {
        border-color: var(--wra-gold);
    }

.wra-agent-card-select {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: var(--wra-text-muted, #94a3b8);
    z-index: 2;
    cursor: pointer;
}

.wra-agent-card-link {
    display: block;
    text-decoration: none;
    text-align: center;
}

    .wra-agent-card-link h3 {
        color: #fff;
        font-size: 1rem;
        margin: 10px 0 2px;
    }

    .wra-agent-card-link .loc {
        color: var(--wra-text-muted, #94a3b8);
        font-size: 0.82rem;
        margin-bottom: 10px;
    }

.wra-agent-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.wra-agent-card-license {
    font-size: 0.72rem;
    color: var(--wra-text-muted, #94a3b8);
}

.wra-compare-panel {
    margin-bottom: 24px;
}

.wra-compare-tray {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--wra-navy-2);
    border: 1px solid var(--wra-gold);
    border-radius: 999px;
    padding: 10px 20px;
    box-shadow: var(--wra-shadow);
    z-index: 500;
}

.wra-compare-tray-avatars {
    display: flex;
}

    .wra-compare-tray-avatars img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid var(--wra-navy-2);
        margin-left: -10px;
        object-fit: cover;
    }

        .wra-compare-tray-avatars img:first-child {
            margin-left: 0;
        }

.wra-compare-tray-count {
    font-size: 0.82rem;
    color: var(--wra-text-muted, #94a3b8);
}

.wra-compare-tray-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 1200px) {
    .wra-agent-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .wra-find-agents-layout {
        grid-template-columns: 1fr;
    }

    .wra-filter-rail {
        position: static;
    }
}

@media (max-width: 640px) {
    .wra-agent-card-grid {
        grid-template-columns: 1fr;
    }

    .wra-compare-tray {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        flex-wrap: wrap;
        border-radius: 16px;
    }
}

/* ---------- Agent Profile ---------- */
.wra-agent-hero {
    background: linear-gradient(180deg, var(--wra-navy) 0%, var(--wra-navy-2) 100%);
    padding: 64px 24px;
}

.wra-agent-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.wra-agent-hero-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--wra-gold);
}

.wra-agent-hero-info {
    flex: 1;
    min-width: 240px;
}

.wra-agent-hero-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.wra-agent-hero-info h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.wra-agent-hero-info p {
    color: var(--wra-text-muted, #94a3b8);
    margin: 0;
}

.wra-agent-hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.wra-property-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}

.wra-property-card {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 16px;
}

.wra-property-card-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wra-blue);
    font-weight: 700;
    margin-bottom: 6px;
}

.wra-property-card h4 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 6px;
}

.wra-property-card-price {
    color: var(--wra-gold);
    font-weight: 700;
    margin-bottom: 4px;
}

.wra-property-card-loc {
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.82rem;
}

.wra-agent-quickfacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .wra-agent-quickfacts li {
        display: flex;
        justify-content: space-between;
        font-size: 0.86rem;
        color: var(--wra-text-muted, #94a3b8);
        border-bottom: 1px solid var(--wra-border);
        padding-bottom: 10px;
    }

    .wra-agent-quickfacts li span:last-child {
        color: #fff;
        font-weight: 600;
    }

@media (max-width: 768px) {
    .wra-agent-hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .wra-agent-hero-ctas {
        width: 100%;
    }

        .wra-agent-hero-ctas a {
            flex: 1;
            text-align: center;
        }

    .wra-property-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Market Ownership ---------- */
.wra-market-filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    border-radius: var(--wra-radius);
    background: rgba(255, 255, 255, 0.02);
    position: sticky;
    top: 0;
    z-index: 10;
}

    .wra-market-filter-bar select {
        max-width: 220px;
    }

.wra-market-ownership-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

.wra-market-my-claims-rail {
    position: sticky;
    top: 90px;
}

.wra-market-coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.wra-market-coverage-tile {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 20px;
}

    .wra-market-coverage-tile h3 {
        color: #fff;
        font-size: 1.05rem;
        margin: 0 0 4px;
    }

.wra-market-coverage-spec {
    color: var(--wra-blue);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.wra-market-tier-capacity {
    padding: 10px 0;
    border-top: 1px solid var(--wra-border);
}

    .wra-market-tier-capacity:first-of-type {
        border-top: none;
    }

.wra-market-tier-capacity-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.84rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 6px;
}

.wra-market-tier-capacity-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 8px;
}

.wra-market-tier-capacity-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wra-blue), var(--wra-gold));
}

    .wra-market-tier-capacity-fill.full {
        background: #f87171;
    }

.wra-market-tier-capacity-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
    color: var(--wra-text-muted, #94a3b8);
}

@media (max-width: 1200px) {
    .wra-market-coverage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .wra-market-ownership-layout {
        grid-template-columns: 1fr;
    }

    .wra-market-my-claims-rail {
        position: static;
    }
}

@media (max-width: 640px) {
    .wra-market-coverage-grid {
        grid-template-columns: 1fr;
    }

    .wra-market-filter-bar {
        position: static;
    }
}

/* ---------- Vendor Marketplace ---------- */
.wra-vendor-category-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.wra-vendor-category-chip {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--wra-border);
    color: var(--wra-text-muted, #94a3b8);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .wra-vendor-category-chip.active,
    .wra-vendor-category-chip:hover {
        border-color: var(--wra-gold);
        color: var(--wra-gold);
    }

.wra-vendor-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.wra-vendor-card {
    display: block;
    text-align: center;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 20px;
    text-decoration: none;
}

.wra-vendor-card-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--wra-gold);
    overflow: hidden;
}

    .wra-vendor-card-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.wra-vendor-card h3 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 4px;
}

.wra-vendor-card .loc {
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.82rem;
    margin-bottom: 10px;
}

.wra-vendor-card-badges {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.wra-vendor-card-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 1200px) {
    .wra-vendor-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wra-vendor-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Pricing: two-tier visual weighting ---------- */
.wra-pricing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Secondary row (Vendor/Brokerage) reads as clearly less prominent than the primary Agent
   plans row -- smaller cards, muted, so the page doesn't present 6 identical-weight tiles. */
.wra-pricing-grid-secondary {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    opacity: 0.92;
}

    .wra-pricing-grid-secondary .wra-price-card {
        padding: 20px;
    }

    .wra-pricing-grid-secondary .wra-price-value {
        font-size: 1.3rem;
    }

@media (max-width: 1200px) {
    .wra-pricing-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wra-pricing-grid-4,
    .wra-pricing-grid-secondary {
        grid-template-columns: 1fr;
    }
}

/* ---------- Settings ---------- */
.wra-settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

.wra-settings-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 24px;
}

    .wra-settings-nav .wra-sidebar-link {
        border-radius: 10px;
    }

@media (max-width: 992px) {
    .wra-settings-layout {
        grid-template-columns: 1fr;
    }

    .wra-settings-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
    }

        .wra-settings-nav li {
            flex: 0 0 auto;
        }
}

/* ---------- ComingSoonPanel ---------- */
.wra-coming-soon-panel {
    max-width: 640px;
    margin: 40px auto;
    text-align: center;
    background: var(--wra-glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 2px solid var(--wra-gold);
    border-radius: var(--wra-radius);
    padding: 48px 32px;
}

.wra-coming-soon-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(242, 182, 50, 0.14);
    color: var(--wra-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.wra-coming-soon-panel h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.wra-coming-soon-panel p {
    color: var(--wra-text-muted, #94a3b8);
    margin: 0 0 24px;
}

.wra-coming-soon-ctas {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wra-coming-soon-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--wra-border);
    flex-wrap: wrap;
}

.wra-coming-soon-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.78rem;
}

    .wra-coming-soon-feature i {
        font-size: 1.1rem;
        color: var(--wra-blue);
    }

@media (max-width: 640px) {
    .wra-coming-soon-panel {
        padding: 32px 20px;
        margin: 20px auto;
    }

    .wra-coming-soon-ctas a {
        flex: 1;
        text-align: center;
    }
}

/* ================================================================
   Agent Dashboard -- full structural rebuild, each section its own
   distinct visual treatment (no repeated card-grid rhythm).
   ================================================================ */

/* ---------- 1. Narrative hero ---------- */
.wra-dashboard-narrative-hero {
    background: linear-gradient(135deg, var(--wra-navy) 0%, var(--wra-navy-2) 60%, rgba(47, 178, 255, 0.08) 100%);
    padding: 56px 24px;
    border-bottom: 1px solid var(--wra-border);
}

.wra-dashboard-narrative-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.wra-dashboard-narrative-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--wra-gold);
    flex-shrink: 0;
}

.wra-dashboard-narrative-body {
    flex: 1;
    min-width: 280px;
}

.wra-dashboard-narrative-greeting {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .wra-dashboard-narrative-greeting h1 {
        font-size: 1.7rem;
        font-weight: 700;
        color: #fff;
        margin: 0;
    }

.wra-dashboard-narrative-text {
    color: var(--wra-text-muted, #94a3b8);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 640px;
}

.wra-dashboard-narrative-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- 2. Today's Action Center ---------- */
.wra-action-center-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 8px;
}

.wra-action-tile {
    position: relative;
    display: block;
    background: var(--wra-glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 2px solid var(--wra-gold);
    border-radius: var(--wra-radius);
    padding: 28px 24px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wra-action-tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(242, 182, 50, 0.14);
    color: var(--wra-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.wra-action-tile h3 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 6px;
}

.wra-action-tile p {
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.86rem;
    margin: 0;
    padding-right: 24px;
}

.wra-action-tile-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    color: var(--wra-gold);
}

/* ---------- 4. Referral table avatar ---------- */
.wra-table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- 5. AI Recommendation panel ---------- */
.wra-ai-recommendation-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wra-ai-recommendation-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wra-ai-recommendation-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wra-gold);
    color: var(--wra-navy);
    font-weight: 800;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wra-ai-recommendation-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(47, 178, 255, 0.14);
    color: var(--wra-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wra-ai-recommendation-item p {
    margin: 0;
    color: #fff;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ---------- 6. Carousel-lg (Featured Agents) ---------- */
.wra-carousel-lg > * {
    flex-basis: 360px;
}

.wra-carousel-lg .wra-recommendation-card {
    padding: 20px;
}

    .wra-carousel-lg .wra-recommendation-card .wra-directory-card-avatar {
        width: 64px;
        height: 64px;
    }

    .wra-carousel-lg .wra-recommendation-card h4 {
        font-size: 1.1rem;
    }

/* ---------- 7. My Listings (image cards) ---------- */
.wra-property-card-grid-lg {
    grid-template-columns: repeat(3, 1fr);
}

.wra-property-card.has-image {
    padding: 0;
    overflow: hidden;
}

.wra-property-card-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--wra-navy-2);
}

.wra-property-card-body {
    padding: 16px;
}

/* ---------- 8. Market Intelligence tile-grid map ---------- */
.wra-market-map-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-auto-rows: 40px;
    gap: 4px;
    max-width: 720px;
    margin: 0 auto 20px;
}

.wra-market-map-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--wra-text-muted, #94a3b8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--wra-border);
    cursor: default;
    transition: transform 0.15s ease;
}

    .wra-market-map-tile:hover {
        transform: scale(1.08);
    }

    .wra-market-map-tile.available {
        background: rgba(47, 178, 255, 0.16);
        border-color: rgba(47, 178, 255, 0.4);
        color: #fff;
    }

    .wra-market-map-tile.claimed {
        background: var(--wra-gold);
        border-color: var(--wra-gold);
        color: var(--wra-navy);
    }

.wra-market-map-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--wra-text-muted, #94a3b8);
}

.wra-market-map-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    background: rgba(255, 255, 255, 0.1);
}

    .wra-market-map-dot.available {
        background: rgba(47, 178, 255, 0.5);
    }

    .wra-market-map-dot.claimed {
        background: var(--wra-gold);
    }

/* ---------- 10. Activity Timeline ---------- */
.wra-timeline {
    position: relative;
    padding-left: 32px;
}

    .wra-timeline::before {
        content: "";
        position: absolute;
        left: 13px;
        top: 6px;
        bottom: 6px;
        width: 2px;
        background: var(--wra-border);
    }

.wra-timeline-item {
    position: relative;
    display: flex;
    gap: 16px;
    padding-bottom: 22px;
}

    .wra-timeline-item:last-child {
        padding-bottom: 0;
    }

.wra-timeline-marker {
    position: absolute;
    left: -32px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wra-navy-2);
    border: 2px solid var(--wra-gold);
    color: var(--wra-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}

.wra-timeline-content p {
    margin: 0 0 4px;
    color: #fff;
    font-size: 0.9rem;
}

.wra-timeline-date {
    color: var(--wra-text-muted, #94a3b8);
    font-size: 0.76rem;
}

@media (max-width: 1200px) {
    .wra-action-center-grid,
    .wra-property-card-grid-lg {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wra-dashboard-narrative-inner {
        flex-direction: column;
        text-align: center;
    }

    .wra-dashboard-narrative-ctas {
        width: 100%;
    }

        .wra-dashboard-narrative-ctas a {
            flex: 1;
            text-align: center;
        }

    .wra-action-center-grid,
    .wra-property-card-grid-lg {
        grid-template-columns: 1fr;
    }

    .wra-market-map-grid {
        grid-auto-rows: 28px;
        font-size: 0.5rem;
    }
}

/* ================================================================
   Homepage redesign (AI Seller Opportunities positioning) -- all
   additive .wra-* classes below. Existing rules above are untouched.
   ================================================================ */

/* ---------- Two-column hero: light copy column + restored original hero artwork ----------
   Deep-navy headings, neutral-gray body, medium-blue primary action, on a clean very-light
   background -- the landing-page color system. ~48% copy / ~52% image on desktop. */
/* Screen-reader / SEO-only text -- gives the page a real <h1> without drawing anything over the
   image-only hero (the hero is one self-contained graphic; no visible overlay text). */
.wra-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Image-only hero. The sticky header takes its own space in normal flow (no overlap), so only a
   small top gap is needed -- no large padding that would leave dead whitespace under the header
   or below the image. */
.wra-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
    /* Small top gap so the hero begins high under the (now shorter) sticky header; slim side
       gutters keep the wide image off the browser edge without large white margins. */
    padding: 14px 16px 44px;
}

.wra-hero-figure {
    /* Wide, immersive hero -- fills most of the content width on large screens rather than sitting
       in the page like a small card. Growing the width also grows the height proportionally
       (aspect-ratio is preserved on the image), giving the people and cards more breathing room. */
    max-width: 1680px;
    margin: 0 auto;   /* centers the image, and zeroes the default <figure> UA margin */
}

.wra-eyebrow-light {
    color: var(--wra-gold);
}

/* Still used by the bottom CTA band (.wra-cta-band-ctas), so it stays after the hero rewrite. */
.wra-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Full-width within the hero container, centered, never upscaled past its native 1536px. The
   aspect-ratio matches the source exactly, so the layout box is reserved before load (no CLS) and
   the image is never stretched, distorted, or cropped -- the full composition is always visible.
   Subtle radius + a light shadow only (no heavy shadow, no overlay). */
.wra-hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1536 / 1024;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(13, 26, 53, 0.12), 0 3px 10px rgba(13, 26, 53, 0.06);
}

@media (max-width: 640px) {
    /* Phones: trim the gutters so the image reads near edge-to-edge; it stays full-width and
       uncropped (height:auto), so the whole composition -- both agents included -- is preserved. */
    .wra-hero {
        padding: 14px 12px 26px;
    }

    .wra-hero-img {
        border-radius: 10px;
    }
}

/* Medium-blue primary CTA -- the landing page's primary action color. */
.wra-btn-blue {
    background: linear-gradient(135deg, #3e7bfa, #2c62e0);
    color: #fff;
    box-shadow: 0 8px 24px rgba(62, 123, 250, 0.32);
}

    .wra-btn-blue:hover {
        box-shadow: 0 12px 32px rgba(62, 123, 250, 0.42);
    }

/* Outline secondary sized for a light background (dark text/border), unlike .wra-btn-outline
   which is tuned for dark heroes (white text/border). */
.wra-btn-outline-dark {
    background: #fff;
    border-color: #cfd8e8;
    color: #0d1a35;
}

    .wra-btn-outline-dark:hover {
        border-color: var(--wra-blue);
        color: var(--wra-blue);
    }

/* ---------- Light header variant (homepage only; see MainLayout.isHomePage) ---------- */
.wra-header-light {
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid #e6e9f0;
}

    .wra-header-light.scrolled {
        background: rgba(255, 255, 255, 0.96);
        border-bottom-color: #e6e9f0;
    }

    /* The source logo is dark-navy/gold on white -- the global rule inverts it to white for the
       dark header; on the light header, show it as-is. */
    .wra-header-light .wra-brand-logo {
        filter: none;
    }

    .wra-header-light .wra-nav-link {
        color: #475467;
    }

        .wra-header-light .wra-nav-link:hover,
        .wra-header-light .wra-nav-link.active {
            color: #0d1a35;
            background: rgba(13, 26, 53, 0.05);
        }

    .wra-header-light .wra-nav-dashboard-link {
        color: #475467;
    }

        .wra-header-light .wra-nav-dashboard-link:hover {
            color: #0d1a35;
            background: rgba(13, 26, 53, 0.05);
        }

    /* Header "Join Free" -- rendered blue in the light header so the primary action stays medium
       blue and the header shows no competing gold accent. The gold class is kept in the shared
       markup (still gold on every other page's dark header). */
    .wra-header-light .wra-btn-gold {
        background: linear-gradient(135deg, #3e7bfa, #2c62e0);
        color: #fff;
        box-shadow: 0 8px 24px rgba(62, 123, 250, 0.28);
    }

    .wra-header-light .wra-btn-outline {
        background: #fff;
        border-color: #cfd8e8;
        color: #0d1a35;
    }

        .wra-header-light .wra-btn-outline:hover {
            border-color: var(--wra-blue);
            color: var(--wra-blue);
        }

    .wra-header-light .wra-nav-toggle {
        color: #0d1a35;
        border-color: #cfd8e8;
    }

    /* Mobile dropdown panel: light instead of the default dark navy. */
    .wra-header-light .wra-nav.open .wra-nav-links {
        background: #fff;
        border-bottom-color: #e6e9f0;
    }

/* A hand-built product-style preview card -- deliberately mirrors the shape of the real,
   authenticated opportunity card (score badge, signal checklist, credit-cost footer, disclaimer)
   without embedding that component or its CSS bundle on this public, unauthenticated page. */
.wra-opp-preview {
    width: 100%;
    max-width: 360px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 22px;
    box-shadow: var(--wra-shadow);
}

.wra-opp-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.wra-opp-preview-loc {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
}

.wra-opp-preview-type {
    display: block;
    color: var(--wra-text-muted);
    font-size: 0.82rem;
}

.wra-opp-preview-score {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(47, 212, 138, 0.14);
    color: var(--wra-green);
    font-weight: 800;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wra-opp-preview-value {
    color: #fff;
    font-weight: 700;
    margin: 6px 0 14px;
}

.wra-opp-preview-signals {
    list-style: none;
    margin: 14px 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .wra-opp-preview-signals li {
        font-size: 0.86rem;
        color: var(--wra-text);
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .wra-opp-preview-signals li i {
        color: var(--wra-green);
        margin-top: 3px;
        font-size: 0.72rem;
    }

.wra-opp-preview-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wra-opp-preview-cost {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wra-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wra-opp-preview-disclaimer {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--wra-border);
    font-size: 0.76rem;
    font-style: italic;
    color: var(--wra-text-muted);
}

.wra-opp-preview-lg {
    max-width: 480px;
}

.wra-opp-sample-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 32px;
}

@media (max-width: 900px) {
    .wra-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wra-hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .wra-hero-ctas {
        justify-content: center;
    }
}

/* ---------- Light-section overrides for shared dark-styled cards ---------- */
.wra-section-light .wra-step-card,
.wra-section-light .wra-feature-card {
    background: #fff;
    border: 1px solid #e4e7ee;
}

    .wra-section-light .wra-step-title,
    .wra-section-light .wra-feature-card h3 {
        color: #1a2030;
    }

    .wra-section-light .wra-step-copy,
    .wra-section-light .wra-feature-card p {
        color: #566;
    }

.wra-section-title-light {
    color: #fff;
}

.wra-section-lead-light {
    color: var(--wra-text-muted);
}

.wra-section-footnote {
    color: #566;
    font-size: 0.88rem;
    max-width: 720px;
    margin: 8px 0 0;
}

.wra-section-footnote-light {
    color: var(--wra-text-muted);
}

.wra-section-footnote-strong {
    font-weight: 600;
    color: #1a2030;
}

.wra-section-compact {
    padding: 56px 24px;
}

.wra-section-cta {
    margin-top: 28px;
}

/* ---------- Two Ways to Grow ---------- */
.wra-two-ways-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.wra-two-ways-card {
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: var(--wra-radius);
    padding: 32px;
}

.wra-two-ways-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(62, 123, 250, 0.1);
    color: var(--wra-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.wra-two-ways-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.wra-two-ways-card > p {
    color: #566;
    margin-bottom: 18px;
}

.wra-two-ways-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .wra-two-ways-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.92rem;
        color: #33394a;
    }

    .wra-two-ways-list li i {
        color: var(--wra-green);
        margin-top: 3px;
        font-size: 0.75rem;
    }

@media (max-width: 800px) {
    .wra-two-ways-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Workflow steps (AI Seller Opportunities section) ---------- */
.wra-workflow-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.wra-workflow-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--wra-border);
    border-radius: 10px;
    padding: 16px 10px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--wra-text-muted);
}

.wra-workflow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wra-gold), var(--wra-gold-dark));
    color: #1a1400;
    font-weight: 800;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .wra-workflow-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .wra-workflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Credit plan cards ---------- */
.wra-credit-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.wra-credit-plan-card {
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: var(--wra-radius);
    padding: 28px;
}

    .wra-credit-plan-card h3 {
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 6px;
    }

.wra-credit-plan-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--wra-blue);
    margin-bottom: 10px;
}

    .wra-credit-plan-price span {
        font-size: 0.9rem;
        font-weight: 500;
        color: #7b8494;
    }

.wra-credit-plan-desc {
    color: #566;
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.wra-credit-plan-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .wra-credit-plan-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.88rem;
        color: #33394a;
    }

    .wra-credit-plan-list li i {
        color: var(--wra-green);
        margin-top: 3px;
        font-size: 0.72rem;
    }

@media (max-width: 900px) {
    .wra-credit-plans-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Credit Protection ---------- */
.wra-protection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 8px;
}

    .wra-protection-grid h4 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

.wra-protection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wra-protection-list-good li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: #33394a;
}

    .wra-protection-list-good li i {
        color: var(--wra-green);
        margin-top: 3px;
        font-size: 0.75rem;
    }

.wra-protection-note {
    font-size: 0.9rem;
    color: #566;
    background: #f7f8fb;
    border: 1px solid #e4e7ee;
    border-radius: 10px;
    padding: 14px 16px;
}

@media (max-width: 700px) {
    .wra-protection-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- How It Works (5-step variant) ---------- */
.wra-steps-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {
    .wra-steps-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .wra-steps-5 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Inline checklist (Referral Network section) ---------- */
.wra-inline-check-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 760px;
}

    .wra-inline-check-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.92rem;
        color: #33394a;
    }

    .wra-inline-check-list li i {
        color: var(--wra-green);
        margin-top: 3px;
        font-size: 0.75rem;
    }

@media (max-width: 700px) {
    .wra-inline-check-list {
        grid-template-columns: 1fr;
    }
}

/* ---------- Prospect vs. Qualified Referral comparison ---------- */
.wra-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.wra-compare-col {
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 26px;
}

    .wra-compare-col h4 {
        font-size: 1.05rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 14px;
    }

    .wra-compare-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .wra-compare-col li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.9rem;
        color: var(--wra-text-muted);
    }

    .wra-compare-col li i {
        margin-top: 3px;
        font-size: 0.75rem;
        color: var(--wra-blue);
    }

@media (max-width: 700px) {
    .wra-compare-grid {
        grid-template-columns: 1fr;
    }
}

.wra-cta-band-ctas {
    justify-content: center;
    margin-top: 8px;
}

/* ==========================================================================
   Informational & legal pages: workflow steps, FAQ toolbar, callouts, lists
   ========================================================================== */

/* ---------- How Seller Opportunities Work: numbered workflow (light section) ---------- */
.wra-flow-steps {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wra-flow-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.wra-flow-num {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3e7bfa, #2c62e0);
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(62, 123, 250, 0.32);
    position: relative;
}

/* Connector line linking the steps into a single vertical flow. */
.wra-flow-step:not(:last-child) .wra-flow-num::after {
    content: "";
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 20px);
    background: linear-gradient(180deg, #cdd8ee, rgba(205, 216, 238, 0.15));
}

.wra-flow-body {
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 6px 18px rgba(13, 26, 53, 0.05);
}

.wra-flow-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef4ff;
    color: var(--wra-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.wra-flow-body h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0d1a35;
}

.wra-flow-body p {
    margin: 0;
    color: #4a5568;
    line-height: 1.6;
}

/* ---------- FAQ toolbar: search + category jump links (dark section) ---------- */
.wra-faq-toolbar {
    max-width: 800px;
    margin-bottom: 28px;
}

.wra-faq-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: 10px;
    padding: 0 14px;
    margin-bottom: 16px;
}

    .wra-faq-search i {
        color: var(--wra-text-muted);
    }

    .wra-faq-search input {
        flex: 1;
        background: transparent;
        border: 0;
        outline: none;
        color: #fff;
        font-size: 1rem;
        padding: 13px 0;
    }

        .wra-faq-search input::placeholder {
            color: var(--wra-text-muted);
        }

    .wra-faq-search:focus-within {
        border-color: var(--wra-blue);
    }

.wra-faq-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .wra-faq-jump a {
        font-size: 0.82rem;
        font-weight: 600;
        color: #cfe0ff;
        background: rgba(62, 123, 250, 0.12);
        border: 1px solid rgba(62, 123, 250, 0.28);
        border-radius: 999px;
        padding: 6px 13px;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .wra-faq-jump a:hover {
            background: var(--wra-blue);
            color: #fff;
        }

.wra-faq-cat-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    max-width: 800px;
    margin: 34px 0 14px;
    padding-top: 8px;
    scroll-margin-top: 90px;   /* clears the sticky header when deep-linked */
}

    .wra-faq-cat-title:first-child {
        margin-top: 0;
    }

.wra-faq-empty {
    max-width: 800px;
    color: var(--wra-text-muted);
    background: var(--wra-navy-3);
    border: 1px solid var(--wra-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

    .wra-faq-empty a {
        color: var(--wra-blue);
    }

/* ---------- Legal page table of contents (white section) ---------- */
.wra-legal-toc {
    background: #f6f8fc;
    border: 1px solid #e4e7ee;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 24px 0 8px;
}

    .wra-legal-toc strong {
        display: block;
        color: #0d1a35;
        margin-bottom: 10px;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .wra-legal-toc ol {
        columns: 2;
        column-gap: 28px;
        margin: 0;
        padding-left: 18px;
    }

    .wra-legal-toc li {
        margin-bottom: 5px;
        break-inside: avoid;
    }

    .wra-legal-toc a {
        color: var(--wra-blue);
        text-decoration: none;
    }

        .wra-legal-toc a:hover {
            text-decoration: underline;
        }

/* Anchored legal/FAQ headings should clear the sticky header when jumped to. */
.wra-content-inner h2[id] {
    scroll-margin-top: 90px;
}

/* ---------- Callouts (white section) ---------- */
.wra-callout {
    border: 1px solid #dbe2ee;
    border-left: 4px solid var(--wra-blue);
    background: #f6f8fc;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 20px 0;
    line-height: 1.6;
    color: #3a4256;
}

    .wra-callout h3 {
        margin: 0 0 10px;
        font-size: 1.05rem;
        font-weight: 800;
        color: #0d1a35;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .wra-callout ul {
        margin: 0;
        padding-left: 20px;
    }

    .wra-callout li {
        margin-bottom: 5px;
    }

.wra-callout-note {
    background: #eef4ff;
    border-left-color: #3e7bfa;
}

.wra-callout-good {
    background: #eefaf3;
    border-left-color: #1faf6a;
}

    .wra-callout-good h3 i {
        color: #1faf6a;
    }

.wra-callout-bad {
    background: #fdeef0;
    border-left-color: #d64550;
}

    .wra-callout-bad h3 i {
        color: #d64550;
    }

/* Two-column eligible / not-eligible layout. */
.wra-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 24px 0;
}

    .wra-two-col .wra-callout {
        margin: 0;
    }

.wra-fineprint {
    font-size: 0.9rem;
    color: #6b7688;
}

/* ---------- Check / cross / numbered lists (white section) ---------- */
.wra-check-list {
    list-style: none;
    padding-left: 0;
    margin: 14px 0;
}

    .wra-check-list li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #3a4256;
        line-height: 1.55;
    }

        .wra-check-list li::before {
            content: "\2713";           /* check mark */
            position: absolute;
            left: 0;
            top: 0;
            color: #1faf6a;
            font-weight: 800;
        }

.wra-check-list-x li::before {
    content: "\2715";                   /* cross mark */
    color: #d64550;
}

.wra-numbered-list {
    margin: 14px 0;
    padding-left: 22px;
}

    .wra-numbered-list li {
        margin-bottom: 10px;
        color: #3a4256;
        line-height: 1.55;
    }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .wra-two-col {
        grid-template-columns: 1fr;
    }

    .wra-legal-toc ol {
        columns: 1;
    }

    .wra-flow-step {
        gap: 14px;
    }

    .wra-flow-num {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .wra-flow-step:not(:last-child) .wra-flow-num::after {
        top: 40px;
    }
}