/* Larger, readable typography with space for the server directory. */
body { font-size: 16px; line-height: 1.6; }
.back-to-top { position: fixed; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 1030; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 46px; min-height: 46px; padding: 11px 16px; border: 1px solid #ffffff26; border-radius: 10px; background: #2c624b; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 5px 20px #152c2726; transition: background-color .15s, box-shadow .15s; }
.back-to-top:hover { background: #214e3b; box-shadow: 0 7px 24px #152c2733; }
.back-to-top[hidden], .modal-open .back-to-top { display: none; }
@media(max-width:575px) { .back-to-top { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); padding: 12px; } .back-to-top span { display: none; } }
@media(prefers-reduced-motion:reduce) { .back-to-top { transition: none; } }
.brand { font-size: 28px; }
.brand { white-space: nowrap; }
.brand-bus { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.brand .brand-light { font-size: .68em; letter-spacing: -.2px; margin-left: 8px; }
.brand-bus { display: grid; place-items: center; background: #17392e; border-radius: 12px; color: #c7e699; font-size: 29px; }
.footer-brand .brand-bus { font-size: 22px; border-radius: 9px; }
.search-icon { font-size: 17px; color: #8b9888; }
.facebook-icon { width: auto; height: auto; font-size: 23px; }
.route-art .stop-icon { border: 0; border-radius: 0; display: inline-block; width: auto; height: auto; font-size: 15px; }
.btn-close { background: none; display: inline-grid; place-items: center; font-size: 18px; color: #596d51; opacity: .8; }
.navbar-toggler { padding: 10px 13px; font-size: 20px; }
.footer-brand .brand-bus { width: 34px; height: 34px; }
@media (max-width: 767px) {
  .navbar-brand .brand-bus { width: 38px; height: 38px; }
  .navbar-brand.brand { font-size: 20px; gap: 9px; }
  .navbar-brand .brand-light { display: block; margin: 5px 0 0; font-size: 14px; letter-spacing: 0; }
}
.navbar .nav-link { font-size: 16px; }
.navbar .facebook-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px !important; border-radius: 50%; color: #c5d2ca; transition: color .18s, background-color .18s; }
.navbar .facebook-icon-button:hover { color: #d7efb9; background: #ffffff0d; }
.facebook-icon { display: block; width: 23px; height: 23px; }
.hero-inner { min-height: 400px; }
.hero-copy { max-width: 660px; padding: 44px 0; }
h1 { font-size: clamp(38px, 4vw, 54px); letter-spacing: -1.8px; }
.hero p { font-size: 17px; line-height: 1.75; max-width: 590px; }
.hero-note { display: block; margin: 15px 0 0; font-size: 14px; color: #728068; }
.btn { min-height: 46px; font-size: 16px; border-radius: 8px; }
.hero-button { gap: 30px; }
.route-art { right: -65px; top: 42px; width: 490px; }
.hero-bus { position: absolute; left: 214px; top: 32px; width: 232px; height: 264px; object-fit: contain; transform: rotate(5deg); filter: drop-shadow(0 12px 9px #203b2920); }
.route-art.has-second-bus { transform: none; }
.has-second-bus .hero-bus { left: 270px; top: 32px; width: 215px; transform: none; z-index: 2; }
.has-second-bus .hero-bus-secondary { left: 82px; top: 65px; width: 275px; height: 218px; z-index: 1; }
.has-second-bus .label-start { left: 28px; top: 292px; }
@media (min-width: 1101px) { .route-art.has-second-bus { right: 0; } }
.label-destination { top: 0; right: 36px; }
.label-start { top: 253px; left: 69px; }
.stats-inner { height: auto; min-height: 78px; font-size: 14px; }
.stats-inner strong { font-size: 17px; }
.demo-label { font-size: 11px; letter-spacing: .7px; }
.server-section { padding-top: 48px; }
h2 { font-size: 34px; line-height: 1.25; letter-spacing: -1px; }
.section-heading p { font-size: 16px; line-height: 1.75; }
.directory-label { font-size: 13px; }
.filter-bar { padding: 12px; border-radius: 12px; }
.search-field input { font-size: 16px; height: 42px; }
.search-field input::placeholder { color: #788570; }
.search-field { border-radius: 8px; transition: background-color .15s, box-shadow .15s; }
.search-field:focus-within { background: #f6f8f5; box-shadow: inset 0 0 0 1px #cbd2c8; }
.search-field input:focus-visible { outline: none !important; box-shadow: none; }
.map-filter { width: 250px; }
.form-select, .online-filter { font-size: 15px; }
.online-filter { gap: 10px; }
.online-filter .form-check-input { width: 34px; height: 20px; }
.results-heading { font-size: 14px; color: #748069; margin: 24px 1px 14px; }
.results-heading select { font-size: 14px; padding: 5px 0; }
.server-list { gap: 14px; }
.server-card { padding: 26px; border-radius: 12px; }
.server-title-line { flex-wrap: wrap; gap: 9px; }
.server-title-line h3 { font-size: 21px; font-weight: 650; line-height: 1.35; letter-spacing: -.4px; }
.language { font-size: 11px; }
.server-flag { display: inline-block; width: 16px; height: 12px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #223f351a; flex-shrink: 0; vertical-align: middle; }
.server-flag-unknown { display: inline-grid; place-items: center; width: 16px; height: 12px; color: #6d7e61; font-size: 12px; }
.community-name { font-size: 14px; color: #75806d; margin: 6px 0 11px; }
.map-tags { gap: 7px; }
.map-tags > span:not(.map-pin) { font-size: 13px; padding: 4px 9px; }
.server-tags { font-size: 13px; color: #78836e; margin-top: 11px; flex-wrap: wrap; row-gap: 3px; }
.server-status { width: 140px; gap: 10px; }
.status-pill { font-size: 13px; padding: 4px 9px; }
.status-pill .status-dot { width: 6px; height: 6px; }
.player-count { font-size: 14px; color: #748064; }
.capacity { width: 100px; height: 4px; }
.details-button { font-size: 14px; padding: 10px 17px; color: #456337; }
.data-note { font-size: 13px; line-height: 1.75; color: #79836f; margin: 23px 0; }
.multiplayer-panel { border-radius: 12px; padding: 34px; gap: 25px; }
.multiplayer-panel h2 { font-size: 30px; }
.multiplayer-panel p { font-size: 16px; line-height: 1.75; color: #738066; }
.community-button { font-size: 14px; }
.footer-main { font-size: 14px; gap: 24px; padding-top: 32px; padding-bottom: 32px; }
.footer-brand { font-size: 23px; }
.footer-main > span { font-size: 13px; color: #7a876d; }
.footer-main button { font-size: 14px; }
.footer-bottom { font-size: 12px; color: #7c8775; gap: 20px; }
.modal-note { font-size: 14px; }
.detail-summary { font-size: 15px; }
.unknown { color: #8c6c2f; background: #faf1df; }
.unknown .status-dot { background: #c09b50; }
.current-map { font-size: 12px; color: #6b805c; }
.server-status { width: 158px; }
.server-title-line h3 { overflow-wrap: anywhere; }
.server-tags { overflow-wrap: anywhere; }
.detail-summary .server-status { width: auto; }
.live-note { font-size: 12px; color: #7b8971; }
.content-section { padding-top: 22px; padding-bottom: 22px; }
.content-panel { border: 1px solid #e0e8d8; border-radius: 12px; padding: 32px 36px; }
.content-panel.appearance-green { background: #eef3e8; }
.content-panel.appearance-white { background: #fff; }
.community-panel { background: #fff; }
.community-intro { max-width: 900px; }
.server-rules { list-style: none; counter-reset: rule; margin: 26px 0 0; padding: 0; }
.server-rules li { counter-increment: rule; position: relative; padding: 20px 0 20px 60px; border-top: 1px solid #e0e8d8; color: #53664f; line-height: 1.75; overflow-wrap: anywhere; }
.server-rules li::before { content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: 22px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #eef3e8; color: #587c4c; font-weight: 700; font-size: 15px; }
.server-rules strong { color: #223f35; }
.faq-list details { border-top: 1px solid #e0e8d8; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; color: #223f35; font-weight: 600; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { color: #66895b; font-size: 16px; transition: transform .2s; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline: 2px solid #66895b; outline-offset: 4px; }
.content-panel h2 { margin: 0 0 18px; }
.content-panel p { color: #6d7e61; line-height: 1.8; margin: 0 0 18px; overflow-wrap: anywhere; }
.content-box-image { display: block; max-width: 100%; max-height: 250px; object-fit: contain; margin-bottom: 22px; }
.hero-copy h1 { overflow-wrap: anywhere; }
.hero-copy p, .openomsi-copy p { overflow-wrap: anywhere; }
@media (max-width: 767px) { .content-panel { padding: 24px; } }
.join-connection { background: #f0f5e9; border: 1px solid #dce7d2; padding: 18px; border-radius: 10px; margin: 16px 0 24px; }
.join-address-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; color: #37562c; }
.join-address { font-size: 16px; padding: 12px; border-color: #d4dfc9; color: #2f4d26; }
.join-copy { width: 100%; margin-top: 12px; }
.join-feedback { font-size: 13px; color: #47683a; margin: 12px 0 0; line-height: 1.6; }
.join-heading { font-size: 18px; margin-bottom: 14px; }
.join-help { font-size: 14px; }
.join-help a { color: #2d634b; text-decoration: underline; }
.footer-legal { display: flex; gap: 20px; flex-shrink: 0; }
.footer-main .footer-facebook { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 23px; border-radius: 50%; }
.footer-main .footer-facebook:hover { background: #eef3e8; }
.footer-legal button { background: none; border: 0; padding: 0; color: #65775a; font: inherit; cursor: pointer; }
.footer-legal button:hover { color: #2d634b; text-decoration: underline; }
.legal-modal .modal-title { font-size: 25px; letter-spacing: -.5px; }
.legal-modal h3 { font-size: 18px; margin: 25px 0 10px; color: #294331; }
.legal-modal p { font-size: 15px; overflow-wrap: anywhere; }
.legal-modal a { text-decoration: underline; color: #2d634b; }
.legal-draft { border: 1px solid #e5dfc1; background: #faf7ea; color: #7d6c37; padding: 14px 16px; border-radius: 8px; }
@media (max-width: 1100px) { .footer-bottom { flex-wrap: wrap; } }
.openomsi-panel { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 32px 36px; }
.openomsi-heading { display: flex; align-items: center; gap: 28px; padding-bottom: 20px; border-bottom: 1px solid #dce5d3; }
.openomsi-logo-link { display: block; width: 170px; flex-shrink: 0; }
.openomsi-logo { width: 100%; height: auto; display: block; }
.openomsi-panel h2 { margin: 0; }
.openomsi-copy { display: flex; flex-direction: column; gap: 16px; }
.openomsi-panel p { color: #6d7e61; margin: 0; max-width: none; }
.openomsi-panel strong { color: #405b37; font-weight: 650; }
.openomsi-download { display: inline-flex; align-self: flex-start; gap: 20px; align-items: center; margin: 0; font-size: 15px; }
.openomsi-download span { margin: 0; }
@media (max-width: 991px) {
  .openomsi-panel { gap: 22px; padding: 28px; }
  .openomsi-logo-link { width: 145px; }
  .openomsi-heading { gap: 22px; }
}
@media (max-width: 767px) {
  .openomsi-panel { gap: 20px; padding: 24px; }
  .openomsi-heading { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 18px; }
  .openomsi-copy { gap: 16px; }
  .openomsi-logo-link { width: 165px; }
  .openomsi-panel h2 { font-size: 27px; }
  .openomsi-download { white-space: normal; text-align: left; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .hero-copy { max-width: 65%; }
  .hero h1 { font-size: 44px; }
  .hero p br { display: none; }
  .route-art { right: -160px; opacity: .45; }
  .server-card { gap: 16px; padding: 22px; }
  .server-avatar { width: 60px; height: 72px; }
  .server-title-line h3 { font-size: 19px; }
  .server-status { width: 112px; }
  .details-button { padding: 10px 13px; }
  .details-button span { margin-left: 8px; }
  .multiplayer-panel { flex-wrap: wrap; }
  .community-button { margin-left: 0; }
  .footer-main { flex-wrap: wrap; }
  .footer-main > span { display: none; }
}

@media (max-width: 767px) {
  .brand { font-size: 24px; }
  .hero-copy { max-width: 100%; padding: 36px 0; }
  .hero h1 { font-size: 38px; letter-spacing: -1.4px; }
  .hero-inner { min-height: 370px; }
  .hero p { max-width: 340px; font-size: 16px; }
  .hero-note { font-size: 13px; }
  .route-art { right: -280px; top: 40px; opacity: .16; }
  .stats-inner { gap: 12px; row-gap: 9px; }
  .stats-inner > div { font-size: 13px; }
  .stats-inner strong { font-size: 15px; }
  .stat-divider { display: none; }
  .demo-label { font-size: 11px; }
  h2 { font-size: 28px; }
  .section-heading p { font-size: 15px; }
  .form-select, .online-filter { font-size: 14px; }
  .map-filter { min-width: 0; }
  .results-heading, .results-heading select { font-size: 12px; }
  .server-card { padding: 20px 16px; gap: 12px; }
  .server-avatar { width: 49px; height: 60px; }
  .server-info { width: calc(100% - 65px); }
  .server-title-line h3 { font-size: 18px; }
  .community-name { font-size: 13px; }
  .map-tags { gap: 5px; }
  .map-tags > span:not(.map-pin) { font-size: 12px; padding: 3px 6px; }
  .server-tags { font-size: 12px; }
  .server-status { margin-left: 0; width: auto; gap: 8px; }
  .status-pill { font-size: 12px; }
  .player-count { font-size: 13px; }
  .details-button { font-size: 13px; padding: 9px 12px; }
  .data-note { font-size: 12px; padding: 0; }
  .multiplayer-panel { padding: 24px; gap: 18px; }
  .multiplayer-panel h2 { font-size: 27px; }
  .multiplayer-panel p br { display: none; }
  .footer-main { gap: 22px; }
  .footer-brand { font-size: 23px; }
  .footer-bottom { gap: 9px; }
}

/* Neutral surfaces; green is reserved for branding and useful accents. */
:root { --ink: #202a35; --muted: #6b7280; --line: #e5e8ed; --canvas: #f7f8fa; }
body { background: var(--canvas); }
.hero { background: linear-gradient(110deg, #fff 0%, #fafbfc 65%, #f3f5f7 100%); border-bottom-color: var(--line); }
.hero h1 > span { color: #202a35; }
.hero p, .hero-note { color: #687382; }
.route-art > svg { opacity: .65; }
.map-label { border-color: #e5e8ed; box-shadow: 0 5px 20px #202a3508; }
.stats-strip { border-bottom-color: var(--line); }
.stats-inner { color: #6b7280; }
.stats-inner strong { color: #293440; }
.stat-divider { background: #e5e8ed; }
.demo-label { color: #7b8491; }
.filter-bar { border-color: #e4e7ec; box-shadow: 0 3px 14px #202a3503; border-radius: 14px; }
.search-field:focus-within { background: #f7f8fa; box-shadow: inset 0 0 0 1px #d1d7de; }
.search-field input::placeholder, .search-icon { color: #87909a; }
.form-select, .online-filter { color: #56616e; }
.online-filter .form-check-input:not(:checked) { background-color: #e9edf0; border-color: #dce1e6; }
.results-heading, .results-heading select { color: #737e8b; }
.server-card { border-color: #e5e8ed; border-radius: 16px; box-shadow: 0 3px 16px #202a3503; }
.server-card:hover { border-color: #cdd7d3; box-shadow: 0 6px 24px #202a3507; }
.community-name, .server-tags, .player-count, .current-map, .data-note, .live-note { color: #707b88; }
.player-count strong { color: #394653; }
.map-tags > span:not(.map-pin) { background: #f3f5f7; border-color: #e8ecf0; color: #617068; border-radius: 5px; }
.capacity { background: #edf0f3; }
.details-button { border-color: #dce3e1; color: #315f4b; border-radius: 9px; }
.details-button:hover { background: #f3f7f5; border-color: #b7cac0; }
.multiplayer-panel, .content-panel { border-color: #e4e7ec; border-radius: 16px; box-shadow: 0 3px 16px #202a3503; }
.multiplayer-panel, .content-panel.appearance-white, .community-panel { background: #fff; }
.content-panel.appearance-green { background: #f3f6f5; }
.multiplayer-panel p, .content-panel p, .openomsi-panel p { color: #697583; }
.openomsi-heading { border-bottom-color: #e8ebef; }
.openomsi-panel strong { color: #35483e; }
.community-button { border-color: #dce3e1; color: #315f4b; }
.community-button:hover { background: #f4f7f5; border-color: #b7cac0; }
.server-rules li { color: #65717e; border-top-color: #e8ebef; }
.server-rules li::before { background: #f0f3f5; color: #617267; }
.server-rules strong, .faq-list summary { color: #28343e; }
.faq-list details { border-top-color: #e8ebef; }
.join-connection { background: #f6f8fa; border-color: #e1e6eb; }
.join-address-label { color: #3b4b43; }
.join-address { border-color: #dbe1e7; color: #35453c; }
.modal-body { color: #65717e; }
.modal-note { background: #f3f5f7; color: #697583; }
.site-footer { border-top-color: #e5e8ed; }
.footer-main, .footer-main > span, .footer-bottom, .footer-legal button { color: #78828e; }
.footer-bottom { border-top-color: #edf0f3; }
.footer-brand .brand-light { color: #718079; }
.footer-main .footer-facebook:hover { background: #f2f5f4; }

.map-filter.is-enhanced > select { display: none; }
.map-picker { position: relative; width: 100%; }
.map-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 8px; background: #fff; color: #56616e; text-align: left; font-size: 15px; }
.map-picker-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-picker-trigger > i { font-size: 11px; color: #7d8996; flex-shrink: 0; }
.map-picker-trigger:hover, .map-picker.is-open .map-picker-trigger { background: #f5f7f9; }
.map-picker-trigger:focus-visible { outline: 2px solid #718096 !important; outline-offset: 2px; }
.map-picker-option:focus-visible { outline: none !important; background: #e9eef3; box-shadow: inset 3px 0 0 #718096; }
.map-picker-menu { position: absolute; top: calc(100% + 9px); left: 0; z-index: 1040; width: 100%; min-width: 210px; max-height: 310px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #e4e8ed; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px #202a351a, 0 2px 6px #202a3508; scrollbar-width: thin; }
.map-picker-menu[hidden] { display: none; }
.map-picker.opens-up .map-picker-menu { top: auto; bottom: calc(100% + 9px); }
.map-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #5e6b79; text-align: left; font-size: 14px; line-height: 1.4; }
.map-picker-option > span { overflow-wrap: anywhere; }
.map-picker-option > i { opacity: 0; color: #3e7055; font-size: 12px; flex-shrink: 0; }
.map-picker-option:hover { background: #f5f7f9; color: #263441; }
.map-picker-option[aria-selected=true] { background: #eef3f0; color: #315f4b; font-weight: 600; }
.map-picker-option[aria-selected=true] > i { opacity: 1; }
@media(max-width:767px) { .map-picker-trigger { font-size: 14px; } .map-picker-menu { min-width: 0; max-height: min(310px, 45vh); } }

/* Keep the openOMSI wordmark aligned with the hero title. */
.hero h1 .hero-title-logo { display: inline-block; width: 4.8em; max-width: 82%; height: auto; vertical-align: -.1em; }

/* Mobile layout: keep illustration and controls clear of the text. */
@media (max-width: 991px) {
  .hero-inner { display: flex; flex-direction: column; min-height: 0; padding-bottom: 22px; }
  .hero-copy { width: 100%; padding: 32px 0 0; }
  .hero p { max-width: none; margin-bottom: 0; }
  .route-art, .route-art.has-second-bus { position: relative; inset: auto; width: 330px; height: 232px; flex-shrink: 0; align-self: center; margin-top: 8px; opacity: 1; transform: none; }
  .route-art > svg { width: 100%; height: 100%; }
  .route-art .hero-bus { left: 160px; top: 12px; width: 145px; height: 184px; transform: none; }
  .route-art.has-second-bus .hero-bus-secondary { left: 30px; top: 35px; width: 185px; height: 158px; }
  .route-art .label-start, .route-art.has-second-bus .label-start { top: 198px; left: 12px; font-size: 11px; padding: 7px 10px; transform: none; }
  .stats-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding-top: 18px; padding-bottom: 16px; }
  .stats-inner > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 12px; line-height: 1.45; text-align: center; }
  .stats-inner > .demo-label { grid-column: 1 / -1; margin-left: 0; text-align: center; }
  .server-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 14px 12px; }
  .server-card .server-avatar { width: 48px; height: 58px; }
  .server-card .server-info { width: auto; min-width: 0; }
  .server-title-line { flex-wrap: nowrap; align-items: baseline; gap: 7px; }
  .server-title-line h3 { min-width: 0; }
  .server-card .server-status { grid-column: 1 / -1; width: auto; margin: 0; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px 12px; padding-top: 12px; border-top: 1px solid #edf0f3; }
  .server-card .player-count { white-space: nowrap; }
  .server-card .current-map { flex-basis: 100%; }
  .server-card .details-button { grid-column: 1 / -1; width: 100%; min-height: 44px; font-size: 14px; }
  .results-heading { flex-wrap: wrap; gap: 8px 16px; }
  .results-heading select { min-height: 44px; }
  .map-picker-trigger { min-height: 44px; }
  .online-filter { min-height: 44px; }
  .content-panel, .openomsi-panel { padding: 24px 20px; }
  .server-rules li { padding-left: 47px; }
  .server-rules li::before { width: 32px; height: 32px; font-size: 13px; }
  .footer-main { flex-wrap: wrap; }
  .footer-brand { white-space: normal; }
  .footer-main a, .footer-main button, .legal-links button { min-height: 44px; display: inline-flex; align-items: center; }
  .modal-header { gap: 12px; }
  .modal-header .modal-title { min-width: 0; overflow-wrap: anywhere; }
  .modal-header .btn-close { flex-shrink: 0; min-width: 32px; min-height: 32px; }
  .modal-body { padding: 20px; }
  .join-connection { padding: 16px; }
  .join-address { font-size: 16px; min-width: 0; }
}
@media (max-width: 359px) {
  .navbar-brand.brand { font-size: 17px; gap: 7px; margin-right: 8px; }
  .navbar-brand .brand-bus { width: 32px; height: 36px; font-size: 25px; }
  .navbar-toggler { padding: 9px 11px; }
  .hero h1 { font-size: 34px; }
  .route-art, .route-art.has-second-bus { width: 290px; height: 215px; }
  .route-art .hero-bus { left: 145px; width: 130px; height: 170px; }
  .route-art.has-second-bus .hero-bus-secondary { left: 25px; width: 170px; height: 150px; }
  .route-art .label-start, .route-art.has-second-bus .label-start { top: 183px; }
  .filter-bar { gap: 8px; }
  .map-filter { width: 100%; flex-basis: 100%; border: 0; }
  .online-filter { width: 100%; padding: 0 10px; }
}
@media(max-width:991px) { .stats-inner .stat-label { flex-basis: 100%; } .stats-inner > div { align-content: start; align-items: center; } }
@media (min-width:768px) and (max-width:991px) {
  .navbar-brand.brand { font-size: 21px; gap: 9px; }
  .navbar-brand .brand-light { display: block; margin: 5px 0 0; font-size: 14px; }
  .navbar .navbar-nav { gap: 12px !important; }
  .navbar .nav-link { font-size: 14px; }
  .hero-copy { max-width: 100%; }
}
@media(max-width:991px) { .stats-inner > .stat-divider, .server-card .capacity { display: none; } }

/* Lower landing content uses full-width sections with aligned inner content. */
.landing-section { width: 100%; max-width: none; margin: 0; padding: 0; border-top: 1px solid #e8ebef; }
.landing-section-white { background: #fff; }
.landing-section-green { background: #f0f3f5; }
.landing-section > .content-panel, .landing-section > .multiplayer-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 48px 28px; }
.landing-section .openomsi-heading { border: 0; padding-bottom: 0; }
@media(max-width:767px) {
  .landing-section > .content-panel, .landing-section > .multiplayer-panel { padding: 32px 20px; }
}

/* The route map spans the whole hero, independently of the bus artwork. */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/images/hero-route-network.svg') center / 100% 100% no-repeat; opacity: .65; }
.hero .route-art > svg { visibility: hidden; }
@media(max-width:991px) {
  .hero::before { background-size: auto 100%; background-position: 67% center; opacity: .45; }
}

/* Subtle full-width tones distinguish the information sections. */
.landing-section#multiplayer { background: #f1f4f7; border-top-color: #e3e8ee; }
.landing-section#serverregeln { background: #faf9f6; border-top-color: #e7e7e2; }
.landing-section#faq { background: #f3f5f8; border-top-color: #e3e8ee; }
.landing-section#serverregeln .server-rules li { border-top-color: #e7e7e2; }
.landing-section#serverregeln .server-rules li::before { background: #eceeea; }

/* Deeper green for the main navigation. */
.site-header { background: #0d211b; }