/* ==============================================================================================
   PUBLIC HOMEPAGE — HERO AND THE SECTIONS ADDED WITH THE APPROVED DESIGN

   White background, blue WeReferAgents branding, gold accents.

   THIS FILE REPLACED A DARK-NAVY HERO STYLESHEET. Every rule from that version is gone rather
   than left in place, because both used the .lph__ prefix — leaving the old rules would have them
   fighting the new ones for the same selectors, which is exactly the "old CSS still being served"
   problem the brief warns about. The file keeps its name so no cached stylesheet URL can serve the
   old design: same URL, entirely new contents.
   ============================================================================================== */

.lph {
    --lph-navy: #0f2540;
    --lph-blue: #1d4ed8;
    --lph-blue-soft: #eff4ff;
    --lph-gold: #f0b429;
    --lph-gold-dark: #b9820f;
    --lph-ink: #1f2937;
    --lph-muted: #5a6781;
    --lph-line: #e4e8f0;

    position: relative;
    padding: 56px 0 44px;
    background:
        radial-gradient(760px 420px at 88% 6%, #eef4ff 0%, rgba(238, 244, 255, 0) 70%),
        #ffffff;
    color: var(--lph-ink);
}

.lph__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 44px;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

/* ---------------------------------- Left: the pitch ---------------------------------- */

.lph__eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 7px 14px;
    border: 1px solid #d7e3ff;
    border-radius: 999px;
    background: var(--lph-blue-soft);
    color: var(--lph-blue);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lph__title {
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 3.6vw, 3.3rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lph-navy);
}

.lph__title-blue { color: var(--lph-blue); }

.lph__lead {
    max-width: 52ch;
    margin: 0 0 26px;
    font-size: 1rem;
    line-height: 1.68;
    color: var(--lph-muted);
}

.lph__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.lph__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.lph__btn--gold {
    background: linear-gradient(180deg, #f9cf5c 0%, var(--lph-gold) 100%);
    color: #26180a;
    box-shadow: 0 8px 20px rgba(240, 180, 41, 0.3);
}

.lph__btn--gold:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(240, 180, 41, 0.38); }

.lph__btn--outline {
    border: 1.5px solid var(--lph-blue);
    background: #fff;
    color: var(--lph-blue);
}

.lph__btn--outline:hover { background: var(--lph-blue-soft); }

/* The four trust indicators. A tile whose metric could not be substantiated is simply absent. */
.lph__trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--lph-line);
    list-style: none;
}

.lph__trust strong {
    display: block;
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--lph-navy);
    font-variant-numeric: tabular-nums;
}

.lph__trust span { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.35; color: var(--lph-muted); }

/* ---------------------------------- Right: photo + preview ---------------------------------- */

.lph__visual { position: relative; }

.lph__photo {
    display: block;
    width: 100%;
    max-width: 520px;
    /* Capped and cropped from the top rather than left to run at its native 436x700. Unconstrained
       it rendered ~836px tall, which pushed the hero far past the fold and left a column of empty
       white beside the copy. object-position keeps both faces in frame as it crops. */
    height: clamp(420px, 46vw, 560px);
    object-fit: cover;
    object-position: 50% 12%;
    margin: 0 0 0 auto;
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(15, 37, 64, 0.18);
}

/* The dashboard preview, layered over the photograph as in the design. Built from HTML and CSS,
   so there is no second image to download and no customer data to leak. */
.lph__preview {
    position: absolute;
    left: 0;
    bottom: -18px;
    width: min(330px, 74%);
    padding: 14px 16px;
    border: 1px solid var(--lph-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 37, 64, 0.2);
}

.lph__preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.82rem; }
.lph__preview-head strong { color: var(--lph-navy); }
.lph__preview-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; }

.lph__preview-tag {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lph__preview-body { display: flex; align-items: flex-start; gap: 14px; }

.lph__score { position: relative; flex: 0 0 auto; width: 62px; height: 62px; }
.lph__score-ring { width: 62px; height: 62px; transform: rotate(-90deg); }
.lph__score-track { fill: none; stroke: #e8eef8; stroke-width: 3.4; }

.lph__score-fill {
    fill: none;
    stroke: var(--lph-blue);
    stroke-width: 3.4;
    stroke-linecap: round;
    /* 92 of 100 around a circumference of ~100 units. */
    stroke-dasharray: 92 100;
}

.lph__score-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--lph-navy);
}

.lph__preview-place { margin: 0 0 2px; font-size: 0.94rem; font-weight: 700; color: var(--lph-navy); }
.lph__preview-meta { margin: 0 0 8px; font-size: 0.75rem; color: var(--lph-muted); }
.lph__preview-signals { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lph__preview-signals li { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--lph-ink); }
.lph__preview-signals i { color: #16a34a; font-size: 0.68rem; }

.lph__preview-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--lph-line);
    font-size: 0.7rem;
    color: var(--lph-muted);
}

/* ==============================================================================================
   SECTIONS ADDED WITH THE APPROVED DESIGN
   ============================================================================================== */

/* ---------------------------------- How It Works ---------------------------------- */

.lp-how { padding: 64px 0; background: #f8fafc; }

.lp-how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.lp-how-steps li {
    position: relative;
    padding: 28px 24px 24px;
    border: 1px solid var(--lph-line, #e4e8f0);
    border-radius: 14px;
    background: #fff;
}

.lp-how-num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: #1d4ed8;
    color: #fff;
    font-weight: 800;
}

.lp-how-steps h3 { margin: 0 0 8px; font-size: 1.04rem; color: #0f2540; }
.lp-how-steps p { margin: 0 0 14px; font-size: 0.88rem; line-height: 1.6; color: #5a6781; }

.lp-how-link,
.lp-audience-card a,
.lp-more-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
}

.lp-how-link:hover,
.lp-audience-card a:hover,
.lp-more-card a:hover { text-decoration: underline; }

/* ---------------------------------- Built for every professional ---------------------------------- */

.lp-audience { padding: 64px 0; background: #fff; }

.lp-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.lp-audience-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border: 1px solid var(--lph-line, #e4e8f0);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 37, 64, 0.04);
}

.lp-audience-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 1.14rem;
}

.lp-audience-icon.is-1 { background: #eff4ff; color: #1d4ed8; }
.lp-audience-icon.is-2 { background: #fff7e6; color: #b9820f; }
.lp-audience-icon.is-3 { background: #ecfdf5; color: #047857; }

.lp-audience-card h3 { margin: 0 0 8px; font-size: 1.06rem; color: #0f2540; }
.lp-audience-card p { margin: 0 0 16px; font-size: 0.88rem; line-height: 1.62; color: #5a6781; flex: 1; }

/* ---------------------------------- More tools ---------------------------------- */

.lp-more { padding: 64px 0; background: #f8fafc; }
.lp-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.lp-more-card {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border: 1px solid var(--lph-line, #e4e8f0);
    border-radius: 14px;
    background: #fff;
}

.lp-more-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
    border-radius: 11px;
    background: #eff4ff;
    color: #1d4ed8;
    font-size: 1.05rem;
}

.lp-more-card h3 { margin: 0 0 7px; font-size: 0.98rem; line-height: 1.3; color: #0f2540; }
.lp-more-card p { margin: 0 0 14px; font-size: 0.83rem; line-height: 1.58; color: #5a6781; flex: 1; }

/* ---------------------------------- Trusted vendors ---------------------------------- */

.lp-vendors { padding: 64px 0; background: #fff; }
.lp-vendors-intro { max-width: 60ch; margin: 10px auto 0; font-size: 0.92rem; line-height: 1.64; color: #5a6781; }

.lp-vendor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.lp-vendor-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--lph-line, #e4e8f0);
    border-radius: 13px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lp-vendor-card:hover { border-color: #1d4ed8; box-shadow: 0 6px 18px rgba(29, 78, 216, 0.1); }

.lp-vendor-logo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: #f1f5f9;
    color: #64748b;
    overflow: hidden;
}

.lp-vendor-logo img { width: 48px; height: 48px; object-fit: cover; }
/* overflow:hidden as well as min-width:0 — the verified badge is an inline element inside the
   name, and on a 360px screen it escaped the card's right edge without this. */
.lp-vendor-main { min-width: 0; overflow: hidden; }
.lp-vendor-main strong { display: block; font-size: 0.93rem; color: #0f2540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-vendor-main strong i { margin-left: 5px; font-size: 0.78rem; color: #1d4ed8; }
.lp-vendor-meta { display: block; margin-top: 2px; font-size: 0.79rem; color: #5a6781; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lp-vendor-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* ---------------------------------- Responsive ----------------------------------
   Not a shrunk desktop: the hero stacks with the photograph above the copy, and the dashboard
   preview leaves its absolute overlay position so it cannot cover the agents on a narrow screen. */

@media (max-width: 1024px) {
    .lph__inner { gap: 32px; }
    .lp-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
    .lph { padding: 36px 0 32px; }
    .lph__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .lph__visual { order: -1; }
    .lph__photo { max-width: 460px; margin: 0 auto; }

    /* In flow, under the photograph: overlaying it at this width covered the agents' faces.
       No negative margin — pulling it up tucked its own header row behind the photo's edge. */
    .lph__preview { position: static; width: min(460px, 100%); margin: 14px auto 0; }

    .lp-how-steps, .lp-audience-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .lph__inner { width: calc(100% - 32px); }
    .lph__title { font-size: clamp(1.85rem, 8vw, 2.3rem); }
    .lph__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .lph__ctas { flex-direction: column; align-items: stretch; }
    .lph__btn { width: 100%; }
    .lp-more-grid, .lp-vendor-grid { grid-template-columns: minmax(0, 1fr); }
    .lp-how, .lp-audience, .lp-more, .lp-vendors { padding: 44px 0; }
    .lp-vendor-ctas { flex-direction: column; }
    .lp-vendor-ctas .lp-btn { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
    .lph__photo, .lph__preview { max-width: 100%; }
    .lph__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .lph__btn, .lp-vendor-card { transition: none; }
    .lph__btn--gold:hover { transform: none; }
}