/* =====================================================
   SHIFT FOUR PROPERTIES — ENCHOMEOFFERS.COM
   Main Stylesheet
   ===================================================== */

:root {
    --ecu-purple: #592a8a;
    --ecu-purple-dark: #3d1d67;
    --ecu-gold: #f3c241;
    --ink: #1b1830;
    --paper: #f6f4fb;
    --card: #ffffff;
    --soft-line: #e0d6f0;
    --cta-green: #0a9a62;
    --cta-green-hover: #078453;
    --success: #0f6a48;
    --danger: #8e1d1d;
    --step-bg: #f0eaf9;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Public Sans', sans-serif;
    color: var(--ink);
    background: var(--paper);
}

/* =====================================================
   PHONE BAR (sticky top)
   ===================================================== */
.phone-bar {
    background: var(--ecu-purple-dark);
    color: #e8deff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.phone-bar-link {
    color: var(--ecu-gold);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.phone-bar-link:hover {
    text-decoration: underline;
}

/* =====================================================
   UTILITIES
   ===================================================== */
.wrap {
    width: min(760px, 92vw);
    margin: 0 auto;
}

.section-sub {
    margin: 0.4rem 0 1.6rem;
    color: #5a4e75;
    font-size: 1rem;
    text-align: center;
}

/* =====================================================
   HERO — two-column layout (text left, form right)
   ===================================================== */
.hero {
    position: relative;
    padding: 2.8rem 1rem 3rem;
    background: linear-gradient(150deg, #5d2b93 0%, #3d1d67 100%);
}

/* Hero inner: wider than standard .wrap to fit two columns */
.hero-inner {
    max-width: min(1060px, 94vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

/* Text column */
.hero-text {
    color: #fff;
    text-align: center;
}

/* Form column */
.hero-form {
    /* scroll target padding */
    scroll-margin-top: 4.5rem;
}

/* =====================================================
   HERO TYPOGRAPHY
   ===================================================== */
.eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.77rem;
    color: var(--ecu-gold);
    font-weight: 700;
}

/* H1 — Public Sans 800 for trust-forward, clean look */
h1 {
    margin: 0.55rem 0 0;
    font-family: 'Public Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 6.5vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
}

.subheadline {
    margin: 0.9rem auto 0;
    max-width: 38rem;
    line-height: 1.6;
    font-size: 1rem;
    color: #eee8ff;
}

/* =====================================================
   TRUST BAR
   ===================================================== */
.trust-bar {
    margin-top: 1.4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0.75rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    text-align: left;
    backdrop-filter: blur(4px);
}

.trust-icon {
    color: var(--ecu-gold);
    font-weight: 900;
    flex-shrink: 0;
}

/* =====================================================
   FORM CARD (inside hero)
   ===================================================== */
.form-card {
    background: var(--card);
    border: 1px solid var(--soft-line);
    border-radius: 1.2rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    padding: 1.6rem 1.4rem;
    /* no max-width needed — constrained by hero-form column */
}

h2 {
    margin: 0;
    color: #2f2150;
    font-size: 1.45rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.03em;
}

.form-subtitle {
    margin: 0.35rem 0 0.9rem;
    color: #564a6f;
    font-size: 0.95rem;
}

label {
    display: block;
    margin: 0.7rem 0 0.28rem;
    font-weight: 700;
    font-size: 0.94rem;
    color: #2f2150;
}

/* Mobile/desktop label switcher.
   Desktop: shows the full friendly question (.label-long).
   Mobile (≤559px): shows a tiny uppercase chip-style label (.label-short). */
.label-short { display: none; }
.label-long  { display: inline; }

input[type="text"],
input[type="tel"],
select {
    width: 100%;
    border: 1.5px solid #cfc3e2;
    border-radius: 0.6rem;
    font: inherit;
    padding: 0.75rem;
    background: #fff;
    color: var(--ink);
    transition: border-color 120ms;
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #5f3a8f 50%), linear-gradient(135deg, #5f3a8f 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    background-color: #fff;
}

input[type="text"]:focus,
input[type="tel"]:focus,
select:focus {
    border-color: var(--ecu-purple);
    outline: 3px solid rgba(89, 42, 138, 0.18);
    outline-offset: 0;
}

/* Real-time valid state — JS toggles .is-valid when a field passes its
   format check (e.g. phone with 10 digits, address ≥ 5 chars).
   Subtle green border + tiny ✓ at the right edge for positive reinforcement. */
input[type="text"].is-valid,
input[type="tel"].is-valid {
    border-color: var(--cta-green);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a9a62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 18px 18px;
    padding-right: 2.2rem;
}

/* Error state — JS adds .has-error after a failed submit + scrolls to it.
   Red border + light red glow so the user immediately sees what to fix. */
input[type="text"].has-error,
input[type="tel"].has-error {
    border-color: var(--danger);
    background-color: #fdf3f3;
    box-shadow: 0 0 0 3px rgba(142, 29, 29, 0.12);
}

/* Chip-group error: red ring around the group when its hidden input is empty at submit */
.chip-group.has-error {
    outline: 2px solid var(--danger);
    outline-offset: 4px;
    border-radius: 0.6rem;
}

/* Honeypot — completely hidden from real users via offscreen positioning.
   Avoid display:none / visibility:hidden — some bots skip those. Offscreen
   absolute positioning + zero size catches more. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

/* Phone micro-copy: reassurance directly under phone field */
.phone-micro {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #7a6e8e;
    font-style: italic;
}

button[type="submit"] {
    margin-top: 1rem;
    width: 100%;
    background: var(--cta-green);
    color: #fff;
    border: none;
    border-radius: 0.8rem;
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
}

button[type="submit"]:hover,
button[type="submit"]:focus-visible {
    background: var(--cta-green-hover);
    transform: translateY(-1px);
}

.mobile-submit-wrap {
    display: none;
}

.form-message {
    min-height: 1.35rem;
    margin-top: 0.65rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-message.success { color: var(--success); }
.form-message.error   { color: var(--danger); }

.privacy-line {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: #5a5070;
    text-align: center;
}

/* =====================================================
   HOW IT WORKS
   ===================================================== */
.how-it-works {
    padding: 3rem 0 2rem;
    text-align: center;
}

.how-it-works h2 {
    font-size: 2rem;
}

.steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 1.4rem;
}

.step {
    background: var(--card);
    border: 1px solid var(--soft-line);
    border-radius: 1rem;
    padding: 1.4rem 1.2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 14px rgba(56,40,88,0.08);
}

.step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ecu-purple);
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    line-height: 48px;
    margin: 0 auto 0.8rem;
}

.step h3 {
    margin: 0 0 0.5rem;
    color: #2f2150;
    font-size: 1.05rem;
}

.step p {
    margin: 0;
    font-size: 0.95rem;
    color: #4a4063;
    line-height: 1.55;
}

.step-connector {
    width: 2px;
    height: 32px;
    background: var(--ecu-purple);
    opacity: 0.3;
}

/* =====================================================
   COMPARISON TABLE
   ===================================================== */
.comparison {
    padding: 2rem 0 2.5rem;
    text-align: center;
}

.comparison h2 {
    font-size: 2rem;
}

.compare-table-wrap {
    overflow-x: auto;
    margin-top: 1.2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 18px rgba(56,40,88,0.1);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    font-size: 0.93rem;
    min-width: 480px;
}

.compare-table th {
    padding: 0.9rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 2px solid var(--soft-line);
    background: var(--step-bg);
}

.compare-table th:first-child {
    text-align: left;
}

.compare-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--soft-line);
    vertical-align: middle;
}

.compare-table td:first-child {
    font-weight: 600;
    color: #3a2f55;
}

.compare-table tr:last-child td {
    border-bottom: none;
}

.col-us {
    background: rgba(10, 154, 98, 0.06);
    color: #1b1830;
    text-align: center;
}

.col-agent {
    text-align: center;
    color: #4a4063;
}

.compare-table th.col-us {
    color: var(--cta-green);
    background: rgba(10,154,98,0.08);
}

.compare-table th.col-agent {
    color: #6b5f8a;
}

.good {
    color: var(--cta-green);
    font-weight: 700;
}

.bad {
    color: #7a5f50;
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonials {
    padding: 2.5rem 0;
    text-align: center;
}

.testimonials h2 {
    font-size: 2rem;
}

.testimonial-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.2rem;
}

.testimonial-card {
    background: var(--card);
    border: 1px solid var(--soft-line);
    border-left: 4px solid var(--ecu-purple);
    border-radius: 0.9rem;
    padding: 1.3rem 1.2rem;
    margin: 0;
    text-align: left;
    box-shadow: 0 4px 14px rgba(56,40,88,0.08);
}

/* Meta row: verified badge + location/date */
.testimonial-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(10, 154, 98, 0.10);
    color: #0a7a4e;
    border: 1px solid rgba(10, 154, 98, 0.25);
    border-radius: 99px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.testimonial-location {
    font-size: 0.78rem;
    color: #7a6e8e;
    font-weight: 600;
}

.testimonial-card p {
    margin: 0 0 0.75rem;
    font-size: 0.97rem;
    color: #3a3258;
    line-height: 1.6;
    font-style: italic;
}

.testimonial-card cite {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ecu-purple);
    font-style: normal;
}

/* =====================================================
   WHO WE HELP
   ===================================================== */
.who-we-help {
    padding: 2.5rem 0;
    text-align: center;
}

.who-we-help h2 {
    font-size: 2rem;
}

.situations-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.2rem;
    grid-template-columns: 1fr;
}

.situation-card {
    background: var(--card);
    border: 1px solid var(--soft-line);
    border-radius: 0.9rem;
    padding: 1.2rem;
    text-align: left;
    box-shadow: 0 4px 14px rgba(56,40,88,0.07);
}

.situation-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.5rem;
}

.situation-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: #2f2150;
}

.situation-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #4a4063;
    line-height: 1.55;
}

/* =====================================================
   FAQ
   ===================================================== */
.faq {
    padding: 2.5rem 0 2rem;
}

.faq h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1.2rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--soft-line);
    border-radius: 0.8rem;
    padding: 0 1rem;
    box-shadow: 0 2px 8px rgba(56,40,88,0.06);
}

.faq-item summary {
    font-weight: 700;
    cursor: pointer;
    padding: 1rem 0;
    color: #2f2150;
    font-size: 0.97rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

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

.faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--ecu-purple);
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    margin: 0 0 1rem;
    font-size: 0.93rem;
    color: #4a4063;
    line-height: 1.6;
}

/* =====================================================
   CTA BANNER
   ===================================================== */
.cta-banner {
    background: linear-gradient(135deg, #3d1d67 0%, #5d2b93 100%);
    padding: 3rem 1rem;
    text-align: center;
    margin-top: 1rem;
}

.cta-banner h2 {
    color: #fff;
    font-family: 'Public Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}

.cta-banner p {
    color: #ddd0ff;
    margin: 0 0 1.6rem;
    font-size: 1rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-banner-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.btn-primary {
    display: inline-block;
    padding: 0.95rem 1.8rem;
    background: var(--cta-green);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 0.8rem;
    box-shadow: 0 8px 20px rgba(7,47,32,0.3);
    transition: background 120ms, transform 120ms;
}

.btn-primary:hover {
    background: var(--cta-green-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    display: inline-block;
    padding: 0.95rem 1.8rem;
    background: transparent;
    color: var(--ecu-gold);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 0.8rem;
    border: 2px solid var(--ecu-gold);
    transition: background 120ms;
}

.btn-secondary:hover {
    background: rgba(243,194,65,0.12);
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    background: #1a0e33;
    color: #a898c4;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.88rem;
}

.site-footer p {
    margin: 0.4rem 0;
    line-height: 1.5;
}

.site-footer strong {
    color: #fff;
}

.footer-small {
    font-size: 0.78rem;
    margin-top: 1rem !important;
    opacity: 0.7;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
   SUCCESS MODAL
   ===================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 24, 48, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-box {
    background: #fff;
    border-radius: 16px;
    padding: 2.4rem 2rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(89, 42, 138, 0.22);
}

.modal-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cta-green);
    color: #fff;
    font-size: 2.2rem;
    line-height: 64px;
    margin: 0 auto 1.1rem;
}

.modal-box h2 {
    margin: 0 0 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    color: var(--ink);
}

.modal-box > p {
    margin: 0 0 0.5rem;
    color: #4a4465;
    line-height: 1.55;
    font-weight: 600;
}

/* "What Happens Next" numbered steps */
.modal-steps {
    list-style: none;
    counter-reset: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.modal-steps li {
    background: var(--step-bg);
    border-radius: 0.6rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.92rem;
    color: #2f2150;
    line-height: 1.45;
}

.modal-steps li strong {
    color: var(--ecu-purple);
}

.modal-sub {
    font-size: 0.9rem;
    margin: 0 0 1.4rem;
    color: #4a4465;
}

.modal-sub a {
    color: var(--ecu-purple);
    font-weight: 700;
}

.modal-close {
    background: var(--ecu-purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 2.2rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms;
}

.modal-close:hover {
    background: var(--ecu-purple-dark);
}

/* =====================================================
   RESPONSIVE — MOBILE OPTIMIZATION (max 559px)
   Built for paid social traffic (FB short attention spans).
   Goal: address + condition + timeline + name + phone all visible
   above the fold on modern phones (>=800px tall) without scrolling.
   Strategy:
     - tiny uppercase mini-labels instead of friendly questions
     - punchier H2 ("60-Second Cash Offer")
     - shorter chip text ("Looks great" vs "Looks great inside")
     - hide redundant trust copy (field-reassure, phone-micro,
       risk-reversal, form-fallback, privacy-line) —
       trust still carried by sticky CTA, form-trust-row, top phone-bar
     - 38–40px chip/input tap targets (still thumb-friendly)
   ===================================================== */
@media (max-width: 559px) {
    /* Slimmer sticky phone bar — still prominent, less tall */
    .phone-bar {
        padding: 0.25rem 0.6rem;
        font-size: 0.74rem;
        gap: 0.3rem;
        line-height: 1.2;
    }

    /* Hero: aggressive vertical padding reduction */
    .hero {
        padding: 0.4rem 0.65rem 0.7rem;
    }

    .hero-inner {
        gap: 0.6rem;
    }

    /* Show form first on mobile — reduces scroll friction.
       Hide hero-text on mobile entirely so the form is the only
       thing competing for the above-the-fold viewport. The trust
       copy still appears further down the page. */
    .hero-form {
        order: -1;
        scroll-margin-top: 2.2rem;
    }

    .hero-text {
        order: 1;
        margin-top: 0.4rem;
    }

    /* Eyebrow: smaller, tighter */
    .eyebrow {
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    /* H1: fits comfortably on 2 lines, not 4 */
    h1 {
        font-size: clamp(1.4rem, 6.4vw, 1.75rem);
        line-height: 1.15;
        margin-top: 0.3rem;
    }

    /* Subheadline: condensed but kept for trust */
    .subheadline {
        margin-top: 0.45rem;
        font-size: 0.85rem;
        line-height: 1.45;
    }

    /* Form card: reduce padding + rounding for compactness.
       Goal: every form field reachable with no scroll on iPhone-class viewports. */
    .form-card {
        padding: 0.6rem 0.8rem 0.7rem;
        border-radius: 0.75rem;
    }

    /* Tighter urgency pill above the heading */
    .form-urgency {
        font-size: 0.66rem;
        padding: 0.15rem 0.5rem;
        margin-bottom: 0.3rem;
    }

    .form-card h2 {
        font-size: 1.08rem;
        line-height: 1.05;
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 0.04em;
    }

    /* Subtitle hides on every mobile viewport — heading + sticky CTA
       already communicate the offer */
    .form-subtitle {
        display: none;
    }

    /* Mobile labels: tiny uppercase mini-labels.
       Saves ~80px vertically across 5 fields vs. the desktop friendly questions. */
    .label-short { display: inline; }
    .label-long  { display: none; }

    label,
    .chip-label {
        margin: 0.3rem 0 0.05rem;
        font-size: 0.62rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6f6088;
    }

    /* Inputs: keep ~40px tap target, reduce padding */
    input[type="text"],
    input[type="tel"],
    select {
        padding: 0.55rem 0.7rem;
        font-size: 0.95rem;
        border-radius: 0.5rem;
        min-height: 40px;
    }

    /* These trust copy blocks are redundant on mobile —
       the form-trust-row + sticky CTA + top phone-bar
       already carry every signal they convey. Hiding them
       is the difference between a 800px form and a 550px form. */
    .field-reassure,
    .phone-micro,
    .risk-reversal,
    .form-fallback,
    .privacy-line {
        display: none;
    }

    /* Chip groups: tighter and consistent 2-column even on tiny phones */
    .chip-group {
        gap: 0.3rem;
        margin: 0.05rem 0 0;
    }

    .chip {
        flex: 1 1 calc(50% - 0.3rem);
        min-height: 38px;
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
        border-radius: 0.55rem;
    }

    /* CTA button stays chunky (conversion critical) but loses some padding.
       Inline submit lives inside the form on mobile by default — natural
       page flow, no sticky overlay until the user scrolls past the form. */
    button[type="submit"] {
        margin-top: 0.55rem;
        padding: 0.85rem;
        font-size: 1.02rem;
        font-weight: 800;
        border-radius: 0.7rem;
        box-shadow: 0 4px 14px rgba(10, 154, 98, 0.30);
    }

    /* Sticky scroll-back CTA — hidden by default, slides up only when
       JS adds .is-visible (i.e. user has scrolled past the form). The
       button is an anchor link that scrolls back, not a form submit. */
    .mobile-submit-wrap {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 160;
        padding: 0.45rem 0.7rem calc(0.45rem + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(246, 244, 251, 0.98), rgba(246, 244, 251, 0.85));
        border-top: 1px solid rgba(61, 29, 103, 0.15);
        box-shadow: 0 -6px 20px rgba(27, 24, 48, 0.12);
        transform: translateY(110%);
        transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
        pointer-events: none;
    }

    .mobile-submit-wrap.is-visible {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mobile-submit-btn {
        display: block;
        width: min(760px, 92vw);
        margin: 0 auto;
        background: var(--cta-green);
        color: #fff;
        border: none;
        border-radius: 0.7rem;
        font: inherit;
        font-weight: 800;
        font-size: 1.02rem;
        line-height: 1.2;
        padding: 0.85rem;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 4px 14px rgba(10, 154, 98, 0.35);
    }

    .mobile-submit-btn:hover,
    .mobile-submit-btn:focus-visible {
        background: var(--cta-green-hover);
    }

    .form-message {
        min-height: 0;
        margin-top: 0.35rem;
        font-size: 0.82rem;
    }

    .form-message:empty {
        display: none;
    }

    /* Trust row: 3 short ✓ items right under the sticky CTA.
       Only trust block left visible on mobile — the rest are hidden above. */
    .form-trust-row {
        margin-top: 0.45rem;
        gap: 0.15rem 0.55rem;
        font-size: 0.68rem;
    }
}

/* =====================================================
   RESPONSIVE — EXTRA COMPACT (iPhone SE class + landscape phones)
   Squeezes the form even further on ≤720px-tall screens.
   ===================================================== */
@media (max-width: 559px) and (max-height: 720px),
       (max-width: 380px) {
    .hero {
        padding: 0.4rem 0.65rem 0.7rem;
    }

    .hero-inner {
        gap: 0.5rem;
    }

    .form-card {
        padding: 0.55rem 0.7rem 0.65rem;
    }

    .form-card h2 {
        font-size: 1rem;
    }

    .form-urgency {
        font-size: 0.64rem;
        padding: 0.12rem 0.4rem;
        margin-bottom: 0.25rem;
    }

    label,
    .chip-label {
        margin: 0.22rem 0 0.04rem;
        font-size: 0.58rem;
    }

    input[type="text"],
    input[type="tel"],
    select {
        padding: 0.45rem 0.6rem;
        min-height: 36px;
        font-size: 0.92rem;
    }

    .chip {
        min-height: 34px;
        padding: 0.3rem 0.4rem;
        font-size: 0.78rem;
    }

    .chip-group {
        gap: 0.25rem;
    }

    /* Trust row hidden on the smallest viewports — sticky CTA + top phone-bar still cover trust. */
    .form-trust-row {
        display: none;
    }
}

@media (min-width: 560px) {
    .mobile-submit-wrap {
        display: none !important;
    }
}

/* =====================================================
   RESPONSIVE — TABLET (560px+)
   ===================================================== */
@media (min-width: 560px) {
    .situations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-banner-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* =====================================================
   RESPONSIVE — MEDIUM (700px+)
   ===================================================== */
@media (min-width: 700px) {
    .steps {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
    }

    .step {
        flex: 1;
        max-width: 220px;
    }

    .step-connector {
        width: 40px;
        height: 2px;
        align-self: center;
        flex-shrink: 0;
    }

    /* Tightened form-card on tablet/desktop so more of the form
       fits in the viewport on 720-900px tall laptops. */
    .form-card {
        padding: 1.1rem 1.4rem 1.2rem;
    }

    .form-card h2 {
        font-size: 1.3rem;
        line-height: 1.05;
        margin-bottom: 0.15rem;
    }

    .form-subtitle {
        margin: 0.2rem 0 0.7rem;
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .form-urgency {
        margin-bottom: 0.45rem;
    }

    /* Tighter labels — saves ~30px across 5 fields without hurting readability */
    label,
    .chip-label {
        margin: 0.55rem 0 0.2rem;
        font-size: 0.9rem;
    }

    input[type="text"],
    input[type="tel"],
    select {
        padding: 0.6rem 0.75rem;
    }

    /* Compact field-reassure (the 🔒 line under address) */
    .field-reassure {
        margin: 0.25rem 0 0.3rem;
        font-size: 0.78rem;
        line-height: 1.4;
    }

    /* Chips: still thumb-friendly but slightly tighter */
    .chip {
        min-height: 42px;
        padding: 0.5rem 0.75rem;
        font-size: 0.88rem;
    }

    /* Risk-reversal yellow box: tighter padding + smaller text on desktop too */
    .risk-reversal {
        margin: 0.7rem 0 0;
        padding: 0.55rem 0.75rem;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .phone-micro {
        margin: 0.2rem 0 0;
        font-size: 0.78rem;
    }

    /* Submit + post-submit spacing */
    button[type="submit"] {
        margin-top: 0.85rem;
        padding: 0.85rem;
    }


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

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

/* =====================================================
   RESPONSIVE — DESKTOP two-column hero (860px+)
   ===================================================== */
@media (min-width: 860px) {

    /* Reduced padding so more of the form is visible on first paint
       on standard 720-900px tall laptop viewports. */
    .hero {
        padding: 1.75rem 1.5rem 2.5rem;
    }

    /* Switch to two-column side-by-side layout.
       align-items: start (instead of center) keeps the left text
       column anchored to the top of the hero. With center, the
       text floated down to vertically center against the taller
       form column, making it look "low" on page load. */
    .hero-inner {
        grid-template-columns: 1fr 400px;
        gap: 3rem;
        align-items: start;
    }

    /* Text left-aligned on desktop */
    .hero-text {
        text-align: left;
        /* Nudge the text down a hair so the eyebrow line isn't
           visually flush with the form-card's urgency pill. */
        padding-top: 0.4rem;
    }

    /* Tighten H1 a bit on desktop so subheadline + trust bar + pledge
       all fit without pushing the column past the form's height. */
    h1 {
        font-size: clamp(1.9rem, 4.6vw, 3.1rem);
        line-height: 1.08;
    }

    /* Subheadline no longer auto-centered */
    .subheadline {
        margin: 0.7rem 0 0;
        max-width: none;
        font-size: 0.95rem;
    }

    /* Tighter hero-trust spacing on desktop */
    .hero-trust {
        margin: 1rem 0 0.75rem;
    }

    .hero-pledge {
        margin-top: 0.5rem;
        font-size: 0.88rem;
        padding: 0.55rem 0.75rem;
    }

    /* Trust bar: 2×2 grid within the narrower text column */
    .trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   RESPONSIVE — LARGE DESKTOP (1060px+)
   ===================================================== */
@media (min-width: 1060px) {
    .hero-inner {
        grid-template-columns: 1fr 440px;
        gap: 4rem;
    }
}

/* =====================================================
   V2 — ANTI-COMPETITOR FUNNEL ADDITIONS
   (hero trust bar, pledge, meet-chase, realtor-vs-buyer)
   ===================================================== */

/* Hero trust bar — 4 big numbers right under the subheadline */
.hero-trust {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.hero-trust li {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(243,194,65,0.25);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ht-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--ecu-gold);
    letter-spacing: 0.02em;
}
.ht-label {
    font-size: 0.82rem;
    color: #e8deff;
    margin-top: 0.2rem;
    font-weight: 600;
}
@media (min-width: 760px) {
    .hero-trust { grid-template-columns: repeat(4, 1fr); }
}

/* Hero anti-competitor micro-pledge */
.hero-pledge {
    margin: 0.6rem 0 0;
    padding: 0.7rem 0.9rem;
    background: rgba(10,154,98,0.12);
    border-left: 3px solid var(--cta-green);
    border-radius: 6px;
    color: #e8deff;
    font-size: 0.95rem;
    line-height: 1.45;
}
.hero-pledge strong { color: #fff; }
.pledge-check {
    display: inline-block;
    color: var(--cta-green);
    font-weight: 900;
    margin-right: 0.4rem;
}

/* Form card — urgency pill + field help + what-happens-next list */
.form-urgency {
    display: inline-block;
    background: var(--cta-green);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
}
.field-help {
    font-weight: 400;
    color: #6a5f82;
    font-size: 0.82rem;
}
/* Hero "What happens next" — sits in the left column on desktop
   to fill the whitespace below the pledge while keeping the form
   itself shorter. Hidden on mobile (the form is the focus there). */
.hero-next {
    display: none;
    margin-top: 1.1rem;
    padding: 0.95rem 1.05rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(243, 194, 65, 0.28);
    border-radius: 10px;
    text-align: left;
}
.hero-next-eyebrow {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ecu-gold);
}
.hero-next-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: hn;
}
.hero-next-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.3rem 0;
    font-size: 0.92rem;
    color: #f4eeff;
    line-height: 1.45;
}
.hero-next-list li strong { color: #fff; }
.hn-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ecu-gold);
    color: var(--ecu-purple-dark);
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.hn-text {
    flex: 1;
}

/* Reveal on desktop only — mobile keeps form-first focus */
@media (min-width: 860px) {
    .hero-next { display: block; }
}

/* Meet Chase — owner-operator humanization block */
.meet-chase {
    padding: 3rem 0 1rem;
}
.meet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}
.meet-photo {
    display: flex;
    justify-content: center;
}
.photo-placeholder {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--step-bg);
    border: 2px dashed var(--ecu-purple);
    color: var(--ecu-purple);
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    font-size: 0.95rem;
}
.ph-sub {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6a5f82;
}
.meet-text h2 {
    margin: 0 0 0.6rem;
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--ink);
}
.meet-text p {
    margin: 0 0 0.75rem;
    color: #3a2f57;
    line-height: 1.55;
}
.meet-sig {
    font-size: 0.9rem;
    color: #5a4e75;
    font-weight: 600;
    margin-top: 0.5rem;
}
.meet-sig a { color: var(--ecu-purple); font-weight: 700; }
@media (min-width: 760px) {
    .meet-grid {
        grid-template-columns: 260px 1fr;
        gap: 2.4rem;
    }
}

/* How-It-Works — small time-commitment chip */
.step-time {
    display: inline-block;
    background: var(--ecu-gold);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* Realtor-vs-Buyer comparison — differentiated visual weight */
.comparison-vs-realtor {
    padding-top: 1rem;
}
.comparison-vs-realtor .col-us {
    background: rgba(10,154,98,0.06);
}
.comparison-vs-realtor .col-agent {
    background: rgba(142,29,29,0.04);
}

/* The Buyer-Only Pledge */
.pledge {
    margin: 2.5rem auto;
}
.pledge-card {
    background: linear-gradient(135deg, var(--ecu-purple) 0%, var(--ecu-purple-dark) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 2rem 1.6rem;
    box-shadow: 0 8px 28px rgba(61,29,103,0.22);
    border: 2px solid var(--ecu-gold);
}
.pledge-card h2 {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    color: var(--ecu-gold);
}
.pledge-intro {
    margin: 0 0 1.1rem;
    color: #e8deff;
    font-size: 0.98rem;
}
.pledge-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    display: grid;
    gap: 0.85rem;
}
.pledge-list li {
    background: rgba(255,255,255,0.07);
    border-left: 3px solid var(--ecu-gold);
    padding: 0.8rem 1rem;
    border-radius: 6px;
    line-height: 1.5;
    font-size: 0.95rem;
}
.pledge-list .pledge-check {
    color: var(--ecu-gold);
    font-size: 1.05rem;
}
.pledge-sig {
    margin: 0;
    font-weight: 700;
    color: var(--ecu-gold);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(243,194,65,0.3);
    padding-top: 0.9rem;
}
@media (min-width: 760px) {
    .pledge-card { padding: 2.4rem 2rem; }
    .pledge-list { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   V3 — TRUST TIGHTENING (funnel conversion lift)
   Changes: urgency dot, trust-strip, form fallback,
   monogram, sticky mobile CTA bar.
   ===================================================== */

/* Urgency pill — live dot for "Chase is reviewing today" */
.form-urgency {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.urgency-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffec9e;
    box-shadow: 0 0 0 3px rgba(243,194,65,0.35);
    animation: pulseDot 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(243,194,65,0.35); opacity: 1; }
    50%      { box-shadow: 0 0 0 5px rgba(243,194,65,0.10); opacity: 0.85; }
}

/* "Or text me" fallback CTA under the form button */
.form-fallback {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: #5a4e75;
    border-top: 1px solid var(--soft-line);
    padding-top: 0.65rem;
}
.form-fallback a {
    color: var(--ecu-purple);
    font-weight: 800;
    text-decoration: none;
}
.form-fallback a:hover { text-decoration: underline; }

/* Monogram photo tile — a cleaner "coming soon" than a dashed placeholder */
.photo-monogram {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--ecu-purple) 0%, var(--ecu-purple-dark) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 8px 24px rgba(61,29,103,0.22);
    border: 2px solid var(--ecu-gold);
    text-align: center;
    padding: 1.2rem;
}
.pm-initials {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--ecu-gold);
    letter-spacing: 0.06em;
}
.pm-caption {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}
.pm-caption em {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: 0.78rem;
    color: #e8deff;
    margin-top: 0.15rem;
    letter-spacing: 0.02em;
}

/* Sticky mobile CTA bar — fixed bottom, two-button call-or-text */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: none;  /* default hidden — shown on mobile only */
    gap: 0.5rem;
    padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom));
    background: rgba(26, 14, 51, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.25);
    border-top: 1px solid rgba(243,194,65,0.25);
}
.mcta-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 0.6rem;
    border-radius: 0.7rem;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: transform 120ms, background 120ms;
}
.mcta-btn:active { transform: scale(0.97); }
.mcta-call {
    background: var(--cta-green);
    color: #fff;
}
.mcta-text {
    background: var(--ecu-gold);
    color: var(--ecu-purple-dark);
}
/* Mobile-only reveal + body padding to avoid overlap.
   On phones (≤559px) the sticky "Get My Cash Offer" submit button
   already sits at the bottom of the viewport, so the call/text bar
   would visually collide with it. Show the call/text bar only on
   tablets / mid-size viewports where the sticky submit isn't shown. */
@media (min-width: 560px) and (max-width: 759px) {
    .mobile-cta { display: flex; }
    body { padding-bottom: 4.2rem; }
}

@media (max-width: 559px) {
    /* The mobile call/text bar is hidden on phones. The .mobile-submit-wrap
       only appears as a scroll-back CTA after the form leaves the viewport,
       and is animated in/out — no need for permanent body padding. The
       sticky overlay is short enough that it doesn't hide content
       meaningfully on the brief frame it's visible. */
    .mobile-cta { display: none !important; }
}


/* =====================================================
   V4 - NET COMPARISON CALCULATOR
   Interactive tool that keeps sellers on page and
   answers the "is this really a fair deal" question
   with their own numbers.
   ===================================================== */
.calc {
    padding: 3rem 1rem 3.2rem;
}
.calc-card {
    max-width: 920px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(61,29,103,0.12);
    border: 1px solid rgba(89, 42, 138, 0.10);
    padding: 2.2rem 1.8rem;
}
.calc-header { text-align: center; margin-bottom: 1.6rem; }
.calc-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ecu-purple);
    margin: 0 0 0.4rem;
}
#calc-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--ecu-purple-dark);
    margin: 0 0 0.55rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.calc-sub {
    color: #4a3e6a;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto;
}

.calc-input-row {
    max-width: 420px;
    margin: 0 auto 1.6rem;
    text-align: center;
}
.calc-label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ecu-purple-dark);
    margin-bottom: 0.45rem;
}
.calc-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
}
.calc-prefix {
    position: absolute;
    left: 14px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ecu-purple);
    pointer-events: none;
}
#calc-value {
    width: 100%;
    padding: 0.85rem 0.85rem 0.85rem 2rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ecu-purple-dark);
    border: 2px solid var(--ecu-gold);
    border-radius: 10px;
    background: #fffdf4;
    text-align: center;
    letter-spacing: 0.02em;
}
#calc-value:focus {
    outline: none;
    border-color: var(--ecu-purple);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(243,194,65,0.25);
}
.calc-hint {
    font-size: 0.78rem;
    color: #6a5d86;
    margin: 0.45rem 0 0;
    font-style: italic;
}

.calc-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
@media (min-width: 700px) {
    .calc-results { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}

.calc-col {
    border-radius: 12px;
    padding: 1.3rem 1.15rem 1.1rem;
    border: 1px solid rgba(89, 42, 138, 0.12);
    background: #faf7ff;
    display: flex;
    flex-direction: column;
}
.calc-col.calc-cash {
    background: #f2fff6;
    border-color: rgba(34, 140, 60, 0.25);
    position: relative;
}
.calc-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed rgba(89, 42, 138, 0.2);
}
.calc-cash .calc-col-head { border-bottom-color: rgba(34, 140, 60, 0.25); }
.calc-col-tag {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--ecu-purple-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.calc-col-tag.cash { color: #146b2d; }
.calc-col-time {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6a5d86;
    background: rgba(89, 42, 138, 0.08);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.calc-cash .calc-col-time {
    color: #146b2d;
    background: rgba(34, 140, 60, 0.12);
}

.calc-breakdown {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    flex: 1;
}
.calc-breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.38rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(89, 42, 138, 0.06);
}
.calc-breakdown li:last-child { border-bottom: none; }
.calc-line { color: #4a3e6a; line-height: 1.3; }
.calc-val { font-weight: 700; color: var(--ecu-purple-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-breakdown li.deduct .calc-val { color: #a12f2f; }
.calc-breakdown li .calc-val.zero { color: #146b2d; }

.calc-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: var(--ecu-purple);
    color: #fff;
    border-radius: 8px;
    margin-top: auto;
}
.calc-total.cash { background: #146b2d; }
.calc-total span {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.calc-total strong {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ecu-gold);
}
.calc-total.cash strong { color: #ffec9e; }

.calc-verdict {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding-top: 0.2rem;
}
.verdict-line {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ecu-purple-dark);
    line-height: 1.5;
    margin: 0 0 0.5rem;
}
.verdict-sub {
    font-size: 0.8rem;
    color: #6a5d86;
    line-height: 1.45;
    margin: 0 0 1.1rem;
    font-style: italic;
}
.calc-cta {
    display: inline-block;
    background: var(--cta-green);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.85rem 1.8rem;
    border-radius: 0.6rem;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(34, 140, 60, 0.28);
    transition: transform 150ms, box-shadow 150ms;
}
.calc-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34, 140, 60, 0.38);
}

@media (max-width: 559px) {
    .calc-card { padding: 1.6rem 1.1rem; }
    .calc-col { padding: 1.05rem 0.95rem 0.9rem; }
    .calc-breakdown li { font-size: 0.85rem; }
    .calc-total strong { font-size: 1.2rem; }
}

/* =====================================================
   FORM FRICTION + TRUST OPTIMIZATIONS (v4)
   Single-screen form. Phone moved to bottom. Dropdowns replaced with chips.
   Trust signals woven inline.
   ===================================================== */

/* Reassurance microcopy under sensitive fields (e.g. address) */
.field-reassure {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.82rem;
    color: #6f6088;
    line-height: 1.5;
}

/* Trust badge row (under the submit button) */
.form-trust-row {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.95rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5a4e75;
    text-align: center;
}
.form-trust-row li { white-space: nowrap; }

/* Risk-reversal copy directly above submit */
.risk-reversal {
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.85rem;
    background: rgba(243, 194, 65, 0.12);
    border-left: 3px solid var(--ecu-gold);
    border-radius: 0.4rem;
    font-size: 0.85rem;
    color: #4a4063;
    line-height: 1.5;
}

/* Button-chip groups (replaces native <select> for thumb-friendly tapping) */
.chip-label {
    display: block;
    margin: 0.95rem 0 0.4rem;
    font-weight: 700;
    font-size: 0.94rem;
    color: #2f2150;
}
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}
.chip {
    flex: 1 1 calc(50% - 0.45rem);
    min-height: 48px;             /* thumb-friendly tap target */
    padding: 0.6rem 0.85rem;
    background: #fff;
    border: 1.5px solid #cfc3e2;
    border-radius: 0.7rem;
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms, background-color 120ms, transform 80ms, color 120ms;
}
.chip:hover,
.chip:focus-visible {
    border-color: var(--ecu-purple);
    outline: none;
    background: #f6f1fc;
}
.chip:active { transform: scale(0.98); }
.chip.is-selected {
    border-color: var(--ecu-purple);
    background: var(--ecu-purple);
    color: #fff;
    box-shadow: 0 4px 12px rgba(89, 42, 138, 0.22);
}
.chip.is-selected:hover {
    background: var(--ecu-purple-dark);
}

/* On very narrow screens, keep chips at 2-up so the entire form
   stays visible without scrolling. (Previous rule stacked them
   full-width — that pushed the phone field below the fold.) */
@media (max-width: 419px) {
    .chip {
        flex: 1 1 calc(50% - 0.35rem);
        font-size: 0.8rem;
        padding: 0.4rem 0.4rem;
    }
}