/* How it works steps */
.how-it-works {
    background: #f8f9fa;
    padding: 3.5rem 1rem;
}
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.step-connector {
    display: none;
}
@media (min-width: 768px) {
    .step-connector {
        display: block;
        height: 2px;
        background: linear-gradient(to right, #dc3545, #dc354580);
        flex: 1;
        margin-top: -24px;
    }
}

/* Testimonials */
.testimonial-card {
    background: #1c2b3a;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.2s;
}
.testimonial-card:hover {
    transform: translateY(-3px);
}
.testimonial-stars {
    color: #f39c12;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
    letter-spacing: 0.05em;
}
.testimonial-text {
    color: rgba(255,255,255,0.88);
    font-style: italic;
    font-size: 0.97rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.testimonial-author {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Media logos */
.press-logo {
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.2s, opacity 0.2s;
}
.press-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Homepage browsing uses the same tokens and information hierarchy as search.
   Keep full titles visible and horizontal overflow inside each labelled shelf. */
.home-card-category{font-size:.8rem;font-weight:700;color:var(--ka-muted);margin-bottom:.5rem;display:flex;gap:.4rem;align-items:center}
.home-listing-section{margin:2rem 0}
.home-listing-section h2{font-size:1.35rem;font-weight:700}
.home-listing-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:1rem;overflow-x:auto;padding:.35rem .3rem 1rem;scroll-snap-type:x proximity;scroll-padding-inline:.3rem}
.home-listing-shelf:focus-visible{outline:var(--ka-focus-outline,3px dashed #212529);outline-offset:2px}
.home-listing-card{position:relative;padding:0;display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;transition:border-color .15s ease,box-shadow .15s ease}
.home-listing-card:hover,.home-listing-card:focus-within{border-color:var(--ka-muted);box-shadow:0 4px 12px #00000012}
.home-listing-photo{position:relative;aspect-ratio:3/2;background:var(--ka-soft);border-radius:var(--ka-radius) var(--ka-radius) 0 0;overflow:hidden;display:grid;place-items:center;color:var(--ka-muted)}
.home-photo-fallback{font-size:2rem}
.home-listing-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ka-soft)}
.home-listing-body{display:flex;flex:1;flex-direction:column;padding:1rem;white-space:normal;overflow-wrap:anywhere}
.home-listing-card h4{font-size:1.15rem;line-height:1.35;font-weight:700;margin:0 0 .75rem}
.home-listing-card h4 a{color:var(--ka-ink);text-decoration:none}
.home-listing-card h4 a::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--ka-radius)}
.home-listing-card h4 a:focus-visible{outline:0}
.home-listing-card h4 a:focus-visible::after{outline:var(--ka-focus-outline,3px dashed #212529);outline-offset:2px}
.home-listing-card h4 a:hover{color:var(--ka-accent);text-decoration:underline}
.home-listing-fact{display:flex;align-items:baseline;gap:.4rem;font-size:.85rem;color:var(--ka-muted);margin:0 0 .5rem}
.home-listing-provider{font-size:.8rem;color:var(--ka-muted);margin:0 0 .75rem}
.home-listing-footer{border-top:1px solid var(--ka-border);padding-top:.85rem;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-size:.8rem}
.home-listing-price{font-weight:600;color:var(--ka-ink)}
.home-listing-action{color:var(--ka-accent);font-weight:700;margin-left:auto;display:flex;align-items:center;gap:.4rem}
.home-page .how-it-works{border-radius:var(--ka-radius);padding:2rem 1rem}
.home-page .testimonial-card{background:var(--ka-paper);border:1px solid var(--ka-border);border-radius:var(--ka-radius)}
.home-page .testimonial-text,.home-page .testimonial-author{color:var(--ka-ink)}
.home-page .testimonial-author span{color:var(--ka-muted)!important}
@media(max-width:575.98px){.home-listing-shelf{grid-auto-columns:min(300px,85vw)}}
@media(prefers-reduced-motion:reduce){.home-listing-card,.testimonial-card{transition:none;transform:none}}

.home-city{border-top:1px solid var(--ka-border);padding-top:1rem;margin-top:2rem;scroll-margin-top:5rem}
.home-listing-photo img[hidden]{display:none}


/* First design pass: an image-led welcome and a city-focused discovery browser. */
.home-hero{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding:2rem 0 2.5rem}
.home-hero-eyebrow{font-size:.85rem;font-weight:700;color:var(--ka-accent);margin-bottom:.75rem}
.home-hero h1{font-size:clamp(2.4rem,4.4vw,3.75rem);font-weight:800;line-height:1.06;letter-spacing:-.04em;color:var(--ka-ink);margin:0 0 1rem}
.home-hero h1 span{color:var(--ka-accent)}
.home-hero-copy>p:not(.home-hero-eyebrow){color:var(--ka-muted);max-width:42ch;font-size:1.05rem;line-height:1.6;margin-bottom:1.25rem}
.home-anywhere{display:block;font-size:.85rem;margin-top:.85rem;color:var(--ka-ink)}
.home-hero-photos{min-width:0}
.home-hero-photo-main{width:100%;height:auto;border-radius:var(--ka-radius);display:block}
.home-city-browser{scroll-margin-top:1rem;border-bottom:1px solid var(--ka-border);padding-top:.5rem}
.home-city-browser-label{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--ka-muted);font-weight:600;margin-bottom:.75rem}
.home-city-tabs{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.home-city-tabs a{padding:.65rem .15rem .85rem;min-height:44px;font-size:1rem;font-weight:700;color:var(--ka-muted);text-decoration:none;border-bottom:3px solid transparent}
.home-city-tabs a:hover,.home-city-tabs a[aria-selected="true"]{color:var(--ka-accent);border-bottom-color:var(--ka-accent)}
.home-page [hidden]{display:none!important}
.home-city{border-top:0;padding-top:0;margin-top:1.25rem}
.home-city-browser-label .btn{color:var(--ka-ink);border-color:var(--ka-border)}

.home-city-loading{display:flex;align-items:center;gap:.75rem;color:var(--ka-muted);min-height:100px}
.home-city-loading .spinner-border{flex-shrink:0;color:var(--ka-accent)}

/* Keep supporting searches subordinate to the actual city previews. */
.home-results-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:.75rem}
.home-results-heading h3{font-size:1.15rem;font-weight:700;margin:0}
.home-results-heading>a,.home-empty-listings>a{font-size:.85rem;font-weight:600;text-decoration:none}
.home-empty-listings{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;color:var(--ka-muted);font-size:.9rem}
.home-empty-listings p{margin:0;display:flex;align-items:baseline;gap:.5rem}
.home-listing-section-empty{padding:1rem 0;border-top:1px solid var(--ka-border);border-bottom:1px solid var(--ka-border)}
.home-activity-ages{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem 1rem;font-size:.85rem;color:var(--ka-muted);margin:.5rem 0}
.home-activity-ages a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.home-related-searches{font-size:.85rem;color:var(--ka-muted);margin:.5rem 0}
.home-related-searches summary{cursor:pointer;padding:.5rem 0}
.home-related-searches summary:focus-visible{outline:var(--ka-focus-outline,3px dashed #212529);outline-offset:2px}

/* Keep the welcome compact enough to lead naturally into real discovery. */
.home-hero{padding:1rem 0 1.25rem;gap:2rem}
.home-hero h1{font-size:clamp(2.2rem,4vw,3.25rem)}
.home-listing-section{margin:1.25rem 0}
.home-shelf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.4rem}
.home-shelf-buttons{display:flex;gap:.4rem}
.home-shelf-buttons .btn{min-width:44px;color:var(--ka-ink);border-color:var(--ka-border)}
.home-results-heading .home-shelf-toolbar{margin:0;min-height:44px;min-width:96px}
.home-shelf-buttons .btn:hover:not(:disabled){background:var(--ka-soft);color:var(--ka-ink)}

/* Mobile gets its own reading rhythm; desktop discovery stays unchanged. */
@media (max-width: 767.98px) {
    .home-hero {
        grid-template-columns: 1fr;
        padding: 1rem 0 2rem;
        gap: 1.5rem;
    }
    .home-hero h1 {
        font-size: 2.25rem;
        line-height: 1.15;
        margin-bottom: 1rem;
    }
    .home-hero h1 br { display: none; }
    .home-hero-eyebrow { margin-bottom: .75rem; }
    .home-hero-copy > p:not(.home-hero-eyebrow) {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.25rem;
    }
    .home-anywhere { margin-top: 1rem; line-height: 1.8; }
    .home-city-browser-label {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        margin-bottom: 1rem;
        font-size: 1rem;
    }
    .home-city-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem 1rem;
    }
    .home-city-tabs a { font-size: 1rem; padding: .75rem .25rem; }
    .home-city { margin-top: 1.5rem; }
    .home-listing-section { margin: 2rem 0; }
    .home-results-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .5rem 1rem;
        margin-bottom: 1rem;
    }
    .home-results-heading h3 { font-size: 1.2rem; grid-column: 1; }
    .home-results-heading > a { grid-column: 1; display: inline-flex; align-items: center; min-height: 44px; }
    .home-results-heading .home-shelf-toolbar { grid-column: 2; grid-row: 2; }
    .home-results-heading .home-shelf-toolbar > span { display: none; }
    .home-listing-body { padding: 1.25rem; }
    .home-listing-fact { line-height: 1.5; margin-bottom: .65rem; }
    .home-activity-ages { gap: .5rem 1.25rem; margin: 1rem 0; }
    .home-empty-listings { gap: .75rem; line-height: 1.6; }
}

/* One native city picker on desktop and mobile, with anchor-link fallback. */
.home-city-picker{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.5rem 0 1rem;font-size:1.5rem;font-weight:700}
.home-city-picker label{margin:0}
.home-city-picker .form-select{width:auto;max-width:100%;min-height:48px;padding:.35rem 2rem .35rem .25rem;border:0;border-radius:0;background-color:transparent;color:var(--ka-accent);font:inherit;box-shadow:none;cursor:pointer}
.home-city-picker .form-select:focus-visible{outline:var(--ka-focus-outline,3px dashed #212529);outline-offset:2px}
.home-city-browser[data-city-select-ready] .home-city-tabs,
.home-city-browser[data-city-select-ready] .home-city-browser-label{display:none!important}

/* Explain each directory beside its own results. */
.home-results-title{min-width:0;flex:1}
.home-results-title p{font-size:.85rem;line-height:1.5;color:var(--ka-muted);margin:.4rem 0 0;max-width:48ch}
@media(max-width:767.98px){.home-results-title{grid-column:1/-1}.home-results-title p{font-size:.9rem}}

.home-city [data-home-city-content]>.home-listing-section:first-child{margin-top:0}