/* ============================================================
   LAKEFOREST — ENTRA PASSKEY SERVICES
   Page-specific components. Loaded after style.css and uses
   its tokens (--blue, --ink, --mono, ...).
   ============================================================ */

/* ---------- 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 ---------- */

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

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

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

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

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

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

/* Sample status card: the "patch compliance report" for passkeys */

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

.migration-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;
}

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

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

.migration-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;
}

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

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

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

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

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

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

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

.migration-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);
}

.migration-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,
.passkey-compare { padding: 72px 0; }

.offer-fit,
.passkey-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,
.passkey-compare .section-head,
.flow .section-head { margin-bottom: 36px; }

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

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

/* 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); }

/* ---------- Project flow ---------- */

.flow {
    background: var(--white);
    border-top: 2px solid var(--ink);
    padding: 72px 0;
}

.flow-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 2px solid var(--ink);
    background: var(--ink);
    gap: 2px;
    counter-reset: flow;
}

.flow-strip li {
    background: var(--white);
    padding: 20px 16px;
    counter-increment: flow;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flow-strip li::before {
    content: counter(flow, decimal-leading-zero);
    font-family: var(--mono);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--blue);
    line-height: 1;
}

.flow-strip strong {
    font-size: 0.95rem;
    font-weight: 800;
}


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

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

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

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

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

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

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

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

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

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

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

    .flow-strip { grid-template-columns: 1fr; }

    .flow-strip li {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px 14px;
    }
}