/* ==========================================================================
   Ladera Lending -- Mail QR lander (issue #588)

   All selectors are `ld-` prefixed so nothing leaks into bs4_base2.html or
   the shared includes. Palette values were sampled directly from the
   customer's mock-up, not eyeballed.

   Breakpoint: 992px, matching the mock-up's Mobile View / Web View panels.
   ========================================================================== */

:root {
    --ld-maroon: #600110;
    --ld-maroon-dark: #45000b;
    --ld-orange: #e4690f;
    --ld-orange-dark: #c4570a;
    --ld-ink: #181b21;
    --ld-body: #3f454e;
    --ld-muted: #6b7280;
    --ld-hairline: #e7ded9;
    --ld-panel: #f9f6f3;
    --ld-field-border: #d9d2ce;
    --ld-shadow: 0 10px 30px rgba(24, 27, 33, 0.08);
    --ld-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ld-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout shell -- the standard centered-container pattern.
       Every section (nav, hero, footer) uses the SAME max-width and gutter, so
       the logo, headline, form card and footer all start on one vertical line
       at every screen size, and an ultrawide monitor centers the page instead
       of stretching one column. Change these two values to retune the whole
       layout; nothing else does viewport math. */
    --ld-max: 1760px;
    --ld-gutter: clamp(20px, 4vw, 64px);

    /* Where the content column ends, as a percentage of the shell. This is the
       point the hero photo's white scrim fades from, so the copy always sits on
       clean white and the photo starts exactly where the column stops.
       Derived from the desktop grid (1fr / 1.05fr + gutter + gap): the boundary
       lands at 48.7%-49.4% across every width the shell supports. */
    --ld-split: 49%;

}

.ld-shell {
    max-width: var(--ld-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ld-gutter);
    padding-right: var(--ld-gutter);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Top navigation
   -------------------------------------------------------------------------- */

.ld-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #ffffff;
    border-bottom: 1px solid var(--ld-hairline);
    padding: 12px 0;
}

.ld-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ld-nav-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.ld-nav-brand img {
    max-height: 56px;
    width: auto;
    display: block;
}

.ld-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.ld-nav-help {
    font-size: 13px;
    color: var(--ld-body);
    margin-right: 4px;
    white-space: nowrap;
}

.ld-nav-help b {
    color: var(--ld-ink);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--ld-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 13px 22px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.05s ease;
    /* bs4_base2 sets a global `.btn { width: 100% }`. We never use `.btn`,
       but be explicit so a future base change cannot stretch these. */
    width: auto;
}

.ld-btn:hover,
.ld-btn:focus {
    text-decoration: none;
    color: #ffffff;
}

.ld-btn:active {
    transform: translateY(1px);
}

.ld-btn:focus-visible {
    outline: 3px solid rgba(228, 105, 15, 0.55);
    outline-offset: 2px;
}

.ld-btn-maroon {
    background: var(--ld-maroon);
    color: #ffffff;
}

.ld-btn-maroon:hover,
.ld-btn-maroon:focus {
    background: var(--ld-maroon-dark);
}

.ld-btn-orange {
    background: var(--ld-orange);
    color: #ffffff;
}

.ld-btn-orange:hover,
.ld-btn-orange:focus {
    background: var(--ld-orange-dark);
}

.ld-btn-ghost {
    background: #ffffff;
    color: var(--ld-maroon);
    border: 1px solid var(--ld-hairline);
}

.ld-btn-ghost:hover,
.ld-btn-ghost:focus {
    background: var(--ld-panel);
    color: var(--ld-maroon-dark);
}

.ld-btn-sm {
    padding: 10px 16px;
    font-size: 12.5px;
}

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

.ld-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Hero grid
   -------------------------------------------------------------------------- */

.ld-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.ld-col-main {
    padding: 40px 0 8px;
    min-width: 0;
}

.ld-col-side {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Hero copy
   -------------------------------------------------------------------------- */

.ld-greeting {
    font-family: var(--ld-serif);
    font-weight: 700;
    font-size: clamp(34px, 7vw, 54px);
    line-height: 1.05;
    color: var(--ld-maroon);
    margin: 0 0 6px;
}

.ld-headline {
    font-family: var(--ld-serif);
    font-weight: 700;
    font-size: clamp(28px, 5.6vw, 46px);
    line-height: 1.14;
    color: var(--ld-ink);
    margin: 0 0 18px;
    max-width: 15ch;
}

.ld-headline .ld-dot {
    color: var(--ld-orange);
}

.ld-sub {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ld-body);
    margin: 0 0 22px;
    max-width: 34ch;
}

.ld-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.ld-benefits li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ld-ink);
    margin-bottom: 12px;
}

.ld-benefits svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--ld-orange);
}

/* --------------------------------------------------------------------------
   Primary CTA pair
   -------------------------------------------------------------------------- */

.ld-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
    max-width: 520px;
}

.ld-cta-row .ld-btn {
    width: 100%;
    padding: 16px 20px;
    font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   "OR CONTINUE ONLINE" divider
   -------------------------------------------------------------------------- */

.ld-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    max-width: 520px;
    color: var(--ld-maroon);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ld-divider::before,
.ld-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ld-hairline);
}

/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */

.ld-card {
    background: #ffffff;
    border: 1px solid var(--ld-hairline);
    border-radius: 10px;
    box-shadow: var(--ld-shadow);
    padding: 26px 24px 22px;
    max-width: 520px;
}

.ld-card-wide {
    max-width: 620px;
}

.ld-card-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    color: var(--ld-maroon);
}

.ld-card-icon svg {
    width: 26px;
    height: 26px;
}

.ld-card-title {
    font-family: var(--ld-serif);
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    color: var(--ld-maroon);
    margin: 0 0 20px;
}

.ld-field {
    position: relative;
    margin-bottom: 12px;
}

.ld-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ld-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-muted);
    margin-bottom: 5px;
}

.ld-field-icon {
    position: absolute;
    left: 14px;
    bottom: 15px;
    color: var(--ld-muted);
    pointer-events: none;
    display: flex;
}

.ld-field-icon svg {
    width: 17px;
    height: 17px;
}

.ld-field input,
.ld-field select {
    width: 100%;
    font-family: var(--ld-sans);
    font-size: 15px;
    line-height: 1.4;
    color: var(--ld-ink);
    background: #ffffff;
    border: 1px solid var(--ld-field-border);
    border-radius: 6px;
    padding: 13px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The shared select-state-list.html partial hard-codes Bootstrap's
   `.form-control`, whose fixed height clips the option text once our padding
   is applied. Let the box size to its content instead. */
.ld-field select.form-control {
    height: auto;
    padding-right: 34px;
}

.ld-field-iconed input {
    padding-left: 42px;
}

.ld-field input::placeholder {
    color: #9aa1ab;
}

.ld-field input:focus,
.ld-field select:focus {
    outline: none;
    border-color: var(--ld-maroon);
    box-shadow: 0 0 0 3px rgba(96, 1, 16, 0.10);
}

.ld-card .ld-btn-block {
    margin-top: 6px;
    padding: 16px 20px;
}

.ld-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ld-muted);
    text-align: center;
}

.ld-secure svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--ld-orange);
}

.ld-consent {
    margin: 16px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ld-muted);
}

/* --------------------------------------------------------------------------
   Hero media
   -------------------------------------------------------------------------- */

/* The photo is anchored to the RIGHT and sized by HEIGHT, so it always keeps
   its natural proportions -- never zoom-cropped into a band. Whatever hangs off
   the left is the source image's own white feather, which is clipped. That
   feather plus the scrim below is what keeps the copy off the photo. */
.ld-media {
    position: relative;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    background: #ffffff;
}

.ld-media img {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Trust badges
   -------------------------------------------------------------------------- */

.ld-badges {
    display: none;
    background: var(--ld-panel);
    border: 1px solid var(--ld-hairline);
    border-radius: 10px;
    padding: 22px 10px;
    margin-top: 18px;
}

.ld-badge {
    text-align: center;
    padding: 0 10px;
}

.ld-badge svg {
    width: 34px;
    height: 34px;
    color: var(--ld-orange);
    margin-bottom: 9px;
}

.ld-badge span {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ld-ink);
}

/* --------------------------------------------------------------------------
   Questions / help card
   -------------------------------------------------------------------------- */

.ld-help {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--ld-panel);
    border: 1px solid var(--ld-hairline);
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 18px;
}

.ld-help-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--ld-maroon);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ld-maroon);
    background: #ffffff;
}

.ld-help-avatar svg {
    width: 26px;
    height: 26px;
}

.ld-help-copy {
    flex: 1 1 190px;
    min-width: 0;
}

.ld-help-copy h3 {
    font-family: var(--ld-serif);
    font-weight: 700;
    font-size: 20px;
    color: var(--ld-maroon);
    margin: 0 0 3px;
}

.ld-help-copy p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ld-body);
}

.ld-help-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ld-footer {
    background: #ffffff;
    border-top: 1px solid var(--ld-hairline);
    margin-top: 34px;
}

.ld-footer-inner {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ld-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ld-hairline);
    text-align: center;
}

.ld-footer-links a {
    color: var(--ld-maroon);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 0 18px;
}

.ld-footer-links a:hover,
.ld-footer-links a:focus {
    text-decoration: underline;
    color: var(--ld-maroon-dark);
}

.ld-footer-links a + a {
    border-left: 1px solid var(--ld-hairline);
}

.ld-footer-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    padding-top: 20px;
}

.ld-footer-brand img {
    max-height: 52px;
    width: auto;
}

.ld-footer-org {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ld-body);
}

.ld-footer-org strong {
    color: var(--ld-ink);
}

.ld-footer-ehl {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ld-footer-ehl img {
    width: 70px;
    height: auto;
    flex: 0 0 auto;
}

.ld-footer-legal {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ld-muted);
}

.ld-footer-legal strong {
    color: var(--ld-body);
}

.ld-social {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.ld-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ld-maroon);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.ld-social a:hover,
.ld-social a:focus {
    background: var(--ld-maroon-dark);
    color: #ffffff;
}

.ld-social svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   TEXT US desktop modal (issue #588)
   Landers do not load jQuery or bootstrap.js -- hand-rolled, vanilla only.
   -------------------------------------------------------------------------- */

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

.ld-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ld-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 27, 33, 0.55);
}

.ld-modal-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(24, 27, 33, 0.28);
    width: 100%;
    max-width: 460px;
    padding: 28px 26px 24px;
    text-align: center;
}

.ld-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--ld-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.ld-modal-close:hover,
.ld-modal-close:focus {
    color: var(--ld-ink);
}

.ld-modal-icon {
    color: var(--ld-maroon);
    margin-bottom: 8px;
}

.ld-modal-icon svg {
    width: 30px;
    height: 30px;
}

.ld-modal-dialog h2 {
    font-family: var(--ld-serif);
    font-weight: 700;
    font-size: 22px;
    color: var(--ld-maroon);
    margin: 0 0 6px;
}

.ld-modal-number {
    display: block;
    font-size: 27px;
    font-weight: 700;
    color: var(--ld-ink);
    margin-bottom: 16px;
}

.ld-modal-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ld-muted);
    margin: 0 0 8px;
}

.ld-modal-message {
    background: var(--ld-panel);
    border: 1px solid var(--ld-hairline);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ld-ink);
    text-align: left;
    margin: 0 0 16px;
    user-select: all;
}

.ld-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ld-copy-state {
    font-size: 12.5px;
    color: var(--ld-orange-dark);
    font-weight: 600;
    min-height: 18px;
    margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   Desktop (>= 992px) -- the mock-up's "Web View"
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    /* Proportional tracks -- both columns grow and shrink together, so no
       single column can over-stretch. Dropping the right gutter lets the photo
       run to the edge of the shell; below --ld-max that IS the viewport edge
       (the mock-up's full-bleed look), and above it the shell centers so an
       ultrawide gets even margins instead of a stretched photo. */
    .ld-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        column-gap: 44px;
        padding-right: 0;
    }

    .ld-col-main {
        padding: 46px 0 10px;
        width: 100%;
    }

    /* Let these fill the content column instead of being capped narrower than
       the headline sitting above them. */
    .ld-cta-row,
    .ld-divider,
    .ld-card {
        max-width: none;
    }

    .ld-cta-row {
        grid-template-columns: 1fr 1fr;
    }

    /* The photo is the hero's backdrop, spanning BOTH columns rather than
       sitting inside the right one. A white scrim covers it solidly across the
       content column and starts fading exactly where that column ends, so the
       copy never competes with the image. */
    /* Full height of the hero. The image keeps its own aspect ratio (see the
       base rule), so a taller hero shows MORE of the photo rather than
       zooming into it. */
    .ld-media {
        position: absolute;
        inset: 0;
        z-index: 0;
        min-height: 0;
    }

    .ld-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            #ffffff 0%,
            #ffffff var(--ld-split),
            rgba(255, 255, 255, 0) calc(var(--ld-split) + 20%)
        );
    }

    /* Both columns ride above the backdrop. */
    .ld-col-main,
    .ld-col-side {
        position: relative;
        z-index: 1;
    }

    /* Cards sit low over the photo, as in the mock-up. */
    .ld-col-side {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 8px;
    }

    /* The photo is clipped to the hero and never bleeds into the footer. */
    .ld-hero {
        overflow: hidden;
    }

    /* The photo bleeds to the shell edge; these do not. A card pushed flush
       against the viewport loses its corner radius and its buttons end up
       touching the edge. Same gutter as the left side. */
    .ld-badges {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-right: var(--ld-gutter);
    }

    .ld-help {
        margin-right: var(--ld-gutter);
        flex-wrap: nowrap;
    }

    .ld-footer-body {
        grid-template-columns: auto 1fr auto 2fr;
        gap: 28px;
        align-items: center;
    }

    .ld-footer-org {
        border-left: 1px solid var(--ld-hairline);
        padding-left: 28px;
    }
}

/* --------------------------------------------------------------------------
   Mobile (< 992px) -- the mock-up's "Mobile View"
   The photo becomes a soft backdrop behind the top-right of the hero copy,
   exactly as the mock-up shows it.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .ld-hero {
        position: relative;
        overflow: hidden;
    }

    .ld-col-side {
        display: contents;
    }

    /* Full width so the photo scales with the device instead of being squeezed
       into a fixed 62% box; it is still anchored right and its natural aspect
       is preserved, with the scrim below fading it into the copy. */
    .ld-media {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: clamp(280px, 78vw, 380px);
        min-height: 0;
        z-index: 0;
        pointer-events: none;
    }

    .ld-media::after {
        content: "";
        position: absolute;
        inset: 0;
        /* Keeps the benefit list readable where it overlaps the photo -- the
           thank-you page has the longest copy running under it. */
        background: linear-gradient(
            100deg,
            #ffffff 14%,
            rgba(255, 255, 255, 0.88) 48%,
            rgba(255, 255, 255, 0.30) 100%
        );
    }

    .ld-col-main {
        position: relative;
        z-index: 1;
        padding-top: 26px;
    }

    /* Mock-up omits the trust badges below the breakpoint. */
    .ld-badges {
        display: none;
    }

    .ld-help,
    .ld-card,
    .ld-card-wide,
    .ld-cta-row,
    .ld-divider {
        max-width: none;
    }

    .ld-help {
        position: relative;
        z-index: 1;
    }

    .ld-help-actions {
        flex-direction: column;
        flex: 1 1 150px;
    }

    .ld-help-actions .ld-btn {
        width: 100%;
    }

    .ld-nav-help {
        display: none;
    }

    .ld-nav-actions .ld-btn {
        padding: 10px 14px;
        font-size: 12px;
    }

    .ld-footer-links a {
        padding: 0 12px;
        font-size: 12.5px;
    }

    /* The links wrap onto several rows here, which leaves the `a + a`
       separator stranded at the start of a line. Drop it below the
       breakpoint and let the spacing do the work. */
    .ld-footer-links a + a {
        border-left: 0;
    }

    .ld-footer-body {
        justify-items: center;
        text-align: center;
    }

    .ld-footer-ehl {
        justify-content: center;
    }

    .ld-social {
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .ld-nav-actions .ld-btn .ld-btn-text {
        display: none;
    }

    .ld-nav-actions .ld-btn {
        padding: 11px 13px;
    }

    .ld-field-row {
        grid-template-columns: 1fr;
    }
}