/* ============================================================================
   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); }

/* The hero's two CTAs. The markup has always asked for this class; it had no rule behind it, so
   the hero's primary action rendered at the same size as a pricing-card button. */
.lp-btn-lg { padding: 17px 32px; font-size: 1rem; border-radius: 13px; }

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

/* A visible focus ring on every button, on both grounds. Keyboard users get nothing from the
   hover transform alone, and the dark hero swallows the browser default outline. */
.lp-btn:focus-visible,
.lp-hero-assure:focus-visible,
.lp-hero-strip a:focus-visible,
.lp-hero-panels-link:focus-visible {
    outline: 3px solid #8ab4f8;
    outline-offset: 3px;
}

/* ================================================================================
   HERO — built to the comp (wwwroot/images/landing/wereferagents-hero-reference.png).

   THE COMP'S PROPORTIONS, MEASURED OFF THE 1536px ARTWORK:
     pitch column   38 – 500    (~32% of the content width)
     photograph    455 – 1050   (bleeds over both neighbours)
     panels       1060 – 1515   (~31%)
   so the three tracks are set at 1.05 / 1.15 / 1.02 and the photo is allowed a small
   horizontal bleed, which is what gives the comp its layered look. The image is
   pointer-events:none and sits at z-index 0 under both text columns, so the bleed is
   purely visual and can never intercept a click.

   THE HEADLINE NEEDS A CONDENSED FACE. In the comp "Refer More." is ~62px tall and
   352px wide — about 0.52em average advance, which no system-ui face can do (they run
   ~0.68em). Set in the system stack at a size that fits the column, the headline comes
   out a third smaller than the comp and the hero loses its shape. Barlow Condensed 800
   is the match, loaded from Google Fonts in App.razor and scoped to this headline and
   the trust figure only — the rest of the page keeps the system stack.

   BREAKPOINTS ARE ALL MIN-WIDTH. This block sits above the shared responsive section
   further down the file, so a max-width rule written here would be out-ordered by
   anything that section adds later; expressed as min-width the outcome does not depend
   on source order.

     base        one column — copy, photo, panels, strip stacked
     >= 520px    strip 1 -> 2 across
     >= 700px    strip 2 -> 3 across; marks 2 -> 4 across
     >= 960px    two columns — pitch | photo, panels below as a 2-up row
     >= 1240px   three columns — the comp's shape, strip 6 across

   EVERY TRACK IS minmax(0, …). Plain `1fr` is minmax(auto, 1fr), and `auto` means at
   least min-content, which lets a long word push a column past the viewport.
   ================================================================================ */

.lp-hero {
    position: relative;
    background: #050c18;
    color: #fff;
    /* No clearance for the header: .wra-header is position:sticky, so it occupies its own
       72px of normal flow and the hero begins after it. This is breathing room only. */
    padding: 40px 0 36px;
    overflow: hidden;
}

/* The comp's ambient wash: a cool spotlight behind the photograph, a deeper pool bottom-left,
   and a lift behind the panels. pointer-events:none so no layer can intercept a click. */
.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 52% -6%, rgba(23, 68, 150, 0.60), transparent 64%),
        radial-gradient(780px 560px at 6% 76%, rgba(20, 40, 88, 0.55), transparent 62%),
        radial-gradient(760px 560px at 94% 20%, rgba(18, 52, 122, 0.45), transparent 64%);
}

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

/* ---------------------------------------------------------------- badge row */

.lp-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lp-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 11px 22px;
    border-radius: 14px;
    background: rgba(13, 31, 62, 0.75);
    border: 1px solid rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 22px rgba(37, 99, 235, 0.18), 0 10px 30px rgba(4, 10, 24, 0.55);
}
.lp-hero-chip > i { font-size: 1.35rem; color: #60a5fa; }
.lp-hero-chip span {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.35;
    color: #dbe6f6;
}
.lp-hero-chip b { display: block; color: var(--lp-gold); font-weight: 800; }

.lp-hero-trust { display: inline-flex; align-items: center; gap: 15px; }
.lp-hero-trust > i { font-size: 2.6rem; color: var(--lp-gold); }
.lp-hero-trust small,
.lp-hero-trust em {
    display: block;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #9fb2cd;
}
.lp-hero-trust b {
    display: block;
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: #fff;
}

/* ---------------------------------------------------------------- the grid */

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    margin-top: 28px;
}

/* ---------------------------------------------------------------- column 1: pitch */

.lp-hero-copy { min-width: 0; position: relative; z-index: 2; }

.lp-hero h1 {
    margin: 0;
    /* See the note at the top of this block for why this is not the system stack. */
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-size: clamp(2.9rem, 8.4vw, 4.1rem);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: 0.002em;
    text-transform: uppercase;
}
.lp-hero h1 .lp-h1-1,
.lp-hero h1 .lp-h1-2,
.lp-hero h1 .lp-h1-3 { display: block; }
.lp-hero h1 .lp-h1-1 { color: #ffffff; }
.lp-hero h1 .lp-h1-2 { color: var(--lp-gold); }
.lp-hero h1 .lp-h1-3 { color: #ffffff; }

.lp-hero-lead {
    margin: 18px 0 0;
    max-width: 26rem;
    font-size: clamp(1.05rem, 2.1vw, 1.28rem);
    font-weight: 600;
    line-height: 1.32;
    color: #e6edf8;
}
.lp-hero-lead-accent { color: #4d9bff; }

.lp-hero-sub {
    margin: 16px 0 0;
    max-width: 27rem;
    font-size: 0.92rem;
    line-height: 1.68;
    color: #9db0cb;
}
.lp-hero-sub-accent { color: var(--lp-gold); font-weight: 700; }

/* ---- the four circle marks ---- */

.lp-hero-marks {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
}
.lp-hero-marks li { display: grid; justify-items: center; text-align: center; gap: 10px; }

.lp-hero-mark-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--lp-gold);
    color: var(--lp-gold);
    font-size: 1.15rem;
    background: rgba(245, 183, 49, 0.07);
}
.lp-hero-mark-label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    color: #cbd9ee;
}

.lp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.lp-hero-ctas .lp-btn { text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- the testimonial ---- */

.lp-hero-quote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 26px 0 0;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(9, 22, 44, 0.72);
    border: 1px solid rgba(96, 140, 200, 0.28);
}
.lp-hero-quote-photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(150, 180, 220, 0.35);
}
.lp-hero-quote-body { min-width: 0; }
.lp-hero-quote-stars { display: block; color: var(--lp-gold); font-size: 1.05rem; letter-spacing: 3px; }
.lp-hero-quote blockquote {
    margin: 9px 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #e6edf8;
}
.lp-hero-quote figcaption {
    margin-top: 11px;
    font-size: 0.84rem;
    color: #9db0cb;
}

/* ---------------------------------------------------------------- column 2: photograph */

.lp-hero-figure {
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    /* Under both text columns, so the photo's bleed at wide sizes is purely visual. */
    position: relative;
    z-index: 0;
}

/* THE EDGE FADE IS SPLIT ACROSS TWO ELEMENTS: the wrapper fades the bottom, the image fades the
   left and right.

   The source is a navy plate with a lit skyline behind the two agents, brighter than the hero
   ground, so an unmasked rectangle shows its edges plainly -- and the photo's left edge lands
   right against the end of the headline lines, where a hard edge is most obvious.

   The fade has to run on both axes. Doing that on ONE element means two mask layers plus
   mask-composite, which works but is the fiddliest corner of the mask spec and behaves
   differently across the -webkit- and standard properties. One single-layer mask per element
   composites nothing and is trivially predictable, for the cost of one wrapper span.

   A single radial mask is the other option and a worse one: sized so the image's corners clear
   its outer stop it has already eaten into the subjects, and sized to keep them it leaves the
   side edges around 60% opaque, which still reads as an edge while the stylesheet looks like it
   is masking. */
.lp-hero-photo-wrap {
    display: block;
    width: 100%;
    max-width: 460px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.lp-hero-photo {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ---- "AI Analyzes. AI Matches. You Grow." ---- */

.lp-hero-ai {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    width: 100%;
    max-width: 460px;
    margin-top: -26px;
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(7, 20, 44, 0.88);
    border: 1px solid rgba(77, 155, 255, 0.55);
    box-shadow: 0 0 38px rgba(37, 99, 235, 0.32), inset 0 0 26px rgba(37, 99, 235, 0.14);
    /* Above the photograph it overlaps, as the comp draws it. */
    position: relative;
    z-index: 1;
}
.lp-hero-ai-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 2px solid #4d9bff;
    color: #4d9bff;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    box-shadow: 0 0 20px rgba(77, 155, 255, 0.45), inset 0 0 14px rgba(77, 155, 255, 0.2);
}
.lp-hero-ai-copy { display: block; min-width: 0; }
.lp-hero-ai-copy strong {
    display: block;
    font-size: clamp(0.98rem, 1.5vw, 1.18rem);
    font-weight: 800;
    line-height: 1.28;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
}
.lp-hero-ai-copy strong b { color: #4d9bff; font-weight: 800; }
.lp-hero-ai-copy > span {
    display: block;
    margin-top: 7px;
    font-size: 0.83rem;
    line-height: 1.55;
    color: #9db0cb;
}

/* ---------------------------------------------------------------- column 3: panels */

.lp-hero-panels {
    min-width: 0;
    display: grid;
    gap: 16px;
    align-content: start;
    position: relative;
    z-index: 2;
}

.lp-panel {
    padding: 17px;
    border-radius: 16px;
    background: rgba(9, 21, 43, 0.82);
    border: 1px solid rgba(86, 124, 180, 0.32);
    box-shadow: 0 18px 44px rgba(3, 8, 20, 0.5);
}

.lp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.lp-panel-head h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
}
/* Drawn as a period selector in the comp. Styled as a caption, NOT as a control -- see the
   markup note: there is no filter behind it, so it must not read as a button. */
.lp-panel-period {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(24, 45, 80, 0.7);
    border: 1px solid rgba(96, 140, 200, 0.3);
    font-size: 0.74rem;
    font-weight: 600;
    color: #c2d2e8;
    white-space: nowrap;
}
.lp-panel-period i { font-size: 0.62rem; opacity: 0.8; }

.lp-panel-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #4d9bff;
    text-decoration: none;
    white-space: nowrap;
}
.lp-panel-link:hover,
.lp-panel-link:focus-visible { color: #fff; text-decoration: underline; }

/* FOUR ACROSS, as the comp draws them. The currency figure is set a step smaller than the
   three counts -- the comp does the same -- which is what lets "$48,600" hold a quarter track
   at the panel's narrowest (~76px) instead of forcing a second row. */
.lp-panel-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.lp-panel-stat {
    padding: 10px 5px;
    border-radius: 10px;
    background: rgba(6, 16, 34, 0.85);
    border: 1px solid rgba(86, 124, 180, 0.26);
    text-align: center;
}
.lp-panel-stat b {
    display: block;
    font-size: clamp(1.05rem, 2.1vw, 1.3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}
.lp-panel-stat span {
    display: block;
    margin-top: 4px;
    font-size: 0.56rem;
    line-height: 1.3;
    color: #8ea3c2;
}
.lp-panel-stat.is-gold { border-color: rgba(245, 183, 49, 0.5); }
.lp-panel-stat.is-gold b {
    font-size: clamp(0.82rem, 1.5vw, 0.98rem);
    /* Nudged onto the same optical baseline as the three larger counts beside it. */
    padding-top: 0.22em;
    color: var(--lp-gold);
}
.lp-panel-stat.is-gold span { color: var(--lp-gold); }

/* ---- the network map ---- */

.lp-panel-map { position: relative; margin-top: 14px; }
.lp-panel-map svg { display: block; width: 100%; height: auto; }

.lp-map-land {
    fill: rgba(37, 99, 235, 0.16);
    stroke: rgba(96, 165, 250, 0.6);
    stroke-width: 3;
    stroke-linejoin: round;
}
.lp-map-links path {
    fill: none;
    stroke: rgba(96, 165, 250, 0.45);
    stroke-width: 2.5;
}
.lp-map-dots circle {
    fill: #60a5fa;
    filter: drop-shadow(0 0 7px rgba(96, 165, 250, 0.95));
}

/* Faces pinned across the network, and the gold home marker at its centre, as the comp draws
   them. Percentages so they track the SVG at every panel width. */
.lp-map-face,
.lp-map-home {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
}
/* Sized to the comp, where the faces read as markers ON the map rather than cards over it --
   at 13% they swallowed the outline underneath. */
.lp-map-face {
    width: 9%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(200, 220, 245, 0.75);
    box-shadow: 0 0 10px rgba(6, 15, 32, 0.85);
}
.lp-map-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-map-home {
    left: 50%;
    top: 50%;
    width: 11%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-gold);
    color: var(--lp-gold-ink);
    font-size: 0.6rem;
    box-shadow: 0 0 16px rgba(245, 183, 49, 0.75);
}

/* ---- the leaderboard ---- */

.lp-panel-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lp-panel-rows li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 12px;
    grid-template-areas: "avatar name amount chev" "avatar market amount chev";
    column-gap: 11px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 11px;
    background: rgba(6, 16, 34, 0.7);
    border: 1px solid rgba(86, 124, 180, 0.24);
}

.lp-panel-avatar {
    grid-area: avatar;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(150, 180, 220, 0.4);
}
.lp-panel-name { grid-area: name; font-size: 0.86rem; font-weight: 700; color: #fff; }
.lp-panel-market { grid-area: market; font-size: 0.72rem; color: #8ea3c2; }
.lp-panel-amount { grid-area: amount; font-size: 0.86rem; font-weight: 800; color: var(--lp-gold); white-space: nowrap; }
.lp-panel-rows li > i { grid-area: chev; font-size: 0.7rem; color: #6d86ab; }

/* ---------------------------------------------------------------- capability strip */

.lp-hero-strip {
    list-style: none;
    margin: 34px 0 0;
    padding: 14px 8px;
    display: grid;
    /* One column on a phone. Two leaves each label ~90px once the icon track, gap and padding
       are out, which shreds "Secure Messaging & Introductions" into four lines. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    border-radius: 16px;
    background: rgba(8, 19, 40, 0.7);
    border: 1px solid rgba(86, 124, 180, 0.28);
}
.lp-hero-strip li { min-width: 0; }
.lp-hero-strip a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.35;
    color: #cbd9ee;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
}
.lp-hero-strip a:hover,
.lp-hero-strip a:focus-visible {
    background: rgba(77, 155, 255, 0.14);
    color: #fff;
    text-decoration: none;
}
.lp-hero-strip i { font-size: 1.4rem; color: #4d9bff; justify-self: center; }
.lp-hero-strip a:hover i,
.lp-hero-strip a:focus-visible i { color: var(--lp-gold); }

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

@media (min-width: 520px) {
    .lp-hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
    .lp-hero-marks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lp-hero-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-hero-photo-wrap { max-width: 520px; }
    .lp-hero-ai { max-width: 560px; }
}

/* Two columns: the pitch beside the photograph, panels below as a 2-up row. This keeps the
   photo NEXT TO the headline, which is the comp's relationship, rather than dropping it into
   a band of its own. */
@media (min-width: 960px) {
    .lp-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        gap: 32px 30px;
    }
    .lp-hero-copy { grid-column: 1; grid-row: 1; }
    .lp-hero-figure { grid-column: 2; grid-row: 1; }
    .lp-hero-panels { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .lp-hero-photo-wrap { max-width: 100%; }
    .lp-hero-ai { max-width: 100%; }
}

/* THE COMP'S SHAPE. */
@media (min-width: 1240px) {
    .lp-hero { padding: 48px 0 44px; }
    /* The pitch column is the widest of the three. In the comp "Grow your network." sits on ONE
       line and that three-line stack is the hero's whole shape -- at 1.05fr the column came out
       387px, the headline broke to four lines, and the two CTAs stacked instead of sitting side
       by side. 1.18fr gives it ~430px, which holds both. */
    .lp-hero-grid {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.08fr) minmax(300px, 1fr);
        gap: 26px;
        align-items: center;
    }
    .lp-hero-copy { grid-column: 1; grid-row: 1; align-self: start; }
    .lp-hero-figure { grid-column: 2; grid-row: 1; align-self: stretch; }
    .lp-hero-panels { grid-column: 3; grid-row: 1; grid-template-columns: minmax(0, 1fr); align-self: start; }
    /* The comp's layered composition: the photograph runs wider than its own track and laps
       over both neighbours. Safe because the image is pointer-events:none and the figure
       sits at z-index 0 beneath both text columns. */
    .lp-hero-photo-wrap { width: 122%; max-width: 122%; margin-inline: -11%; }
    .lp-hero-ai { max-width: 108%; margin-inline: -4%; margin-top: -34px; }
    /* The comp sets both CTAs on one row. At the full .lp-btn-lg size the uppercase pair needs
       ~416px against a 430px column, which wrapped as soon as the letter-spacing was added --
       so the hero's buttons tighten here rather than the column growing and the headline
       shrinking to pay for it. */
    .lp-hero-ctas .lp-btn-lg { padding: 15px 22px; font-size: 0.95rem; }
    /* Sized so "Grow your network." holds one line in the ~430px column above. The base clamp's
       ceiling is for a full-width phone, where the column is the whole page. */
    .lp-hero h1 { font-size: 3rem; }
    .lp-hero-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 16px 6px; }
    .lp-hero-strip a {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        text-align: center;
        justify-items: center;
        padding: 8px 10px;
    }
    /* The comp rules a hairline between each pair of strip items. */
    .lp-hero-strip li + li { border-left: 1px solid rgba(86, 124, 180, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero-strip a { transition: none; }
}

/* ---------------------------------------------------------------- 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;
    /* Four, not six: the approved design has four cards here. Left at six they rendered narrow
       and hugged the left edge, with the titles wrapping mid-phrase. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.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; }

/* ------------------------------------------------- listing benefits panel

   Shown in place of the carousel while Homepage:ShowHomepageFeaturedListings is false. The copy
   column and this panel carry similar weight, so the grid is rebalanced from the carousel's
   0.66fr / 2fr split -- a 2fr column would leave the panel looking stranded. */
.lp-listings-grid.is-promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

.lp-listing-benefits {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow);
    padding: 34px 32px;
}
.lp-benefits-title {
    margin: 0 0 22px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lp-ink);
}
.lp-benefits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }

.lp-benefit { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.lp-benefit-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--lp-indigo-soft);
    color: var(--lp-indigo);
    font-size: 1rem;
}
.lp-benefit-copy h4 {
    margin: 2px 0 4px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-benefit-copy p { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--lp-ink-2); }

/* ---------------------------------------------------------------- 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(2, 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); }
}

/* The hero is NOT listed in any of these max-width blocks. It owns its own breakpoints, all of
   them min-width, in the hero section near the top of this file -- see the note there. A max-width
   hero rule added down here would silently out-order every one of them. */
@media (max-width: 1024px) {
    /* .is-promo is repeated here on purpose: `.lp-listings-grid.is-promo` is more specific than
       `.lp-listings-grid`, so without it the promo layout would keep its two columns on mobile. */
    .lp-listings-grid,
    .lp-listings-grid.is-promo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    /* Copy above, preview below -- the browser mockup needs the full column width to stay legible. */
    .lp-leadgen-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-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-features, .lp-listings, .lp-ai, .lp-leadgen { padding: 56px 0; }
    .lp-hv-hero { grid-template-columns: minmax(0, 1fr); }
    .lp-hv-photo { display: none; }
    .lp-pricing { padding: 40px 0 56px; }
    .lp-pricing-shell { padding: 28px 20px; }
    .lp-listing-benefits { padding: 26px 20px; }
    .lp-cta-band { padding: 24px; }
}

@media (max-width: 560px) {
    /* Both hero CTAs go full width so neither is a narrow tap target beside a wide one. The
       headline needs no override here -- its clamp() already bottoms out at a phone-safe size. */
    .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; }
}

/* ------------------------------------------------- homeowner lead generation

   Agent-facing proof section: how Seller Opportunities enter the network. The right-hand column is
   a browser-chrome reproduction of the top of /home-value, built in HTML/CSS rather than dropped in
   as a screenshot so it stays readable at every width and cannot go stale silently. */
.lp-leadgen { padding: 84px 0; background: var(--lp-surface); }

/* Single column is the BASE, and the two-column layout is opted into above the breakpoint.
   This block is appended after the responsive section of this file, so a plain two-column base rule
   would out-order the max-width override further up and never stack -- the preview collapsed to
   158px on a 390px screen. Expressing it as min-width makes the outcome independent of source
   order. */
.lp-leadgen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

@media (min-width: 1025px) {
    .lp-leadgen-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 48px;
    }
}

.lp-leadgen-copy .lp-section-title { margin: 16px 0 18px; }
.lp-leadgen-copy > p { margin: 0 0 24px; color: var(--lp-ink-2); line-height: 1.7; font-size: 0.95rem; }

.lp-leadgen-points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }

    .lp-leadgen-points li {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        font-size: 0.93rem;
        color: var(--lp-ink);
        font-weight: 600;
    }

.lp-leadgen-point-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--lp-indigo-soft);
    color: var(--lp-indigo);
    font-size: 0.85rem;
}

/* ---- browser chrome ---- */
.lp-leadgen-preview { min-width: 0; }

.lp-browser {
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--lp-surface);
    box-shadow: var(--lp-shadow-lg);
}

.lp-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: #f1f3f8;
    border-bottom: 1px solid var(--lp-line);
}

.lp-browser-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lp-browser-dot.is-red { background: #ff5f57; }
.lp-browser-dot.is-amber { background: #febc2e; }
.lp-browser-dot.is-green { background: #28c840; }

.lp-browser-url {
    margin-left: 10px;
    padding: 4px 12px;
    flex: 1;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--lp-line);
    font-size: 0.72rem;
    color: var(--lp-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-browser-body { padding: 20px; background: #0d1b2f; }

/* ---- reproduced /home-value hero ---- */
.lp-hv-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center; }

.lp-hv-copy h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 1.02rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.lp-hv-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

    .lp-hv-benefits li {
        font-size: 0.74rem;
        color: rgba(255, 255, 255, 0.86);
        display: flex;
        gap: 7px;
        align-items: flex-start;
        line-height: 1.35;
    }

    .lp-hv-benefits i { color: var(--lp-gold); margin-top: 2px; flex-shrink: 0; }

.lp-hv-photo img { width: 100%; height: auto; border-radius: 10px; display: block; }

.lp-hv-form {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #ffffff;
}

.lp-hv-form-title { display: block; font-size: 0.82rem; font-weight: 700; color: var(--lp-ink); margin-bottom: 12px; }

.lp-hv-field { display: grid; gap: 4px; margin-bottom: 10px; min-width: 0; }
.lp-hv-field-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.lp-hv-label { font-size: 0.66rem; font-weight: 700; color: var(--lp-ink-2); }

.lp-hv-input {
    padding: 8px 10px;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 0.76rem;
    color: var(--lp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-hv-cta {
    margin-top: 4px;
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    background: var(--lp-indigo);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}