.reference-app-page { padding-top: 50px; background: #f7f9fc; }
.reference-app-page .navbar { min-height: 70px; margin: 0; background: rgba(255,255,255,.96); border: 0; border-bottom: 1px solid var(--line); box-shadow: 0 4px 22px rgba(16,35,63,.06); }
.reference-app-page .navbar > .container { display: flex; align-items: center; }
.reference-app-page .navbar-header { flex: 0 0 auto; }
.reference-app-page .navbar-brand { height: 70px; display: flex; align-items: center; color: var(--navy); font-weight: 800; }
.reference-app-page .navbar-nav > li:first-child { height: 70px; display: flex; align-items: center; margin: 0 8px; }
.reference-app-page .navbar-nav > li:first-child img { width: 42px; height: 42px; object-fit: contain; }
.reference-app-page .navbar-collapse { margin-left: auto; }
.reference-app-page .navbar-nav > li > a { padding: 25px 10px; color: #3e5067; font-size: 14px; font-weight: 700; }
.reference-app-page .navbar-nav > li > a:hover,
.reference-app-page .navbar-nav > .active > a,
.reference-app-page .navbar-nav > .active > a:hover { color: var(--blue); background: transparent; }
.reference-app-shell { width: min(calc(100% - 40px), 1120px); margin: 54px auto 72px; padding: 54px 62px 64px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.reference-app-shell > .row { margin: 0; }
.reference-app-shell > .row > [class*="col-"] { float: none; width: 100%; padding: 0; }
.reference-app-shell br:first-child,
.reference-app-shell br:first-child + br { display: none; }
.reference-app-shell h2 { max-width: 820px; margin: 0 0 28px; color: var(--navy); font-size: clamp(38px,5vw,56px); letter-spacing: -.04em; }
.reference-app-shell h2::before { content: "TRANSPORTATION REFERENCE APP"; display: block; margin-bottom: 13px; color: var(--blue); font-size: 12px; font-weight: 850; letter-spacing: .15em; }
.reference-app-shell h3 { margin: 46px 0 18px; padding-top: 36px; border-top: 1px solid var(--line); color: var(--navy); font-size: 27px; }
.reference-app-shell p,
.reference-app-shell li,
.reference-app-shell .col-md-12 { color: #405168; font-size: 16px; line-height: 1.75; }
.reference-app-shell ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: 0; list-style: none; }
.reference-app-shell ul li { margin: 0; padding: 23px; background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.reference-app-shell table { margin: 0 0 26px; }
.reference-app-shell table td { padding: 0 12px 0 0; }
.reference-app-shell .image-set { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.reference-app-shell .image-set h3 { grid-column: 1 / -1; margin: 42px 0 4px; }
.reference-app-shell .example-image-link { min-width: 0; overflow: hidden; background: #f7f9fc; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 8px 24px rgba(16,35,63,.08); }
.reference-app-shell .example-image { width: 100%; height: 310px; display: block; object-fit: contain; transition: transform .25s ease; }
.reference-app-shell .example-image-link:hover .example-image { transform: scale(1.025); }
.reference-app-shell hr { margin: 54px 0 24px; border-color: var(--line); }
.reference-app-shell .footer::after { content: "© 2026 TranAnswers. All rights reserved."; color: var(--ink-soft); font-size: 14px; }
@media (max-width: 991px) { .reference-app-page { padding-top: 20px; } .reference-app-page .navbar > .container { display: block; } .reference-app-page .navbar-toggle { margin-top: 17px; } .reference-app-page .navbar-collapse { margin-left: -15px; } .reference-app-page .navbar-nav > li:first-child { display: none; } .reference-app-page .navbar-nav > li > a { padding: 11px 15px; } .reference-app-shell ul { grid-template-columns: 1fr; } .reference-app-shell .image-set { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 640px) { .reference-app-shell { width: min(calc(100% - 20px),1120px); margin-top: 34px; padding: 38px 22px 46px; } .reference-app-shell .image-set { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .reference-app-shell .example-image { height: 260px; } .reference-app-shell table, .reference-app-shell tbody, .reference-app-shell tr, .reference-app-shell td { display: block; } .reference-app-shell table td { padding: 4px 0; } }