/* WeReferAgents Seller Funnel -- a deliberately distinct visual theme (light background,
   blue/navy/green) from the main dark navy/gold agent-facing app, matching the seller-landing
   reference design. Scoped entirely to .wrs-* classes so it never collides with marketing.css/
   app-shell.css, which stay untouched by this file. */

:root {
    --wrs-navy: #0c1e31;
    --wrs-navy-2: #14294a;
    /* #1c56d7 -- measured directly from the approved reference's header/hero CTA buttons via
       pixel sampling (wwwroot/images/references/home-value-landing-reference.png), not a guess. */
    --wrs-blue: #1c56d7;
    --wrs-blue-dark: #1544ad;
    --wrs-green: #16a34a;
    --wrs-green-dark: #15803d;
    --wrs-ink: #101828;
    --wrs-ink-600: #475467;
    --wrs-ink-400: #98a2b3;
    --wrs-border: #e4e7ec;
    --wrs-surface: #ffffff;
    --wrs-surface-alt: #f8fafc;
    --wrs-radius: 16px;
    --wrs-radius-btn: 10px;
    --wrs-shadow: 0 24px 60px rgba(12, 30, 49, 0.14);
    --wrs-shadow-sm: 0 4px 16px rgba(16, 24, 40, 0.08);
    --wrs-shadow-lg: 0 32px 80px rgba(12, 30, 49, 0.18);
}

.wrs-body {
    background: var(--wrs-surface);
    color: var(--wrs-ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

html:has(.wrs-body) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.wrs-body) {
        scroll-behavior: auto;
    }
}

.wrs-body * {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .wrs-body * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

.wrs-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Header ---------- */
.wrs-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--wrs-surface);
    border-bottom: 1px solid var(--wrs-border);
}

.wrs-nav {
    max-width: 1400px;
    margin: 0 auto;
    height: 84px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.wrs-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--wrs-ink);
    flex-shrink: 0;
}

.wrs-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--wrs-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wrs-brand-icon.small {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
}

.wrs-brand-mark {
    display: block;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--wrs-navy);
}

.wrs-brand-tagline {
    display: block;
    font-size: 0.72rem;
    color: var(--wrs-ink-400);
}

.wrs-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.wrs-nav-link {
    color: var(--wrs-ink-600);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

    .wrs-nav-link:hover {
        color: var(--wrs-navy);
        background: var(--wrs-surface-alt);
    }

    .wrs-nav-link:focus-visible {
        outline: 2px solid var(--wrs-blue);
        outline-offset: 2px;
    }

    .wrs-nav-link.active {
        color: var(--wrs-navy);
        background: var(--wrs-surface-alt);
    }

.wrs-nav-mobile-cta {
    margin-top: 10px;
    width: 100%;
}

.wrs-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.wrs-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--wrs-border);
    border-radius: 8px;
    color: var(--wrs-navy);
    padding: 8px 10px;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Help menu trigger (HelpMenu.razor's TriggerButtonClass) -- same visual weight as
   .wrs-nav-toggle but circular/icon-only, matching this nav's existing button language. */
.wrs-nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--wrs-border);
    border-radius: 999px;
    color: var(--wrs-navy);
    font-size: 1rem;
    cursor: pointer;
}

    .wrs-nav-icon-btn:hover {
        background: var(--wrs-bg-alt, #f5f6f8);
    }

.wrs-help-menu {
    position: relative;
}

.wrs-nav-links-mobile {
    display: none;
}

/* ---------- Buttons ---------- */
.wrs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

    .wrs-btn:hover {
        transform: translateY(-2px);
    }

    .wrs-btn:focus-visible {
        outline: 2px solid var(--wrs-navy);
        outline-offset: 3px;
    }

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

    .wrs-btn-primary:hover {
        background: var(--wrs-blue-dark);
        box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4);
    }

.wrs-btn-outline {
    background: #fff;
    border-color: var(--wrs-border);
    color: var(--wrs-navy);
}

    .wrs-btn-outline:hover {
        border-color: var(--wrs-navy);
    }

.wrs-btn-lg {
    padding: 15px 30px;
    font-size: 1.02rem;
}

.wrs-btn-block {
    width: 100%;
}

/* ---------- Hero ---------- */
.wrs-hero {
    position: relative;
    background: linear-gradient(135deg, #f3f6fb 0%, var(--wrs-surface-alt) 55%, #eef2f9 100%);
    /* Horizontal padding matches the ~4% side margin measured directly off the approved
       reference (878px-wide capture: content starts at x=36..40px, i.e. ~4.1% of width). */
    padding: 40px clamp(24px, 4vw, 64px) 0;
    overflow: hidden;
}

/* ---------- Floating AI chat launcher ---------- */
.wrs-chat-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 400;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--wrs-navy);
    color: #fff;
    border: none;
    box-shadow: var(--wrs-shadow);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .wrs-chat-fab:hover {
        background: var(--wrs-navy-2);
    }

    .wrs-chat-fab:focus-visible {
        outline: 3px solid var(--wrs-blue);
        outline-offset: 3px;
    }

.wrs-hero-chat-preview-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- How It Works ---------- */
.wrs-section {
    padding: 72px 24px;
}

.wrs-section-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.wrs-section-title {
    text-align: center;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    font-weight: 800;
    color: var(--wrs-navy);
    margin: 0 0 48px;
}

.wrs-steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}

.wrs-step {
    text-align: center;
    position: relative;
}

/* Card treatment for step items -- matches the reference's bordered/shadowed step cards
   (numbered badge top-left, left-aligned copy) rather than plain floating icon+text columns. */
.wrs-step-card {
    text-align: left;
    background: var(--wrs-surface);
    border: 1px solid var(--wrs-border);
    border-radius: var(--wrs-radius);
    box-shadow: var(--wrs-shadow-sm);
    padding: 28px 24px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    animation: wrsFadeUp 0.5s ease both;
}

    .wrs-step-card:hover {
        box-shadow: var(--wrs-shadow);
        transform: translateY(-2px);
    }

    .wrs-step-card:hover .wrs-step-icon {
        transform: scale(1.08);
    }

    .wrs-step-card .wrs-step-icon {
        margin: 0 0 16px;
    }

    .wrs-step-card .wrs-step-number {
        top: -10px;
        left: -10px;
        right: auto;
    }

.wrs-step-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
    color: var(--wrs-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 16px;
    position: relative;
    transition: transform 0.2s ease;
}

/* Staggered entrance for repeating card grids (step/receive/why items) -- the same idea as the
   dashboard's wrOnboardFadeUp stagger, ported here since this layout (SellerLayout) had no
   entrance motion at all until now, unlike every other layout touched in this rollout. Pure CSS,
   triggers on mount rather than scroll-into-view, so no JS/IntersectionObserver wiring needed and
   no markup changes required on any of the 5 seller pages. */
@keyframes wrsFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.wrs-step-card:nth-child(2), .wrs-receive-item:nth-child(2), .wrs-why-item:nth-child(2) { animation-delay: 0.06s; }
.wrs-step-card:nth-child(3), .wrs-receive-item:nth-child(3), .wrs-why-item:nth-child(3) { animation-delay: 0.12s; }
.wrs-step-card:nth-child(4), .wrs-receive-item:nth-child(4), .wrs-why-item:nth-child(4) { animation-delay: 0.18s; }
.wrs-step-card:nth-child(5), .wrs-receive-item:nth-child(5), .wrs-why-item:nth-child(5) { animation-delay: 0.24s; }
.wrs-step-card:nth-child(n+6), .wrs-receive-item:nth-child(n+6), .wrs-why-item:nth-child(n+6) { animation-delay: 0.3s; }

.wrs-step-number {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wrs-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrs-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wrs-navy);
    margin: 0 0 8px;
}

.wrs-step p {
    font-size: 0.85rem;
    color: var(--wrs-ink-600);
    margin: 0;
}

.wrs-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wrs-ink-400);
    font-size: 1.2rem;
    padding-top: 26px;
}

.wrs-section-subtitle {
    text-align: center;
    max-width: 720px;
    margin: -32px auto 40px;
    color: var(--wrs-ink-600);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---------- Why homeowners use us ---------- */
.wrs-why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.wrs-why-grid-6 {
    grid-template-columns: repeat(3, 1fr);
}

.wrs-why-item {
    text-align: center;
    padding: 20px;
    animation: wrsFadeUp 0.5s ease both;
}

.wrs-why-item i {
    font-size: 1.4rem;
    color: var(--wrs-blue);
    margin-bottom: 12px;
    display: block;
    transition: transform 0.2s ease;
}

.wrs-why-item:hover i {
    transform: scale(1.12);
}

.wrs-why-item span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wrs-ink);
}

/* ---------- 5-step "How It Works" row (wraps to 5 across on wide screens) ---------- */
.wrs-steps-row-5 {
    grid-template-columns: repeat(5, 1fr);
}

.wrs-step-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--wrs-blue);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
}

    .wrs-step-action:hover {
        text-decoration: underline;
    }

    .wrs-step-action:focus-visible {
        outline: 2px solid var(--wrs-blue);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* ---------- What you'll receive ---------- */
.wrs-receive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.wrs-receive-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--wrs-surface);
    border: 1px solid var(--wrs-border);
    border-radius: var(--wrs-radius);
    box-shadow: var(--wrs-shadow-sm);
    padding: 24px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    animation: wrsFadeUp 0.5s ease both;
}

    .wrs-receive-item:hover {
        box-shadow: var(--wrs-shadow);
        transform: translateY(-2px);
    }

    .wrs-receive-item:hover i {
        transform: scale(1.08);
    }

.wrs-receive-item i {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
    color: var(--wrs-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.wrs-receive-item strong {
    display: block;
    color: var(--wrs-navy);
    margin-bottom: 4px;
}

.wrs-receive-item p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--wrs-ink-600);
}

/* ---------- FAQ ---------- */
.wrs-faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wrs-faq-item {
    border: 1px solid var(--wrs-border);
    border-radius: 10px;
    padding: 16px 20px;
    background: var(--wrs-surface);
}

.wrs-faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--wrs-navy);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .wrs-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .wrs-faq-item summary::after {
        content: "+";
        font-size: 1.3rem;
        font-weight: 400;
        color: var(--wrs-ink-400);
        margin-left: 12px;
    }

    .wrs-faq-item[open] summary::after {
        content: "\2212";
    }

    .wrs-faq-item summary:focus-visible {
        outline: 2px solid var(--wrs-blue);
        outline-offset: 3px;
        border-radius: 4px;
    }

.wrs-faq-item p {
    margin: 12px 0 0;
    color: var(--wrs-ink-600);
    line-height: 1.6;
}

/* ---------- Bottom trust / CTA band ---------- */
.wrs-final-cta {
    max-width: 1400px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0;
    border-radius: var(--wrs-radius);
    overflow: hidden;
    border: 1px solid var(--wrs-border);
}

.wrs-final-cta-privacy {
    background: var(--wrs-surface-alt);
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.wrs-final-cta-privacy i {
    font-size: 1.6rem;
    color: var(--wrs-green);
}

.wrs-final-cta-privacy strong {
    display: block;
    color: var(--wrs-navy);
    margin-bottom: 4px;
}

.wrs-final-cta-privacy p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--wrs-ink-600);
}

.wrs-final-cta-action {
    background: var(--wrs-navy);
    color: #fff;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.wrs-final-cta-action h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.wrs-final-cta-trust {
    width: 100%;
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------- Disclaimer ---------- */
.wrs-disclaimer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 40px;
    font-size: 0.78rem;
    color: var(--wrs-ink-400);
    text-align: center;
}

/* ---------- Footer ---------- */
.wrs-footer {
    background: var(--wrs-surface-alt);
    border-top: 1px solid var(--wrs-border);
    padding: 48px 24px 28px;
}

.wrs-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.wrs-footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    text-align: left;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--wrs-border);
}

.wrs-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--wrs-navy);
    margin-bottom: 14px;
}

.wrs-footer-disclaimer {
    font-size: 0.8rem;
    color: var(--wrs-ink-400);
    line-height: 1.5;
    margin: 0;
}

.wrs-footer-heading {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wrs-ink);
    margin: 0 0 14px;
}

.wrs-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.wrs-footer-links a {
    color: var(--wrs-ink-600);
    text-decoration: none;
    font-size: 0.88rem;
}

.wrs-footer-links a:hover {
    color: var(--wrs-navy);
    text-decoration: underline;
}

.wrs-footer-links a:focus-visible {
    outline: 2px solid var(--wrs-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.wrs-footer-copyright {
    font-size: 0.78rem;
    color: var(--wrs-ink-400);
    margin: 20px 0 0;
    text-align: center;
}

/* ---------- Success moment (ThankYou.razor's confirmation checkmark) ---------- */
@keyframes wrsSuccessPop {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

.wrs-success-icon {
    animation: wrsSuccessPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ---------- Multi-step Lead Form ---------- */
.wrs-form-card {
    background: var(--wrs-surface);
    border: 1px solid var(--wrs-border);
    border-radius: var(--wrs-radius);
    box-shadow: var(--wrs-shadow);
    padding: 36px;
    max-width: 760px;
    margin: 0 auto;
}

.wrs-form-progress {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 32px;
}

.wrs-form-progress-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.wrs-form-progress-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--wrs-surface-alt);
    color: var(--wrs-ink-400);
    border: 2px solid var(--wrs-border);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wrs-form-progress-step.active .wrs-form-progress-dot {
    background: var(--wrs-blue);
    border-color: var(--wrs-blue);
    color: #fff;
}

.wrs-form-progress-step.done .wrs-form-progress-dot {
    background: var(--wrs-green);
    border-color: var(--wrs-green);
    color: #fff;
}

.wrs-form-progress-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wrs-ink-400);
}

.wrs-form-progress-step.active .wrs-form-progress-label {
    color: var(--wrs-navy);
}

.wrs-form-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.wrs-form-step-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--wrs-navy);
    margin: 0 0 20px;
}

.wrs-form-substep-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wrs-navy);
    margin: 24px 0 10px;
}

.wrs-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.wrs-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wrs-ink-600);
}

.wrs-form-field-full {
    grid-column: 1 / -1;
}

.wrs-required {
    color: #dc2626;
}

.wrs-optional {
    color: var(--wrs-ink-400);
    font-weight: 400;
}

.wrs-form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--wrs-border);
    border-radius: 9px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--wrs-ink);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .wrs-form-control:focus-visible,
    .wrs-form-control:focus {
        outline: none;
        border-color: var(--wrs-blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

.wrs-field-error {
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 600;
}

.wrs-form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wrs-form-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid var(--wrs-border);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wrs-ink-600);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .wrs-form-radio:has(input:checked) {
        border-color: var(--wrs-blue);
        background: rgba(37, 99, 235, 0.08);
        color: var(--wrs-navy);
    }

    .wrs-form-radio input {
        accent-color: var(--wrs-blue);
    }

.wrs-consent-group {
    margin-top: 28px;
    border: 1px solid var(--wrs-border);
    border-radius: 12px;
    padding: 20px;
}

    .wrs-consent-group legend {
        font-weight: 800;
        color: var(--wrs-navy);
        padding: 0 6px;
    }

.wrs-consent-intro {
    font-size: 0.85rem;
    color: var(--wrs-ink-600);
    margin: 0 0 14px;
}

.wrs-consent-legal {
    font-size: 0.78rem;
    color: var(--wrs-ink-600);
    margin: 12px 0 0;
}

.wrs-consent-legal a {
    color: var(--wrs-navy);
    text-decoration: underline;
}

.wrs-consent-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.85rem;
    color: var(--wrs-ink-600);
    border-top: 1px solid var(--wrs-border);
    cursor: pointer;
}

    .wrs-consent-item:first-of-type {
        border-top: none;
    }

    .wrs-consent-item input {
        margin-top: 3px;
        flex-shrink: 0;
        accent-color: var(--wrs-blue);
    }

.wrs-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
}

/* ---------- AI Chat Panel ---------- */
.wrs-chat-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 380px;
    max-height: min(600px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    background: var(--wrs-surface);
    border-radius: var(--wrs-radius);
    box-shadow: var(--wrs-shadow);
    border: 1px solid var(--wrs-border);
    z-index: 1200;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.wrs-chat-panel.open {
    /* Not translateY(0) scale(1) -- an identity transform still creates a compositing layer,
       which has been observed to confuse touch-emulated hit-testing on fixed-position overlays
       in mobile Chrome. transform: none avoids the compositing layer once the open animation
       (which does need the transform above) has finished. */
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.wrs-chat-panel-backdrop {
    display: none;
}

.wrs-chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--wrs-border);
    background: var(--wrs-navy);
    color: #fff;
    border-top-left-radius: var(--wrs-radius);
    border-top-right-radius: var(--wrs-radius);
}

.wrs-chat-panel-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wrs-chat-panel-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.wrs-chat-panel-disclosure {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
}

.wrs-chat-panel-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0;
}

    .wrs-chat-panel-close:hover {
        background: rgba(255, 255, 255, 0.15);
    }

.wrs-chat-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 280px;
}

.wrs-chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.wrs-chat-bubble-assistant {
    align-self: flex-start;
    background: var(--wrs-surface-alt);
    color: var(--wrs-ink);
    border-bottom-left-radius: 4px;
}

.wrs-chat-bubble-user {
    align-self: flex-end;
    background: var(--wrs-blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.wrs-chat-bubble-typing {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 14px;
}

    .wrs-chat-bubble-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--wrs-ink-400);
        animation: wrsTypingDot 1.1s infinite ease-in-out;
    }

    .wrs-chat-bubble-typing span:nth-child(2) { animation-delay: 0.15s; }
    .wrs-chat-bubble-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes wrsTypingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.wrs-chat-panel-input {
    display: flex;
    gap: 8px;
    padding: 14px;
    border-top: 1px solid var(--wrs-border);
}

    .wrs-chat-panel-input .wrs-form-control {
        flex: 1;
    }

    .wrs-chat-panel-input .wrs-btn {
        padding: 10px 16px;
    }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .wrs-nav-links {
        display: none;
    }

    .wrs-nav-toggle {
        display: inline-flex;
    }

    /* The mobile drawer (.wrs-nav-links-mobile) already carries its own full-width CTA
       (.wrs-nav-mobile-cta) -- keeping the pill button here too has no room next to the
       hamburger toggle at narrow widths and pushes the nav bar into horizontal overflow. */
    .wrs-nav-actions .wrs-btn-primary {
        display: none;
    }

    .wrs-nav-links-mobile.open {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px 24px 20px;
        border-top: 1px solid var(--wrs-border);
    }

    .wrs-steps-row {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .wrs-step-arrow {
        display: none;
    }

    .wrs-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrs-why-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrs-steps-row-5 {
        grid-template-columns: 1fr;
    }

    .wrs-receive-grid {
        grid-template-columns: 1fr;
    }

    .wrs-final-cta {
        grid-template-columns: 1fr;
    }

    .wrs-footer-top {
        grid-template-columns: 1fr 1fr;
        row-gap: 28px;
    }

    .wrs-footer-col-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .wrs-footer-top {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .wrs-chat-fab {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }

    /* .wrs-brand has flex-shrink:0 (intentional at desktop widths so the logo never
       compresses) -- but that also stops this long tagline from wrapping/shrinking below its
       own max-content width, which is wider than a narrow phone viewport. Dropping the
       tagline at this width keeps the logo readable without touching flex-shrink globally. */
    .wrs-brand-tagline {
        display: none;
    }
}

@media (max-width: 768px) {
    .wrs-hero {
        padding: 24px 16px 32px;
    }

    .wrs-final-cta-action {
        justify-content: center;
        text-align: center;
    }

    .wrs-form-card {
        padding: 24px 18px;
    }

    .wrs-form-grid {
        grid-template-columns: 1fr;
    }

    .wrs-form-progress-label {
        display: none;
    }

    .wrs-chat-panel {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        max-height: min(70vh, 560px);
    }
}

@media (max-width: 375px) {
    .wrs-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }

    .wrs-form-actions .wrs-btn {
        width: 100%;
    }
}