.guide-sections { display: grid; gap: 28px; margin: 42px 0; }
.guide-sections section { max-width: 720px; }
.guide-sections h2, .guide-related h2, .guide-faq h2, .guide-preview h2 {
    color: var(--text, #fff); font-size: 22px; line-height: 1.25;
    font-weight: 800; letter-spacing: -.02em; text-transform: none; margin: 0 0 12px;
}
.guide-sections p, .guide-faq p { color: var(--secondary, rgba(255,255,255,.72)); line-height: 1.7; }
.guide-related { margin: 40px 0; }
.guide-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.guide-links a { display: block; padding: 13px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: var(--text, #fff); background: rgba(255,255,255,.045); text-decoration: none; }
.guide-links a:hover { border-color: var(--accent, #ffdb00); }
.guide-links a:focus-visible { outline: 3px solid var(--accent, #ffdb00); outline-offset: 3px; }
.guide-faq { max-width: 760px; margin: 40px 0; }
.guide-faq details { border-bottom: 1px solid rgba(255,255,255,.18); padding: 16px 0; }
.guide-faq summary { cursor: pointer; font-weight: 700; }
.guide-faq p { margin-top: 12px; }
.guide-preview { margin: 34px 0; }
.guide-mosaics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; list-style: none; }
.guide-mosaics a { display: grid; gap: 8px; text-align: center; text-decoration: none; color: var(--text, #fff); font-size: 12px; }
.guide-mosaics img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 20px; background: #29292f; }
.guide-bottom-cta { margin: 36px 0; }
.city-hero-with-screenshot { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: center; gap: 38px; }
.city-hero-with-screenshot h1 { font-size: clamp(38px,5vw,56px); text-wrap: balance; }
.city-hero-copy { min-width: 0; }
.city-app-preview { margin: 0; position: relative; }
.city-app-preview::before { content: ""; position: absolute; inset: 12% -10%; z-index: -1; background: radial-gradient(ellipse, rgba(255,219,0,.13), transparent 70%); }
.city-phone { display: block; padding: 6px; border: 1px solid rgba(255,255,255,.26); border-radius: 38px; background: #141416; box-shadow: 0 28px 64px rgba(0,0,0,.45); }
.city-phone img { display: block; width: 100%; height: auto; border-radius: 31px; }
.city-app-preview figcaption { margin-top: 14px; color: var(--tertiary, rgba(255,255,255,.55)); font-size: 12px; line-height: 1.5; text-align: center; }
@media(max-width:720px) {
    .city-hero-with-screenshot { grid-template-columns: minmax(0,1fr); gap: 30px; }
    .city-app-preview { width: min(280px,100%); justify-self: center; }
}
@media(max-width:600px) {
    .guide-mosaics { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .guide-sections h2, .guide-related h2, .guide-faq h2 { font-size: 20px; }
    .guide-links { flex-direction: column; }
}