/* ============================================================================
   WeReferAgents landing page (/) — implementation of the approved design.

   Namespace: .lp-*. Self-contained token block so the page owns its own palette
   (dark navy hero, gold accent, indigo feature accents) without redefining or
   depending on the app-shell --wr-* tokens, and without leaking into any other
   page. Loaded from App.razor alongside the other global stylesheets.
   ============================================================================ */

.lp {
    /* ---- palette, taken from the approved comp ---- */
    --lp-navy: #0d1b2f;
    --lp-navy-deep: #091626;
    --lp-navy-soft: #16264180;

    --lp-gold: #f5b731;
    --lp-gold-hover: #e0a41d;
    --lp-gold-ink: #3d2c05;

    --lp-indigo: #4338e0;
    --lp-indigo-soft: #eef0ff;
    --lp-violet: #7c3aed;

    --lp-ink: #101828;
    --lp-ink-2: #475467;
    --lp-ink-3: #8894a8;
    --lp-line: #e6e9f0;

    --lp-surface: #ffffff;
    --lp-surface-2: #f7f8fc;

    --lp-radius: 16px;
    --lp-radius-lg: 22px;
    --lp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --lp-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --lp-shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.16);

    color: var(--lp-ink);
    background: var(--lp-surface);
    /* The public header is fixed/translucent; the hero supplies its own dark ground. */
    overflow-x: clip;
}

.lp-container {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.lp h2,
.lp h3 { margin: 0; }

.lp-eyebrow {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--lp-indigo-soft);
    color: var(--lp-indigo);
    font-size: 0.8rem;
    font-weight: 600;
}

.lp-section-title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.lp-accent-indigo { color: var(--lp-indigo); }
.lp-accent-gold { color: var(--lp-gold); }

/* ---------------------------------------------------------------- buttons */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.lp-btn:hover { text-decoration: none; transform: translateY(-2px); }

.lp-btn-gold {
    background: var(--lp-gold);
    color: var(--lp-gold-ink);
    box-shadow: 0 10px 24px rgba(245, 183, 49, 0.28);
}
.lp-btn-gold:hover { background: var(--lp-gold-hover); color: var(--lp-gold-ink); }

.lp-btn-indigo {
    background: var(--lp-indigo);
    color: #fff;
    box-shadow: 0 10px 24px rgba(67, 56, 224, 0.26);
}
.lp-btn-indigo:hover { background: #362cc9; color: #fff; }

/* Outline on a DARK ground (hero, AI band). */
.lp-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.lp-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Outline on a LIGHT ground (pricing cards). */
.lp-btn-outline {
    background: #fff;
    border-color: var(--lp-line);
    color: var(--lp-ink);
}
.lp-btn-outline:hover { border-color: var(--lp-ink-3); color: var(--lp-ink); }

.lp-btn:disabled,
.lp-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------------------------------------------------------------- hero */

.lp-hero {
    position: relative;
    background: var(--lp-navy);
    color: #fff;
    /* Clears the ~72px fixed public header, with the comp's breathing room beneath it. */
    padding: 104px 0 64px;
    overflow: hidden;
}

/* Ambient wash + the photographic edge the comp shows bleeding in from the right.
   pointer-events:none so neither layer can intercept a click on the content above. */
.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 12% 8%, rgba(51, 74, 128, 0.55), transparent 62%),
        radial-gradient(760px 460px at 78% 4%, rgba(88, 68, 168, 0.42), transparent 60%);
}
/* The photographic edge the comp bleeds in from the right. Spans the FULL hero rather than
   starting at a percentage offset: an inset start leaves a hard vertical seam where the photo
   layer begins, which is visible against the flat navy. Instead the scrim gradient does the
   masking, fading the photo in only across the right third. */
.lp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg,
            var(--lp-navy) 0%,
            var(--lp-navy) 46%,
            rgba(13, 27, 47, 0.94) 62%,
            rgba(13, 27, 47, 0.80) 82%,
            rgba(13, 27, 47, 0.68) 100%),
        var(--lp-hero-photo, none);
    background-size: cover;
    background-position: center right;
}

.lp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* Roughly the comp's 46/54 split. The copy column needs enough width to keep "More
       Opportunities." on one line at the headline size below -- that three-line stack is the
       hero's whole shape, and letting the first line wrap breaks it. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    gap: 44px;
    align-items: center;
}

.lp-hero-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.82rem;
    font-weight: 600;
    color: #d7e0f0;
}

.lp-hero h1 {
    margin: 24px 0 0;
    font-size: clamp(2rem, 3.3vw, 2.95rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.lp-hero h1 .lp-h1-1 { display: block; color: #cfd8e8; }
.lp-hero h1 .lp-h1-2 { display: block; color: #ffffff; }
.lp-hero h1 .lp-h1-3 { display: block; color: var(--lp-gold); }

.lp-hero-lead {
    margin: 22px 0 0;
    max-width: 34rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #b9c5d9;
}

.lp-hero-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 34px 0 0;
}
.lp-hero-feature i {
    display: block;
    font-size: 1.5rem;
    color: var(--lp-gold);
    margin-bottom: 12px;
}
.lp-hero-feature strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
}
.lp-hero-feature span {
    display: block;
    margin-top: 3px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #93a3bd;
}

.lp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.lp-hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    font-size: 0.86rem;
    color: #b9c5d9;
}
.lp-hero-proof strong { color: #fff; }

/* ---- dashboard preview ---- */

.lp-mock {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
    box-shadow: var(--lp-shadow-lg);
    background: var(--lp-surface);
    color: var(--lp-ink);
    /* Optical match to the comp, where the preview sits slightly proud of the hero text. */
    transform: perspective(1600px) rotateY(-2deg);
}

.lp-mock-rail { background: var(--lp-navy-deep); padding: 18px 12px; color: #fff; }
.lp-mock-rail-brand {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 0 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}
.lp-mock-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lp-mock-rail li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.74rem;
    color: #9fb0cb;
}
.lp-mock-rail li i { width: 13px; font-size: 0.72rem; }
.lp-mock-rail li.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; }
.lp-mock-rail-badge {
    margin-left: auto;
    background: var(--lp-indigo);
    color: #fff;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 700;
}

.lp-mock-body { padding: 18px; background: var(--lp-surface); }
.lp-mock-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lp-mock-head h3 { font-size: 1.05rem; font-weight: 800; }
.lp-mock-head p { margin: 2px 0 0; font-size: 0.7rem; color: var(--lp-ink-3); line-height: 1.4; }
.lp-mock-user { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; }
.lp-mock-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-violet));
    color: #fff; display: grid; place-items: center; font-size: 0.62rem; font-weight: 700;
}
.lp-mock-user span { display: block; font-weight: 700; }
.lp-mock-user small { color: var(--lp-ink-3); }

.lp-mock-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}
.lp-mock-kpi {
    padding: 10px 11px;
    border: 1px solid var(--lp-line);
    border-radius: 11px;
    background: var(--lp-surface);
    box-shadow: var(--lp-shadow-sm);
}
.lp-mock-kpi span { display: block; font-size: 0.6rem; color: var(--lp-ink-3); }
.lp-mock-kpi strong { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.2; margin: 1px 0; }
.lp-mock-kpi em { font-style: normal; font-size: 0.58rem; color: var(--lp-ink-3); }

.lp-mock-panels { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin-top: 10px; }
.lp-mock-panel {
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    padding: 12px;
    background: var(--lp-surface);
    box-shadow: var(--lp-shadow-sm);
}
.lp-mock-panel h4 { margin: 0 0 9px; font-size: 0.72rem; font-weight: 800; }

.lp-mock-opp { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.lp-mock-opp-thumb {
    width: 30px; height: 26px; border-radius: 6px; flex: none;
    background: linear-gradient(135deg, #c9d6ea, #93a8c9);
}
.lp-mock-opp-main { flex: 1; min-width: 0; }
.lp-mock-opp-main strong { display: block; font-size: 0.66rem; font-weight: 700; }
.lp-mock-opp-main span { display: block; font-size: 0.58rem; color: var(--lp-ink-3); }
.lp-mock-score {
    flex: none; text-align: center; padding: 2px 7px; border-radius: 7px;
    background: #eafaf1; color: #12805a; line-height: 1.1;
}
.lp-mock-score small { display: block; font-size: 0.46rem; color: #4d8c74; }
.lp-mock-score strong { display: block; font-size: 0.72rem; font-weight: 800; }
.lp-mock-score.is-amber { background: #fff5e6; color: #a56414; }
.lp-mock-score.is-amber small { color: #b6874a; }

.lp-mock-listing-photo {
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #b9c8de, #7d90ad);
}
.lp-mock-listing-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-mock-listing-flag {
    position: absolute; top: 6px; left: 6px;
    background: #16a34a; color: #fff;
    font-size: 0.5rem; font-weight: 800; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 5px;
}
.lp-mock-listing-price { margin-top: 8px; font-size: 0.82rem; font-weight: 800; }
.lp-mock-listing-addr { font-size: 0.58rem; color: var(--lp-ink-3); line-height: 1.4; }
.lp-mock-listing-specs { display: flex; gap: 8px; margin-top: 6px; font-size: 0.56rem; color: var(--lp-ink-2); }

.lp-mock-link { display: inline-block; margin-top: 9px; font-size: 0.6rem; font-weight: 700; color: var(--lp-indigo); }

/* ---------------------------------------------------------------- features */

.lp-features { padding: 84px 0; background: var(--lp-surface-2); text-align: center; }
.lp-features-head { max-width: 720px; margin: 0 auto 44px; }
.lp-features-head .lp-section-title { margin-top: 16px; }

.lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.lp-feature-card {
    display: block;
    padding: 26px 18px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    text-decoration: none;
    color: inherit;
    text-align: center;
    box-shadow: var(--lp-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lp-feature-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--lp-shadow);
    color: inherit;
}
.lp-feature-card:focus-visible { outline: 3px solid var(--lp-indigo); outline-offset: 3px; }

.lp-feature-icon {
    width: 58px; height: 58px;
    margin: 0 auto 18px;
    border-radius: 17px;
    display: grid; place-items: center;
    font-size: 1.35rem;
}
/* One tinted chip per card, matching the comp's colour run. */
.lp-feature-icon.is-1 { background: #efeaff; color: #6d28d9; }
.lp-feature-icon.is-2 { background: #e6f7ee; color: #16a34a; }
.lp-feature-icon.is-3 { background: #fff1e3; color: #ea7317; }
.lp-feature-icon.is-4 { background: #e8eefc; color: #2563eb; }
.lp-feature-icon.is-5 { background: #fde8f1; color: #db2777; }
.lp-feature-icon.is-6 { background: #ecebff; color: #4f46e5; }

.lp-feature-card h3 { font-size: 0.95rem; font-weight: 800; line-height: 1.3; }
.lp-feature-card p {
    margin: 14px 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--lp-ink-2);
}

/* ---------------------------------------------------------------- listings */

.lp-listings { padding: 84px 0; background: var(--lp-surface-2); }
.lp-listings-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 2fr);
    gap: 48px;
    align-items: center;
}
.lp-listings-intro .lp-section-title { margin: 18px 0 20px; }
.lp-listings-intro p { margin: 0 0 26px; color: var(--lp-ink-2); line-height: 1.7; font-size: 0.95rem; }

/* Track scrolls horizontally; the buttons drive it via scrollBy. scroll-snap gives the
   drag/swipe gesture the same stopping points the arrows use.

   min-width:0 is load-bearing, not defensive. The track is itself a grid whose fixed-width columns
   give it a large min-content width, and a grid ITEM defaults to min-width:auto -- so without this
   the track refuses to shrink, drags its parent column wider than the viewport, and the content
   beside it gets clipped off-screen on a phone. Overriding min-width is what lets it become a
   scroller instead of an overflow. */
.lp-carousel { position: relative; min-width: 0; }
.lp-carousel-track {
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    /* A fixed card width, not a fraction of the track: with only two or three listings a
       fractional width stretches each card to half the row, which looks nothing like the comp and
       distorts every photo. Fixed-width cards simply left-align when there are few, which is the
       "adjust gracefully" behaviour the brief asks for. */
    grid-auto-columns: 296px;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Room for the cards' hover lift and shadow, which would otherwise be clipped by overflow. */
    padding: 10px 4px 18px;
    margin: -10px -4px -18px;
    scrollbar-width: none;
}
.lp-carousel-track::-webkit-scrollbar { display: none; }
.lp-carousel-track > * { scroll-snap-align: start; }

.lp-listing-card {
    display: flex;
    flex-direction: column;
    background: var(--lp-surface);
    border-radius: var(--lp-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--lp-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-listing-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-lg); color: inherit; }
.lp-listing-card:focus-visible { outline: 3px solid var(--lp-indigo); outline-offset: 3px; }

.lp-listing-media { position: relative; aspect-ratio: 4 / 3; background: #dde3ec; }
.lp-listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-listing-noimg { display: grid; place-items: center; height: 100%; color: #9aa8bd; font-size: 2rem; }
.lp-listing-flag {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff;
}
.lp-listing-flag.is-new { background: #16a34a; }
.lp-listing-flag.is-featured { background: var(--lp-violet); }

.lp-listing-body { padding: 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lp-listing-price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.lp-listing-addr { font-size: 0.88rem; color: var(--lp-ink); }
.lp-listing-city { font-size: 0.84rem; color: var(--lp-ink-3); }
.lp-listing-specs {
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-top: 10px; font-size: 0.8rem; color: var(--lp-ink-2);
}
.lp-listing-specs i { color: var(--lp-ink-3); margin-right: 5px; }
.lp-listing-agent {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lp-line);
}
.lp-listing-agent img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.lp-listing-agent-initials {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--lp-indigo-soft); color: var(--lp-indigo);
    font-size: 0.72rem; font-weight: 800;
}
.lp-listing-agent small { display: block; font-size: 0.7rem; color: var(--lp-ink-3); }
.lp-listing-agent strong { display: block; font-size: 0.84rem; font-weight: 700; }

.lp-carousel-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 22px;
}
.lp-carousel-dots { display: flex; gap: 8px; margin-inline: auto; }
.lp-carousel-dot {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 50%;
    background: #cfd6e3; cursor: pointer;
    transition: background 0.16s ease, width 0.16s ease;
}
.lp-carousel-dot.is-active { background: var(--lp-indigo); width: 22px; border-radius: 999px; }
/* One dot is rendered per listing; how many are actually reachable depends on the viewport, so
   the surplus are hidden rather than removed from the DOM. See the constraint note at the top of
   landing.js for why nothing removes these nodes. */
.lp-carousel-dot.is-surplus { display: none; }
.lp-carousel-arrows { display: flex; gap: 8px; }
.lp-carousel-arrow {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--lp-line);
    background: var(--lp-surface);
    color: var(--lp-ink-2);
    cursor: pointer;
    display: grid; place-items: center;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.lp-carousel-arrow:hover:not(:disabled) { border-color: var(--lp-indigo); color: var(--lp-indigo); }
.lp-carousel-arrow:disabled { opacity: 0.4; cursor: not-allowed; }

.lp-listings-empty {
    padding: 48px 32px;
    text-align: center;
    background: var(--lp-surface);
    border: 1px dashed var(--lp-line);
    border-radius: var(--lp-radius);
    color: var(--lp-ink-2);
}
.lp-listings-empty i { font-size: 2rem; color: var(--lp-ink-3); display: block; margin-bottom: 12px; }

/* ---------------------------------------------------------------- AI band */

.lp-ai {
    position: relative;
    padding: 76px 0;
    background: var(--lp-navy-deep);
    color: #fff;
    overflow: hidden;
}
.lp-ai::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(760px 320px at 62% -10%, rgba(124, 58, 237, 0.36), transparent 66%);
}
.lp-ai-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: 48px;
    align-items: center;
}
.lp-ai-eyebrow { font-size: 0.84rem; font-weight: 700; color: var(--lp-gold); }
.lp-ai-title {
    margin: 12px 0 18px;
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -0.02em;
}
.lp-ai-grid p { margin: 0 0 26px; color: #b9c5d9; line-height: 1.7; font-size: 0.93rem; }

.lp-ai-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-ai-card {
    display: block;
    padding: 22px 20px;
    border-radius: var(--lp-radius);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.lp-ai-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    color: inherit;
}
.lp-ai-card:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
.lp-ai-card-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: grid; place-items: center;
    margin-bottom: 16px;
    color: #fff;
    font-size: 1.15rem;
}
.lp-ai-card-icon.is-1 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.lp-ai-card-icon.is-2 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.lp-ai-card-icon.is-3 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.lp-ai-card-icon.is-4 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.lp-ai-card h3 { font-size: 0.92rem; font-weight: 800; color: #fff; }
.lp-ai-card p { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.55; color: #a9b7cd; }

/* ---------------------------------------------------------------- trust strip */

.lp-trust { padding: 64px 0 0; background: var(--lp-surface-2); text-align: center; }
.lp-trust h2 { font-size: 1.05rem; font-weight: 800; }
.lp-trust > .lp-container > p { margin: 8px 0 0; color: var(--lp-ink-2); font-size: 0.9rem; }
.lp-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 24px;
    margin-top: 34px;
}
.lp-trust-item { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lp-trust-item > i { font-size: 1.5rem; color: var(--lp-indigo); }
.lp-trust-item strong { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.lp-trust-item span { display: block; font-size: 0.8rem; color: var(--lp-ink-2); }

/* ---------------------------------------------------------------- pricing */

.lp-pricing { padding: 56px 0 84px; background: var(--lp-surface-2); }
.lp-pricing-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.85fr);
    gap: 36px;
    align-items: center;
    padding: 44px;
    border-radius: 28px;
    background: linear-gradient(135deg, #eef0ff 0%, #f6f1ff 55%, #fdf3ea 100%);
}
/* A notch smaller than the page's other section titles: this one sits in a narrow column beside
   four plan cards, and at the full size it stacks into four lines. */
.lp-pricing-intro .lp-section-title {
    margin: 18px 0 14px;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
}
.lp-pricing-intro p { margin: 0; color: var(--lp-ink-2); font-size: 0.92rem; }

.lp-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.lp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 20px 20px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-sm);
}
.lp-plan.is-featured {
    border-color: var(--lp-gold);
    box-shadow: 0 16px 40px rgba(245, 183, 49, 0.24);
}
.lp-plan-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    white-space: nowrap;
    padding: 5px 14px; border-radius: 999px;
    background: var(--lp-gold); color: var(--lp-gold-ink);
    font-size: 0.68rem; font-weight: 800;
}
.lp-plan h3 { font-size: 1.05rem; font-weight: 800; }
.lp-plan-price { margin: 12px 0 18px; display: flex; align-items: baseline; gap: 4px; }
.lp-plan-price b { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; }
.lp-plan-price span { font-size: 0.78rem; color: var(--lp-ink-3); }
.lp-plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; flex: 1; }
.lp-plan li { font-size: 0.84rem; color: var(--lp-ink-2); line-height: 1.4; }
.lp-plan .lp-btn { width: 100%; padding: 12px 18px; }

/* ---------------------------------------------------------------- final CTA */

.lp-cta { padding: 0 0 84px; background: var(--lp-surface-2); }
.lp-cta-band {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 30px 36px;
    border-radius: 22px;
    background: var(--lp-navy);
    color: #fff;
}
.lp-cta-icon {
    width: 54px; height: 54px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lp-gold); color: var(--lp-gold-ink);
    font-size: 1.3rem;
}
.lp-cta-copy { flex: 1; min-width: 260px; }
.lp-cta-copy h2 { font-size: clamp(1.15rem, 2.1vw, 1.45rem); font-weight: 800; }
.lp-cta-copy p { margin: 6px 0 0; font-size: 0.9rem; color: #b9c5d9; }

/* ---------------------------------------------------------------- responsive */

/* Every single-column fallback below uses minmax(0, 1fr) rather than plain 1fr. `1fr` is shorthand
   for minmax(auto, 1fr), and `auto` means "at least min-content" -- which lets a wide child (the
   carousel track, a long heading) push the column past the viewport. minmax(0, 1fr) lets the
   column actually shrink, which is what makes these layouts safe on a phone. */
@media (max-width: 1180px) {
    .lp-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-pricing-shell { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    /* With the layout stacked there is no right-hand column for the photo to sit beside, so it
       becomes a faint full-width wash behind the whole hero instead of a masked edge. */
    .lp-hero::after {
        background-image: linear-gradient(180deg, rgba(13, 27, 47, 0.90) 0%, rgba(13, 27, 47, 0.96) 100%),
            var(--lp-hero-photo, none);
    }
    .lp-mock { transform: none; }
    .lp-listings-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lp-ai-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 860px) {
    .lp-container { width: calc(100% - 32px); }
    .lp-hero { padding: 108px 0 56px; }
    .lp-hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .lp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-mock { grid-template-columns: 1fr; }
    /* The nav rail is decorative on a phone and costs a third of the preview's width. */
    .lp-mock-rail { display: none; }
    .lp-mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-mock-panels { grid-template-columns: 1fr; }
    .lp-features, .lp-listings, .lp-ai { padding: 56px 0; }
    .lp-pricing { padding: 40px 0 56px; }
    .lp-pricing-shell { padding: 28px 20px; }
    .lp-cta-band { padding: 24px; }
}

@media (max-width: 560px) {
    .lp-hero h1 { font-size: 2.05rem; }
    .lp-hero-ctas .lp-btn { width: 100%; }
    .lp-feature-grid { grid-template-columns: minmax(0, 1fr); }
    .lp-ai-cards { grid-template-columns: minmax(0, 1fr); }
    .lp-plan-grid { grid-template-columns: minmax(0, 1fr); }
    /* One card per swipe, just short of full width so the next one peeks in and the gesture is
       discoverable without arrows. */
    .lp-carousel-track { grid-auto-columns: 84%; }
    .lp-cta-band { flex-direction: column; align-items: flex-start; }
    .lp-cta-band .lp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-feature-card, .lp-listing-card, .lp-ai-card { transition: none; }
    .lp-btn:hover, .lp-feature-card:hover, .lp-listing-card:hover, .lp-ai-card:hover { transform: none; }
    .lp-carousel-track { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- featured agents

   Section wrapper only. The cards inside keep their original .wra-featured-card styling from
   marketing.css untouched -- see the markup comment in Home.razor for why that surface is left
   exactly as it was. This just gives the section the new page's white ground and rhythm. */
.lp-agents { padding: 84px 0; background: var(--lp-surface); }
.lp-agents .wra-featured-grid { margin-top: 0; }

@media (max-width: 860px) {
    .lp-agents { padding: 56px 0; }
}