/* ============================================================================================
   WeReferAgents landing page (/) — WHITE design.

   Visual source of truth: wwwroot/images/wereferagents-landing-reference.png

   THIS FILE REPLACED A DARK NAVY/GOLD STYLESHEET WHOLESALE. The previous homepage was a dark
   hero with gold accents; none of it survives here, because leaving the old rules behind would
   mean two stylesheets competing for the same .lp-* class names. The namespace is reused, the
   contents are not.

   Namespace: .lp-*. Self-contained token block so the page owns its palette without touching the
   app-shell --wr-* tokens or leaking into any other page. Loaded from App.razor via @Assets[],
   which appends a content hash to the URL — that is this project's cache-busting mechanism (the
   Blazor equivalent of asp-append-version, which is an MVC/Razor-Pages tag helper and does not
   run inside .razor components).

   Bootstrap 5 is already loaded app-wide from App.razor; the multi-card rows below use its
   row/col grid, and these rules only supply the visual treatment on top of it.

   The page's header and footer are NOT here — they belong to MainLayout, which switches to
   .wra-header-light / .wra-footer-light on "/" (see marketing.css).
   ============================================================================================ */

.lp {
    /* ---- palette, sampled from the reference ---- */
    --lp-blue: #2563eb;
    --lp-blue-dark: #1d4ed8;
    --lp-blue-soft: #eaf1fe;
    --lp-blue-tint: #f4f8ff;

    --lp-amber: #e8991f;
    --lp-amber-soft: #fdf3e2;

    --lp-ink: #0d1a35;
    --lp-ink-2: #475467;
    --lp-ink-3: #7c8aa3;

    --lp-line: #e6e9f0;
    --lp-surface: #ffffff;
    --lp-surface-2: #f7f9fc;

    --lp-radius: 14px;
    --lp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --lp-shadow: 0 6px 20px rgba(16, 24, 40, 0.07);
    --lp-shadow-lg: 0 22px 60px rgba(16, 24, 40, 0.14);

    color: var(--lp-ink-2);
    background: var(--lp-surface);
    overflow-x: clip;
}

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

.lp h1, .lp h2, .lp h3, .lp h4 { margin: 0; color: var(--lp-ink); }

.lp-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-ink-3);
}

.lp-section-title {
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.lp-section-sub {
    margin: 8px 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--lp-ink-2);
}

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

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

.lp-btn-primary {
    background: var(--lp-blue);
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.lp-btn-primary:hover { background: var(--lp-blue-dark); color: #fff; }

.lp-btn-outline {
    background: #fff;
    border-color: #cfd8e8;
    color: var(--lp-ink);
}
.lp-btn-outline:hover { border-color: var(--lp-blue); color: var(--lp-blue); }

/* Keyboard users get nothing from the hover lift alone. */
.lp a:focus-visible,
.lp-btn:focus-visible {
    outline: 3px solid #93b4fb;
    outline-offset: 3px;
    border-radius: 9px;
}

/* The inline "Find Opportunities →" style link that ends most cards. */
.lp-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--lp-blue);
    text-decoration: none;
}
.lp-link i { font-size: 0.72rem; transition: transform 0.16s ease; }
.lp-link:hover { color: var(--lp-blue-dark); }
.lp-link:hover i { transform: translateX(3px); }

/* ================================================================================ HERO

   REBUILT TO THE MEASURED GEOMETRY OF THE REFERENCE ARTWORK, NOT TO A REINTERPRETATION OF IT.

   Source: wwwroot/images/wereferagents-landing-reference.png, a 1024x1536 canvas whose content
   column runs x 32..992 (960px wide) and whose hero band runs y 0..470. Every number below is
   that artwork's own coordinate expressed as a percentage of the same 960px column, so the
   composition survives any container width. .lp-container is 1200px, i.e. the artwork x1.25 --
   that factor is where the pixel values in this block come from.

     HORIZONTAL                                    ref px      here
       copy column                                   0..308       34% of the 1200px container
       gutter                                      308..329      1.6%
       visual column                               329..960     the rest, out to the VIEWPORT edge
         photograph             (of the visual)    404..631     right-anchored, clamp(250,26vw,520)
         dashboard card         (of the visual)      0..424     whatever the photograph leaves,
                                                                plus a 34px lap over it, max 700
         activity card          (of the visual)    398..633     the lower row, +140px overhang
       benefit strip (of the COPY column)            0..413       140%  -- wider than the copy

   ONLY THE HERO BREAKS THE CONTAINER, AND ONLY ON THE RIGHT. The artwork is a 1024px canvas, so
   its photograph necessarily stops at the content column. On a real 1920px monitor that left 320px
   of dead white down the right edge and sliced the third agent against the column boundary. See
   the >=992px block for how the inner block keeps the container's left edge and runs its right
   edge to 100vw.

     VERTICAL, measured down from the foot of the header (ref y 95)
       eyebrow                                        22          37px
       h1                                         47..145     59..181px
       lead                                      162..200    202..253px
       CTA row                                   221..254    276..317px
       benefit strip                             311..337    389..421px
       dashboard card                             45..343     56..429px
       hero foot                                     360         450px

   THE COPY COLUMN IS 34%, NOT THE ARTWORK'S 32.1%. The reference sets "More Opportunities." at
   42px across 305 of its 960px column; this page's typeface runs wider per character, so at the
   artwork's exact ratio the headline wrapped to four lines. Widening the track by two points and
   narrowing the gutter to match buys the line back at ~38px without moving where the dashboard
   starts by more than 15px.

   WHY THIS IS A GRID AND NOT A STACK OF ABSOLUTE BLOCKS. The previous attempt positioned the
   dashboard at `left: 34.2%` of the VIEWPORT while the copy lived inside a centred, capped
   container. Those two coordinate systems only agree when the viewport happens to equal the
   container width; at 1280px the card landed on top of "More Opportunities." / "More
   Connections." Two grid tracks cannot overlap, so the headline is structurally safe now.

   THE THREE LAYERS. Photograph at z 0, dashboard at z 1 beside it, and the Recent Activity panel
   inside the dashboard breaking out over the photograph's left edge. The dashboard card is NOT
   drawn across the copy: it starts at 34.3% of the content column, which is where the reference
   starts it.

   THE HERO IS PULLED UP UNDER THE STICKY HEADER. Negative top margin equal to the header height,
   paid back as padding, so the photograph can begin at y=0 of the page with the man's head level
   with the navigation -- which is how the reference frames it. The header goes transparent over
   this hero (.wra-header-hero in marketing.css) and turns solid white on scroll.
   ================================================================================ */

/* THE HERO STARTS BELOW THE HEADER AND STAYS THERE.

   There is deliberately no negative margin-top here. This section used to be pulled up underneath
   a transparent header by the header's own height so the photograph could begin at y=0 of the
   page, reproducing the artwork's overlap. That made the photograph -- not the navigation -- the
   owner of the viewport's top-right corner, which read as the hero cutting into the header. The
   header is opaque and full-width now (see .wra-header-hero in marketing.css) and this section
   begins under it, in normal flow.

   overflow:hidden is the guarantee, not a tidy-up: it clips every child to this section's box, so
   no absolutely positioned layer inside the hero -- photograph, blurred fill, dashboard -- can
   escape upward into the header even if its own offsets change. Nothing in here may use a negative
   top that would need to. */
.lp-hero {
    position: relative;
    background: var(--lp-surface);
    padding-top: 28px;
    padding-bottom: 26px;
    overflow: hidden;
}

/* The soft blue wash the reference shows bleeding in from the right. */
.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(760px 560px at 88% 4%, rgba(37, 99, 235, 0.07), transparent 66%);
}

.lp-hero-inner { position: relative; z-index: 1; }

/* ---- track 1: the pitch ---- */

.lp-hero-content { display: flex; flex-direction: column; position: relative; z-index: 2; }

.lp-hero .lp-eyebrow { margin-bottom: 14px; font-size: 0.7rem; }

.lp-hero h1 {
    margin: 0;
    /* 34px of type on the 1024 canvas -> 42px here. Anything larger pushes the lead, the buttons
       and the benefit strip down and the left column stops lining up with the artwork. */
    font-size: clamp(1.72rem, 2.95vw, 2.36rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.035em;
}
.lp-hero h1 span { display: block; }
.lp-hero h1 .lp-h1-blue { color: var(--lp-blue); }

.lp-hero-lead {
    margin: 21px 0 0;
    max-width: 24rem;
    font-size: clamp(0.95rem, 1.2vw, 1.06rem);
    line-height: 1.5;
    color: var(--lp-ink-2);
}

/* The reference draws these at 120x33 and 156x33 on its 1024 canvas -- noticeably tighter than
   the page's default .lp-btn, which is sized for the full-width bands further down. */
.lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 24px; }
.lp-hero-ctas .lp-btn { padding: 11px 22px; font-size: 0.9rem; border-radius: 8px; }

/* ---- the four benefit items, hairline-divided as the reference draws them ----

   PINNED TO THE FOOT OF THE COPY COLUMN (margin-top:auto inside the flex column) so it lines up
   with the bottom of the dashboard instead of floating right under the buttons.

   WIDER THAN THE COPY ABOVE IT, ON PURPOSE. The reference runs the strip to x 445 while the
   headline stops at x 337; at the copy column's own width the fourth label ("A More Connected
   Real Estate Community") wrapped to three lines and the row lost its shape. 134% is the
   artwork's ratio. It passes UNDER the dashboard's rail, which is why the rail is a separate,
   shorter card -- see .lp-dash-rail. */

.lp-trust {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
    margin: 30px 0 0;
    padding: 0;
    position: relative;
    z-index: 2;
}
.lp-trust li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding-left: 12px;
    border-left: 1px solid var(--lp-line);
}
.lp-trust li:first-child { padding-left: 0; border-left: 0; }
.lp-trust i { font-size: 0.95rem; color: var(--lp-amber); justify-self: center; }
.lp-trust span { font-size: 0.55rem; font-weight: 600; line-height: 1.4; color: var(--lp-ink-2); }

/* ---- track 2: the photograph and the dashboard ---- */

.lp-hero-visual { position: relative; }

/* The three professionals. Hidden below the desktop breakpoint: a photograph that runs to the
   viewport edge and a card that overhangs it cannot both survive a phone. */
.lp-hero-people { display: none; }

/* ================================================================ THE DASHBOARD

   TWO CARDS, NOT ONE, AND THAT IS DELIBERATE. In the reference the nav rail ends at y 394 while
   the content panel runs on to y 438 -- the bottom-left corner is cut away, and the fourth
   benefit item sits in the space it leaves. Rendering this as a single rectangle put the card on
   top of that item. So the rail and the body are separate surfaces sharing one hairline, and the
   shadow is a drop-shadow on the group, which follows the composed L-shaped silhouette instead of
   drawing a box edge through the middle of it.

   EVERY DIMENSION IN THIS BLOCK IS IN em, AND THAT IS THE POINT. The card is no longer a fixed
   530px: on a wide screen it grows with the hero so the composition fills the viewport instead of
   sitting in a narrow centred column. Sized in px, its type and padding stayed put while the box
   grew and the mock turned into a sparse, under-set panel. One font-size on .lp-dash now scales
   the whole illustration, so it reads identically at 580px and at 700px. Change the base, not the
   parts. */

.lp-dash {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 26px;
    /* The single knob the rest of this block is expressed against. */
    font-size: clamp(11px, 1.6vw, 14px);
    filter: drop-shadow(0 16px 30px rgba(16, 24, 40, 0.13));
}

.lp-dash-rail {
    display: none;
    padding: 1.08em 0.75em;
    border: 1px solid #eef1f6;
    border-right: 0;
    border-radius: 13px 0 0 13px;
    background: #fff;
}
.lp-dash-brand { display: flex; align-items: center; gap: 0.42em; margin-bottom: 1.08em; padding-left: 0.33em; }
.lp-dash-brand i { color: var(--lp-blue); font-size: 1.1em; }
.lp-dash-brand b { font-size: 0.82em; font-weight: 800; color: var(--lp-ink); white-space: nowrap; }
.lp-dash-brand b span { color: var(--lp-blue); }
.lp-dash-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.17em; }
.lp-dash-rail li {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 0.75em;
    border-radius: 0.58em;
    color: #55637a;
    /* The rail is only 24.7% of the card. At anything larger "Seller Opportunities" runs past
       the hairline and is painted over by the body card sitting beside it. */
    font-size: 0.79em;
    white-space: nowrap;
}
.lp-dash-rail li i { width: 0.92em; font-size: 0.75em; color: #8fa0ba; }
.lp-dash-rail li.is-active { background: var(--lp-blue-soft); color: var(--lp-blue); font-weight: 700; }
.lp-dash-rail li.is-active i { color: var(--lp-blue); }

.lp-dash-body {
    min-width: 0;
    padding: 1em;
    border: 1px solid #eef1f6;
    border-radius: 13px;
    background: #fff;
}

/* ---- top bar ---- */

.lp-dash-top { display: flex; align-items: center; gap: 0.83em; padding-bottom: 0.83em; border-bottom: 1px solid #f1f4f8; }
.lp-dash-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.58em;
    border: 1px solid #e7ebf2;
    border-radius: 999px;
    padding: 0.42em 1em;
    color: #9aa7bd;
    font-size: 0.83em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-dash-search i { font-size: 0.75em; }
.lp-dash-bell { position: relative; color: #6b7a92; font-size: 1em; flex-shrink: 0; }
.lp-dash-bell em { position: absolute; top: -0.17em; right: -0.25em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--lp-blue); }
.lp-dash-user { display: flex; align-items: center; gap: 0.58em; flex-shrink: 0; }
.lp-dash-user img { width: 1.92em; height: 1.92em; border-radius: 50%; object-fit: cover; }
.lp-dash-user b { display: block; font-size: 0.83em; font-weight: 700; color: var(--lp-ink); white-space: nowrap; }
.lp-dash-user small { display: block; font-size: 0.71em; color: #93a0b5; white-space: nowrap; }
.lp-dash-user > i { font-size: 0.67em; color: #93a0b5; }

/* ---- welcome band ---- */

.lp-dash-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: 0.5em 0 0.58em; }
.lp-dash-welcome b { display: block; font-size: 1.04em; font-weight: 800; color: var(--lp-ink); }
.lp-dash-welcome small { display: block; margin-top: 0.17em; font-size: 0.71em; color: #8593aa; }
.lp-dash-quote {
    flex-shrink: 0;
    max-width: 11.7em;
    padding-bottom: 0.42em;
    border-bottom: 2px solid var(--lp-amber);
    font-size: 0.79em;
    font-style: italic;
    line-height: 1.4;
    color: #6f7d94;
    text-align: right;
}

/* ---- KPI tiles ---- */

.lp-dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.67em; }
.lp-dash-kpi { padding: 0.58em 0.62em; border-radius: 0.67em; background: #f5f8ff; }
.lp-dash-kpi.is-green { background: #eefaf2; }
.lp-dash-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 0.3em; font-size: 0.6em; font-weight: 600; color: #5d6b82; }
.lp-dash-kpi-head i {
    width: 1.45em; height: 1.45em; border-radius: 0.45em;
    display: inline-flex; align-items: center; justify-content: center;
    background: #dceafd; color: var(--lp-blue); font-size: 0.75em;
}
.lp-dash-kpi.is-green .lp-dash-kpi-head i { background: #cdf0da; color: #1a9b53; }
.lp-dash-kpi b { display: block; margin: 0.17em 0 0.25em; font-size: 1.58em; font-weight: 800; color: var(--lp-ink); line-height: 1.1; }
.lp-dash-kpi em { font-style: normal; font-size: 0.68em; font-weight: 600; color: var(--lp-blue); }
.lp-dash-kpi.is-green em { color: #1a9b53; }
.lp-dash-kpi em i { font-size: 0.63em; margin-left: 0.17em; }

/* ---- the lower row: map inside the card, activity feed hanging over the photograph ----

   ONE GRID THAT IS WIDER THAN ITS PARENT. The reference draws the map inside the card and the
   Recent Activity panel past the card's right edge, on the photograph. The overhang is a flat
   100px rather than a percentage: the card's own right edge already sits 100px into the
   photograph (see .lp-dash's margin-right at >=992px), so a proportional overhang would eat more
   and more of the people the wider the screen got. A constant one keeps the panel the same
   distance into the photo at 1366 and at 1920, and both panels stay top- and bottom-aligned
   because they are cells of the same row. Nothing here is absolutely positioned. */

.lp-dash-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75em; margin-top: 0.75em; }

.lp-dash-map { padding: 0.83em 0.92em; border: 1px solid #eef1f6; border-radius: 0.83em; }
.lp-dash-map h4 { font-size: 0.88em; font-weight: 800; color: var(--lp-ink); }
.lp-dash-map-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5em; align-items: center; margin-top: 0.5em; }
/* HEIGHT-CAPPED ON PURPOSE. The map viewBox is 1016x616; at width:100%/height:auto it resolves
   to ~280px, which is taller than the whole card the reference draws. preserveAspectRatio
   letterboxes the drawing inside the box instead. In em so it tracks the card. */
.lp-dash-map-row svg { display: block; width: 100%; height: 10em; }
.lp-map-land { fill: #e4ecf8; stroke: #cfdcf2; stroke-width: 3; stroke-linejoin: round; }
.lp-map-arcs path { fill: none; stroke: #9cc0f7; stroke-width: 3; }
.lp-map-dots circle { fill: var(--lp-blue); }
.lp-map-dots circle.is-soft { fill: #a9c8f8; }
.lp-dash-legend { display: grid; gap: 0.33em; align-content: center; }
.lp-dash-legend b { font-size: 0.83em; font-weight: 800; color: var(--lp-ink); line-height: 1.3; margin-bottom: 0.25em; }
.lp-dash-legend span { display: flex; align-items: center; gap: 0.58em; font-size: 0.75em; color: #61708a; }
.lp-dash-legend i { width: 0.58em; height: 0.58em; border-radius: 50%; background: var(--lp-blue); }
.lp-dash-legend i.is-mid { background: #7fb0f5; }
.lp-dash-legend i.is-soft { background: #c2d9fb; }

.lp-dash-feed {
    padding: 0.83em 0.92em;
    border: 1px solid #eef1f6;
    border-radius: 0.83em;
    background: #fff;
}
.lp-dash-feed h4 { display: flex; align-items: center; justify-content: space-between; font-size: 0.88em; font-weight: 800; color: var(--lp-ink); }
.lp-dash-feed h4 span { font-size: 0.75em; font-weight: 600; color: var(--lp-blue); }
.lp-dash-feed ul { list-style: none; margin: 0.67em 0 0; padding: 0; display: grid; gap: 0.58em; }
.lp-dash-feed li { display: grid; grid-template-columns: 1.75em minmax(0, 1fr); gap: 0.75em; align-items: start; }
.lp-dash-feed li i {
    width: 1.75em; height: 1.75em; border-radius: 0.5em;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75em;
}
.lp-dash-feed li i.is-amber { background: #fdf0dc; color: var(--lp-amber); }
.lp-dash-feed li i.is-blue { background: #dceafd; color: var(--lp-blue); }
.lp-dash-feed b { display: block; font-size: 0.79em; font-weight: 600; color: var(--lp-ink); line-height: 1.35; }
.lp-dash-feed small { font-size: 0.71em; color: #97a3b8; }
/* ================================================================ shared section shells */

.lp-section { padding: 56px 0; }
.lp-section.is-tint { background: var(--lp-surface-2); }
/* The first band under the hero. The reference leaves 13px between the foot of the hero and the
   top of the four cards -- not the 68px this section normally takes, which read as a large empty
   white area that exists nowhere in the artwork. */
.lp-section.is-flush { padding-top: 22px; }
.lp-section-head { margin-bottom: 26px; }

/* A white card with a hairline border -- the repeating object across the page. */
.lp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 17px;
    border-radius: 11px;
    border: 1px solid var(--lp-line);
    background: #fff;
    box-shadow: var(--lp-shadow-sm);
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.lp-card:hover {
    border-color: #c9d6ee;
    box-shadow: var(--lp-shadow);
    transform: translateY(-2px);
    text-decoration: none;
}
.lp-card h3 { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.lp-card p { margin: 6px 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--lp-ink-2); }
.lp-card .lp-link { margin-top: auto; padding-top: 12px; }

/* The reference sets the icon in a LEFT COLUMN beside the text, not stacked above it. That is
   what keeps the four cards under the hero one row deep. */
.lp-card.is-row { flex-direction: row; align-items: flex-start; gap: 12px; }
.lp-card.is-row .lp-card-icon { margin-bottom: 0; flex-shrink: 0; }
.lp-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.lp-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--lp-amber-soft);
    color: var(--lp-amber);
    font-size: 1.15rem;
}
.lp-card-icon.is-blue { background: var(--lp-blue-soft); color: var(--lp-blue); }
/* The reference tints only the first of the four hero cards amber; the other three are blue. */
[data-testid="feature-cards"] > div:not(:first-child) .lp-card-icon {
    background: var(--lp-blue-soft);
    color: var(--lp-blue);
}

/* Bootstrap's gutter leaves the columns flush; this gives each row breathing room. */
.lp-row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
/* ================================================================ how it works */

.lp-how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }

.lp-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.lp-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; text-decoration: none; }
.lp-step:hover { text-decoration: none; }
.lp-step-num {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--lp-blue-soft);
    color: var(--lp-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.95rem;
}
.lp-step h3 { font-size: 0.95rem; font-weight: 700; }
.lp-step p { margin: 5px 0 0; font-size: 0.84rem; line-height: 1.6; color: var(--lp-ink-2); }
.lp-step:hover h3 { color: var(--lp-blue); }

/* ================================================================ tools */

.lp-tool { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; align-items: start; text-decoration: none; }
.lp-tool:hover { text-decoration: none; }
.lp-tool-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--lp-blue-soft);
    color: var(--lp-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.lp-tool h3 { font-size: 0.9rem; font-weight: 700; }
.lp-tool p { margin: 5px 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--lp-ink-2); }
.lp-tool:hover h3 { color: var(--lp-blue); }

/* ================================================================ testimonials — none.

   The .lp-quote* rules that lived here styled a "What Agents Are Saying" band carrying two quotes
   reproduced from the design comp. The platform holds no reviews, so those were placeholders
   presented as customer proof; the section and its styles were removed rather than restyled.
   Real, consented testimonials would come from data and get their own component. */

/* ================================================================ featured agents */

/* Not in the reference and deliberately kept: "Featured Homepage Placement" is a paid add-on
   whose entire deliverable is rotation into a featured section on this page. The cards keep
   their shared .wra-featured-card markup (an existing e2e suite asserts against it); only the
   section shell is restyled to the white design. */
.lp-agents .wra-featured-grid { margin-top: 0; }

/* ================================================================ closing CTA */

.lp-cta { padding: 0 0 56px; }
.lp-cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 30px;
    border-radius: 16px;
    background: var(--lp-blue-tint);
    border: 1px solid #dbe7fb;
}
.lp-cta-band h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.lp-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-cta-words {
    display: grid;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--lp-ink-3);
}

/* ================================================================================ responsive

   Single column is the BASE and wider layouts are opted into with min-width, so nothing here
   depends on source order. Every grid track is minmax(0, ...): plain 1fr is minmax(auto, 1fr),
   and `auto` means at-least-min-content, which is what lets a wide child push a column past the
   viewport on a phone.

   The hero's reference composition -- photograph top-right, dashboard beside it, activity panel
   lapping over the photograph -- is a DESKTOP layout. Below 992px it degrades to a single stacked
   column (copy, then dashboard, no photograph). */

@media (min-width: 768px) {
    .lp-section { padding: 68px 0; }
    .lp-section.is-flush { padding-top: 18px; }
    .lp-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lp-dash { grid-template-columns: 148px minmax(0, 1fr); }
    .lp-dash-rail { display: block; }
    .lp-dash-body { border-radius: 0 13px 13px 0; }
    .lp-dash-map-row { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1em; }
    .lp-cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: 34px 38px; }
    .lp-cta-actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- THE WIDE HERO

   THE HERO IS THE ONE BAND THAT BREAKS OUT OF THE 1200px CONTAINER, AND ONLY ON ITS RIGHT SIDE.

   The reference comp is a 1024px canvas, so everything in it necessarily ends at the content
   column. On a real 1920px monitor, holding the photograph to that column left 320px of empty
   white down the right-hand edge and cropped the third agent against the column's boundary. So at
   desktop widths the hero's inner block keeps the container's LEFT edge -- the headline does not
   move by a pixel -- and runs its right edge out to the viewport:

       width  = container + the container's own right gutter
       margin = auto on the left, 0 on the right

   which resolves to exactly the container's left edge at every width, and to 100vw on the right.
   Everything else on the page still sits in the plain 1200px container.

   The three zones then read left to right: copy, dashboard, photograph running off the screen
   edge.

   NO HORIZONTAL CROP, EVER. That is the rule the previous build broke. .lp-hero-people is given
   the photograph's OWN aspect ratio (570x750), so object-fit:cover has nothing to trim on either
   side and the agent on the right keeps her face and shoulder whatever the viewport does. Any box
   narrower than 570/750 would crop inward from both edges -- which is precisely how she lost her
   right-hand side before. If this ratio is ever changed, it may only be made WIDER.

   THE OVERLAP IS A CONSTANT, NOT A PERCENTAGE. The card's right edge sits 100px into the
   photograph and the Recent Activity panel reaches 100px further still, at every width. A
   proportional overlap would swallow more of the group the wider the screen got. 100px lands on
   bodies, never on faces: the three heads occupy roughly the top quarter of the frame, which at
   these sizes is entirely above the card's top edge at 56px below the fold of the header. */
@media (min-width: 992px) {
    .lp-hero {
        /* No padding-top at desktop: the photograph is anchored to this section's own top edge,
           which is the underside of the header. The copy column carries its own top padding
           instead, so only the text is inset -- the picture starts where the band starts. */
        padding-top: 0;
        /* The container this page is otherwise built on, and its gutter. Every width below is
           derived from these two so the composition stays in proportion at any viewport. */
        --lp-shell: min(1200px, calc(100vw - 40px));
        --lp-bleed: calc((100vw - var(--lp-shell)) / 2);
        /* Grows with the screen, then stops: past ~2000px a larger photograph would put the
           group out of scale with the copy beside it. */
        --lp-photo-w: clamp(240px, 22vw, 420px);
        /* HOW FAR THE DASHBOARD CARD LIES ACROSS THE PHOTOGRAPH. ZERO, AND THAT IS NOT A
           COMPROMISE -- IT IS THE ONLY VALUE THE FILE ALLOWS.

           hero-people.jpg is cropped tight to the group: the agent on the left begins at the file's
           very first column of pixels, and her face occupies roughly 2%..16% of the frame's width.
           There is no margin of background beside her to lay a card over. Every pixel the card
           covers therefore comes straight off her face -- at 34px, with a soft left-edge mask
           eating another 8% on top of it, she was cut in half.

           So the card's right edge now meets the photograph's left edge and stops. The overlap that
           carries the composition is the Recent Activity panel instead: it juts 140px into the
           frame, but it sits in the card's lower half, well below the three heads, so it falls
           across bodies and never faces. If you raise this number, check her face first. */
        --lp-overlap: 0px;
        padding-bottom: 21px;
    }

    .lp-hero-inner {
        width: calc(var(--lp-shell) + var(--lp-bleed));
        margin-left: auto;
        margin-right: 0;
        display: grid;
        grid-template-columns: calc(0.34 * var(--lp-shell)) minmax(0, 1fr);
        column-gap: calc(0.016 * var(--lp-shell));
        align-items: stretch;
    }

    /* 27px is the reference's gap between the foot of the header and the eyebrow. */
    .lp-hero-content { padding-top: 52px; }

    /* Pinned to the foot of the column so it lines up with the bottom of the dashboard, and run
       out to 140% of the copy column because that is the artwork's ratio -- see .lp-trust. */
    .lp-trust { width: 140%; margin-top: auto; padding-top: 34px; }

    /* Right-aligned so the card hangs off the photograph's left edge rather than being positioned
       at some coordinate that only holds at one width. */
    .lp-hero-visual { display: flex; justify-content: flex-end; align-items: flex-start; }

    /* THE PHOTOGRAPH. `top: 0` -- flush with the top of the hero band, which is the underside of
       the header. It used to be negative by the header's height so the image began at y=0 of the
       PAGE, behind the navigation; that is the overlap that read as the hero cutting into the
       header, and it is gone. The box carries the file's own 570x750 ratio, so nothing is cropped
       left or right at any width. */
    .lp-hero-people {
        display: block;
        position: absolute;
        z-index: 0;
        top: 0;
        left: auto;
        right: 0;
        width: var(--lp-photo-w);
        aspect-ratio: 570 / 750;
        height: auto;
        object-fit: cover;
        object-position: 50% 50%;
        pointer-events: none;
        /* ONE EDGE, AND ONLY THE BOTTOM ONE. It fades into the out-of-focus fill behind it (see
           .lp-hero-visual::before) rather than ending in a hard horizontal cut.

           THERE IS NO LEFT-EDGE FADE ANY MORE, AND THERE MUST NOT BE ONE. A second layer used to
           dissolve the leftmost 8% of the frame so the file's straight vertical crop would not read
           as a cut against the white page. But the agent on the left IS that first 8% -- her face
           runs from about 2% to 16% -- so the fade was erasing half of it, and the dashboard's
           overlap was taking the rest. The soft edge now comes from the blurred underlay, which
           extends 24px past this image on the left and gives the crop a halo without touching a
           single pixel of her.

           Keeping it to one layer also sidesteps mask-composite entirely. For the record, if a
           second layer is ever added the operator list has to be `add, intersect`: layers composite
           bottom-up onto a transparent canvas, so a bare `intersect` intersects the first layer
           with nothing and the whole photograph disappears. */
        -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    }

    /* THE OUT-OF-FOCUS CONTINUATION BELOW THE FIGURES.

       The artwork's photograph fills its corner down to the foot of the hero. hero-people.jpg is
       a tighter crop, and at the width that keeps the group in scale it stops short of that. The
       band behind it is therefore the same frame, blurred -- the office it was shot in, carrying
       on out of focus, which is what the reference shows there anyway. Inset past every clipped
       edge so the blur's own falloff never reads as a halo; .lp-hero clips it. Decorative, behind
       everything, and it costs no extra request. */
    .lp-hero-visual::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -24px;
        bottom: -24px;
        right: -24px;
        width: calc(var(--lp-photo-w) + 48px);
        background: url("/images/landing/hero-people.jpg") 50% 12% / cover no-repeat;
        filter: blur(26px) saturate(0.82) brightness(1.1);
        opacity: 0.72;
        pointer-events: none;
        /* DISSOLVED AT THE FOOT, WHICH IS THE WHOLE DIFFERENCE BETWEEN THIS READING AS DEPTH AND
           READING AS A MISTAKE. How far the sharp photograph reaches down the band depends on how
           wide it is, so between about 1366 and 1600 it stops short and the fill was left standing
           as a large blurred RECTANGLE with a hard bottom edge. Fading it out turns that shortfall
           into a soft vignette at every width instead of a box that appears and disappears with
           the viewport. One mask layer, so no mask-composite is involved. */
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
    }

    /* Fills whatever the photograph leaves, plus the overlap, and is capped so the mock never
       becomes the whole hero on an ultrawide. Right-aligned by the flex parent; the margin is
       what lays it across the photograph. */
    .lp-dash {
        width: calc(100% - var(--lp-photo-w) + var(--lp-overlap));
        max-width: 700px;
        margin-top: 56px;
        margin-right: calc(var(--lp-photo-w) - var(--lp-overlap));
        grid-template-columns: 24.7% minmax(0, 1fr);
        font-size: clamp(11.5px, 0.95vw, 14px);
    }

    /* The cut-away bottom-left corner, and the only width at which it exists. It is what lets the
       fourth benefit item pass under the card; at tablet width the strip is a plain full-width row
       below the copy, so the rail stretches and the card is an ordinary rectangle. */
    .lp-dash-rail { align-self: start; }

    .lp-dash-lower {
        /* See the note on .lp-dash-lower: a flat overhang, so the panel sits the same distance
           into the photograph at every width. */
        width: calc(100% + 140px);
        grid-template-columns: minmax(0, 400fr) minmax(0, 430fr);
        gap: 0.83em;
    }
    .lp-dash-feed { box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08); }

    .lp-how-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 40px; }
    .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .lp-cta-band { padding: 38px 44px; }
}

@media (min-width: 1200px) {
    .lp-dash-body { padding: 1.17em; }
    .lp-dash-map-row svg { height: 11em; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-card, .lp-link i { transition: none; }
    .lp-btn:hover, .lp-card:hover { transform: none; }
    .lp-link:hover i { transform: none; }
}