/**
 * Expected Health — Book funnel styles (/book/{study}/ + /reserved/).
 *
 * Standalone shell (no theme chrome), bk- prefix. Same brand vocabulary as
 * the screenings design system — Rubik, navy ink #0f172a, green #047727,
 * slate borders, radius 16 — tuned for a single-column conversion flow:
 * one decision per screen, generous whitespace, zero competing exits.
 *
 * Structure: header / landing view (hero + price card + sections + FAQ) /
 * flow (progress + steps) / center + option radios / summary / reserved
 * confirmation / sticky mobile bar / footer.
 */

/* Brand values resolve from eh-brand-tokens.css (enqueued as a dependency);
   only the warm-paper surface tokens are local — that split from the
   screenings' cool slate is a design decision each file owns. */
:root {
    --bk-ink: var(--eh-ink);
    --bk-text: var(--eh-text);
    --bk-muted: var(--eh-muted);
    --bk-green: var(--eh-green);
    --bk-green-dark: var(--eh-green-dark);
    --bk-green-tint: var(--eh-green-tint);
    --bk-amber: var(--eh-amber);
    --bk-amber-tint: var(--eh-amber-tint);
    /* Soft warm white ("paper") page — cards stay crisp white so they
       lift off it. Borders warm to sand so the cool slate doesn't clash. */
    --bk-bg: #faf8f4;
    --bk-surface: #ffffff;
    --bk-bg-soft: #f3efe8;
    --bk-border: #e6e0d6;
    /* One display-face stack for h1-h3, the hero kicker, and the quote
       glyph — three hand-copied stacks had already drifted apart. */
    --bk-font-display: 'Space Grotesk', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bk-radius: var(--eh-radius);
    --bk-radius-sm: var(--eh-radius-sm);
    --bk-shadow: var(--eh-shadow);
    --bk-shadow-lift: var(--eh-shadow-lift);
}

/* Space Grotesk is SELF-HOSTED (variable font, latin subset, 22 KB): the
   Google-served copy gets dropped by privacy shields (observed in Brave —
   headings silently fell back to Rubik), and a heading face that only
   sometimes loads isn't a design. Rubik still arrives via Google Fonts;
   its fallback is a system sans, which is acceptable — a swapped heading
   face is not. */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../../fonts/space-grotesk-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The sticky header (~75px) must never swallow a keyboard-focus or anchor
   scroll: scroll-padding keeps the target below it (WCAG 2.4.11 "focus not
   obscured" — the scroll-margin-top:96px fix from blog-post.css/screening.css,
   applied at the scroll container since this stylesheet owns the whole
   standalone document). */
html {
    scroll-padding-top: 90px;
}

.bk-body {
    margin: 0;
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--bk-text);
    background: var(--bk-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.bk-shell {
    /* 920 (was 720): owner call, Aug 2026 — the narrow column stacked the
       landing too tall. Inner surfaces widen with it below; the FLOW keeps
       its own narrower shell (one question at a time reads best narrow). */
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
}

.bk-body h1,
.bk-body h2,
.bk-body h3 {
    /* Space Grotesk for display type, Rubik for everything else — the
       grotesk gives headings their own voice without leaving the family's
       geometric register. Self-hosted; see the @font-face above. */
    font-family: var(--bk-font-display);
    color: var(--bk-ink);
    text-transform: none;
    line-height: 1.25;
}

/* ── Header ─────────────────────────────────────────────────────── */

.bk-header {
    border-bottom: 1px solid var(--bk-border);
    /* Same paper tone as the page — one continuous canvas. Crisp white is
       reserved for elevated surfaces (price card, steps); a white header
       here read as a seam, not a choice. */
    background: var(--bk-bg);
    /* Sticky so the header CTA follows the scroll (the desktop counterpart
       of the mobile bottom bar). Above the bottom bar's z-40. */
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Compound selector on purpose: .bk-btn declares the same properties later
   in the file, and at equal specificity its source order would win — the
   compact sizing needs the extra class to hold. */
.bk-btn.bk-header__cta {
    padding: 9px 20px;
    font-size: 0.95rem;
}

/* .bk-btn's display beats the [hidden] UA style — restore it so the JS
   engine can hide the CTA during the flow steps. */
.bk-header__cta[hidden] {
    display: none;
}

.bk-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}

.bk-logo {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--bk-ink);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.bk-logo span {
    color: var(--bk-green);
}

.bk-logo__img {
    display: block;
    height: 34px;
    width: auto;
}

/* ── Buttons ────────────────────────────────────────────────────── */

.bk-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: var(--bk-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bk-btn--primary {
    background: var(--bk-green);
    color: #fff;
}

.bk-btn--primary:hover {
    background: var(--bk-green-dark);
    color: #fff;
}

.bk-btn--primary:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Busy state (JS toggles is-loading during the centers search and the
   checkout/reserve POST): text swaps to a progress verb and a small ring
   spins beside it, so a slow network reads as working, not broken. */
.bk-btn.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: bk-spin 0.7s linear infinite;
}

@keyframes bk-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* The progress-verb text still communicates the busy state. */
    .bk-btn.is-loading::after {
        display: none;
    }
}

.bk-btn--ghost {
    background: var(--bk-surface);
    color: var(--bk-ink);
    border-color: var(--bk-border);
}

.bk-btn--ghost:hover {
    border-color: var(--bk-ink);
}

.bk-body :focus-visible {
    outline: 2px solid var(--bk-green);
    outline-offset: 2px;
}

/* ── Landing: hero + price card ─────────────────────────────────── */

.bk-hero {
    padding: 44px 0 8px;
    text-align: center;
}

.bk-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    /* Chips sit BELOW the price card now (owner call, Aug 2026) — top
       margin ties them to the card, the quote follows. */
    margin: 22px 0 0;
    padding: 0;
}

.bk-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bk-green-dark);
    /* White chip on the paper canvas (green tint read as a fill, not a
       chip); the border + shadow do the lifting. */
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    box-shadow: var(--bk-shadow);
    border-radius: 999px;
    padding: 5px 13px 5px 11px;
}

/* Scoped under .bk-body: the generic ".bk-body h1" ink rule is class+type
   and outweighs a lone class — this needs equal-or-better footing. */
.bk-body .bk-hero__title {
    font-size: clamp(2.3rem, 6vw, 3.3rem);
    /* Ink, not green (owner call, Aug 2026) — the green kicker above it
       now carries the brand color the logo introduces. */
    color: var(--bk-ink);
    margin: 0 0 14px;
}

/* The product kicker ABOVE the benefit headline (hero_subhead): brand
   green, bigger than body but clearly subordinate to the H1. */
.bk-hero__subhead {
    font-family: var(--bk-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--bk-green-dark);
    margin: 0 0 18px;
}

/* Second H1 line (hero_headline_2): same heading, ~60% size — the promise
   stays one <h1>, the mock's two-deck look comes from the span. */
.bk-hero__title2 {
    display: block;
    font-size: 0.62em;
    line-height: 1.3;
    margin-top: 4px;
}

.bk-hero__tagline {
    margin: 0 auto 30px;
    font-size: 1.06rem;
    color: var(--bk-text);
}

.bk-pricecard {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow-lift);
    padding: 30px 28px 26px;
    max-width: 520px;
    margin: 0 auto;
}

.bk-pricecard__price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--bk-ink);
    margin: 0;
    line-height: 1;
}

.bk-pricecard__sub {
    margin: 10px 0 20px;
    font-weight: 600;
    color: var(--bk-ink);
}


.bk-pricecard .bk-btn--primary {
    width: 100%;
    font-size: 1.05rem;
    padding: 15px 24px;
}

.bk-pricecard__note {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--bk-muted);
}

/* ── Authority pull-quote under the price card ──────────────────── */

/* Deliberately unlike a body paragraph: green-tint panel, oversized quote
   mark, italic display text — the one voice on the page that isn't ours. */
.bk-quote {
    margin: 26px auto 0;
    position: relative;
    background: var(--bk-green-tint);
    border-radius: var(--bk-radius);
    padding: 28px 28px 22px 30px;
    text-align: left;
}

.bk-quote::before {
    content: '\201C';
    /* Alt-text syntax keeps the glyph out of screen-reader punctuation
       announcements; the bare declaration above is the fallback for parsers
       that drop the slash form. */
    content: '\201C' / '';
    position: absolute;
    top: 4px;
    left: 16px;
    font-family: var(--bk-font-display);
    font-size: 3.2rem;
    line-height: 1;
    color: var(--bk-green);
    opacity: 0.4;
}

.bk-quote__text {
    margin: 0 0 12px;
    font-size: 1.04rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--bk-ink);
}

.bk-quote__cite {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bk-green-dark);
}

.bk-quote__cite span {
    display: block;
    font-weight: 400;
    color: var(--bk-muted);
}

/* ── The scanner photo figure (config ct_figure) ────────────────── */

.bk-ctfig {
    max-width: 640px;
    margin: 34px auto 0;
    text-align: center;
}

.bk-ctfig__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow-lift);
}

.bk-ctfig__caption {
    margin: 12px auto 0;
    max-width: 52ch;
    font-size: 0.88rem;
    color: var(--bk-muted);
}

/* ── Landing: sections ──────────────────────────────────────────── */

.bk-section {
    padding: 34px 0 0;
    margin: 0 auto;
}

.bk-section h2 {
    font-size: 1.3rem;
    margin: 0 0 14px;
}

.bk-conditions {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bk-conditions li {
    background: var(--bk-bg-soft);
    border: 1px solid var(--bk-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.92rem;
    color: var(--bk-ink);
}

/* The richer screens-for list (config screens_for): left-aligned bullets
   inside the centered section, green markers, bold lead-ins. */
.bk-benefits {
    list-style: none;
    margin: 0 auto 16px;
    padding: 0;
    text-align: left;
    display: grid;
    gap: 10px;
}

.bk-benefits li {
    position: relative;
    padding-left: 26px;
}

.bk-benefits li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.52em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bk-green);
}

.bk-benefits strong {
    color: var(--bk-ink);
}

.bk-facts {
    color: var(--bk-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Short-content sections (the screens-for chips) compose centered, matching
   the centered hero column above them. */
.bk-section--center {
    text-align: center;
}

.bk-section--center .bk-conditions {
    justify-content: center;
}

.bk-steps {
    list-style: none;
    counter-reset: bk-step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.bk-steps li {
    counter-increment: bk-step;
    position: relative;
    padding-left: 52px;
}

.bk-steps li::before {
    content: counter(bk-step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bk-green-tint);
    color: var(--bk-green-dark);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bk-steps h3 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

.bk-steps p {
    margin: 0;
    color: var(--bk-text);
}

.bk-honest {
    margin: 34px auto 0;
    /* Advisory card, not a warning label: white surface + a slim green
       accent reads as "guidance from us"; the old amber panel read as a
       hazard notice confessing something. Same candor, calmer frame. */
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-left: 3px solid var(--bk-green);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
    padding: 22px 24px;
}

.bk-honest h2 {
    font-size: 1.08rem;
    color: var(--bk-ink);
    margin: 0 0 8px;
}

.bk-honest p {
    margin: 0;
}

.bk-honest a {
    color: var(--bk-green-dark);
    font-weight: 600;
}

.bk-insurance {
    margin: 20px auto 0;
    background: var(--bk-green-tint);
    border: 1px solid #c4e9d0;
    border-radius: var(--bk-radius);
    padding: 18px 22px;
}

.bk-insurance p {
    margin: 0;
    color: var(--bk-green-dark);
}

.bk-faq {
    padding-bottom: 40px;
}

/* Match the How-it-works heading scale (owner call, Aug 2026). */
.bk-faq > h2 {
    font-size: 1.6rem;
}

.bk-faq__item {
    border-bottom: 1px solid var(--bk-border);
}

.bk-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--bk-ink);
    padding: 14px 0;
    list-style: none;
    position: relative;
    padding-right: 28px;
}

.bk-faq__item summary::-webkit-details-marker {
    display: none;
}

.bk-faq__item summary::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 22px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--bk-muted);
    border-bottom: 2px solid var(--bk-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.bk-faq__item[open] summary::after {
    transform: rotate(-135deg);
}

.bk-faq__item p {
    margin: 0 0 16px;
}

/* ── Flow: progress + steps ─────────────────────────────────────── */

.bk-flow {
    padding-top: 34px;
    padding-bottom: 60px;
    max-width: 640px;
}

.bk-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--bk-border);
    overflow: hidden;
    margin-bottom: 34px;
}

.bk-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--bk-green);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.bk-step {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
    padding: 32px;
}

.bk-step__title {
    font-size: 1.35rem;
    margin: 0 0 6px;
    outline: none;
}

.bk-step__help {
    margin: 0 0 20px;
    color: var(--bk-muted);
}

/* Stripe trust line under the centers step's pay button. */
.bk-step__paynote {
    margin: 12px 0 0;
    font-size: 0.82rem;
    color: var(--bk-muted);
    text-align: center;
}

/* "Showing centers nearest ZIP 92024" (filled by JS on the centers step). */
.bk-step__ziptag {
    margin: -12px 0 20px;
    font-size: 0.88rem;
    color: var(--bk-muted);
}

.bk-step__ziptag strong {
    color: var(--bk-ink);
}

.bk-field {
    display: block;
    font-weight: 600;
    color: var(--bk-ink);
    font-size: 0.92rem;
    margin: 0 0 14px;
}

.bk-field input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--bk-ink);
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
}

.bk-field input:focus {
    border-color: var(--bk-green);
    outline: 2px solid var(--bk-green);
    outline-offset: 1px;
}

.bk-field--zip input {
    max-width: 200px;
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
}

.bk-error {
    color: #b42318;
    font-size: 0.92rem;
    margin: 4px 0 0;
}

.bk-consent {
    font-size: 0.82rem;
    color: var(--bk-muted);
    margin: 14px 0 0;
}

.bk-consent a {
    color: var(--bk-muted);
}

.bk-step__nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

/* Center + timing radios: big tap targets, one obvious selection */

.bk-centers {
    display: grid;
    gap: 10px;
}

.bk-center {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name miles' 'addr miles';
    column-gap: 14px;
    row-gap: 4px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    padding: 18px 18px;
    cursor: pointer;
    min-height: 56px;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.bk-center:hover {
    border-color: var(--bk-green);
}

.bk-center.is-selected {
    border-color: var(--bk-green);
    background: var(--bk-green-tint);
    box-shadow: inset 0 0 0 1px var(--bk-green);
}

.bk-center__name {
    grid-area: name;
    font-weight: 600;
    color: var(--bk-ink);
    font-size: 1.02rem;
    line-height: 1.35;
}

.bk-center__addr {
    grid-area: addr;
    color: var(--bk-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.bk-center__miles {
    grid-area: miles;
    align-self: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bk-muted);
    background: var(--bk-bg-soft);
    border: 1px solid var(--bk-border);
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
}

.bk-center.is-selected .bk-center__miles {
    color: var(--bk-green-dark);
    background: #fff;
}

.bk-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ── Reserved confirmation ──────────────────────────────────────── */

.bk-reserved {
    padding: 56px 20px 40px;
    text-align: center;
    max-width: 620px;
}

.bk-reserved__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bk-green-tint);
    color: var(--bk-green);
    margin-bottom: 18px;
}

.bk-reserved h1 {
    font-size: 1.9rem;
    margin: 0 0 10px;
}

.bk-reserved__sub {
    margin: 0 auto 24px;
    max-width: 48ch;
}

.bk-reserved__card {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
    padding: 20px 22px;
    margin: 0 0 30px;
}

.bk-reserved__center {
    margin: 0;
}

.bk-steps--reserved {
    text-align: left;
    margin-bottom: 34px;
}

.bk-reserved__links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

/* ── Sticky mobile bar (landing view only) ──────────────────────── */

.bk-stickybar {
    display: none;
}

/* ── Footer ─────────────────────────────────────────────────────── */

.bk-footer {
    border-top: 1px solid var(--bk-border);
    margin-top: 40px;
    padding: 26px 20px 34px;
    text-align: center;
}

.bk-footer__disclaimer {
    max-width: 760px;
    margin: 0 auto 14px;
    font-size: 0.82rem;
    color: var(--bk-muted);
}

.bk-footer__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 10px;
}

.bk-footer__links a {
    color: var(--bk-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bk-footer__links a:hover {
    color: var(--bk-ink);
}

.bk-footer__copy {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bk-muted);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* The bottom sticky bar owns the follow-the-scroll CTA on mobile — a
       second one in the header would just crowd the logo. */
    .bk-header__cta {
        display: none;
    }

    .bk-hero {
        padding-top: 30px;
        text-align: left;
    }

    .bk-chips {
        justify-content: flex-start;
    }

    .bk-hero__tagline {
        margin-left: 0;
    }

    .bk-pricecard {
        max-width: none;
    }

    .bk-step {
        padding: 22px 18px;
    }

    .bk-step__nav {
        flex-direction: column-reverse;
    }

    .bk-step__nav .bk-btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* Sticky bar appears once the price card scrolls away — cheap version:
       always visible on mobile; landing bottom padding reserves space. */
    #bk-landing {
        padding-bottom: 96px;
    }

    .bk-stickybar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bk-surface);
        border-top: 1px solid var(--bk-border);
        box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        z-index: 40;
    }

    .bk-stickybar[hidden] {
        display: none;
    }

    .bk-stickybar__price {
        font-weight: 800;
        font-size: 1.2rem;
        color: var(--bk-ink);
        white-space: nowrap;
    }

    .bk-stickybar__price small {
        font-weight: 500;
        color: var(--bk-muted);
        font-size: 0.8rem;
    }
}

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

/* ── /reserved/: optional phone add-on ─────────────────────────────── */

.bk-phoneadd {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
    padding: 20px 22px;
    margin: 0 0 30px;
    text-align: left;
}

.bk-phoneadd__label {
    margin: 0 0 12px;
    font-weight: 600;
    color: var(--bk-ink);
}

.bk-phoneadd__label span {
    font-weight: 400;
    color: var(--bk-muted);
}

.bk-phoneadd__row {
    display: flex;
    gap: 10px;
}

.bk-phoneadd__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1.02rem;
    color: var(--bk-ink);
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
}

.bk-phoneadd__input:focus {
    border-color: var(--bk-green);
    outline: 2px solid var(--bk-green);
    outline-offset: 1px;
}

.bk-phoneadd__note {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--bk-muted);
}

.bk-phoneadd__done {
    margin: 0;
    font-weight: 600;
    color: var(--bk-green-dark);
}

@media (max-width: 640px) {
    .bk-phoneadd__row {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════════════
   How it works — three steps, three product-true visuals (Hale-style
   composition; crafted mocks instead of stock photos). The section
   breaks out of the content shell (920px) to give the visuals room.
   ══════════════════════════════════════════════════════════════════ */

.bk-main {
    overflow-x: hidden; /* the how-section breakout must never scroll the page */
}

.bk-how {
    width: min(1020px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.bk-how > h2 {
    font-size: 1.6rem;
    margin-bottom: 30px;
}

.bk-how__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
    text-align: left;
}

.bk-how__eyebrow {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bk-green);
}

.bk-how__step h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.bk-how__step > p:not(.bk-how__eyebrow) {
    margin: 0 0 16px;
    color: var(--bk-text);
    font-size: 0.95rem;
    min-height: 4.2em; /* keeps the three visuals on one baseline */
}

.bk-how__visual {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
    padding: 18px;
    min-height: 218px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Step 1: the center-picker, in miniature */
.bk-mockpick {
    width: 100%;
    display: grid;
    gap: 8px;
}

.bk-mockpick__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name miles' 'addr miles';
    column-gap: 8px;
    row-gap: 2px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: 8px;
    padding: 9px 11px;
}

.bk-mockpick__row.is-on {
    border-color: var(--bk-green);
    background: var(--bk-green-tint);
    box-shadow: inset 0 0 0 1px var(--bk-green);
}

.bk-mockpick__name {
    grid-area: name;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-mockpick__addr {
    grid-area: addr;
    font-size: 0.7rem;
    color: var(--bk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-mockpick__miles {
    grid-area: miles;
    align-self: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bk-muted);
    background: var(--bk-bg-soft);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.bk-mockpick__row.is-on .bk-mockpick__miles {
    color: var(--bk-green-dark);
    background: #ffffff;
}

.bk-mockpick__btn {
    display: block;
    text-align: center;
    background: var(--bk-green);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 9px 10px;
    margin-top: 2px;
}

/* Step 2: the scanner illustration */
.bk-mockscan {
    width: 100%;
    max-width: 250px;
    height: auto;
}

/* Step 3: the results phone */
.bk-mockphone {
    width: 168px;
    border: 2px solid #d8d2c8;
    border-radius: 26px;
    background: var(--bk-surface);
    box-shadow: var(--bk-shadow);
    padding: 26px 16px 20px;
    display: grid;
    justify-items: center;
    gap: 6px;
    position: relative;
}

.bk-mockphone__notch {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 7px;
    border-radius: 999px;
    background: #e9e4db;
}

.bk-mockphone__brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--bk-green-dark);
    margin-bottom: 4px;
}

.bk-mockphone__label {
    font-size: 0.72rem;
    color: var(--bk-muted);
}

.bk-mockphone__value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--bk-ink);
    line-height: 1.1;
}

.bk-mockphone__dots {
    display: inline-flex;
    gap: 4px;
    margin: 4px 0 2px;
}

.bk-mockphone__dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bk-green-tint);
    border: 1px solid #c4e9d0;
}

.bk-mockphone__dots i:nth-child(6),
.bk-mockphone__dots i:nth-child(7) {
    background: var(--bk-amber-tint);
    border-color: #f0dcb0;
}

.bk-mockphone__dots i:nth-child(8) {
    background: var(--bk-bg-soft);
    border-color: var(--bk-border);
}

.bk-mockphone__dots i.is-marker {
    background: var(--bk-green);
    border-color: var(--bk-green-dark);
    transform: scale(1.35);
}

.bk-mockphone__note {
    font-size: 0.7rem;
    color: var(--bk-muted);
    text-align: center;
}

@media (max-width: 900px) {
    .bk-how__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        max-width: 420px;
        margin: 0 auto;
    }

    .bk-how__step > p:not(.bk-how__eyebrow) {
        min-height: 0;
    }
}

/* ── The why section: headline, silent-window timeline, three reasons ── */

.bk-why {
    text-align: center;
}

.bk-body .bk-why__heading {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    margin: 0 0 12px;
}

.bk-why__subline {
    margin: 0 auto 26px;
    color: var(--bk-text);
}

/* Discreet reference link (subline_cite): reads as body text with a quiet
   dotted underline — present for the curious, invisible to the skimmer. */
.bk-cite {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: #b8b0a2;
    text-underline-offset: 3px;
}

.bk-cite:hover {
    color: var(--bk-green-dark);
    text-decoration-color: var(--bk-green-dark);
}

.bk-whyviz {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
    padding: 22px 18px 12px;
    margin: 0 0 22px;
}

.bk-whyviz__svg {
    width: 100%;
    height: auto;
    font-family: inherit;
}

.bk-why__reasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
}

.bk-why__reason {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    padding: 16px 18px;
}

.bk-why__reason h3 {
    margin: 0 0 6px;
    font-size: 0.98rem;
}

.bk-why__reason p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--bk-text);
}

/* ── /reserved/: prep block ── */

.bk-reserved__prep {
    background: var(--bk-bg-soft);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    padding: 18px 22px;
    margin: 0 0 30px;
    text-align: left;
}

.bk-reserved__prep h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.bk-reserved__prep p {
    margin: 0;
}

@media (max-width: 900px) {
    .bk-why__reasons {
        grid-template-columns: minmax(0, 1fr);
    }
}