/*
 * hb-lp.css - campaign landing pages, scoped under .hb-lp
 *
 * Deliberately self-contained: it repeats the brand tokens rather than
 * depending on hb-modern.css, so a landing page can never be broken by an
 * edit made for the marketing site. amz_style.css still loads underneath and
 * wins some long selector chains, hence the specificity on form controls.
 */

.hb-lp {
    --lp-red: #A41D21;
    --lp-red-dark: #7d1518;
    --lp-ink: #14171a;
    --lp-muted: #5c6670;
    --lp-line: #e6e8ec;
    --lp-soft: #f5f6f8;
    --lp-radius: 16px;
    --lp-shadow: 0 24px 60px rgba(20, 23, 26, .14);
    --lp-shadow-sm: 0 10px 30px rgba(20, 23, 26, .09);
    color: var(--lp-ink);
    font-size: 17px;
    line-height: 1.6;
}

.hb-lp *,
.hb-lp *::before,
.hb-lp *::after { box-sizing: border-box; }

.hb-lp__wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

/* ---------------------------------------------------------------- hero ---- */

.hb-lp__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    background: #1b1e22 center/cover no-repeat;
    /* The site header is dense and sits directly above; the modern templates
       clear it with min-height plus centring rather than padding alone, so
       the hero does the same instead of starting hard against the nav. */
    padding: 88px 0 92px;
}

.hb-lp__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(12, 14, 16, .93) 0%, rgba(12, 14, 16, .82) 48%, rgba(12, 14, 16, .62) 100%);
}

.hb-lp__hero > .hb-lp__wrap { position: relative; z-index: 1; width: 100%; }

.hb-lp__heroGrid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: start;
}

.hb-lp__eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--lp-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hb-lp__h1 {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3.15rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hb-lp__sub {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    max-width: 44ch;
}

.hb-lp__ticks { margin: 0 0 28px; padding: 0; list-style: none; }

.hb-lp__ticks li {
    position: relative;
    margin: 0 0 11px;
    padding-left: 34px;
    color: #fff;
    font-weight: 600;
}

.hb-lp__ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--lp-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

.hb-lp__heroPhone {
    color: #fff;
    font-size: .95rem;
}

.hb-lp__heroPhone a { color: #fff; text-decoration: underline; font-weight: 700; }

/* ---------------------------------------------------------------- form ---- */

.hb-lp__formCard {
    background: #fff;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
    padding: 28px;
    scroll-margin-top: 90px;
}

.hb-lp__formTitle {
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.hb-lp__formNote {
    margin: 0 0 20px;
    color: var(--lp-muted);
    font-size: .92rem;
}

/* CF7 markup lands inside here; amz_style styles inputs globally, so these
   need to be specific enough to win without !important. */
.hb-lp__formCard .wpcf7 p { margin: 0 0 14px; }

.hb-lp__formCard .wpcf7 label { display: block; font-weight: 700; font-size: .87rem; margin-bottom: 5px; }

.hb-lp__formCard .wpcf7 input[type=text],
.hb-lp__formCard .wpcf7 input[type=email],
.hb-lp__formCard .wpcf7 input[type=tel],
.hb-lp__formCard .wpcf7 input[type=url],
.hb-lp__formCard .wpcf7 input[type=number],
.hb-lp__formCard .wpcf7 input[type=date],
.hb-lp__formCard .wpcf7 select,
.hb-lp__formCard .wpcf7 textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccd0d6;
    border-radius: 10px;
    background: #fff;
    font-size: 16px; /* 16px stops iOS zooming on focus */
    line-height: 1.4;
    color: var(--lp-ink);
}

.hb-lp__formCard .wpcf7 textarea { min-height: 104px; resize: vertical; }

.hb-lp__formCard .wpcf7 input:focus,
.hb-lp__formCard .wpcf7 select:focus,
.hb-lp__formCard .wpcf7 textarea:focus {
    outline: none;
    border-color: var(--lp-red);
    box-shadow: 0 0 0 3px rgba(164, 29, 33, .16);
}

.hb-lp__formCard .wpcf7 input[type=submit],
.hb-lp__formCard .wpcf7 button[type=submit] {
    width: 100%;
    padding: 15px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--lp-red);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.hb-lp__formCard .wpcf7 input[type=submit]:hover,
.hb-lp__formCard .wpcf7 button[type=submit]:hover {
    background: var(--lp-red-dark);
    transform: translateY(-1px);
}

.hb-lp__formCard .wpcf7-not-valid-tip { color: var(--lp-red); font-size: .82rem; font-weight: 600; }
.hb-lp__formCard .wpcf7-response-output { border-radius: 10px; font-size: .92rem; margin: 14px 0 0; padding: 12px 14px; }

.hb-lp__formFine { margin: 14px 0 0; color: var(--lp-muted); font-size: .78rem; line-height: 1.45; }

/* --------------------------------------------------------------- trust ---- */

.hb-lp__trust { background: var(--lp-ink); padding: 22px 0; }

.hb-lp__trustGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    text-align: center;
}

.hb-lp__stat { color: #fff; }
.hb-lp__statNum { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: #fff; }
.hb-lp__statLabel { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .66); margin-top: 4px; }

/* ------------------------------------------------------------ sections ---- */

.hb-lp__section { padding: 66px 0; }
.hb-lp__section--soft { background: var(--lp-soft); }

.hb-lp__head { max-width: 62ch; margin: 0 0 38px; }
.hb-lp__kicker { display: block; color: var(--lp-red); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 9px; }
.hb-lp__h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 2.9vw, 2.2rem); font-weight: 800; line-height: 1.18; letter-spacing: -.015em; }
.hb-lp__lead { margin: 0; color: var(--lp-muted); font-size: 1.04rem; }

/* steps */
.hb-lp__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: lpstep; }
.hb-lp__step { position: relative; background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 30px 26px 26px; }
.hb-lp__step::before {
    counter-increment: lpstep;
    content: counter(lpstep);
    position: absolute;
    top: -17px;
    left: 26px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lp-red);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: grid;
    place-items: center;
}
.hb-lp__stepTitle { margin: 0 0 8px; font-size: 1.1rem; font-weight: 800; }
.hb-lp__step p { margin: 0; color: var(--lp-muted); font-size: .96rem; }

/* benefit cards */
.hb-lp__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hb-lp__card { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 26px; box-shadow: var(--lp-shadow-sm); }
.hb-lp__cardTitle { margin: 0 0 9px; font-size: 1.12rem; font-weight: 800; }
.hb-lp__card p { margin: 0; color: var(--lp-muted); font-size: .96rem; }

/* quote */
.hb-lp__quote { background: #fff; border-left: 5px solid var(--lp-red); border-radius: 0 var(--lp-radius) var(--lp-radius) 0; padding: 30px 32px; box-shadow: var(--lp-shadow-sm); max-width: 760px; }
.hb-lp__quoteText { margin: 0 0 14px; font-size: 1.16rem; line-height: 1.55; font-weight: 500; }
.hb-lp__quoteWho { margin: 0; color: var(--lp-muted); font-size: .9rem; font-weight: 700; }

/* faq - <details>, so it works with no JS at all */
.hb-lp__faq { max-width: 820px; }
.hb-lp__faqItem { border-bottom: 1px solid var(--lp-line); }
.hb-lp__faqItem > summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 42px 18px 0;
    position: relative;
    font-weight: 700;
    font-size: 1.04rem;
}
.hb-lp__faqItem > summary::-webkit-details-marker { display: none; }
.hb-lp__faqItem > summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-right: 2.4px solid var(--lp-red);
    border-bottom: 2.4px solid var(--lp-red);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.hb-lp__faqItem[open] > summary::after { transform: rotate(-135deg); }
.hb-lp__faqItem > div { padding: 0 42px 20px 0; color: var(--lp-muted); }
.hb-lp__faqItem > div p { margin: 0 0 10px; }

/* phases - auto-fit so three or four entries both lay out sensibly */
.hb-lp__phases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 22px;
}

.hb-lp__phase {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-top: 3px solid var(--lp-red);
    border-radius: 4px var(--lp-radius) var(--lp-radius) 4px;
    padding: 24px 24px 20px;
    box-shadow: var(--lp-shadow-sm);
}

.hb-lp__phaseLabel {
    display: block;
    margin-bottom: 8px;
    color: var(--lp-red);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hb-lp__phaseTitle { margin: 0 0 10px; font-size: 1.08rem; font-weight: 800; line-height: 1.25; }

.hb-lp__phase p { margin: 0 0 18px; color: var(--lp-muted); font-size: .93rem; }

/* pushes the link to the bottom so the links line up across uneven cards */
.hb-lp__phaseLink {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--lp-red);
    font-weight: 800;
    font-size: .88rem;
    text-decoration: none;
}

.hb-lp__phaseLink:hover,
.hb-lp__phaseLink:focus { color: var(--lp-red-dark); text-decoration: underline; }
.hb-lp__phaseLink svg { transition: transform .18s ease; }
.hb-lp__phaseLink:hover svg { transform: translateX(3px); }

/* closing band */
.hb-lp__band { background: var(--lp-red); padding: 54px 0; text-align: center; }
.hb-lp__bandTitle { margin: 0 0 10px; color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; }
.hb-lp__bandText { margin: 0 auto 24px; color: rgba(255, 255, 255, .9); max-width: 56ch; }

.hb-lp__btn {
    display: inline-block;
    padding: 15px 34px;
    border-radius: 999px;
    background: #fff;
    color: var(--lp-red);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    transition: transform .18s ease;
}
.hb-lp__btn:hover,
.hb-lp__btn:focus { color: var(--lp-red-dark); transform: translateY(-2px); text-decoration: none; }

/* sticky mobile CTA */
.hb-lp__sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--lp-line);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .1);
}

.hb-lp__sticky a {
    flex: 1 1 0;
    text-align: center;
    padding: 13px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
    text-decoration: none;
}
.hb-lp__sticky .is-primary { background: var(--lp-red); color: #fff; }
.hb-lp__sticky .is-secondary { background: var(--lp-soft); color: var(--lp-ink); border: 1px solid var(--lp-line); }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 991px) {
    .hb-lp__hero { min-height: 0; padding: 62px 0 66px; }
    .hb-lp__heroGrid { grid-template-columns: 1fr; gap: 30px; }
    .hb-lp__sub { max-width: none; }
    .hb-lp__steps { grid-template-columns: 1fr; gap: 32px; }
    .hb-lp__trustGrid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 767px) {
    .hb-lp { font-size: 16px; }
    .hb-lp__hero { min-height: 0; padding: 44px 0 48px; }
    .hb-lp__section { padding: 48px 0; }
    .hb-lp__cards { grid-template-columns: 1fr; }
    .hb-lp__formCard { padding: 22px; }
    .hb-lp__sticky { display: flex; }
    .hb-lp__band { padding: 44px 0 78px; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-lp * { transition: none !important; }
}