/* welcome-immersive.css
   Social-media welcome campaign landing page (/welcome/{code}).
   Hybrid: a full immersive narrative page whose single conversion point is the
   sign-in + instructions + checkout block pinned in the hero (id="start"). Every
   secondary CTA on the page scrolls back to #start rather than duplicating the form.
   Palette: Navy #0B2D39 · Yellow #F4B400 · Beige #F5F2E7 · Clay #C96E4A · Sage #8FAE91 */

.wl-page { --navy:#0B2D39; --yellow:#F4B400; --beige:#F5F2E7; --clay:#C96E4A; --sage:#8FAE91;
    color: var(--navy); }
/* Editorial serif for the big display headings only; body stays the site sans. */
.wl-h1, .wl-h2, .wl-listing__initials, .wl-quote, .wl-offercard__head h3 {
    font-family: Georgia, "Playfair Display", "Times New Roman", serif; }

/* Neutralize _HomeLayout's shell + its inner Bootstrap .container so the immersive
   sections render full-bleed (matches how claim-immersive.css frees the same wrapper).
   Scoped via :has so no other _HomeLayout page is affected. */
.home-shell:has(.wl-page) { max-width: none; padding: 0; margin: 0; }
.home-shell__inner:has(.wl-page) { max-width: none; width: 100%; padding: 0; margin: 0; }

/* ── Section scaffolding ─────────────────────────────────────────── */
.wl-sec { padding: 4.5rem 1.25rem; }
.wl-sec--navy   { background: var(--navy);  color: #eaf1f2; }
.wl-sec--beige  { background: var(--beige); color: var(--navy); }
.wl-sec--sage   { background: var(--sage);  color: var(--navy); }
.wl-sec--yellow { background: var(--yellow); color: var(--navy); }
.wl-container { max-width: 1120px; margin: 0 auto; }
.wl-narrow { max-width: 760px; margin: 0 auto; }

.wl-eyebrow { font-weight: 800; letter-spacing: .09em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .9rem; }
.wl-sec--navy .wl-eyebrow  { color: var(--yellow); }
.wl-sec--beige .wl-eyebrow { color: var(--clay); }
.wl-sec--sage .wl-eyebrow  { color: var(--navy); }

.wl-h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.05; font-weight: 800; margin: 0 0 1.2rem; }
.wl-h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; font-weight: 800; margin: 0 0 1rem; }
.wl-accent { color: var(--yellow); font-style: italic; }
.wl-lede { font-size: 1.1rem; line-height: 1.6; max-width: 40ch; }
.wl-sec--navy .wl-lede { color: #b9cace; }

/* ── Hero ────────────────────────────────────────────────────────── */
.wl-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .wl-hero { grid-template-columns: 1fr; gap: 2rem; } }

/* Listing preview styled like a TownVue search result */
.wl-listing { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 48px rgba(0,0,0,.28);
    color: var(--navy); max-width: 460px; }
.wl-listing__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: #0f3742; padding: .7rem .85rem; }
.wl-listing__search { flex: 1; background: #24505b; color: #9fb4bb; border-radius: 8px; padding: .45rem .7rem; font-size: .9rem; }
.wl-listing__zip { color: var(--yellow); font-weight: 800; font-size: .85rem; }
.wl-listing__img { position: relative; height: 170px; overflow: hidden; background: var(--clay);
    display: flex; align-items: center; justify-content: center; }
.wl-listing__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-listing__initials { color: #fff; font-size: 2.4rem; font-weight: 800; font-family: Georgia, serif; }
.wl-listing__pill { position: absolute; top: .6rem; font-size: .72rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; }
.wl-listing__pill--open { left: .6rem; background: #2f7d52; color: #fff; }
.wl-listing__pill--dist { right: .6rem; background: #24505b; color: #dbe7ea; }
.wl-listing__body { padding: 1rem 1.15rem 1.2rem; }
.wl-listing__name { font-size: 1.3rem; font-weight: 800; margin: 0 0 .2rem; }
.wl-listing__addr { color: #5a6b71; font-size: .92rem; margin: .1rem 0; }
.wl-listing__phone { color: var(--clay); font-weight: 700; font-size: .92rem; margin: .1rem 0 .5rem; }
.wl-listing__desc { color: #33474f; font-size: .92rem; line-height: 1.45; margin: 0 0 .8rem; }
.wl-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.wl-chip { border: 1px solid #d8d2c2; border-radius: 999px; padding: .22rem .6rem; font-size: .78rem; color: #46565c; }
.wl-chip--open { border-color: #bcd8c7; background: #eef6f0; color: #2f7d52; }
.wl-listing__actions { display: flex; gap: .5rem; }
.wl-listing__act { flex: 1; text-align: center; border: 1px solid #e0dccb; border-radius: 10px; padding: .5rem;
    font-weight: 700; font-size: .9rem; color: var(--navy); text-decoration: none; }
.wl-listing__act--heart { flex: 0 0 44px; color: var(--clay); }
.wl-built { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; font-size: .78rem; color: var(--sage); margin: 0 0 .9rem; }
.wl-built::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #4caf6e; }

.wl-verify { display: inline-flex; align-items: center; gap: .4rem; margin: 1rem 0 0; color: #eaf1f2; font-weight: 700;
    font-size: .95rem; text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.wl-verify:hover { color: var(--yellow); }

/* ── Offer / sign-in / checkout block (the pinned conversion point) ── */
.wl-offer { background: #0f3742; color: #eaf1f2; border-radius: 18px; padding: 1.6rem 1.5rem;
    box-shadow: 0 20px 48px rgba(0,0,0,.3); position: sticky; top: 1.25rem; }
@media (max-width: 900px) { .wl-offer { position: static; } }
.wl-offer h2 { color: #fff; font-size: 1.3rem; margin: 0 0 1rem; font-weight: 800; }
.wl-terms { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.wl-terms li { position: relative; padding: .32rem 0 .32rem 1.6rem; font-size: .98rem; line-height: 1.4; }
.wl-terms li::before { content: "✓"; position: absolute; left: 0; color: var(--yellow); font-weight: 800; }

.wl-who { background: #0b2d39; border: 1px solid #35525c; border-left: 4px solid var(--yellow); border-radius: 10px;
    padding: .7rem .85rem; margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.45; }
.wl-who strong { color: #fff; }
.wl-who a { color: var(--yellow); font-weight: 700; text-decoration: underline; }

.wl-expect { background: #0b2d39; border: 1px dashed var(--yellow); border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.wl-expect h3 { color: var(--yellow); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .6rem; font-weight: 800; }
.wl-expect ol { margin: 0; padding-left: 1.2rem; }
.wl-expect li { font-size: .96rem; line-height: 1.5; margin: .3rem 0; color: #eaf1f2; }
.wl-expect strong { color: #fff; }

.wl-authlead { color: #cddadd; font-size: .95rem; line-height: 1.45; margin: 0 0 .8rem; }
.wl-field { display: block; margin: 0 0 .7rem; }
.wl-field input { width: 100%; padding: .72rem .85rem; border-radius: 10px; border: 1px solid #35525c;
    background: #0b2d39; color: #fff; font-size: 1rem; }
.wl-field input::placeholder { color: #9fb4bb; }

.wl-btn { display: block; width: 100%; text-align: center; border: 0; cursor: pointer; background: var(--yellow);
    color: var(--navy); font-weight: 800; font-size: 1.05rem; padding: .9rem 1rem; border-radius: 999px;
    text-decoration: none; transition: transform .06s ease, filter .15s ease; }
.wl-btn:hover { filter: brightness(1.04); }
.wl-btn:active { transform: translateY(1px); }
.wl-btn--ghost { background: transparent; color: var(--yellow); border: 1px solid var(--yellow); }
.wl-btn--dark { background: var(--navy); color: #fff; }

.wl-or { display: flex; align-items: center; gap: .75rem; color: #9fb4bb; font-size: .82rem; margin: 1rem 0;
    text-transform: uppercase; letter-spacing: .05em; }
.wl-or::before, .wl-or::after { content: ""; flex: 1; height: 1px; background: #35525c; }
.wl-google { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; background: #fff;
    color: #1f1f1f; font-weight: 700; font-size: 1rem; padding: .8rem 1rem; border-radius: 999px; text-decoration: none; border: 1px solid #dadce0; }
.wl-google:hover { filter: brightness(.98); color: #1f1f1f; }
.wl-google svg { width: 18px; height: 18px; }

.wl-fine { color: #9fb4bb; font-size: .82rem; margin: .8rem 0 0; line-height: 1.45; }
.wl-error { background: var(--clay); color: #fff; border-radius: 10px; padding: .6rem .8rem; font-size: .92rem; margin: 0 0 1rem; }
.wl-note { background: var(--beige); color: #33474f; border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; margin: 0 0 1rem; }

/* ── Honest-math calculator ──────────────────────────────────────── */
.wl-math { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start; margin-top: 2rem; }
@media (max-width: 900px) { .wl-math { grid-template-columns: 1fr; gap: 1.5rem; } }
.wl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 560px) { .wl-opts { grid-template-columns: 1fr; } }
.wl-opt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer;
    background: #fff; border: 2px solid #e6e0cf; border-radius: 12px; padding: .7rem .85rem; }
.wl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wl-opt__label { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .95rem; }
.wl-opt__box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #c9c2ae; display: grid; place-items: center;
    color: #fff; font-size: .8rem; flex: 0 0 auto; }
.wl-opt__price { color: #8a8064; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.wl-opt.is-on { border-color: var(--clay); }
.wl-opt.is-on .wl-opt__box { background: var(--clay); border-color: var(--clay); }
.wl-opt.is-on .wl-opt__price { color: var(--clay); }
.wl-opts-note { color: #8a8064; font-size: .85rem; margin: .9rem 0 0; }

.wl-total { background: var(--navy); color: #eaf1f2; border-radius: 16px; padding: 1.5rem; }
.wl-total__k { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #9fb4bb; margin: 0 0 .3rem; }
.wl-total__now { font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; margin: 0; }
.wl-total__now span { font-size: 1rem; font-weight: 600; color: #9fb4bb; }
.wl-total__hr { border: 0; border-top: 1px solid #24505b; margin: 1.1rem 0; }
.wl-total__tv { font-size: 2.6rem; font-weight: 800; color: var(--yellow); line-height: 1; margin: 0; }
.wl-total__tv span { font-size: 1rem; font-weight: 600; color: #cddadd; }
.wl-total__save { background: #12414d; border-radius: 10px; padding: .75rem .85rem; margin: 1.1rem 0 0; font-size: .95rem; line-height: 1.45; }
.wl-total__save b { color: var(--yellow); }

/* ── Feature cards ───────────────────────────────────────────────── */
.wl-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 860px) { .wl-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .wl-features { grid-template-columns: 1fr; } }
.wl-feature { background: #fff; border-radius: 14px; padding: 1.2rem; box-shadow: 0 10px 26px rgba(11,45,57,.12); }
.wl-feature__ic { font-size: 1.5rem; margin: 0 0 .6rem; }
.wl-feature h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .35rem; color: var(--navy); }
.wl-feature p { font-size: .92rem; line-height: 1.45; color: #46565c; margin: 0; }

/* ── AI-search + founder cards ───────────────────────────────────── */
.wl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .wl-split { grid-template-columns: 1fr; gap: 1.5rem; } }
.wl-assistant { background: #12414d; border: 1px solid #24505b; border-radius: 14px; padding: 1.1rem 1.2rem; margin-top: 1.2rem; }
.wl-assistant__k { display: flex; align-items: center; gap: .4rem; color: var(--yellow); font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; font-size: .78rem; margin: 0 0 .6rem; }
.wl-assistant p { color: #dce7ea; font-size: 1rem; line-height: 1.55; margin: 0; }
.wl-assistant b { color: var(--yellow); }
.wl-strong { color: #fff; font-weight: 700; }

.wl-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 860px) { .wl-3col { grid-template-columns: 1fr; } }
.wl-3col__card { background: #12414d; border-radius: 14px; padding: 1.25rem; }
.wl-3col__card h3 { color: #fff; font-size: 1.1rem; margin: 0 0 .5rem; font-weight: 800; }
.wl-3col__card p { color: #b9cace; font-size: .95rem; line-height: 1.5; margin: 0; }
.wl-3col__card a { color: var(--yellow); font-weight: 700; text-decoration: none; }
.wl-mini { display: flex; align-items: center; gap: .65rem; background: #0b2d39; border-radius: 999px; padding: .4rem .5rem; margin: .5rem 0 0; }
.wl-mini__ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .82rem; }
.wl-mini__t { color: #fff; font-weight: 700; font-size: .92rem; }
.wl-mini__s { color: #9fb4bb; font-size: .8rem; }

.wl-founders { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.75rem 0 0; }
.wl-founder { margin: 0; text-align: center; }
.wl-founder img { display: block; height: 210px; width: auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.wl-founder figcaption { margin-top: .7rem; }
.wl-founder__n { display: block; color: #fff; font-weight: 800; font-size: 1rem; line-height: 1.15; }
.wl-founder__r { display: block; color: var(--yellow); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.wl-quote { font-size: 1.2rem; line-height: 1.5; color: #eaf1f2; font-style: italic; margin: 1.5rem 0 0; }

/* ── Detailed offer section ──────────────────────────────────────── */
.wl-qa { border-left: 3px solid var(--yellow); padding-left: 1rem; margin: 1.4rem 0 0; }
.wl-qa h4 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .35rem; }
.wl-qa p { color: #46565c; font-size: .95rem; line-height: 1.55; margin: 0; }
.wl-offercard { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(11,45,57,.14); }
.wl-offercard__head { background: var(--yellow); color: var(--navy); padding: 1.3rem 1.4rem; }
.wl-offercard__head h3 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.wl-offercard__head p { margin: .2rem 0 0; font-weight: 600; }
.wl-offercard__body { padding: 1.3rem 1.4rem; }
.wl-checks { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.wl-checks li { position: relative; padding: .5rem 0 .5rem 1.8rem; border-bottom: 1px solid #eee7d6; font-size: .96rem; line-height: 1.4; color: #33474f; }
.wl-checks li:last-child { border-bottom: 0; }
.wl-checks li::before { content: "✓"; position: absolute; left: 0; top: .5rem; color: var(--sage); font-weight: 800; }
.wl-checks b { color: var(--navy); }
.wl-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: var(--beige); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0; }
.wl-step { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; color: var(--navy); }
.wl-step__n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .78rem; }
.wl-step__arrow { color: #b9b298; }

/* ── Final CTA ───────────────────────────────────────────────────── */
.wl-final { text-align: center; }
.wl-final .wl-h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.wl-final__sub { font-size: 1.1rem; max-width: 30ch; margin: 0 auto 1.6rem; }
.wl-final .wl-btn { display: inline-block; width: auto; padding: 1rem 2.2rem; font-size: 1.15rem; }
.wl-final__terms { font-weight: 700; margin: 1.1rem 0 0; }
.wl-final__note { color: #7a6a2e; font-size: .9rem; max-width: 42ch; margin: 1rem auto 0; line-height: 1.5; }