/* ================================================================
   Free-leads funnel — "ShopScoutr Free-Leads Funnel" design.
   Loaded after landing.css and reuses its --lp-* tokens. Everything
   here is .lp-fn-* so it cannot collide with landing.css or blog.css.
   ================================================================ */

.lp-fn-wrap {
    max-width: var(--lp-shell);
    margin: 0 auto;
    padding-inline: var(--lp-gutter);
    box-sizing: border-box;
}

.lp-fn-wrap--narrow {
    max-width: 760px;
}

.lp-fn em {
    font-style: italic;
    color: var(--lp-green);
}

/* --------------------------------------------------------- header */

.lp-fn-header {
    border-bottom: 1px solid var(--lp-line);
    padding-block: 14px;
}

/* --------------------------------------------------------- footer */

.lp-fn-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    padding-block: 26px;
    font-family: var(--lp-mono);
    font-size: 12.5px;
    color: var(--lp-muted);
}

.lp-fn-footer a {
    color: var(--lp-muted);
    text-decoration: underline;
}

.lp-fn-footer a:hover {
    color: var(--lp-ink);
}

/* ----------------------------------------------------------- type */

.lp-fn-h2 {
    font-family: var(--lp-serif);
    font-weight: 700;
    font-size: clamp(30px, 3.8vw, 45px);
    line-height: 1.09;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    text-wrap: pretty;
}

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

.lp-fn-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 56px;
    align-items: flex-start;
    padding-block: 64px;
}

.lp-fn-hero__copy {
    flex: 1.35 1 440px;
    min-width: 0;
}

.lp-fn-hero__title {
    font-family: var(--lp-serif);
    font-weight: 700;
    font-size: clamp(38px, 5.4vw, 66px);
    line-height: 1.03;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    text-wrap: pretty;
}

.lp-fn-hero__lede {
    font-size: 19px;
    line-height: 1.58;
    color: var(--lp-body);
    max-width: 32em;
    text-wrap: pretty;
}

.lp-fn-hero__lede strong {
    color: var(--lp-ink);
}

/* ------------------------------------------------- file window card */

.lp-fn-file {
    background: var(--lp-surface);
    border: 1px solid #E0DACB;
    border-radius: 14px;
    box-shadow: 0 18px 40px -28px rgb(22 21 15 / 0.35);
    overflow: hidden;
}

.lp-fn-file__bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--lp-line-soft);
    background: var(--lp-surface-mute);
    font-family: var(--lp-mono);
    font-size: 12.5px;
    color: var(--lp-muted);
}

.lp-fn-file__flag {
    margin-left: auto;
    color: var(--lp-green);
}

.lp-fn-file__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-top: 1px solid var(--lp-line-soft);
    background: var(--lp-surface-sunk);
    font-family: var(--lp-mono);
    font-size: 12px;
    color: var(--lp-muted);
}

.lp-fn-file__foot a {
    font-weight: 500;
}

/* --------------------------------------------------------- signup */

.lp-fn-signup {
    flex: 1 1 340px;
    min-width: 0;
    scroll-margin-top: 24px;
}

.lp-fn-signup__form {
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lp-fn-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-fn-field__label {
    font-family: var(--lp-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.lp-fn-field__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    padding: 14px;
    font-family: inherit;
    font-size: 16.5px;
    color: var(--lp-ink);
    background: #FFFFFF;
    border: 1px solid var(--lp-line-btn);
    border-radius: 10px;
}

.lp-fn-field__input:focus {
    outline: 2px solid var(--lp-green);
    outline-offset: 1px;
    border-color: var(--lp-green);
}

.lp-fn-field .lp-modal__error {
    margin-top: 0;
}

.lp-fn-signup__submit {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 17.5px;
    padding: 17px 24px;
}

.lp-fn-signup__submit:disabled {
    cursor: progress;
    opacity: 0.8;
}

.lp-fn-signup__fine {
    text-align: center;
    font-size: 14px;
    color: var(--lp-muted);
}

/* ------------------------------------------------------ data band */

.lp-fn-band {
    border-block: 1px solid var(--lp-line);
    background: var(--lp-bg-alt);
}

.lp-fn-band__inner {
    padding-block: 76px;
}

.lp-fn-band__lede {
    margin-bottom: 40px;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--lp-muted);
}

.lp-fn-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.lp-fn-column {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line-card);
    border-radius: 10px;
    padding: 22px 22px 24px;
}

.lp-fn-column__field {
    margin-bottom: 12px;
    font-family: var(--lp-mono);
    font-size: 12px;
    color: var(--lp-green);
}

.lp-fn-column__title {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
}

.lp-fn-column__blurb {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--lp-body);
}

.lp-fn-sample__scroll {
    overflow-x: auto;
}

.lp-fn-sample {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--lp-mono);
    font-size: 12.5px;
    white-space: nowrap;
    color: #2E2A20;
}

.lp-fn-sample th {
    text-align: left;
    font-weight: 500;
    padding: 11px 14px;
    background: var(--lp-surface-sunk);
    color: var(--lp-muted);
    border-bottom: 1px solid var(--lp-line-soft);
}

.lp-fn-sample td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--lp-line-row);
}

.lp-fn-sample .is-num {
    text-align: right;
}

.lp-fn-sample .is-blurred {
    filter: blur(4.5px);
    user-select: none;
}

.lp-fn-score {
    padding: 2px 7px;
    border-radius: 4px;
}

.lp-fn-score--high {
    background: var(--lp-green-tint);
    color: var(--lp-green);
}

.lp-fn-score--med {
    background: var(--lp-amber-tint);
    color: var(--lp-amber-ink);
}

/* -------------------------------------------------------- founder */

.lp-fn-founder {
    max-width: 908px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 36px;
    align-items: flex-start;
    padding-block: 80px;
}

.lp-fn-founder__avatar {
    width: 84px;
    height: 84px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 6px var(--lp-bg), 0 0 0 7px var(--lp-line-card);
}

.lp-fn-founder__body {
    flex: 1 1 300px;
    min-width: 0;
}

.lp-fn-founder__quote {
    margin-bottom: 22px;
    font-family: var(--lp-serif);
    font-size: clamp(22px, 2.4vw, 29px);
    line-height: 1.38;
    text-wrap: pretty;
}

.lp-fn-founder__who {
    font-family: var(--lp-mono);
    font-size: 13px;
    color: var(--lp-muted);
}

.lp-fn-founder__who b {
    color: var(--lp-ink);
    font-weight: 500;
}

/* ---------------------------------------------------- closing band */

.lp-fn-close {
    background: var(--lp-green);
    color: var(--lp-on-dark);
    text-align: center;
    padding-block: 88px;
}

.lp-fn-close__title {
    max-width: 17em;
    margin: 0 auto 28px;
    color: var(--lp-on-dark);
}

.lp-fn .lp-fn-close__title em {
    color: var(--lp-mint);
}

.lp-fn-close__fine {
    margin-top: 16px;
    font-family: var(--lp-mono);
    font-size: 13px;
    color: var(--lp-on-dark-soft);
}

/* ------------------------------------------------ offer: status bar */

.lp-fn-status {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 20px;
    background: var(--lp-green);
    color: var(--lp-on-dark);
    font-family: var(--lp-mono);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.lp-fn-status b {
    color: #FFFFFF;
    font-weight: 600;
}

.lp-fn-status__tick {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--lp-mint);
    color: var(--lp-green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------- offer: body */

.lp-fn-offer {
    padding-top: 48px;
}

.lp-fn-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 26px;
    font-family: var(--lp-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.lp-fn-steps .is-done {
    color: var(--lp-green);
}

.lp-fn-steps .is-current {
    color: var(--lp-ink);
}

.lp-fn-steps__rule {
    width: 24px;
    height: 1px;
    background: var(--lp-rule);
}

.lp-fn-offer__title {
    font-family: var(--lp-serif);
    font-weight: 700;
    font-size: clamp(36px, 5.2vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    text-wrap: pretty;
}

.lp-fn-offer__lede {
    font-size: 18px;
    line-height: 1.62;
    color: var(--lp-body);
    text-wrap: pretty;
}

.lp-fn-offer__lede + .lp-fn-offer__lede {
    margin-top: 16px;
}

.lp-fn-offer__lede strong {
    color: var(--lp-ink);
}

.lp-fn-offer__skip {
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
}

.lp-fn-offer__skip a {
    color: var(--lp-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-fn-offer__skip a:hover {
    color: var(--lp-ink);
}

/* ----------------------------------------------------- offer: card */

.lp-fn-deal {
    margin-top: 34px;
    background: var(--lp-surface);
    border: 1px solid #E0DACB;
    border-radius: 16px;
    box-shadow: 0 22px 48px -30px rgb(22 21 15 / 0.4);
    overflow: hidden;
}

.lp-fn-deal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px 22px;
    background: var(--lp-surface-mute);
    border-bottom: 1px solid var(--lp-line-soft);
    font-family: var(--lp-mono);
    font-size: 12.5px;
}

.lp-fn-deal__tag {
    color: var(--lp-green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.lp-fn-spots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--lp-amber-tint);
    color: var(--lp-amber-ink);
}

.lp-fn-spots__bars {
    display: inline-flex;
    gap: 3px;
}

.lp-fn-spots__bars i {
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background: #E2D3B5;
}

.lp-fn-spots__bars i.is-open {
    background: var(--lp-amber-ink);
}

.lp-fn-deal__body {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 28px;
    padding: 26px 22px 24px;
}

.lp-fn-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1.3 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.lp-fn-perks li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 16.5px;
    line-height: 1.45;
    color: var(--lp-body);
}

.lp-fn-perks strong {
    color: var(--lp-ink);
    font-weight: 600;
}

.lp-fn-check {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--lp-green-tint);
    border: 1px solid var(--lp-green-line);
    color: var(--lp-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-fn-price {
    flex: 1 1 200px;
    min-width: 0;
    border-left: 1px solid var(--lp-line-soft);
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.lp-fn-price__label {
    margin-bottom: 8px;
    font-family: var(--lp-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.lp-fn-price__amount {
    font-family: var(--lp-serif);
    font-size: 54px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.lp-fn-price__amount span {
    font-family: var(--lp-sans);
    font-size: 16px;
    letter-spacing: 0;
    color: var(--lp-muted);
}

.lp-fn-price__was {
    margin-top: 8px;
    font-family: var(--lp-mono);
    font-size: 13px;
    color: var(--lp-muted);
}

.lp-fn-price__badge {
    margin-top: 14px;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 5px 10px;
    border-radius: 100px;
    background: var(--lp-green-tint);
    border: 1px solid var(--lp-green-line);
    color: var(--lp-green);
    font-family: var(--lp-mono);
    font-size: 12px;
}

.lp-fn-refund {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 22px 22px;
    padding: 16px 18px;
    background: var(--lp-surface-sunk);
    border: 1px dashed var(--lp-rule);
    border-radius: 10px;
}

.lp-fn-refund__seal {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--lp-green-line);
    background: var(--lp-green-tint);
    color: var(--lp-green);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.05;
}

.lp-fn-refund__title {
    margin-bottom: 3px;
    font-family: var(--lp-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.lp-fn-refund__body {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--lp-body);
}

.lp-fn-deal__cta {
    padding: 0 22px 24px;
}

.lp-fn-deal__cta .lp-btn {
    font-size: 18px;
    padding: 18px 24px;
}

/* ---------------------------------------------------- phone width */

@media (max-width: 640px) {
    .lp-fn-hero {
        padding-block: 40px 48px;
        gap: 32px;
    }

    .lp-fn-hero__copy,
    .lp-fn-signup {
        flex-basis: 100%;
    }

    .lp-fn-band__inner {
        padding-block: 56px;
    }

    .lp-fn-founder {
        padding-block: 56px;
    }

    .lp-fn-close {
        padding-block: 64px;
    }

    .lp-fn-price {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--lp-line-soft);
        padding-top: 22px;
    }

    .lp-fn-status {
        justify-content: flex-start;
    }
}
