/* ============================================================
   LAKEFOREST — SERVICE LANDING PAGES
   Shared components for offer landing pages (account investigation,
   privileged access). Loaded after style.css and uses its tokens.
   ============================================================ */

/* ---------- Page width ----------
   A slightly wider container than the site default (1100px) so the
   problem and offer boxes keep their titles on one line. Applied to the
   whole page so header, sections and footer stay aligned. */

.container { max-width: 1200px; }

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

.lp-hero { padding: 90px 0; }

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.lp-hero h1 {
    max-width: none;
    font-size: clamp(2.2rem, 4.2vw, 3.1rem);
}

.lp-hero .lede { max-width: none; margin-bottom: 36px; }

.lp-hero .hero-actions { margin-bottom: 0; }

.lp-hero .hero-actions .btn { padding: 15px 24px; }

/* Sample card: a concrete example of what the buyer gets */

.sample-card {
    background: var(--white);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--blue);
}

.sample-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

.sample-badge {
    background: var(--blue);
    color: var(--white);
    padding: 2px 8px;
}

.sample-rows {
    list-style: none;
    padding: 8px 22px;
}

.sample-rows li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-light);
    font-family: var(--mono);
    font-size: 0.8rem;
}

.sample-rows li:last-child { border-bottom: none; }

.sample-value { font-weight: 600; }

.sample-bar {
    grid-column: 1 / -1;
    display: block;
    height: 8px;
    background: var(--gray-light);
}

.sample-fill {
    display: block;
    height: 100%;
    background: var(--ink-soft);
}

.sample-rows .is-risk .sample-value { color: #b00020; }
.sample-rows .is-risk .sample-fill { background: #b00020; }

.sample-rows .is-done .sample-value { color: var(--ok); }
.sample-rows .is-done .sample-fill { background: var(--ok); }

.fill-100 { width: 100%; }
.fill-63 { width: 63%; }
.fill-11 { width: 11%; }
.fill-52 { width: 52%; }
.fill-39 { width: 39%; }
.fill-32 { width: 32%; }
.fill-25 { width: 25%; }

.sample-insight {
    border-top: 2px solid var(--ink);
    background: var(--blue-tint);
    padding: 14px 22px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink);
}

.sample-insight strong { color: var(--blue); }

/* ---------- Section rhythm ----------
   Offers, fit and comparison sit on the same background, so they
   share one vertical rhythm instead of stacking 90px + 90px gaps. */

#offers,
.offer-fit,
.lp-compare,
.who-asks { padding: 72px 0; }

.offer-fit,
.lp-compare { padding-top: 0; }

.faq { padding: 72px 0; }

.faq .section-head { margin-bottom: 36px; }

.contact { padding: 72px 0 90px; }

/* Site default caps .lede at 640px; section intros here use the full width */
.section-head .lede { max-width: none; }

#offers .section-head,
.offer-fit .section-head,
.lp-compare .section-head,
.who-asks .section-head { margin-bottom: 36px; }

/* ---------- Offers ---------- */

.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.offer-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Subgrid keeps head, price, body and actions aligned across the cards */
.offer {
    background: var(--white);
    border: 2px solid var(--ink);
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.offer:hover {
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px 0 var(--blue);
}

.offer-head { padding: 28px 28px 22px; }

.offer-tag {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--blue);
    margin-bottom: 14px;
}

.offer-head h3 { font-size: 1.2rem; }

.offer-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 16px 28px;
    border-bottom: 2px solid var(--ink);
    background: var(--ink);
    color: var(--white);
}

.offer-price-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7fc4ef;
}

.offer-price-value {
    font-family: var(--mono);
    font-size: 1.35rem;
    font-weight: 600;
    white-space: nowrap;
}

.offer-body { padding: 24px 28px 28px; }

.offer-promise {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 18px;
}

.offer-body ul { list-style: none; }

.offer-body li {
    position: relative;
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.offer-body li:last-child { border-bottom: none; }

.offer-body li::before {
    content: "+";
    position: absolute;
    left: 0;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--blue);
}

.offer-actions {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 2px solid var(--ink);
}

.offer-actions a {
    display: block;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--ink);
    background: var(--white);
}

.offer-actions a + a {
    border-top: 1px solid var(--gray-light);
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--blue);
}

.offer-actions a:hover {
    background: var(--blue);
    color: var(--white);
}

/* ---------- Which offer fits ---------- */

.offer-fit .cadence-col li { color: var(--ink); }

/* ---------- Who asks ---------- */

.who-asks .cadence-cols { grid-template-columns: repeat(4, 1fr); }

.who-asks .cadence-col p {
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* ---------- Price on request ---------- */

.offer-price-link {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: #7fc4ef;
    text-decoration: none;
    white-space: nowrap;
}

.offer-price-link:hover { color: var(--white); text-decoration: underline; }

/* ---------- Free check band ---------- */

.free-check {
    background: var(--blue);
    color: var(--white);
    padding: 64px 0;
}

.free-check .eyebrow { color: #bfe2f7; }

.free-check h2 { color: var(--white); max-width: none; }

.free-check p { color: #dceefa; max-width: 760px; margin-bottom: 28px; }

.free-check .btn-primary {
    background: var(--white);
    color: var(--ink);
}

/* ---------- Comparison ---------- */

.lp-compare .compare-cols { margin-top: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 920px) {
    #offers,
    .who-asks,
    .faq { padding: 56px 0; }

    .offer-fit,
    .lp-compare { padding: 0 0 56px; }

    .contact { padding: 56px 0 72px; }

    .lp-hero { padding: 60px 0; }

    .lp-hero-grid { grid-template-columns: 1fr; gap: 44px; }

    .lp-hero .hero-actions { flex-direction: column; align-items: stretch; }

    .lp-hero .hero-actions .btn { text-align: center; }

    .offer-grid { grid-template-columns: 1fr; }

    .who-asks .cadence-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .who-asks .cadence-cols { grid-template-columns: 1fr; }
}