/* ============================================================
   SITE CSS — FileBankruptcyHelp.com Evaluation Lander
   ------------------------------------------------------------
   Site chrome only — header, title-box, content panel,
   marketing sections, footer. No form-system rules; those live
   in builder.css (structure) and theme.css (theme).

   Brand palette:
     navy   #203769
     red    #a91013
     dark   #292929
     bg     #f3f3f3
   ============================================================ */


/* ----- Reset-ish base --------------------------------------- */
body {
    margin: 0;
    background: #f3f3f3 url('../images/back.png') center top / cover no-repeat;
  /**  background-image: image-set(
        url('../images/back.webp') type('image/webp'),
        url('../images/back.png')  type('image/jpeg')
    );**/
    font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
    color: #292929;
}


/* ----- Container — main shell with shadow ------------------ */
.site-container {
    max-width: 779px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.38);
}


/* ----- Header (logo image, full-width inside container) ---- */
.site-header {
    background: #ffffff;
    line-height: 0;
}

.site-header img {
    display: block;
    width: 100%;
    height: auto;
}


/* ----- Title-box (navy banner with H1/H2 + chevron) -------- */
.title-box {
    position: relative;
    background: #203769;
    text-align: center;
    padding: 24px 20px 28px;
    color: #ffffff;
}

.title-box h1 {
    margin: 0 0 4px;
    font-size: 26pt;
    font-weight: 700;
    line-height: 1.2;
}

.title-box h2 {
    margin: 0;
    font-size: 16pt;
    font-weight: 400;
    line-height: 1.3;
    color: #ffffff;
}

/* The chevron divider hanging below the title-box. Inlined as
   SVG via background-image to skip an image request — replaces
   the old divider.png. */
.title-box::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 32px;
    height: 17px;
    transform: translateX(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 17' width='32' height='17'><path d='M0 0 L16 17 L32 0 Z' fill='%23203769'/></svg>") center top no-repeat;
    z-index: 5;
}


/* ----- Content panel (form area) --------------------------- */
.content-panel {
    background: #ffffff;
    padding: 32px 20px 16px;
}

.content-panel .lock-row {
    text-align: center;
    margin: 18px 0 10px;
}

.content-panel .lock-row img {
    height: 40px;
    width: auto;
}


/* ----- Marketing: "How It Works" navy panel ---------------- */
.promo-howitworks {
    background: #203769;
    color: #ffffff;
    padding: 20px 25px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.promo-howitworks p {
    margin: 0;
}


/* ----- Marketing: "You May Eliminate / You May Keep" ------- */
.promo-eliminate-keep {
    background: #ffffff;
    padding: 24px 20px;
}

.promo-eliminate-keep .col {
    flex: 1 1 50%;
}

.promo-eliminate-keep h4 {
    font-size: 18pt;
    font-weight: 700;
    color: #292929;
    border-bottom: 1px solid #dddcdc;
    margin: 0 0 12px;
    padding-bottom: 6px;
    width: 90%;
}

.promo-eliminate-keep ul {
    list-style: none;
    padding: 0px 0px 0px 35px;
    margin: 0;
}

.promo-eliminate-keep li {
    position: relative;
    padding: 6px 0 6px 40px;
    font-size: 16pt;
    font-weight: 400;
    line-height: 1;
}

/* Inline SVG check (red). Replaces the old <i class="fa fa-check">
   which legacy rendered at ~16pt with FA's chunky weight. This SVG
   path is modeled after FA 4.7's fa-check glyph (heavier strokes)
   sized to 22px so it reads at the same visual weight as the old
   site. */
.promo-eliminate-keep li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23a91013'><path d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>") center / contain no-repeat;
}

@media (min-width: 576px) {
    .promo-eliminate-keep .grid {
        display: flex;
        gap: 1rem;
    }
}


/* ----- Marketing: "Need Immediate Help" starfield panel ---- */
.promo-callus {
    text-align: center;
    border-top: 3px solid #a91013;
    padding: 24px 20px 28px;
    color: #ffffff;
    background: #203769 url('../images/starback.png') center / cover no-repeat;
}

.promo-callus h4 {
    font-size: 20pt;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
}

.promo-callus .phone {
    font-size: 32pt;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.promo-callus .phone a {
    color: #ffffff;
    text-decoration: none;
}


/* ----- Footer ----------------------------------------------- */
.site-footer {
    background: #333333;
    color: #c0c0c0;
    border-top: 3px solid #a91013;
    padding: 22px 25px 28px;
    font-size: 0.78rem;
    line-height: 1.5;
font-weight: normal;
    text-align: center;
}

.site-footer p {
    margin: 0 0 10px;
}

.site-footer p:last-child {
    margin-bottom: 0;
}

.site-footer a {
    color: #c0c0c0;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer .legal-justified {
    text-align: justify;
    margin-top: 14px;
    font-size: 0.72rem;
    line-height: 1.45;
}


/* ----- Utility: tap targets for tel links ------------------ */
a[href^="tel:"] {
    text-decoration: inherit;
    color: inherit;
}

.showDesktop{display: block}
.showMobile{display: none}

/* ----- Mobile breakpoints ---------------------------------- */
@media (max-width: 575.98px) {
    .title-box {
        padding: 18px 15px 22px;
    }
    .title-box h1 { font-size: 16pt; }
    .title-box h2 { font-size: 12pt; }
	.showDesktop{display: none}
	.showMobile{display: block}
    .content-panel { padding: 24px 15px 12px; }

    /* Deep-indent the You May Eliminate / Keep section on mobile
       so the h4s and lists sit ~25% in from the container edge,
       matching the legacy mobile layout. Using a left-pad on .col
       rather than on the section so the section's own background
       still extends edge-to-edge. */
    .promo-eliminate-keep {
        padding-left: 15px;
        padding-right: 15px;
    }

    .promo-eliminate-keep .col {
        padding-left: 35px;
    }
.promo-eliminate-keep ul {
  padding-left: 30px;
}
    .promo-eliminate-keep .col + .col {
        margin-top: 18px;
    }
}