/* Versioned application of Design System v1. Keeps earlier page markup intact. */
html { background: var(--color-canvas); }
body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-fa);
  font-weight: 450;
  line-height: 1.8;
}
body :is(button, input, select, textarea) { font: inherit; }
.preview { background: var(--color-teal-tint); color: var(--color-teal-strong); }
.header { background: var(--color-navy-deep); border-block-end: 1px solid rgb(255 255 255 / 12%); }
.header-inner { min-height: 82px; gap: var(--space-6); }
.desktop-nav { gap: var(--space-5); }
.desktop-nav a { color: rgb(255 255 255 / 84%); font-size: .875rem; }
.desktop-nav a:hover { color: #A9E0D8; }
.account-button {
  background: var(--color-paper);
  border-color: var(--color-paper);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font-weight: 700;
}
.account-button:hover { background: var(--color-teal-tint); }
.language { color: var(--color-paper); }
main { background: linear-gradient(180deg, var(--color-navy-deep) 0 225px, var(--color-canvas) 225px); }
.welcome { padding-block: var(--space-5) var(--space-4); }
.welcome .eyebrow { color: #A9E0D8; font-size: .75rem; letter-spacing: .08em; }
.welcome h1 { color: var(--color-paper); font-size: clamp(1.65rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.035em; }
.welcome > p { color: rgb(255 255 255 / 72%); font-size: .875rem; }
.search-card { border: 1px solid rgb(22 124 122 / 45%); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.tabs { background: #F8FBFA; border-color: var(--color-line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.tab { color: var(--color-ink); font-weight: 650; }
.tab[aria-selected="true"] { background: var(--color-navy); color: #B8EEE6; }
.tab[aria-selected="true"]::after { background: var(--color-teal); }
.market-options { background: var(--color-teal-tint); border-color: #B5D8D3; border-radius: var(--radius-sm); }
.field { border-color: var(--color-line); border-radius: var(--radius-sm); }
.field:focus-within { border-color: var(--color-teal); box-shadow: var(--shadow-focus); }
.field > span { color: var(--color-muted); }
.swap { border-color: var(--color-teal); border-radius: 50%; color: var(--color-teal-strong); }
.primary { background: var(--color-teal); border-color: var(--color-teal); border-radius: var(--radius-sm); color: var(--color-paper); font-weight: 750; }
.primary:hover { background: var(--color-teal-strong); }
.primary:focus-visible, .account-button:focus-visible, .tab:focus-visible, .route-grid > button:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.search-footnote { background: #F8FBFA; color: var(--color-muted); }
.quick-links { gap: var(--space-3); }
.quick-links > a { background: var(--color-paper); border-color: var(--color-line); border-radius: var(--radius-md); }
.quick-links > a:hover { background: var(--color-teal-tint); border-color: #A6D2CB; }
.quick-links > a:first-child { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-paper); }
.quick-links > a:first-child p { color: rgb(255 255 255 / 84%); }
.quick-links > a:nth-child(3) { background: var(--color-navy); border-color: var(--color-navy); }
.quick-icon { background: var(--color-teal-tint); border-radius: var(--radius-sm); color: var(--color-teal-strong); }
.quick-links > a:first-child .quick-icon { background: rgb(255 255 255 / 16%); color: var(--color-paper); }
.quick-links > a:nth-child(3) .quick-icon { background: var(--color-teal); color: var(--color-paper); }
.route-grid > button { background: var(--color-paper); border-color: var(--color-line); border-radius: var(--radius-md); color: var(--color-ink); }
.route-grid > button:hover { background: #F8FBFA; border-color: var(--color-teal); transform: translateY(-2px); }
.route-city i, .route-action, .route-tag { color: var(--color-teal-strong); }
.route-tag { border-color: var(--color-teal); }
.cip-story { background: var(--color-navy); border-color: var(--color-navy); border-radius: var(--radius-lg); }
.cip-copy .eyebrow { color: #A9E0D8; }
.cip-copy .outline-button { background: transparent; border-color: #83C9BF; border-radius: var(--radius-sm); color: var(--color-paper); }
.cip-copy .outline-button:hover { background: rgb(255 255 255 / 10%); }
.guide .eyebrow { color: var(--color-teal-strong); }
.faq details { border-color: var(--color-line); }
.faq summary:after { color: var(--color-teal-strong); }
footer { background: var(--color-navy-deep); }
.mobile-travel-nav { background: var(--color-navy-deep); border-color: var(--color-teal); }
.mobile-travel-nav a { color: #A9E0D8; }
.mobile-travel-nav span { color: var(--color-paper); }
@media (max-width: 650px) {
  main { background: linear-gradient(180deg, var(--color-navy-deep) 0 178px, var(--color-canvas) 178px); }
  .welcome h1 { font-size: 1.5rem; }
  .search-card { border-radius: var(--radius-md); }
  .tabs { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .tab[aria-selected="true"] { background: var(--color-navy); }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; } }