@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --green: #66766c;
  --green-dark: #354d3d;
  --green-deep: #293e31;
  --green-light: #e9eeeb;
  --white: #ffffff;
  --off-white: #f7f8f6;
  --text: #26332b;
  --text-light: #6b756e;
  --border: #d9dfdb;
  --radius: 20px;
  --radius-large: 30px;
  --page-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: min(calc(100% - 40px), var(--page-width));
  margin: 0 auto;
}

.section {
  padding: 72px 0;
}

.section-green {
  background: var(--green-dark);
  color: white;
}

.section-soft {
  background: var(--off-white);
}

h1,
h2,
h3 {
  margin-top: 0;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.section-heading {
  margin-bottom: 10px;
}

.section-description {
  color: var(--text-light);
  max-width: 700px;
  margin: 0 0 32px;
}

.section-green .section-description {
  color: rgba(255,255,255,0.75);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(53, 77, 61, 0.96);
  color: white;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar {
  width: min(calc(100% - 40px), var(--page-width));
  min-height: 66px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 9px 13px;
  border-radius: 999px;
}

.nav-links a:hover {
  background: rgba(255,255,255,0.12);
}

.mobile-menu-button {
  display: none;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 0;
  border-radius: 999px;
  width: 42px;
  height: 42px;
}

.hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  color: white;
  background:
    linear-gradient(
      90deg,
      rgba(24, 42, 31, 0.92),
      rgba(24, 42, 31, 0.55)
    ),
    var(--green-dark);
}

.hero-content {
  width: min(calc(100% - 40px), 900px);
  margin: auto;
  padding: 90px 0;
}

.hero-copy {
  max-width: 760px;
}

.hero-eyebrow {
  display: inline-flex;
  padding: 8px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.hero p {
  max-width: 670px;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 28px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: white;
  color: var(--green-dark);
}

.button-green {
  background: var(--green);
  color: white;
}

.button-outline {
  color: white;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.tool-card {
  padding: 26px;
  min-height: 210px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: 0 3px 14px rgba(31,49,38,0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 38px rgba(31,49,38,0.14);
}

.tool-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 1.25rem;
}

.tool-card p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.88rem;
}

.dashboard-shell {
  background: var(--green-dark);
  border-radius: var(--radius-large);
  padding: 30px;
}

.dashboard-placeholder {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.72);
}

.faq-list {
  max-width: 900px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  padding: 22px 4px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.faq-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: white;
}

.faq-answer {
  display: none;
  padding: 0 54px 22px;
  color: var(--text-light);
}

.faq-item.open .faq-answer {
  display: block;
}

.topic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--green);
  color: white;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}

.promo-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 50px;
  padding: 48px;
  border-radius: var(--radius-large);
  background: var(--off-white);
}

.promo-card p {
  color: var(--text-light);
}

.site-footer {
  background: var(--green-deep);
  color: rgba(255,255,255,0.72);
  padding: 50px 0 30px;
}

.footer-inner {
  width: min(calc(100% - 40px), var(--page-width));
  margin: auto;
}

.footer-brand {
  color: white;
  font-weight: 800;
  margin-bottom: 10px;
}

.footer-small {
  font-size: 0.72rem;
  line-height: 1.6;
  max-width: 850px;
  margin-top: 30px;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 900px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promo-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .container {
    width: calc(100% - 28px);
  }

  .section {
    padding: 48px 0;
  }

  .navbar {
    width: calc(100% - 28px);
  }

  .nav-links {
    display: none;
  }

  .mobile-menu-button {
    display: grid;
    place-items: center;
  }

  .hero-content {
    width: calc(100% - 32px);
    padding: 65px 0;
  }

  .tool-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .tool-card {
    padding: 18px;
    min-height: 190px;
  }

  .promo-card {
    padding: 28px 22px;
  }
}

@media (max-width: 430px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }

  .button-row {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }
}
/* =========================================
   HOMEPAGE REDESIGN — HERO V2
   ========================================= */

.hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;

  background-image:
    linear-gradient(
      rgba(20, 32, 24, 0.12),
      rgba(20, 32, 24, 0.18)
    ),
    url("images/120425_Airfield_frontier-0055.jpg");

  background-size: cover;
  background-position: center;
  color: white;

  box-shadow: 0 18px 34px rgba(20, 34, 25, 0.22);
z-index: 2;
}

/* Give the hero text its own subtle glassy area
   instead of darkening the entire photograph */

.hero-copy {
  max-width: 720px;
  padding: 34px 38px;

  background: rgba(35, 50, 40, 0.38);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.12);

  position: relative;
  z-index: 10;
  transform: translateY(20%);
}

.hero-content {
  width: min(calc(100% - 40px), var(--page-width));
  margin: auto;
  padding: 64px 0;

  display: flex;
  justify-content: center;
}

.hero h1 {
  margin-bottom: 16px;
}

.hero p {
  margin-bottom: 24px;
  color: rgba(255,255,255,0.94);
}

/* Remove some of the "startup website" treatment */

.hero-eyebrow {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 12px;

  font-size: 0.72rem;
  letter-spacing: 0.08em;

  color: rgba(255,255,255,0.82);
}


/* MOBILE HERO */

@media (max-width: 700px) {

  .hero {
    min-height: 500px;
    background-position: center center;
  }

  .hero-content {
    width: calc(100% - 24px);
    padding: 42px 0;
  }

  .hero-copy {
    width: 100%;

    padding: 26px 22px;

    border-radius: 22px;

    background: rgba(35, 50, 40, 0.46);

    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);

    transform: translateY(14%);
  }

}
.hero-photo-credit {
  position: absolute;
  right: 10px;
  bottom: 6px;
  z-index: 5;

  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 400;
  line-height: 1;

  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);

  margin: 0;
  padding: 0;
}

/* =========================================
   HELPFUL TOOLS V2
   ========================================= */

.tools-section {
  padding: 78px 0 54px;
  background: transparent;
}

.tools-heading {
  text-align: center;
  margin-bottom: 30px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: #26332b;
}

.tools-simple-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
}

.simple-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  color: #26332b;
  text-decoration: none;

  padding: 4px 8px;

  border: none;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  transition: transform 0.18s ease;
}

.simple-tool:hover {
  transform: translateY(-2px);
}

.simple-tool-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-bottom: 10px;

  border-radius: 50%;

  background: #66766c;
  color: #ffffff;

  font-size: 17px;
  line-height: 1;
}

.simple-tool-title {
  display: inline-block;

  padding: 7px 13px;
  margin-bottom: 8px;

  border-radius: 999px;

  background: #66766c;
  color: #ffffff;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.simple-tool-description {
  max-width: 215px;

  color: #6b756e;

  font-size: 0.72rem;
  line-height: 1.45;
}


/* Tablet */

@media (max-width: 850px) {

  .tools-simple-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 22px;
  }

}


/* Phone */

@media (max-width: 500px) {

  .tools-section {
    padding: 36px 0 42px;
  }

  .tools-heading {
    margin-bottom: 24px;
  }

  .tools-simple-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 12px;
  }

  .simple-tool {
    padding: 0;
  }

  .simple-tool-title {
    font-size: 0.7rem;
  }

  .simple-tool-description {
    font-size: 0.66rem;
  }

}
/* Helpful Tools — pill-only treatment */

.simple-tool-title {
  padding: 9px 18px;
  margin-bottom: 9px;

  border-radius: 999px;

  background: #66766c;
  color: #ffffff;

  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.simple-tool:hover .simple-tool-title {
  background: #526158;
}
/* =========================================
   AIRPORT DASHBOARD V2
   ========================================= */

.airport-dashboard {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}

.airport-card {
  width: min(100%, 620px);
  overflow: hidden;

  border-radius: 20px;
  background: #ffffff;

  box-shadow:
    0 10px 28px rgba(20, 34, 25, 0.16);
}

.airport-card-photo {
  position: relative;
  min-height: 190px;

  background:
    url("images/120425_Airfield_frontier-0055.jpg");

  background-size: cover;
  background-position: center 42%;
}

.airport-card-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(26, 40, 31, 0.78) 0%,
      rgba(26, 40, 31, 0.38) 48%,
      rgba(26, 40, 31, 0.55) 100%
    );
}

.airport-card-content {
  position: relative;
  z-index: 2;

  min-height: 190px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  padding: 26px;

  color: #ffffff;
}

.airport-label,
.airport-stat-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.82);
}

.airport-code-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: 3px;
}

.airport-code {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
}

.airport-name {
  font-size: 1.2rem;
  font-weight: 700;
}

.airport-subtitle {
  margin-top: 6px;

  font-size: 0.72rem;
  color: rgba(255,255,255,0.86);
}

.airport-stats {
  display: flex;
  align-items: center;

  padding: 14px 16px;

  border-radius: 14px;

  background: rgba(255,255,255,0.13);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.airport-stat {
  min-width: 92px;

  display: flex;
  flex-direction: column;

  text-align: center;
}

.airport-stat-number {
  margin-top: 3px;

  font-size: 1.45rem;
  line-height: 1;

  font-weight: 800;
}

.airport-stat-divider {
  width: 1px;
  height: 34px;

  margin: 0 12px;

  background: rgba(255,255,255,0.28);
}

.airport-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 11px 18px;

  color: #526158;

  font-size: 0.72rem;
  font-weight: 700;

  background: #ffffff;
}


/* MOBILE DASHBOARD */

@media (max-width: 600px) {

  .airport-dashboard {
    padding-top: 8px;
  }

  .airport-card {
    width: 100%;
    border-radius: 16px;
  }

  .airport-card-photo {
    min-height: 230px;
  }

  .airport-card-content {
    min-height: 230px;

    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    gap: 18px;

    padding: 20px;
  }

  .airport-stats {
    width: 100%;
    justify-content: space-around;
  }

  .airport-stat {
    flex: 1;
  }

  .airport-code {
    font-size: 2rem;
  }

  .airport-name {
    font-size: 1rem;
  }

}
/* Dashboard desktop sizing */

.airport-card {
  width: min(100%, 900px);
}

.airport-card-photo {
  min-height: 260px;
}

.airport-card-content {
  min-height: 260px;
  padding: 34px 38px;
}

.airport-code {
  font-size: 3rem;
}

.airport-name {
  font-size: 1.4rem;
}

.airport-stat-number {
  font-size: 1.8rem;
}

@media (max-width: 600px) {
  .airport-card-photo {
    min-height: 230px;
  }

  .airport-card-content {
    min-height: 230px;
    padding: 20px;
  }

  .airport-code {
    font-size: 2rem;
  }

  .airport-name {
    font-size: 1rem;
  }

  .airport-stat-number {
    font-size: 1.45rem;
  }
}
/* =========================================
   DASHBOARD STAGE 1
   ========================================= */

.dashboard-main {
  width: min(100%, 900px);
  margin: 0 auto;
}

.dashboard-airport-hero {
  position: relative;
  min-height: 270px;

  overflow: hidden;

  border-radius: 22px;

  background: #66766c;
  color: #ffffff;

  isolation: isolate;

  box-shadow:
    0 12px 30px rgba(20, 34, 25, 0.16);
}

.dashboard-airport-photo {
  position: absolute;
  inset: 0;

  z-index: -3;

  background-size: cover;
  background-position: center;

  transition: background-image 0.25s ease;
}

.dashboard-airport-shade {
  position: absolute;
  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(18, 29, 22, 0.62) 0%,
      rgba(18, 29, 22, 0.20) 55%,
      rgba(18, 29, 22, 0.30) 100%
    );
}

.dashboard-airport-content {
  min-height: 270px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  padding: 34px;
}

.dashboard-airport-copy,
.dashboard-score {
  background: rgba(27, 40, 31, 0.40);

  border: 1px solid rgba(255, 255, 255, 0.18);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.10);
}

.dashboard-airport-copy {
  padding: 15px 18px;

  border-radius: 18px;
}

.dashboard-kicker {
  margin-bottom: 6px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;

  opacity: 0.82;
}

.dashboard-airport-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  gap: 7px;

  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-divider {
  opacity: 0.55;
}

.dashboard-airport-name {
  margin-top: 7px;

  font-size: 11px;
  font-weight: 500;

  opacity: 0.86;
}

.dashboard-score {
  flex-shrink: 0;

  padding: 14px 17px;

  border-radius: 18px;

  text-align: right;
}

.dashboard-score-label {
  display: block;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;

  opacity: 0.82;
}

.dashboard-score-number {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-score-max {
  font-size: 13px;
  opacity: 0.72;
}

.dashboard-photo-credit {
  position: absolute;
  top: 10px;
  right: 11px;

  z-index: 5;

  max-width: 72%;

  padding: 4px 7px;

  border-radius: 8px;

  background: rgba(20, 28, 23, 0.56);

  color: #ffffff;

  font-size: 8px;
  line-height: 1.3;

  text-align: right;
  text-decoration: none;
}

.dashboard-photo-credit[hidden] {
  display: none;
}

.dashboard-change-row {
  display: flex;
  justify-content: flex-end;

  margin-top: 7px;
}

.dashboard-change-row button {
  border: 0;

  padding: 4px 1px;

  background: transparent;
  color: rgba(255, 255, 255, 0.82);

  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}

.dashboard-airport-chooser {
  display: none;

  margin: 6px 0 10px;
}

.dashboard-airport-chooser select {
  width: 100%;
  height: 44px;

  padding: 0 15px;

  border:
    1px solid rgba(255, 255, 255, 0.24);

  border-radius: 999px;

  background: #ffffff;

  color: #4e5851;

  font-family: "Montserrat", sans-serif;
}

.dashboard-network {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 5px 20px;

  margin-top: 10px;

  padding: 19px 21px;

  border-radius: 18px;

  background: #ffffff;
  color: #66766c;

  box-shadow:
    0 7px 22px rgba(20, 34, 25, 0.08);
}

.dashboard-network-main {
  display: flex;
  align-items: center;

  gap: 12px;
}

.dashboard-route-count {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-network-copy {
  display: flex;
  flex-direction: column;
}

.dashboard-network-copy strong {
  font-size: 13px;
}

.dashboard-network-copy span {
  margin-top: 2px;

  font-size: 10px;

  opacity: 0.72;
}

.dashboard-network-rank {
  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: right;
}

.dashboard-network-rank strong {
  font-size: 18px;
}

.dashboard-network-rank span {
  margin-top: 2px;

  font-size: 9px;

  opacity: 0.72;
}

.dashboard-score-bar {
  grid-column: 1 / -1;

  height: 6px;

  margin-top: 9px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(102, 118, 108, 0.13);
}

.dashboard-score-bar-fill {
  width: 0%;
  height: 100%;

  border-radius: 999px;

  background: #66766c;

  transition: width 0.35s ease;
}

.dashboard-network-description {
  grid-column: 1 / -1;

  margin-top: 6px;

  font-size: 10px;
  line-height: 1.5;

  opacity: 0.82;
}


@media (max-width: 600px) {

  .dashboard-airport-hero {
    min-height: 235px;
  }

  .dashboard-airport-content {
    min-height: 235px;

    padding: 20px;

    align-items: flex-end;
  }

  .dashboard-airport-title {
    font-size: 29px;
  }

  .dashboard-score-number {
    font-size: 32px;
  }

  .dashboard-airport-name {
    max-width: 220px;
  }

  .dashboard-network {
    padding: 16px;
  }

  .dashboard-route-count {
    font-size: 34px;
  }

}


@media (max-width: 430px) {

  .dashboard-airport-content {
    gap: 10px;

    padding: 15px;
  }

  .dashboard-airport-copy {
    padding: 12px 13px;
  }

  .dashboard-score {
    padding: 11px 12px;
  }

  .dashboard-airport-title {
    font-size: 24px;
  }

  .dashboard-score-number {
    font-size: 27px;
  }

  .dashboard-network {
    grid-template-columns: 1fr;
  }

  .dashboard-network-rank {
    text-align: left;

    margin-top: 5px;
  }

}
/* Dashboard explore-routes button */

.airport-card-footer {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 10px;
  padding: 8px 16px;

  border-radius: 999px;

  background: #66766c;
  color: #ffffff;

  font-size: 0.72rem;
  font-weight: 600;
}
/* Force dashboard airport photo to display on desktop */

.dashboard-airport-photo {
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.dashboard-airport-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
/* =========================================
   DASHBOARD STAGE 2 — WEATHER
   GLASS VERSION
   ========================================= */

.dashboard-weather {
  position: relative;
  min-height: 235px;

  margin-top: 12px;

  overflow: hidden;
  border-radius: 22px;

  /*
    Transparent glass instead of an opaque card.
    This allows the dashboard artwork/planes behind
    the card to remain visible.
  */
  background: rgba(53, 77, 61, 0.12);
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.22);

  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);

  isolation: isolate;

  box-shadow:
    0 10px 30px rgba(20, 34, 25, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* =========================================
   WEATHER BACKGROUND PHOTO
   ========================================= */

.dashboard-weather-photo {
  position: absolute;
  inset: 0;

  z-index: -3;

  /*
    Keep the weather image visible, but allow some
    of the glass character to come through.
  */
  opacity: 0.58;

  background-size: cover;
  background-position: center;

  transition:
    background-image 0.3s ease,
    opacity 0.3s ease;
}


/* =========================================
   WEATHER PHOTO SHADE
   ========================================= */

.dashboard-weather-shade {
  position: absolute;
  inset: 0;

  z-index: -2;

  /*
    Much lighter than the old dark overlay.
    Left side remains slightly darker so the
    temperature stays readable.
  */
  background:
    linear-gradient(
      115deg,
      rgba(15, 22, 18, 0.32) 0%,
      rgba(15, 22, 18, 0.15) 48%,
      rgba(15, 22, 18, 0.07) 100%
    );
}


/* =========================================
   WEATHER CONTENT
   ========================================= */

.dashboard-weather-content {
  position: relative;
  z-index: 2;

  min-height: 235px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 25px 28px;
}


.dashboard-weather-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;
}


.dashboard-weather-label {
  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.9px;

  opacity: 0.86;
}


.dashboard-current-weather {
  display: flex;
  align-items: baseline;

  gap: 10px;

  margin-top: 3px;
}


.dashboard-temperature {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.16);
}


.dashboard-condition {
  font-size: 14px;
  font-weight: 600;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.14);
}


.dashboard-wind {
  display: flex;
  flex-direction: column;

  text-align: right;
}


.dashboard-wind strong {
  font-size: 20px;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.14);
}


.dashboard-wind span {
  font-size: 9px;
  opacity: 0.84;
}


/* =========================================
   WEATHER CONCERNS
   Only appears when noteworthy
   ========================================= */

.dashboard-weather-concerns {
  display: none;

  flex-wrap: wrap;
  gap: 7px;

  margin-top: 10px;
}


.dashboard-weather-chip {
  display: none;
  align-items: center;

  gap: 5px;

  padding: 6px 10px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.13);

  border: 1px solid rgba(255, 255, 255, 0.16);

  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10);

  font-size: 10px;
}


.dashboard-weather-chip.show {
  display: flex;
}


/* =========================================
   OPERATIONAL ASSESSMENT
   ========================================= */

.dashboard-weather-message {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 13px;
  padding: 11px 13px;

  border-radius: 14px;

  /*
    Glass panel instead of the old dark box.
  */
  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.18);

  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


.dashboard-weather-icon {
  width: 23px;
  height: 23px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  border: 1px solid rgba(255, 255, 255, 0.16);

  font-size: 10px;
  font-weight: 700;
}


.dashboard-weather-message strong {
  display: block;

  font-size: 11px;

  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.12);
}


.dashboard-weather-message span {
  display: block;

  margin-top: 2px;

  font-size: 10px;
  line-height: 1.45;

  opacity: 0.92;
}


/* =========================================
   TOMORROW
   ========================================= */

.dashboard-tomorrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 14px;

  margin-top: 14px;
  padding-top: 10px;

  border-top:
    1px solid rgba(255, 255, 255, 0.24);
}


.dashboard-tomorrow-label {
  display: block;

  margin-bottom: 2px;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.7px;

  opacity: 0.76;
}


.dashboard-tomorrow strong {
  font-size: 11px;
}


.dashboard-tomorrow-summary {
  text-align: right;

  font-size: 10px;
  font-weight: 600;
}


/* =========================================
   MOBILE WEATHER
   ========================================= */

@media (max-width: 600px) {

  .dashboard-weather {
    min-height: 220px;

    /*
      Slightly stronger glass on mobile because
      the card is smaller and text overlaps more
      of the background.
    */
    background: rgba(53, 77, 61, 0.15);

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }


  .dashboard-weather-photo {
    opacity: 0.54;
  }


  .dashboard-weather-content {
    min-height: 220px;

    padding: 19px;
  }


  .dashboard-temperature {
    font-size: 36px;
  }

}


@media (max-width: 430px) {

  .dashboard-weather-top {
    gap: 8px;
  }


  .dashboard-tomorrow {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }


  .dashboard-tomorrow-summary {
    text-align: left;
  }

}


/* =========================================
   DESKTOP WEATHER
   ========================================= */

@media (min-width: 701px) {

  .dashboard-weather {
    min-height: 260px;
  }


  .dashboard-weather-content {
    min-height: 260px;

    padding: 28px 32px;
  }


  .dashboard-weather-top {
    align-items: center;
  }


  .dashboard-current-weather {
    gap: 12px;
  }


  .dashboard-temperature {
    font-size: 52px;
  }


  .dashboard-condition {
    font-size: 15px;
  }


  .dashboard-wind strong {
    font-size: 22px;
  }


  .dashboard-weather-message {
    max-width: 620px;
  }


  .dashboard-tomorrow {
    margin-top: 18px;
  }

}

/* =========================================
   DASHBOARD STAGE 3 — GOWILD BOOKING
   ========================================= */

.dashboard-booking {
  margin-top: 12px;
  padding: 24px 26px;

  border-radius: 22px;

  background: #ffffff;
  color: #66766c;

  box-shadow:
    0 8px 24px rgba(20,34,25,0.09);
}

.dashboard-booking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;
}

.dashboard-booking-kicker,
.dashboard-booking-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.dashboard-booking-heading h3 {
  margin: 4px 0;

  font-size: 20px;
  color: #4e5851;
}

.dashboard-booking-heading p {
  margin: 0;

  font-size: 10px;
  opacity: 0.78;
}

.dashboard-booking-button {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 17px;

  border-radius: 999px;

  background: #66766c;
  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;
}

.dashboard-booking-button:hover {
  background: #526158;
}

.dashboard-booking-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;
}

.dashboard-booking-item {
  min-width: 0;

  padding: 15px;

  border:
    1px solid rgba(102,118,108,0.17);

  border-radius: 14px;

  background: #f8faf8;
}

.dashboard-booking-item.is-blackout {
  background: #fff8ed;
  border-color: #e6cda4;
}

.dashboard-booking-label {
  display: block;

  margin-bottom: 8px;

  opacity: 0.72;
}

.booking-date {
  display: block;

  color: #4e5851;

  font-size: 12px;
  line-height: 1.4;
}

.booking-status {
  display: block;

  margin-top: 7px;

  font-size: 10px;
  line-height: 1.45;
}

.dashboard-booking-item.is-blackout .booking-status {
  color: #925a14;
}

.booking-timer {
  display: block;

  margin-top: 10px;

  color: #4e5851;

  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dashboard-booking-note {
  margin: 13px 0 0;

  font-size: 9px;
  line-height: 1.5;

  opacity: 0.8;
}


@media (max-width: 600px) {

  .dashboard-booking {
    padding: 19px;
  }

  .dashboard-booking-heading {
    align-items: flex-start;
  }

  .dashboard-booking-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 430px) {

  .dashboard-booking-heading {
    flex-wrap: wrap;
  }

}
/* Keep Stage 3 aligned with the rest of the dashboard */

.dashboard-booking {
  width: 100%;
  max-width: 900px;
  margin: 12px auto 0;
  box-sizing: border-box;
}
/* Force booking card to match dashboard stack */

.dashboard-booking {
  width: min(100%, 900px);
  max-width: 900px;
  margin: 12px auto 0;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .dashboard-booking {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Mobile booking card width fix */

@media (max-width: 600px) {

  .dashboard-booking {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  }
/* Center dashboard heading */

#dashboard .section-heading {
  text-align: center;
}

#dashboard .section-description {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Compact departure board: one line per flight at every screen size. */
.dashboard-departures {
  width: 100%;
  margin-top: 12px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 22px;
  background: #fff;
  color: #4e5851;
  box-shadow: 0 8px 24px rgba(20,34,25,.09);
}
.dashboard-departures-heading { margin-bottom: 12px; }
.dashboard-departures-kicker {
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  opacity: .72;
}
.dashboard-departures-heading h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.dashboard-departures-heading p { margin: 5px 0 0; font-size: 10px; line-height: 1.45; opacity: .78; }
.departure-board { overflow: hidden; border: 1px solid #dce3dc; border-radius: 10px; }
.departure-board-header, .departure-row {
  display: grid;
  grid-template-columns: 78px 68px minmax(0,1fr) 100px 255px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  box-sizing: border-box;
}
.departure-board-header {
  min-height: 27px;
  background: #526158;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .6px;
}
.departure-board-rows { display: block; }
.departure-row {
  min-height: 34px;
  border-bottom: 1px solid #e5eae5;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.departure-row:nth-child(even) { background: #f5f7f4; }
.departure-row:last-child { border-bottom: 0; }
.departure-row:hover { background: #eaf0e8; }
.departure-row:focus-visible { outline: 2px solid #526158; outline-offset: -2px; }
.departure-day { font-weight: 600; }
.departure-time, .departure-flight, .departure-booking-countdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.departure-time, .departure-flight { font-weight: 700; }
.departure-destination { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.departure-destination strong { flex: 0 0 auto; font-weight: 700; }
.departure-destination span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.departure-booking { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 9px; }
.departure-booking-status { min-width: 0; white-space: nowrap; }
.departure-booking-status.standard { color: #526158; }
.departure-booking-status.advance, .departure-booking-countdown { color: #8b5a15; }
.departure-booking-status.blackout { color: #9c3f3f; overflow: hidden; text-overflow: ellipsis; }
.departure-booking-countdown { white-space: nowrap; }
.departure-board-loading, .departure-board-empty { padding: 16px 10px; text-align: center; font-size: 10px; line-height: 1.5; }
.departure-show-more {
  display: block;
  margin: 12px auto 0;
  padding: 8px 15px;
  border: 0;
  border-radius: 999px;
  background: #66766c;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.departure-show-more[hidden] { display: none; }
.departure-show-more:hover { background: #526158; }
.dashboard-departures-note { margin: 10px 0 0; font-size: 9px; line-height: 1.5; opacity: .72; }
@media (max-width: 850px) {
  .departure-board-header, .departure-row { grid-template-columns: 62px 54px minmax(0,1fr) 80px 220px; gap: 6px; }
  .departure-row { font-size: 10px; }
  .departure-booking { font-size: 8px; gap: 2px; }
}
@media (max-width: 650px) {
  .dashboard-departures { padding: 10px 8px; border-radius: 16px; }
  .dashboard-departures-heading h3 { font-size: 16px; }
  .departure-board-header, .departure-row {
    grid-template-columns: 44px 39px minmax(0,1fr) 51px 146px;
    gap: 3px;
    padding: 0 5px;
  }
  .departure-board-header { min-height: 23px; font-size: 6px; letter-spacing: 0; }
  .departure-row { min-height: 32px; font-size: 8px; }
  .departure-destination { gap: 2px; }
  .departure-booking { font-size: 6.6px; gap: 2px; letter-spacing: -.1px; }
  .departure-day { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 390px) {
  .departure-board-header, .departure-row {
    grid-template-columns: 36px 33px minmax(0,1fr) 46px 124px;
    gap: 2px;
    padding: 0 4px;
  }
  .departure-row { font-size: 7px; }
  .departure-booking { font-size: 6px; gap: 1px; }
}

/* Live departure labels and scrolling. */
.departure-booking-status.boarding { color: #526158; font-weight: 800; }
.departure-booking-status.delayed { color: #8b5a15; font-weight: 700; }
.departure-booking-status.departed { color: #66766c; }
.departure-booking-status.cancelled { color: #9c3f3f; font-weight: 700; }
.departure-booking-status.live { color: #66766c; }
.departure-board { max-height: 299px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #66766c #f3f6f3; }
.departure-board-header { position: sticky; top: 0; z-index: 2; }
@media (max-width: 650px) { .departure-board { max-height: 280px; } }

.departure-flight { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 390px) { .departure-flight { font-size: 6px; } }
/* =========================================
   DASHBOARD BACKGROUND PLANES
   ========================================= */

#dashboard {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* United-inspired dashboard glow:
     HowToGoWild sage at the top center, fading into near-black. */
  background:
    radial-gradient(
      ellipse 85% 52% at 50% 0%,
      #66766c 0%,
      #53635a 18%,
      #34423b 36%,
      #18231f 56%,
      #0a100e 76%,
      #040706 100%
    );
  background-color: #040706;
}

#dashboard > .container {
  position: relative;
  z-index: 2;
}

.dashboard-planes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.dashboard-plane {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Plane 1 — large upper pass */
.plane-1 {
  width: 230px;
  top: 10%;
  left: -280px;
  opacity: 0.18;

  animation:
    dashboard-plane-right-1 30s linear infinite;
}

/* Plane 2 — medium, opposite direction */
.plane-2 {
  width: 165px;
  top: 38%;
  right: -220px;
  opacity: 0.15;

  animation:
    dashboard-plane-left-2 37s linear 7s infinite;
}

/* Plane 3 — smaller distant climb */
.plane-3 {
  width: 105px;
  top: 64%;
  left: -160px;
  opacity: 0.11;

  animation:
    dashboard-plane-climb 43s linear 14s infinite;
}

/* Plane 4 — large lower pass */
.plane-4 {
  width: 205px;
  top: 82%;
  right: -260px;
  opacity: 0.14;

  animation:
    dashboard-plane-left-4 48s linear 21s infinite;
}


/* LEFT TO RIGHT */

@keyframes dashboard-plane-right-1 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(100vw + 560px));
  }
}


/* RIGHT TO LEFT */

@keyframes dashboard-plane-left-2 {
  from {
    transform: translateX(0) scaleX(-1);
  }

  to {
    transform: translateX(calc(-100vw - 440px)) scaleX(-1);
  }
}


/* SMALL DIAGONAL CLIMB */

@keyframes dashboard-plane-climb {
  from {
    transform:
      translateX(0)
      translateY(45px)
      rotate(-4deg);
  }

  to {
    transform:
      translateX(calc(100vw + 340px))
      translateY(-110px)
      rotate(-4deg);
  }
}


/* LARGE LOWER PASS */

@keyframes dashboard-plane-left-4 {
  from {
    transform: translateX(0) scaleX(-1);
  }

  to {
    transform: translateX(calc(-100vw - 520px)) scaleX(-1);
  }
}


/* MOBILE */

@media (max-width: 700px) {

  .plane-1 {
    width: 145px;
    opacity: 0.12;
  }

  .plane-2 {
    width: 110px;
    opacity: 0.10;
  }

  .plane-3 {
    width: 75px;
    opacity: 0.08;
  }

  .plane-4 {
    width: 135px;
    opacity: 0.10;
  }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .dashboard-plane {
    animation: none !important;
  }

}
/* =========================================
   DASHBOARD AIRPORT ANCHOR ART
   ========================================= */

.dashboard-airport-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1.5;
  pointer-events: none;
  overflow: hidden;
}

.dashboard-airport-art img {
  display: block;
  width: 100%;
  min-width: 1500px;
  height: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.42;
}

/* Keep the illustration from becoming enormous
   on ultra-wide monitors */
@media (min-width: 2000px) {
  .dashboard-airport-art img {
    width: 2000px;
  }
}

/* Mobile: keep the artwork wide and crop the edges */
@media (max-width: 700px) {
  .dashboard-airport-art img {
    width: 1400px;
    min-width: 1400px;
    opacity: 0.30;
  }
}
/* Digital boarding passes — scoped to the homepage FAQ. */
#faq.gw-faq {
  --ticket-ink: #172c22;
  --ticket-sage: #aac6b4;
  padding: 80px 24px 0;
  overflow: hidden;
  background: #040706;
  background-image: radial-gradient(ellipse 150% 100% at 50% 100%, #66786b 0%, #3b4840 40%, #19221c 70%, #040706 100%);
  color: var(--ticket-ink);
  font-family: 'Montserrat', sans-serif;
  scroll-margin-top: 24px;
}
#faq .gw-faq-inner { max-width: 900px; margin: 0 auto; }
#faq .gw-faq-heading { text-align: center; color: #f5f7f3; margin-bottom: 44px; }
#faq .gw-faq-heading h2 { color: inherit; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; margin: 0 0 14px; letter-spacing: -.04em; }
#faq .gw-faq-heading p { color: #b7c9b9; margin: 0; font-size: clamp(.9rem, 2vw, 1.05rem); line-height: 1.6; }
#faq .gw-faq-list { display: flex; flex-direction: column; gap: 18px; }
#faq .gw-faq-card {
  position: relative; min-width: 0; border: 2px solid #49604e;
  border-radius: 26px 26px 0 0; background: var(--ticket-sage); color: var(--ticket-ink);
  box-shadow: 0 18px 32px #0006; isolation: isolate;
  transition: margin .35s ease, transform .35s ease, background-color .35s ease;
}
#faq .gw-faq-card:nth-child(2) { --ticket-sage: #acc7b6; }
#faq .gw-faq-card:nth-child(3) { --ticket-sage: #afc9b8; }
#faq .gw-faq-card:nth-child(4) { --ticket-sage: #b2ccbb; }
#faq.gw-faq-ready .gw-faq-list { gap: 0; }
#faq.gw-faq-ready .gw-faq-card + .gw-faq-card { margin-top: -26px; }
#faq.gw-faq-ready .gw-faq-card.is-open { margin-top: 18px; margin-inline: 0; background: #deE7d7; }
#faq.gw-faq-ready .gw-faq-card.is-open:first-child { margin-top: 0; }
#faq.gw-faq-ready .gw-faq-card.is-open + .gw-faq-card { margin-top: 18px; }
/* The front pass continues into the section edge, like a mobile wallet. */
#faq .gw-faq-card:last-child,
#faq .gw-faq-card:last-child .gw-faq-panel-inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#faq .gw-faq-card:last-child { border-bottom: 0; }
#faq .gw-faq-card h3 { margin: 0; font-size: inherit; }
#faq .gw-faq-trigger {
  display: flex; flex-direction: column; align-items: stretch; gap: 20px;
  width: 100%; min-height: 166px; padding: 24px 30px 34px;
  border: 0; border-radius: 26px 26px 0 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; line-height: 1.4;
}
#faq .gw-ticket-topline, #faq .gw-ticket-meta { display: flex; justify-content: space-between; gap: 16px; }
#faq .gw-ticket-topline { font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
#faq .gw-ticket-title { font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: -.035em; }
#faq .gw-ticket-meta { font-size: .65rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
#faq .gw-ticket-action { text-align: right; }
#faq .gw-ticket-close { display: none; }
#faq .is-open .gw-ticket-open { display: none; }
#faq .is-open .gw-ticket-close { display: inline; }
#faq .gw-faq-panel { display: grid; grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease, visibility .35s; }
#faq.gw-faq-ready .gw-faq-card:not(.is-open) .gw-faq-panel { grid-template-rows: 0fr; visibility: hidden; }
#faq .gw-faq-panel-inner { min-height: 0; overflow: hidden; border-radius: 0; }
#faq .gw-faq-body { position: relative; padding: 28px 30px 30px; font-size: .94rem; line-height: 1.75; overflow-wrap: anywhere; }
#faq .gw-faq-body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 2px dashed #657b6699; }
#faq .gw-faq-body::after {
  content: ''; display: block; width: 156px; height: 30px; margin-top: 28px;
  background: repeating-linear-gradient(90deg, #172c22 0 2px, transparent 2px 4px, #172c22 4px 5px, transparent 5px 9px, #172c22 9px 13px, transparent 13px 16px);
  opacity: .65;
}
#faq .gw-faq-copy + .gw-faq-copy { margin-top: 24px; padding-top: 24px; border-top: 1px solid #657b6655; }
#faq .gw-faq-copy h4 { margin: 0 0 12px; color: var(--ticket-ink); font-size: 1rem; line-height: 1.5; }
#faq .gw-faq-copy p { margin: 0 0 12px; }
#faq .gw-faq-copy p:last-child { margin-bottom: 0; }
#faq .gw-faq-copy a { color: inherit; text-decoration: underline; font-weight: 700; }
#faq button:focus-visible, #faq input:focus-visible, #faq select:focus-visible { outline: 3px solid #172c22; outline-offset: 3px; }
#faq .gw-faq-trigger:focus-visible { outline-offset: -7px; }
@media (hover: hover) { #faq .gw-faq-trigger:hover .gw-ticket-title { text-decoration: underline; text-underline-offset: 5px; } }
@media (max-width: 600px) {
  #faq.gw-faq { padding: 48px 14px 0; }
  #faq .gw-faq-heading { margin-bottom: 32px; }
  #faq.gw-faq-ready .gw-faq-card.is-open { margin-inline: 0; }
  #faq.gw-faq-ready .gw-faq-card + .gw-faq-card { margin-top: -18px; }
  #faq.gw-faq-ready .gw-faq-card.is-open, #faq.gw-faq-ready .gw-faq-card.is-open + .gw-faq-card { margin-top: 14px; }
  #faq.gw-faq-ready .gw-faq-card.is-open:first-child { margin-top: 0; }
  #faq .gw-faq-trigger { min-height: 156px; padding: 22px 18px 28px; gap: 18px; }
  #faq .gw-ticket-topline { font-size: .6rem; gap: 8px; }
  #faq .gw-ticket-meta { font-size: .6rem; gap: 8px; }
  #faq .gw-faq-body { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #faq { scroll-behavior: auto; }
  #faq *, #faq *::before, #faq *::after { transition: none !important; animation: none !important; }
}

#faq .gw-booking-widget * {
  box-sizing:border-box;
}
#faq .gw-booking-widget {
  width:100%;
  max-width:760px;
  margin:0 auto;
  font-family:Montserrat, Arial, sans-serif;
  color:#66766c;
}
#faq .gw-booking-widget .gw-title {
  background:#66766c;
  color:white;
  border-radius:999px;
  padding:11px 14px;
  text-align:center;
  font-size:11pt;
  font-weight:700;
  margin-bottom:10px;
}
#faq .gw-booking-widget #gw-formView,
#faq .gw-booking-widget #gw-resultView {
  width:100%;
}
#faq .gw-booking-widget #gw-resultView {
  display:none;
}
#faq .gw-booking-widget .field {
  margin-bottom:8px;
}
#faq .gw-booking-widget .field label:not(.check-toggle) {
  display:block;
  margin:0 0 3px 4px;
  font-size:8.5pt;
  font-weight:700;
}
#faq .gw-booking-widget select,
#faq .gw-booking-widget input[type="date"] {
  width:100%;
  height:39px;
  border:1px solid rgba(102,118,108,.35);
  border-radius:999px;
  padding:0 12px;
  background:white;
  color:#3f4541;
  font-family:Montserrat, Arial, sans-serif;
  font-size:15px;
  outline:none;
}
#faq .gw-booking-widget select:focus,
#faq .gw-booking-widget input[type="date"]:focus {
  border:2px solid #66766c;
}
#faq .gw-booking-widget .date-field {
  width:190px;
  max-width:100%;
}
#faq .gw-booking-widget .date-field input[type="date"] {
  width:190px;
  max-width:100%;
}
#faq .gw-booking-widget .check-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-size:8.5pt;
  font-weight:600;
  color:#66766c;
}
#faq .gw-booking-widget .nonstop-toggle {
  margin:0 0 8px 3px;
}
#faq .gw-booking-widget .nextday-toggle {
  margin:5px 0 0 3px;
}
#faq .gw-booking-widget .check-toggle input {
  display:none;
}
#faq .gw-booking-widget .toggle-box {
  width:18px;
  height:18px;
  border:2px solid #66766c;
  border-radius:5px;
  position:relative;
  flex-shrink:0;
}
#faq .gw-booking-widget .check-toggle input:checked + .toggle-box {
  background:#66766c;
}
#faq .gw-booking-widget .check-toggle input:checked + .toggle-box::after {
  content:"✓";
  position:absolute;
  left:2px;
  top:-3px;
  color:white;
  font-size:13px;
  font-weight:700;
}
#faq .gw-booking-widget #gw-calculateButton,
#faq .gw-booking-widget .secondary-button,
#faq .gw-booking-widget .details-button {
  display:block;
  margin-left:auto;
  margin-right:auto;
  border:0;
  border-radius:999px;
  font-family:Montserrat, Arial, sans-serif;
  font-weight:700;
  cursor:pointer;
}
#faq .gw-booking-widget #gw-calculateButton {
  margin-top:10px;
  padding:10px 18px;
  background:#66766c;
  color:white;
  font-size:9.5pt;
}
#faq .gw-booking-widget .secondary-button {
  margin-top:10px;
  padding:9px 15px;
  background:rgba(102,118,108,.12);
  color:#66766c;
  font-size:8.5pt;
}
#faq .gw-booking-widget .details-button {
  margin-top:9px;
  padding:8px 14px;
  background:transparent;
  color:#66766c;
  border:1px solid rgba(102,118,108,.28);
  font-size:8.5pt;
}
#faq .gw-booking-widget .error-message {
  display:none;
  margin-top:7px;
  color:#8b4c4c;
  font-size:8.5pt;
  font-weight:600;
  text-align:center;
}
#faq .gw-booking-widget .result-view {
  text-align:center;
  padding:1px 4px 0;
}
#faq .gw-booking-widget .route-summary {
  margin-bottom:6px;
  font-size:9pt;
  font-weight:700;
}
#faq .gw-booking-widget .result-label {
  font-size:8.5pt;
  font-weight:600;
  margin-bottom:3px;
}
#faq .gw-booking-widget .main-result {
  font-size:14pt;
  font-weight:700;
  line-height:1.2;
}
#faq .gw-booking-widget .local-note {
  margin-top:3px;
  font-size:7.5pt;
  opacity:.78;
}
#faq .gw-booking-widget .window-type {
  display:inline-block;
  margin-top:6px;
  padding:5px 9px;
  background:rgba(102,118,108,.12);
  border-radius:999px;
  font-size:7.5pt;
  font-weight:700;
}
#faq .gw-booking-widget .countdown-wrap {
  display:none;
  max-width:320px;
  margin:8px auto 0;
  padding:8px 10px;
  background:rgba(102,118,108,.09);
  border:1px solid rgba(102,118,108,.22);
  border-radius:13px;
}
#faq .gw-booking-widget .countdown-label {
  font-size:7.5pt;
  font-weight:600;
  margin-bottom:2px;
}
#faq .gw-booking-widget .countdown-display {
  font-size:12pt;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
#faq .gw-booking-widget .status-message,
#faq .gw-booking-widget .notice {
  max-width:520px;
  margin:8px auto 0;
  padding:8px 10px;
  border-radius:10px;
  font-size:8pt;
  line-height:1.35;
  text-align:left;
}
#faq .gw-booking-widget .status-early {
  background:#f7f3e8;
  border:1px solid #ddd0a9;
  color:#655d48;
}
#faq .gw-booking-widget .status-open {
  background:rgba(102,118,108,.10);
  border:1px solid rgba(102,118,108,.25);
  color:#66766c;
}
#faq .gw-booking-widget .notice {
  display:none;
}
#faq .gw-booking-widget .blackout-notice {
  background:#f7eee8;
  border:1px solid #ddc4b3;
  color:#765847;
}
#faq .gw-booking-widget .unpublished-notice {
  background:#f7f3e8;
  border:1px solid #ddd0a9;
  color:#655d48;
}
#faq .gw-booking-widget .segment-results {
  display:none;
  max-width:520px;
  margin:8px auto 0;
  padding-top:8px;
  border-top:1px solid rgba(102,118,108,.18);
  text-align:left;
  font-size:8pt;
  line-height:1.45;
}
@media(min-width:700px) {
#faq .gw-booking-widget #gw-formView {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
  }
#faq .gw-booking-widget .nonstop-toggle,
#faq .gw-booking-widget #gw-calculateButton,
#faq .gw-booking-widget .error-message {
    grid-column:1 / -1;
  }
#faq .gw-booking-widget .date-field {
    width:190px;
  }
#faq .gw-booking-widget .gw-title {
    font-size:12pt;
  }
#faq .gw-booking-widget .main-result {
    font-size:16pt;
  }
}
@media(max-width:400px) {
#faq .gw-booking-widget .date-field,
#faq .gw-booking-widget .date-field input[type="date"] {
    width:175px;
  }

}

/* Native widget refinements and accessible controls. */
#faq .gw-booking-widget { max-width: none; margin: 24px 0 0; padding: 22px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.84); color: var(--green-dark); }
#faq .gw-booking-widget .field { min-width: 0; }
#faq .gw-booking-widget select, #faq .gw-booking-widget input[type="date"] { min-width: 0; height: 44px; font-size: 16px; }
#faq .gw-booking-widget .check-toggle input { display: block; position: absolute; opacity: 0; width: 18px; height: 18px; }
#faq .gw-booking-widget .check-toggle input:focus-visible + .toggle-box { outline: 3px solid #354d3d; outline-offset: 3px; }
#faq .gw-booking-widget .field label:not(.check-toggle), #faq .gw-booking-widget .check-toggle { font-size: .82rem; }
#faq .gw-booking-widget button { min-height: 44px; font-size: .85rem; }
#faq .gw-booking-widget .local-note, #faq .gw-booking-widget .window-type, #faq .gw-booking-widget .result-label, #faq .gw-booking-widget .status-message, #faq .gw-booking-widget .notice, #faq .gw-booking-widget .segment-results { font-size: .82rem; }
@media (max-width: 600px) { #faq .gw-booking-widget { padding: 16px; } }

#faq .gw-booking-widget .check-toggle input { position: static; opacity: 1; margin: 0; flex: 0 0 18px; accent-color: #66766c; }
#faq .gw-booking-widget .toggle-box { display: none; }
/* =========================================
   MOBILE HELPFUL TOOLS — EQUAL CARD SIZES
   ========================================= */

@media (max-width: 600px) {

  .helpful-tool-card {
    height: 150px;
    min-height: 150px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

}
/* =========================================
   HELPFUL TOOLS MODAL
   ========================================= */

.tool-modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 9999;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.tool-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tool-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(24, 34, 28, 0.56);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tool-modal-window {
  position: relative;

  width: min(900px, 100%);
  max-height: calc(100vh - 40px);

  overflow: hidden;

  border-radius: 28px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.4);

  box-shadow:
    0 28px 70px rgba(25, 37, 29, 0.28);

  z-index: 1;
}

.tool-modal-inner {
  max-height: calc(100vh - 40px);

  overflow-y: auto;

  padding: 26px;
}

.tool-modal-title {
  margin-bottom: 18px;

  padding-right: 50px;

  font-size: 22px;
  font-weight: 700;

  color: #26332b;
}

.tool-modal-close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 999px;

  background: rgba(102, 118, 108, 0.12);

  color: #26332b;

  font-size: 28px;
  line-height: 1;

  cursor: pointer;

  z-index: 3;
}

.tool-modal-close:hover {
  background: rgba(102, 118, 108, 0.2);
}

body.tool-modal-open {
  overflow: hidden;
}


/* =========================================
   MOBILE MODAL
   ========================================= */

@media (max-width: 600px) {

  .tool-modal {
    padding: 10px;
  }

  .tool-modal-window {
    width: 100%;

    max-height: calc(100vh - 20px);

    border-radius: 22px;
  }

  .tool-modal-inner {
    max-height: calc(100vh - 20px);

    padding: 20px 14px 18px;
  }

  .tool-modal-title {
    font-size: 19px;

    margin-bottom: 15px;
  }

  .tool-modal-close {
    top: 10px;
    right: 10px;

    width: 40px;
    height: 40px;
  }

}
/* =========================================
   FRONTIER CARD ANALYZER
   ========================================= */

.f9-card-miles-tool {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;

  color: #66766c;
}


/* INTRO */

.f9-card-miles-tool .intro-card {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 12px 14px;
  margin-bottom: 12px;

  border: 1px solid rgba(102, 118, 108, 0.18);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.72);
}

.f9-card-miles-tool .intro-copy {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}


/* SPEND CARDS */

.f9-card-miles-tool .spend-card {
  padding: 13px 14px;
  margin-bottom: 10px;

  border: 1px solid rgba(102, 118, 108, 0.2);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.82);
}

.f9-card-miles-tool .spend-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 12px;

  margin-bottom: 8px;
}

.f9-card-miles-tool .spend-title {
  font-size: 14px;
  font-weight: 700;

  color: #26332b;
}

.f9-card-miles-tool .rate-pill {
  display: inline-block;

  margin-top: 4px;
  padding: 4px 8px;

  border-radius: 999px;

  background: rgba(102, 118, 108, 0.1);

  font-size: 11px;
  font-weight: 700;
}

.f9-card-miles-tool .miles-preview {
  white-space: nowrap;

  font-size: 13px;
  font-weight: 700;

  color: #26332b;
}


/* SLIDERS */

.f9-card-miles-tool .spend-slider {
  --pct: 0%;

  width: 100%;
  height: 24px;

  appearance: none;
  -webkit-appearance: none;

  background: transparent;

  cursor: pointer;
}

.f9-card-miles-tool .spend-slider::-webkit-slider-runnable-track {
  height: 7px;

  border-radius: 999px;

  background:
    linear-gradient(
      to right,
      #66766c 0%,
      #66766c var(--pct),
      rgba(102, 118, 108, 0.15) var(--pct),
      rgba(102, 118, 108, 0.15) 100%
    );
}

.f9-card-miles-tool .spend-slider::-webkit-slider-thumb {
  -webkit-appearance: none;

  width: 20px;
  height: 20px;

  margin-top: -6.5px;

  border-radius: 50%;
  border: 3px solid #fff;

  background: #66766c;

  box-shadow:
    0 0 0 1px rgba(102, 118, 108, 0.25);
}

.f9-card-miles-tool .spend-slider::-moz-range-track {
  height: 7px;

  border-radius: 999px;

  background: rgba(102, 118, 108, 0.15);
}

.f9-card-miles-tool .spend-slider::-moz-range-progress {
  height: 7px;

  border-radius: 999px;

  background: #66766c;
}

.f9-card-miles-tool .spend-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;

  border-radius: 50%;
  border: 3px solid #fff;

  background: #66766c;
}

.f9-card-miles-tool .slider-bottom {
  display: flex;
  justify-content: space-between;

  margin-top: 2px;

  font-size: 11px;

  opacity: 0.75;
}


/* MANUAL ENTRY */

.f9-card-miles-tool .manual-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 8px;

  margin-top: 6px;

  font-size: 12px;
}

.f9-card-miles-tool .amount-entry {
  display: inline-flex;
  align-items: center;

  gap: 3px;

  font-weight: 600;
}

.f9-card-miles-tool .amount-entry input {
  width: 92px;
  height: 34px;

  border: 1px solid rgba(102, 118, 108, 0.25);
  border-radius: 9px;

  padding: 0 8px;

  font: inherit;
  font-size: 13px;

  color: #26332b;

  background: #fff;

  outline: none;
}

.f9-card-miles-tool .amount-entry input:focus {
  border-color: #66766c;

  box-shadow:
    0 0 0 2px rgba(102, 118, 108, 0.08);
}


/* RESULTS */

.f9-card-miles-tool .results-card {
  margin-top: 14px;

  padding: 18px 16px;

  text-align: center;

  background: rgba(102, 118, 108, 0.08);

  border: 1px solid rgba(102, 118, 108, 0.18);
  border-radius: 18px;
}

.f9-card-miles-tool .results-label {
  font-size: 12px;
  font-weight: 600;

  margin-bottom: 4px;
}

.f9-card-miles-tool .total-miles {
  font-size: 28px;
  font-weight: 700;

  line-height: 1.2;

  color: #26332b;
}

.f9-card-miles-tool .award-flights {
  margin-top: 9px;

  font-size: 16px;
  font-weight: 700;

  color: #26332b;
}

.f9-card-miles-tool .award-remainder {
  margin-top: 4px;

  font-size: 12px;

  opacity: 0.82;
}

.f9-card-miles-tool .results-divider {
  width: 100%;
  height: 1px;

  margin: 14px 0 10px;

  background: rgba(102, 118, 108, 0.18);
}

.f9-card-miles-tool .secondary-result {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;

  padding: 5px 0;

  text-align: left;

  font-size: 13px;
}


/* FOOTNOTE */

.f9-card-miles-tool .footnote {
  margin-top: 11px;

  padding: 10px 12px;

  border-radius: 13px;

  background: rgba(102, 118, 108, 0.05);

  font-size: 11px;
  line-height: 1.55;
}


/* =========================================
   FRONTIER CARD ANALYZER — MOBILE
   ========================================= */

@media (max-width: 600px) {

  .f9-card-miles-tool .intro-card {
    padding: 10px 11px;
  }

  .f9-card-miles-tool .intro-copy {
    font-size: 12px;
  }

  .f9-card-miles-tool .spend-card {
    padding: 11px;
    margin-bottom: 8px;
  }

  .f9-card-miles-tool .spend-title {
    font-size: 13px;
  }

  .f9-card-miles-tool .miles-preview {
    font-size: 12px;
  }

  .f9-card-miles-tool .manual-row {
    font-size: 11px;
  }

  .f9-card-miles-tool .amount-entry input {
    width: 82px;
    height: 32px;
  }

  .f9-card-miles-tool .results-card {
    padding: 15px 12px;
  }

  .f9-card-miles-tool .total-miles {
    font-size: 23px;
  }

  .f9-card-miles-tool .award-flights {
    font-size: 14px;
  }

  .f9-card-miles-tool .secondary-result {
    font-size: 12px;
  }

}

/* =========================================
   MODAL HELPFUL TOOLS — CONSOLIDATED WIDGET STYLES
   Added for tools.js v3
   ========================================= */

.tool-modal-content .tool-booking-timeline * {box-sizing:border-box;}
.tool-modal-content .tool-booking-timeline {width:100%;
  max-width:760px;
  margin:0 auto;
  font-family:Montserrat, Arial, sans-serif;
  color:#66766c;}
.tool-modal-content .tool-booking-timeline .gw-title {background:#66766c;
  color:white;
  border-radius:999px;
  padding:11px 14px;
  text-align:center;
  font-size:11pt;
  font-weight:700;
  margin-bottom:10px;}
.tool-modal-content .tool-booking-timeline #formView,
.tool-modal-content .tool-booking-timeline #resultView {width:100%;}
.tool-modal-content .tool-booking-timeline #resultView {display:none;}
.tool-modal-content .tool-booking-timeline .field {margin-bottom:8px;}
.tool-modal-content .tool-booking-timeline .field label:not(.check-toggle) {display:block;
  margin:0 0 3px 4px;
  font-size:8.5pt;
  font-weight:700;}
.tool-modal-content .tool-booking-timeline select,
.tool-modal-content .tool-booking-timeline input[type="date"] {width:100%;
  height:39px;
  border:1px solid rgba(102,118,108,.35);
  border-radius:999px;
  padding:0 12px;
  background:white;
  color:#3f4541;
  font-family:Montserrat, Arial, sans-serif;
  font-size:15px;
  outline:none;}
.tool-modal-content .tool-booking-timeline select:focus,
.tool-modal-content .tool-booking-timeline input[type="date"]:focus {border:2px solid #66766c;}
/* ===== COMPACT DATE FIELD ===== */
.tool-modal-content .tool-booking-timeline .date-field {width:190px;
  max-width:100%;}
.tool-modal-content .tool-booking-timeline .date-field input[type="date"] {width:190px;
  max-width:100%;}
/* ===== CHECKBOXES ===== */
.tool-modal-content .tool-booking-timeline .check-toggle {display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-size:8.5pt;
  font-weight:600;
  color:#66766c;}
.tool-modal-content .tool-booking-timeline .nonstop-toggle {margin:0 0 8px 3px;}
.tool-modal-content .tool-booking-timeline .nextday-toggle {margin:5px 0 0 3px;}
.tool-modal-content .tool-booking-timeline .check-toggle input {display:none;}
.tool-modal-content .tool-booking-timeline .toggle-box {width:18px;
  height:18px;
  border:2px solid #66766c;
  border-radius:5px;
  position:relative;
  flex-shrink:0;}
.tool-modal-content .tool-booking-timeline .check-toggle input:checked + .toggle-box {background:#66766c;}
.tool-modal-content .tool-booking-timeline .check-toggle input:checked + .toggle-box::after {content:"✓";
  position:absolute;
  left:2px;
  top:-3px;
  color:white;
  font-size:13px;
  font-weight:700;}
/* ===== BUTTONS ===== */
.tool-modal-content .tool-booking-timeline #calculateButton,
.tool-modal-content .tool-booking-timeline .secondary-button,
.tool-modal-content .tool-booking-timeline .details-button {display:block;
  margin-left:auto;
  margin-right:auto;
  border:0;
  border-radius:999px;
  font-family:Montserrat, Arial, sans-serif;
  font-weight:700;
  cursor:pointer;}
.tool-modal-content .tool-booking-timeline #calculateButton {margin-top:10px;
  padding:10px 18px;
  background:#66766c;
  color:white;
  font-size:9.5pt;}
.tool-modal-content .tool-booking-timeline .secondary-button {margin-top:10px;
  padding:9px 15px;
  background:rgba(102,118,108,.12);
  color:#66766c;
  font-size:8.5pt;}
.tool-modal-content .tool-booking-timeline .details-button {margin-top:9px;
  padding:8px 14px;
  background:transparent;
  color:#66766c;
  border:1px solid rgba(102,118,108,.28);
  font-size:8.5pt;}
/* ===== ERRORS ===== */
.tool-modal-content .tool-booking-timeline .error-message {display:none;
  margin-top:7px;
  color:#8b4c4c;
  font-size:8.5pt;
  font-weight:600;
  text-align:center;}
/* ===== RESULTS ===== */
.tool-modal-content .tool-booking-timeline .result-view {text-align:center;
  padding:1px 4px 0;}
.tool-modal-content .tool-booking-timeline .route-summary {margin-bottom:6px;
  font-size:9pt;
  font-weight:700;}
.tool-modal-content .tool-booking-timeline .result-label {font-size:8.5pt;
  font-weight:600;
  margin-bottom:3px;}
.tool-modal-content .tool-booking-timeline .main-result {font-size:14pt;
  font-weight:700;
  line-height:1.2;}
.tool-modal-content .tool-booking-timeline .local-note {margin-top:3px;
  font-size:7.5pt;
  opacity:.78;}
.tool-modal-content .tool-booking-timeline .window-type {display:inline-block;
  margin-top:6px;
  padding:5px 9px;
  background:rgba(102,118,108,.12);
  border-radius:999px;
  font-size:7.5pt;
  font-weight:700;}
/* ===== COUNTDOWN ===== */
.tool-modal-content .tool-booking-timeline .countdown-wrap {display:none;
  max-width:320px;
  margin:8px auto 0;
  padding:8px 10px;
  background:rgba(102,118,108,.09);
  border:1px solid rgba(102,118,108,.22);
  border-radius:13px;}
.tool-modal-content .tool-booking-timeline .countdown-label {font-size:7.5pt;
  font-weight:600;
  margin-bottom:2px;}
.tool-modal-content .tool-booking-timeline .countdown-display {font-size:12pt;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;}
/* ===== STATUS ===== */
.tool-modal-content .tool-booking-timeline .status-message,
.tool-modal-content .tool-booking-timeline .notice {max-width:520px;
  margin:8px auto 0;
  padding:8px 10px;
  border-radius:10px;
  font-size:8pt;
  line-height:1.35;
  text-align:left;}
.tool-modal-content .tool-booking-timeline .status-early {background:#f7f3e8;
  border:1px solid #ddd0a9;
  color:#655d48;}
.tool-modal-content .tool-booking-timeline .status-open {background:rgba(102,118,108,.10);
  border:1px solid rgba(102,118,108,.25);
  color:#66766c;}
.tool-modal-content .tool-booking-timeline .notice {display:none;}
.tool-modal-content .tool-booking-timeline .blackout-notice {background:#f7eee8;
  border:1px solid #ddc4b3;
  color:#765847;}
.tool-modal-content .tool-booking-timeline .unpublished-notice {background:#f7f3e8;
  border:1px solid #ddd0a9;
  color:#655d48;}
/* ===== DETAILS ===== */
.tool-modal-content .tool-booking-timeline .segment-results {display:none;
  max-width:520px;
  margin:8px auto 0;
  padding-top:8px;
  border-top:1px solid rgba(102,118,108,.18);
  text-align:left;
  font-size:8pt;
  line-height:1.45;}
/* ===== DESKTOP ===== */
@media (min-width:700px) {
.tool-modal-content .tool-booking-timeline #formView {display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;}
.tool-modal-content .tool-booking-timeline .nonstop-toggle,
.tool-modal-content .tool-booking-timeline #calculateButton,
.tool-modal-content .tool-booking-timeline .error-message {grid-column:1 / -1;}
.tool-modal-content .tool-booking-timeline .date-field {width:190px;}
.tool-modal-content .tool-booking-timeline .gw-title {font-size:12pt;}
.tool-modal-content .tool-booking-timeline .main-result {font-size:16pt;}
}
/* ===== VERY SMALL PHONES ===== */
@media (max-width:400px) {
.tool-modal-content .tool-booking-timeline .date-field,
.tool-modal-content .tool-booking-timeline .date-field input[type="date"] {width:175px;}
}

.tool-modal-content .f9-status-tool * {box-sizing:border-box;}
.tool-modal-content .f9-status-tool {width:100%;
  max-width:820px;
  margin:0 auto;
  font-family:Montserrat,Arial,sans-serif;
  color:#66766c;}
.tool-modal-content .f9-status-tool .tool-title {background:#66766c;
  color:#fff;
  border-radius:999px;
  padding:13px 18px;
  text-align:center;
  font-size:12pt;
  font-weight:700;
  margin-bottom:14px;}
/* =========================
   SETUP
   ========================= */
.tool-modal-content .f9-status-tool #mixerView {display:none;}
.tool-modal-content .f9-status-tool .setup-grid {display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;}
.tool-modal-content .f9-status-tool .field label {display:block;
  margin:0 0 4px 5px;
  font-size:8.5pt;
  font-weight:700;}
.tool-modal-content .f9-status-tool select,
.tool-modal-content .f9-status-tool .field input[type="number"] {width:100%;
  height:42px;
  border:1px solid rgba(102,118,108,.35);
  border-radius:999px;
  background:#fff;
  color:#3e4541;
  padding:0 13px;
  font-family:Montserrat,Arial,sans-serif;
  font-size:10pt;
  outline:none;}
.tool-modal-content .f9-status-tool select:focus,
.tool-modal-content .f9-status-tool .field input:focus {border:2px solid #66766c;}
/* =========================
   MASTERCARD SELECTOR
   ========================= */
.tool-modal-content .f9-status-tool .mastercard-selector {display:flex;
  align-items:center;
  gap:14px;

  width:fit-content;
  max-width:100%;

  margin-top:14px;
  padding:10px 14px;

  background:#fff;

  border:1px solid rgba(102,118,108,.20);
  border-radius:16px;}
.tool-modal-content .f9-status-tool .mastercard-image {display:block;
  width:110px;
  height:auto;
  flex-shrink:0;
  border-radius:8px;}
.tool-modal-content .f9-status-tool .card-toggle {display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:9pt;
  font-weight:600;
  line-height:1.35;
  color:#66766c;}
.tool-modal-content .f9-status-tool .card-toggle input {position:absolute;
  opacity:0;
  pointer-events:none;}
.tool-modal-content .f9-status-tool .card-toggle-text {display:flex;
  flex-direction:column;}
.tool-modal-content .f9-status-tool .check-box {width:20px;
  height:20px;
  border:2px solid #66766c;
  border-radius:50%;
  background:#fff;
  flex-shrink:0;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;}
.tool-modal-content .f9-status-tool .card-toggle input:checked + .check-box {background:#66766c;
  border-color:#66766c;}
.tool-modal-content .f9-status-tool .card-toggle input:focus-visible + .check-box {box-shadow:0 0 0 3px rgba(102,118,108,.20);}
/* =========================
   YEAR
   ========================= */
.tool-modal-content .f9-status-tool .year-card {margin-top:13px;
  padding:10px 13px;
  background:rgba(102,118,108,.08);
  border:1px solid rgba(102,118,108,.18);
  border-radius:13px;
  font-size:8.5pt;
  line-height:1.45;}
.tool-modal-content .f9-status-tool .year-name {font-weight:700;}
.tool-modal-content .f9-status-tool .dot {margin:0 4px;}
.tool-modal-content .f9-status-tool .threshold-summary {margin-top:3px;
  font-size:7.8pt;
  opacity:.85;}
.tool-modal-content .f9-status-tool .error-message {display:none;
  margin-top:9px;
  color:#b84f4f;
  font-size:8.5pt;
  font-weight:600;
  text-align:center;}
/* =========================
   BUTTONS
   ========================= */
.tool-modal-content .f9-status-tool .primary-button,
.tool-modal-content .f9-status-tool .small-button {border:0;
  border-radius:999px;
  font-family:Montserrat,Arial,sans-serif;
  font-weight:700;
  cursor:pointer;}
.tool-modal-content .f9-status-tool .primary-button {display:block;
  margin:14px auto 0;
  padding:11px 20px;
  background:#66766c;
  color:#fff;
  font-size:9.5pt;}
.tool-modal-content .f9-status-tool .small-button {padding:9px 14px;
  background:rgba(102,118,108,.11);
  color:#66766c;
  font-size:8pt;}
.tool-modal-content .f9-status-tool .primary-button:hover,
.tool-modal-content .f9-status-tool .small-button:hover {opacity:.88;}
/* =========================
   GOAL
   ========================= */
.tool-modal-content .f9-status-tool .goal-summary {text-align:center;
  margin-bottom:13px;}
.tool-modal-content .f9-status-tool .goal-label {font-size:8pt;
  font-weight:600;}
.tool-modal-content .f9-status-tool .goal-name {margin-top:2px;
  font-size:17pt;
  font-weight:700;}
.tool-modal-content .f9-status-tool .points-needed {margin-top:3px;
  font-size:8.5pt;
  font-weight:600;}
/* =========================
   PROGRESS
   ========================= */
.tool-modal-content .f9-status-tool .progress-area {margin-bottom:12px;}
.tool-modal-content .f9-status-tool .progress-header {display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:5px;
  font-size:8pt;}
.tool-modal-content .f9-status-tool .progress-track {width:100%;
  height:11px;
  background:rgba(102,118,108,.12);
  border-radius:999px;
  overflow:hidden;}
.tool-modal-content .f9-status-tool .progress-fill {width:0%;
  height:100%;
  background:#b84f4f;
  border-radius:999px;

  transition:
    width .18s ease,
    background .18s ease;}
.tool-modal-content .f9-status-tool .progress-message {margin-top:5px;
  text-align:right;
  font-size:8pt;
  font-weight:700;}
.tool-modal-content .f9-status-tool .progress-message.short {color:#b84f4f;}
.tool-modal-content .f9-status-tool .progress-message.complete {color:#66766c;}
/* =========================
   SPEND CARDS
   ========================= */
.tool-modal-content .f9-status-tool .spend-card {padding:11px 13px;
  margin-bottom:9px;
  border:1px solid rgba(102,118,108,.20);
  border-radius:14px;
  background:#fff;}
.tool-modal-content .f9-status-tool .spend-heading {display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;}
.tool-modal-content .f9-status-tool .spend-title {font-size:9.5pt;
  font-weight:700;}
.tool-modal-content .f9-status-tool .rate-text {margin-top:2px;
  font-size:7.5pt;
  opacity:.78;}
.tool-modal-content .f9-status-tool .spend-value-group {display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font-size:9pt;}
.tool-modal-content .f9-status-tool .mode-pill {display:inline-block;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(102,118,108,.10);
  font-size:6.5pt;
  font-weight:700;
  letter-spacing:.4px;}
.tool-modal-content .f9-status-tool .mode-pill.locked {background:#66766c;
  color:#fff;}
/* =========================
   SLIDERS
   ========================= */
.tool-modal-content .f9-status-tool .spend-slider {width:100%;
  cursor:pointer;
  accent-color:#66766c;}
.tool-modal-content .f9-status-tool .slider-bottom {display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:3px;
  font-size:7pt;
  opacity:.82;}
.tool-modal-content .f9-status-tool .manual-row {display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:7pt;}
.tool-modal-content .f9-status-tool .amount-entry {display:inline-flex;
  align-items:center;
  gap:2px;
  font-weight:600;}
.tool-modal-content .f9-status-tool .amount-entry input {width:86px;
  height:29px;
  padding:0 6px;
  border:1px solid rgba(102,118,108,.25);
  border-radius:8px;
  font-family:Montserrat,Arial,sans-serif;
  font-size:8pt;
  color:#4b514d;
  outline:none;}
.tool-modal-content .f9-status-tool .amount-entry input:focus {border-color:#66766c;}
/* =========================
   TOTAL
   ========================= */
.tool-modal-content .f9-status-tool .total-card {display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:11px;
  padding:11px 13px;
  background:rgba(102,118,108,.09);
  border-radius:13px;}
.tool-modal-content .f9-status-tool .total-label {font-size:8.5pt;
  font-weight:700;}
.tool-modal-content .f9-status-tool .total-sub {margin-top:2px;
  font-size:7pt;}
.tool-modal-content .f9-status-tool .total-number {white-space:nowrap;
  font-size:15pt;
  font-weight:700;}
/* =========================
   COMPARISON WARNING
   ========================= */
.tool-modal-content .f9-status-tool .comparison-warning {display:none;
  margin-top:10px;
  padding:11px 13px;
  border-radius:13px;
  background:#f7eee8;
  border:1px solid #ddc4b3;
  color:#765847;}
.tool-modal-content .f9-status-tool .comparison-title {font-size:8pt;
  font-weight:700;
  margin-bottom:3px;}
.tool-modal-content .f9-status-tool .comparison-main {font-size:11pt;
  font-weight:700;
  line-height:1.3;}
.tool-modal-content .f9-status-tool .comparison-sub {margin-top:3px;
  font-size:7.5pt;
  line-height:1.4;}
/* =========================
   YEAR FOOTER
   ========================= */
.tool-modal-content .f9-status-tool .mixer-year-card {margin-top:10px;
  padding:9px 11px;
  text-align:center;
  border:1px solid rgba(102,118,108,.18);
  border-radius:12px;
  font-size:7.5pt;}
.tool-modal-content .f9-status-tool .mixer-year-card > span {margin:0 4px;}
.tool-modal-content .f9-status-tool .mixer-thresholds {margin-top:3px;
  opacity:.82;}
/* =========================
   ACTIONS
   ========================= */
.tool-modal-content .f9-status-tool .actions {display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:11px;}
/* =========================
   MOBILE
   ========================= */
@media (max-width:650px) {
.tool-modal-content .f9-status-tool .tool-title {padding:11px 13px;
    margin-bottom:11px;
    font-size:10.5pt;}
.tool-modal-content .f9-status-tool .setup-grid {grid-template-columns:1fr;
    gap:7px;}
.tool-modal-content .f9-status-tool .field label {font-size:8pt;}
.tool-modal-content .f9-status-tool select,
.tool-modal-content .f9-status-tool .field input[type="number"] {height:39px;
    font-size:16px;}
.tool-modal-content .f9-status-tool .mastercard-selector {width:100%;
    gap:10px;
    margin-top:10px;
    padding:9px 10px;}
.tool-modal-content .f9-status-tool .mastercard-image {width:90px;}
.tool-modal-content .f9-status-tool .card-toggle {font-size:8pt;}
.tool-modal-content .f9-status-tool .year-card {margin-top:9px;
    padding:8px 10px;}
.tool-modal-content .f9-status-tool .goal-summary {margin-bottom:9px;}
.tool-modal-content .f9-status-tool .goal-name {font-size:14pt;}
.tool-modal-content .f9-status-tool .spend-card {padding:9px 10px;
    margin-bottom:7px;}
.tool-modal-content .f9-status-tool .spend-heading {margin-bottom:4px;}
.tool-modal-content .f9-status-tool .spend-title {font-size:8.5pt;}
.tool-modal-content .f9-status-tool .rate-text {font-size:7pt;}
.tool-modal-content .f9-status-tool .spend-value-group {font-size:8pt;}
.tool-modal-content .f9-status-tool .amount-entry input {width:76px;}
.tool-modal-content .f9-status-tool .total-card {padding:9px 10px;}
.tool-modal-content .f9-status-tool .total-number {font-size:12pt;}
}
@media (max-width:400px) {
.tool-modal-content .f9-status-tool .mastercard-image {width:76px;}
.tool-modal-content .f9-status-tool .mastercard-selector {gap:8px;}
.tool-modal-content .f9-status-tool .card-toggle {font-size:7.5pt;}
}
/* CUSTOM SLIDER TRACK FOR SUPPORTED BROWSERS */
.tool-modal-content .f9-status-tool .spend-slider {--fill:#b84f4f;
  --pct:0%;
  appearance:none;
  -webkit-appearance:none;
  height:22px;
  background:transparent;}
.tool-modal-content .f9-status-tool .spend-slider::-webkit-slider-runnable-track {height:7px;
  border-radius:999px;
  background:
    linear-gradient(
      to right,
      var(--fill) 0%,
      var(--fill) var(--pct),
      rgba(102,118,108,.15) var(--pct),
      rgba(102,118,108,.15) 100%
    );}
.tool-modal-content .f9-status-tool .spend-slider::-webkit-slider-thumb {-webkit-appearance:none;
  width:20px;
  height:20px;
  margin-top:-6.5px;
  border-radius:50%;
  border:3px solid #fff;
  background:var(--fill);
  box-shadow:0 0 0 1px rgba(102,118,108,.25);}
.tool-modal-content .f9-status-tool .spend-slider::-moz-range-track {height:7px;
  border-radius:999px;
  background:rgba(102,118,108,.15);}
.tool-modal-content .f9-status-tool .spend-slider::-moz-range-progress {height:7px;
  border-radius:999px;
  background:var(--fill);}
.tool-modal-content .f9-status-tool .spend-slider::-moz-range-thumb {width:16px;
  height:16px;
  border-radius:50%;
  border:3px solid #fff;
  background:var(--fill);}

.tool-modal-content .award-booking-tool {--sage:#66766c;--dark:#28382e;--pale:#edf3ee;--line:#dce5de;--ink:#26352b;--muted:#627268;--gold:#d99b43}
.tool-modal-content .award-booking-tool * {box-sizing:border-box}
.tool-modal-content .award-booking-tool {max-width:1060px;margin:auto;padding:12px}
.tool-modal-content .award-booking-tool .award-tool-intro {position:relative;overflow:hidden;min-height:200px;border-radius:25px;background:#64786b url("https://images.unsplash.com/photo-1552564835-07e1379e9708?w=1400&auto=format&fit=crop&q=80") center/cover;color:white;display:flex;align-items:flex-end;padding:26px}
.tool-modal-content .award-booking-tool .award-tool-intro:after {content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,32,23,.77),rgba(17,32,23,.08) 85%)}
.tool-modal-content .award-booking-tool .award-tool-intro {position:relative;z-index:1;max-width:670px}
.tool-modal-content .award-booking-tool .award-tool-eyebrow {font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.tool-modal-content .award-booking-tool .award-tool-intro h1 {font-size:clamp(26px,5vw,45px);line-height:1.08;margin:9px 0}
.tool-modal-content .award-booking-tool .award-tool-intro p {margin:0;font-size:13px;line-height:1.5;max-width:610px}
.tool-modal-content .award-booking-tool .award-panel {background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:0 10px 30px rgba(39,61,45,.07);padding:23px;margin-top:15px}
.tool-modal-content .award-booking-tool .award-panel h2 {font-size:20px;margin:0 0 7px}
.tool-modal-content .award-booking-tool .sub {font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.tool-modal-content .award-booking-tool .grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.tool-modal-content .award-booking-tool .field {display:flex;flex-direction:column;gap:7px}
.tool-modal-content .award-booking-tool .field label {font-size:12px;font-weight:700}
.tool-modal-content .award-booking-tool .field input,
.tool-modal-content .award-booking-tool .field select {height:47px;width:100%;border:1px solid #cbd7ce;border-radius:13px;background:#fff;color:var(--ink);font:600 14px Montserrat,Arial,sans-serif;padding:0 13px;outline-color:var(--sage)}
.tool-modal-content .award-booking-tool .field small,
.tool-modal-content .award-booking-tool .note {font-size:11px;color:var(--muted);line-height:1.45}
.tool-modal-content .award-booking-tool .wide {grid-column:1/-1}
.tool-modal-content .award-booking-tool .checks {display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:13px;background:var(--pale);font-size:12px;font-weight:600}
.tool-modal-content .award-booking-tool .checks input {accent-color:var(--sage);width:18px;height:18px}
.tool-modal-content .award-booking-tool .fee-note {margin:5px 0 0}
.tool-modal-content .award-booking-tool .actions {display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}
.tool-modal-content .award-booking-tool .btn {border:0;border-radius:999px;background:var(--sage);color:#fff;font:700 13px Montserrat,Arial,sans-serif;padding:14px 22px;cursor:pointer}
.tool-modal-content .award-booking-tool .btn:hover {background:#526459}
.tool-modal-content .award-booking-tool .btn.secondary {background:var(--pale);color:var(--sage)}
.tool-modal-content .award-booking-tool .btn:disabled {opacity:.55;cursor:default}
.tool-modal-content .award-booking-tool .result {display:none;margin-top:18px}
.tool-modal-content .award-booking-tool .result.show {display:block}
.tool-modal-content .award-booking-tool .score-cards {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool-modal-content .award-booking-tool .score-card {border-radius:18px;padding:20px;background:var(--pale)}
.tool-modal-content .award-booking-tool .score-card.cash {background:#f5f0e8}
.tool-modal-content .award-booking-tool .score-card .tag {font-size:10px;letter-spacing:.1em;font-weight:800;text-transform:uppercase}
.tool-modal-content .award-booking-tool .score-card strong {display:block;font-size:clamp(25px,4vw,38px);margin:7px 0 2px}
.tool-modal-content .award-booking-tool .score-card .grade {font-weight:800;font-size:15px}
.tool-modal-content .award-booking-tool .score-card p {font-size:11px;line-height:1.5;margin:9px 0 0}
.tool-modal-content .award-booking-tool .rating {display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:13px}
.tool-modal-content .award-booking-tool .rating span {height:7px;border-radius:9px;background:#d9e0da}
.tool-modal-content .award-booking-tool .rating span.on {background:var(--sage)}
.tool-modal-content .award-booking-tool .cash .rating span.on {background:#bf8851}
.tool-modal-content .award-booking-tool .result-meta {font-size:11px;color:var(--muted);line-height:1.5;margin-top:12px}
.tool-modal-content .award-booking-tool .feedback {min-height:16px;margin:10px 0 0;font-size:11px;color:var(--muted)}
.tool-modal-content .award-booking-tool .recent-head {display:flex;align-items:end;justify-content:space-between;gap:15px;flex-wrap:wrap}
.tool-modal-content .award-booking-tool .recent-head h2 {margin-bottom:4px}
.tool-modal-content .award-booking-tool .home-select {max-width:310px}
.tool-modal-content .award-booking-tool .home-select label {display:block;font-size:11px;font-weight:700;margin-bottom:5px}
.tool-modal-content .award-booking-tool .home-select select {height:39px;width:100%;border:1px solid var(--line);border-radius:999px;padding:0 10px;color:var(--ink);font:600 12px Montserrat,Arial,sans-serif;background:white}
.tool-modal-content .award-booking-tool .recent-list {display:flex;gap:12px;overflow-x:auto;padding:3px 2px 12px;scroll-snap-type:x proximity}
.tool-modal-content .award-booking-tool .find {flex:0 0 310px;border:1px solid var(--line);border-radius:19px;overflow:hidden;background:#fff;scroll-snap-align:start}
.tool-modal-content .award-booking-tool .find-photo {height:101px;background:#66766c center/cover;position:relative;display:flex;align-items:flex-end;padding:10px}
.tool-modal-content .award-booking-tool .find-photo:after {content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,21,15,.54),transparent 90%)}
.tool-modal-content .award-booking-tool .find-city {position:relative;z-index:1;color:#fff;font-size:15px;font-weight:800;padding:7px 10px;border:1px solid rgba(255,255,255,.42);border-radius:13px;background:rgba(22,36,27,.24);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.tool-modal-content .award-booking-tool .photo-credit {position:absolute;right:5px;top:4px;z-index:1;background:rgba(15,25,18,.5);color:#fff;border-radius:7px;padding:3px 5px;font-size:8px;text-decoration:none}
.tool-modal-content .award-booking-tool .find-body {padding:14px}
.tool-modal-content .award-booking-tool .find-route {font-size:13px;font-weight:800;line-height:1.35;min-height:35px}
.tool-modal-content .award-booking-tool .find-value {font-size:22px;color:var(--sage);font-weight:800;margin:8px 0 3px}
.tool-modal-content .award-booking-tool .find-value small {font-size:10px;font-weight:600}
.tool-modal-content .award-booking-tool .find-time {font-size:11px;color:var(--muted)}
.tool-modal-content .award-booking-tool .find-fare {margin-top:8px;font-size:10px;color:var(--muted)}
.tool-modal-content .award-booking-tool .fineprint {font-size:10px;color:var(--muted);line-height:1.5;margin:11px 4px 18px}
.tool-modal-content .award-booking-tool .fineprint a {color:var(--sage)}
@media (max-width:650px) {
.tool-modal-content .award-booking-tool {padding:8px}
.tool-modal-content .award-booking-tool .award-tool-intro {min-height:175px;padding:20px}
.tool-modal-content .award-booking-tool .award-panel {padding:17px}
.tool-modal-content .award-booking-tool .grid,
.tool-modal-content .award-booking-tool .score-cards {grid-template-columns:1fr}
.tool-modal-content .award-booking-tool .wide {grid-column:auto}
.tool-modal-content .award-booking-tool .find {flex-basis:280px}
}
.tool-modal-content .award-booking-tool .find-link {display:block;color:inherit;text-decoration:none}
.tool-modal-content .award-booking-tool .find-link:focus-visible {outline:3px solid var(--sage);outline-offset:-3px}
.tool-modal-content .award-booking-tool .route-photos {position:relative;display:grid;grid-template-columns:1fr 1fr;height:134px}
.tool-modal-content .award-booking-tool .route-photos:after {content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:#fff;z-index:2}
.tool-modal-content .award-booking-tool .route-photos .find-photo {height:134px;padding:9px 8px;min-width:0}
.tool-modal-content .award-booking-tool .route-photos .find-city {font-size:11px;line-height:1.3;padding:6px 8px;max-width:100%}
.tool-modal-content .award-booking-tool .find-city span {display:block;font-size:9px;opacity:.9;margin-top:2px}
.tool-modal-content .award-booking-tool .route-plane {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:39px;height:39px;display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:0 2px 9px #172c2633;color:#66766c}
.tool-modal-content .award-booking-tool .route-plane svg {width:22px;height:22px}
.tool-modal-content .award-booking-tool .find-departure {font-size:11px;font-weight:700;margin-top:8px;color:var(--sage)}
.tool-modal-content .award-booking-tool .find-departure.departed {color:#7b7467}
.tool-modal-content .award-booking-tool .find-credits {display:flex;justify-content:space-between;gap:8px;padding:0 12px 9px}
.tool-modal-content .award-booking-tool .find-credits a {font-size:8px;color:var(--muted);text-decoration:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-modal-content .award-booking-tool .find-credits a:hover {text-decoration:underline}
.tool-modal-content .award-booking-tool .carousel-controls {display:flex;justify-content:flex-end;gap:7px;margin:0 0 8px}
.tool-modal-content .award-booking-tool .carousel-controls button {border:1px solid var(--line);background:var(--pale);border-radius:999px;color:var(--sage);font:600 10px Montserrat,Arial,sans-serif;cursor:pointer;padding:7px 12px}
.tool-modal-content .award-booking-tool .carousel-controls button:first-child,
.tool-modal-content .award-booking-tool .carousel-controls button:last-child {font-size:20px;line-height:15px}
.tool-modal-content .award-booking-tool .recent-list {scroll-behavior:smooth}
.tool-modal-content .award-booking-tool .photo-credit {max-width:90%}
@media (prefers-reduced-motion:reduce) {
.tool-modal-content .award-booking-tool .recent-list {scroll-behavior:auto}
}
.tool-modal-content .award-booking-tool .recent-photo-credits {font-size:9px;line-height:1.5;margin:10px 0 0;color:var(--muted)}
.tool-modal-content .award-booking-tool .recent-photo-credits a {color:var(--muted);text-decoration:underline}
.tool-modal-content .award-booking-tool .find-ratings {display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 5px}
.tool-modal-content .award-booking-tool .find-rating {padding:5px 8px;border-radius:999px;font-size:10px;font-weight:700;background:#edf3ee;color:#526459}
.tool-modal-content .award-booking-tool .find-rating[data-level="1"] {background:#f7e9e5;color:#a25342}
.tool-modal-content .award-booking-tool .find-rating[data-level="2"] {background:#f3eee5;color:#826b4e}
.tool-modal-content .award-booking-tool .find-rating[data-level="3"] {background:#eef0e7;color:#69734d}
.tool-modal-content .award-booking-tool .find-rating[data-level="5"],
.tool-modal-content .award-booking-tool .find-rating[data-level="6"] {background:#dfeee1;color:#3d6b46}
.tool-modal-content .award-booking-tool .find-value {display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tool-modal-content .award-booking-tool .find-value .find-rating {font-size:9px;white-space:nowrap}
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="1"] {background:#f6e8e8;color:#B84F4F}
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="2"],
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="3"] {background:#f7f0dc;color:#8a713a}
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="4"],
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="5"],
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="6"] {background:#e8eee9;color:#66766c}
@keyframes phenomenal-pulse {
.tool-modal-content .award-booking-tool 0%,
.tool-modal-content .award-booking-tool 100% {opacity:1;box-shadow:0 0 0 0 rgba(102,118,108,0)}
.tool-modal-content .award-booking-tool 50% {opacity:.68;box-shadow:0 0 0 4px rgba(102,118,108,.12)}
}
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="6"] {animation:phenomenal-pulse 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce) {
.tool-modal-content .award-booking-tool .find-value .find-rating[data-level="6"] {animation:none}
}
.tool-modal-content .award-booking-tool .recommended-pill {display:inline-block;font-size:10px;font-weight:700;padding:6px 10px;margin-bottom:12px;background:#66766c;color:#fff;border-radius:999px}
.tool-modal-content .award-booking-tool .recommended-pill[hidden] {display:none}
.tool-modal-content .award-booking-tool .score-card.recommended {outline:2px solid #66766c;outline-offset:-2px}
.tool-modal-content .award-booking-tool .recommendation {margin-top:13px;padding:13px 16px;border-radius:14px;background:#edf3ee;color:#526459;font-size:13px}
.tool-modal-content .award-booking-tool .recommendation.wait {background:#f7f0dc;color:#8a713a}
.tool-modal-content .award-booking-tool .recommendation p {font-size:11px;line-height:1.45;margin:5px 0 0}
.tool-modal-content .award-booking-tool [hidden] {display:none!important}
.tool-modal-content .award-booking-tool .price-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.tool-modal-content .award-booking-tool .tax-display {padding:14px;background:var(--pale);border-radius:13px;font-size:12px}
.tool-modal-content .award-booking-tool .score-cards {grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tool-modal-content .award-booking-tool .field select:disabled {background:#f3f5f3}
.tool-modal-content .award-booking-tool .flight-tools {display:flex;align-items:center;gap:10px}
.tool-modal-content .award-booking-tool .flight-tools .btn {padding:8px 13px;font-size:11px}
@media (max-width:650px) {
.tool-modal-content .award-booking-tool .price-grid {grid-template-columns:1fr}
}


/* =========================================
   HELPFUL TOOLS — FOUR-TOOL FINAL LAYOUT
   ========================================= */

.tools-simple-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.simple-tool {
  width: 100%;
  min-width: 0;
  min-height: 112px;
  justify-content: flex-start;
}

.simple-tool-title {
  width: min(100%, 205px);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 850px) {
  .tools-simple-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .tools-simple-grid {
    gap: 24px 12px;
  }

  .simple-tool {
    min-height: 126px;
  }

  .simple-tool-title {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
  }

  .simple-tool-description {
    max-width: 180px;
  }
}

/* =========================================
   TOOL MODAL — SHARED POLISH
   ========================================= */

.tool-modal-content {
  width: 100%;
  min-width: 0;
}

.tool-modal-content button,
.tool-modal-content input,
.tool-modal-content select {
  font-family: "Montserrat", sans-serif;
}

.tool-modal-content button:focus-visible,
.tool-modal-content input:focus-visible,
.tool-modal-content select:focus-visible {
  outline: 3px solid rgba(102, 118, 108, 0.28);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .tool-modal-window {
    max-height: calc(100dvh - 20px);
  }

  .tool-modal-inner {
    max-height: calc(100dvh - 20px);
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================
   BOOKING TIMELINE — MODAL OVERRIDES
   ========================================= */

.tool-modal-content .tool-booking-timeline {
  max-width: 760px;
}

.tool-modal-content .tool-booking-timeline .check-toggle input {
  position: static;
  opacity: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: #66766c;
}

.tool-modal-content .tool-booking-timeline .toggle-box {
  display: none;
}

.tool-modal-content .tool-booking-timeline select,
.tool-modal-content .tool-booking-timeline input[type="date"] {
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
}

.tool-modal-content .tool-booking-timeline #calculateButton,
.tool-modal-content .tool-booking-timeline .secondary-button,
.tool-modal-content .tool-booking-timeline .details-button {
  min-height: 44px;
}

@media (max-width: 600px) {
  .tool-modal-content .tool-booking-timeline .date-field,
  .tool-modal-content .tool-booking-timeline .date-field input[type="date"] {
    width: 100%;
  }
}

/* =========================================
   ELITE STATUS CALCULATOR — MODAL OVERRIDES
   ========================================= */

.tool-modal-content .f9-status-tool {
  max-width: 820px;
}

.tool-modal-content .f9-status-tool .card-toggle input {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #66766c;
}

.tool-modal-content .f9-status-tool .check-box {
  display: none;
}

.tool-modal-content .f9-status-tool select,
.tool-modal-content .f9-status-tool .field input[type="number"] {
  min-width: 0;
  font-size: 16px;
}

.tool-modal-content .f9-status-tool button {
  min-height: 42px;
}

@media (max-width: 700px) {
  .tool-modal-content .f9-status-tool .setup-grid {
    grid-template-columns: 1fr;
  }

  .tool-modal-content .f9-status-tool .mastercard-selector {
    width: 100%;
  }

  .tool-modal-content .f9-status-tool .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tool-modal-content .f9-status-tool .actions button {
    width: 100%;
  }
}

/* =========================================
   AWARD BOOKING CALCULATOR — MODAL OVERRIDES
   ========================================= */

.tool-modal-content .award-booking-tool {
  --sage: #66766c;
  --dark: #28382e;
  --pale: #edf3ee;
  --line: #dce5de;
  --ink: #26352b;
  --muted: #627268;
  --gold: #d99b43;

  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  color: var(--ink);
  font-family: "Montserrat", Arial, sans-serif;
}

.tool-modal-content .award-booking-tool .award-tool-intro {
  position: relative;
  min-height: 0;
  margin: 0 0 14px;
  padding: 18px 20px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #66766c, #526158);
  color: #fff;
}

.tool-modal-content .award-booking-tool .award-tool-intro::after {
  display: none;
}

.tool-modal-content .award-booking-tool .award-tool-intro h3 {
  position: relative;
  z-index: 1;
  margin: 5px 0 7px;
  color: #fff;
  font-size: clamp(20px, 4vw, 28px);
}

.tool-modal-content .award-booking-tool .award-tool-intro p,
.tool-modal-content .award-booking-tool .award-tool-eyebrow {
  position: relative;
  z-index: 1;
}

.tool-modal-content .award-booking-tool .award-tool-intro p {
  margin: 0;
  max-width: 680px;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.55;
}

.tool-modal-content .award-booking-tool .award-tool-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tool-modal-content .award-booking-tool .award-panel {
  margin-top: 12px;
}

.tool-modal-content .award-booking-tool .award-panel h3 {
  margin: 0 0 7px;
  font-size: 19px;
}

.tool-modal-content .award-booking-tool input,
.tool-modal-content .award-booking-tool select {
  min-width: 0;
  font-size: 16px;
}

.tool-modal-content .award-booking-tool .recent-list {
  scrollbar-width: thin;
  scrollbar-color: #66766c #edf3ee;
}

@media (max-width: 650px) {
  .tool-modal-content .award-booking-tool .grid,
  .tool-modal-content .award-booking-tool .price-grid {
    grid-template-columns: 1fr;
  }

  .tool-modal-content .award-booking-tool .wide {
    grid-column: 1;
  }

  .tool-modal-content .award-booking-tool .award-panel {
    padding: 16px;
    border-radius: 18px;
  }

  .tool-modal-content .award-booking-tool .recent-head {
    align-items: stretch;
  }

  .tool-modal-content .award-booking-tool .home-select {
    width: 100%;
  }

  .tool-modal-content .award-booking-tool .home-select select {
    width: 100%;
  }

  .tool-modal-content .award-booking-tool .actions .btn {
    width: 100%;
  }
}
/* =========================================
   SUPPORT / BUY ME A COFFEE
   ========================================= */

.support-section {
  padding: 34px 0 48px;
  background: #ffffff;
}

.support-card {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  gap: 16px;

  padding: 18px 20px;

  border: 1px solid rgba(102, 118, 108, 0.20);
  border-radius: 18px;

  background: #ffffff;

  color: #66766c;

  box-shadow:
    0 6px 22px rgba(20, 34, 25, 0.05);
}

.coffee-icon {
  flex-shrink: 0;

  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(102, 118, 108, 0.11);

  font-size: 22px;
}

.support-copy {
  flex: 1;
  min-width: 0;
}

.support-title {
  margin-bottom: 4px;

  color: #354d3d;

  font-size: 0.92rem;
  font-weight: 700;
}

.support-text {
  max-width: 540px;

  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.55;

  color: #6b756e;
}

.coffee-button {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 20px;

  border-radius: 999px;

  background: #66766c;
  color: #ffffff;

  font-size: 0.72rem;
  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.coffee-button:hover {
  transform: translateY(-2px);
  background: #526158;
}

.coffee-button:focus-visible {
  outline: 3px solid rgba(102, 118, 108, 0.25);
  outline-offset: 3px;
}


/* MOBILE */

@media (max-width: 600px) {

  .support-section {
    padding: 26px 0 34px;
  }

  .support-card {
    align-items: flex-start;
    flex-wrap: wrap;

    padding: 16px;
    gap: 12px;
  }

  .coffee-icon {
    width: 40px;
    height: 40px;

    font-size: 19px;
  }

  .support-copy {
    flex: 1 1 calc(100% - 55px);
  }

  .support-title {
    font-size: 0.86rem;
  }

  .support-text {
    font-size: 0.68rem;
  }

  .coffee-button {
    width: 100%;

    padding: 12px 18px;

    font-size: 0.72rem;
  }

}
/* =========================================
   CREDIT CARDS — CAROUSEL
========================================= */

.credit-cards-section {
  position: relative;
  padding: 90px 24px 110px;
  overflow: hidden;
  color: #ffffff;
  background: #0d1713;
  isolation: isolate;
}

.credit-cards-section::before {
  content: "";
  position: absolute;

  inset: -8% -12%;

  z-index: -2;

  background:
    url("images/ccbackground.jpg")
    center center / cover no-repeat;

  animation: credit-card-sky-drift 45s ease-in-out infinite alternate;

  will-change: transform;
}

.credit-cards-section::after {
  content: "";
  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      rgba(8, 16, 13, 0.10),
      rgba(8, 16, 13, 0.20)
    );

  pointer-events: none;
}

@keyframes credit-card-sky-drift {
  from {
    transform: translateX(-2%) scale(1.04);
  }

  to {
    transform: translateX(2%) scale(1.04);
  }
}


/* INNER WRAPPER */

.credit-cards-overlay {
  width: min(100%, 1050px);
  margin: 0 auto;
}


/* HEADING */

.credit-cards-heading {
  max-width: 650px;
  margin: 0 auto 34px;
  text-align: center;
}

.credit-cards-kicker {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.68;
}

.credit-cards-heading h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 800;
}

.credit-cards-heading > p:not(.credit-cards-kicker):not(.credit-cards-disclosure) {
  max-width: 540px;
  margin: 15px auto 0;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.90;
}

.credit-cards-disclosure {
  max-width: 540px;
  margin: 12px auto 0;
  font-size: 9px;
  line-height: 1.45;
  opacity: 0.55;
}


/* CAROUSEL */

.credit-card-carousel {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;

  /* Reserved space for the portion of the card art that floats above the panel. */
  padding: 125px 74px 55px;

  touch-action: pan-y;
}

.credit-card-track {
  position: relative;
  width: 100%;
}


/* SLIDES */

.credit-card-panel {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  min-height: 390px;
  margin: 0 auto;

  /* The image is in normal flow, so it can never cover the title. */
  padding: 0 48px 72px;

  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(24px) scale(0.985);

  transition:
    opacity 0.38s ease,
    transform 0.38s ease,
    visibility 0.38s ease;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 42px;

  background: rgba(18, 27, 23, 0.58);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow: 0 25px 58px rgba(0, 0, 0, 0.25);

  text-align: center;
}

.credit-card-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}


/* PHYSICAL CREDIT CARD IMAGE */

.credit-card-image {
  position: relative;
  top: auto;
  left: auto;

  width: min(70%, 380px);
  max-height: 235px;
  height: auto;

  margin: -110px auto 28px;

  object-fit: contain;
  transform: none;
  z-index: 4;

  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.34));

  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}

.credit-card-panel:hover .credit-card-image {
  transform: translateY(-6px);
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.38));
}


/* CARD TEXT */

.credit-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.credit-card-content h3 {
  margin: 0;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.08;
  font-weight: 800;
}

.credit-card-description {
  max-width: 500px;
  margin: 24px auto 0;
  font-size: 15px;
  line-height: 1.65;
  opacity: 0.92;
}


/* FACTS */

.credit-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
}

.credit-card-facts > div {
  min-width: 0;
  padding: 15px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.credit-card-fact-label {
  display: block;
  margin-bottom: 5px;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.58;
}

.credit-card-facts strong {
  display: block;
  font-size: 12px;
  line-height: 1.3;
}


/* APPLY BUTTON */

.credit-card-button {
  position: absolute;
  left: 50%;
  bottom: -27px;

  transform: translateX(-50%);

  width: min(320px, 72%);
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 24px;
  border-radius: 999px;

  background: #66766c;
  color: #ffffff;
  text-decoration: none;

  font-size: 16px;
  font-weight: 800;

  box-shadow: 0 13px 28px rgba(0, 0, 0, 0.28);

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.credit-card-button:hover {
  transform: translateX(-50%) translateY(-3px);
  background: #73857a;
}

.credit-card-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
}


/* ARROWS */

.credit-card-arrow {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  z-index: 8;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;

  background: rgba(30, 43, 35, 0.50);
  color: #ffffff;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  font-family: inherit;
  font-size: 34px;
  line-height: 1;

  cursor: pointer;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);

  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.credit-card-arrow-prev {
  left: 3px;
}

.credit-card-arrow-next {
  right: 3px;
}

.credit-card-arrow:hover {
  background: rgba(102, 118, 108, 0.78);
  transform: translateY(-50%) scale(1.05);
}

.credit-card-arrow:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.78);
  outline-offset: 3px;
}


/* DOTS */

.credit-card-dots {
  position: absolute;
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.credit-card-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.36);
  cursor: pointer;

  transition:
    width 0.18s ease,
    border-radius 0.18s ease,
    background 0.18s ease;
}

.credit-card-dot.is-active {
  width: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.credit-card-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}


/* MOBILE */

@media (max-width: 700px) {

  .credit-cards-section {
    padding: 68px 14px 92px;
  }

  .credit-cards-heading {
    margin-bottom: 24px;
  }

  .credit-cards-heading h2 {
    font-size: 35px;
  }

  .credit-cards-heading > p:not(.credit-cards-kicker):not(.credit-cards-disclosure) {
    font-size: 14px;
  }

  .credit-card-carousel {
    width: 100%;
    padding: 100px 36px 52px;
  }

  .credit-card-panel {
    min-height: 395px;
    padding: 0 22px 62px;
    border-radius: 30px;
  }

  .credit-card-image {
    width: min(78%, 285px);
    max-height: 185px;
    margin: -82px auto 22px;
  }

  .credit-card-content h3 {
    font-size: 26px;
  }

  .credit-card-description {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.55;
  }

  .credit-card-facts {
    gap: 6px;
    padding-top: 24px;
  }

  .credit-card-facts > div {
    padding: 11px 5px;
  }

  .credit-card-fact-label {
    font-size: 7px;
  }

  .credit-card-facts strong {
    font-size: 10px;
  }

  .credit-card-button {
    bottom: -24px;
    width: 74%;
    min-height: 50px;
    font-size: 14px;
  }

  .credit-card-arrow {
    top: 58%;
    width: 38px;
    height: 38px;
    font-size: 27px;
  }

  .credit-card-arrow-prev {
    left: -1px;
  }

  .credit-card-arrow-next {
    right: -1px;
  }

}


/* VERY SMALL PHONES */

@media (max-width: 390px) {

  .credit-card-carousel {
    padding-left: 30px;
    padding-right: 30px;
  }

  .credit-card-panel {
    padding-left: 16px;
    padding-right: 16px;
  }

  .credit-card-image {
    width: min(80%, 260px);
    margin-top: -74px;
  }

  .credit-card-content h3 {
    font-size: 23px;
  }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .credit-cards-section::before {
    animation: none !important;
    transform: scale(1.04);
  }

  .credit-card-panel,
  .credit-card-image,
  .credit-card-arrow,
  .credit-card-dot,
  .credit-card-button {
    transition: none !important;
  }

}


/* Weather video + conditional FAA notice. Append after the existing CSS. */
.dashboard-weather-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.dashboard-weather-video.is-playing { opacity: 0.58; }
.dashboard-faa-notice[hidden] { display: none !important; }
.dashboard-faa-notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 224, 155, 0.65);
  border-radius: 16px;
  background: rgba(48, 37, 18, 0.82);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-wrap: anywhere;
}
.dashboard-faa-event + .dashboard-faa-event {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.dashboard-faa-event strong {
  display: block;
  font-size: 13px;
  line-height: 1.5;
}
.dashboard-faa-event span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.55;
}
.dashboard-faa-source { margin-top: 10px; font-size: 10px; line-height: 1.5; }
.dashboard-faa-source a { color: inherit; text-decoration: underline; }
@media (max-width: 600px) {
  .dashboard-weather-video.is-playing { opacity: 0.54; }
  .dashboard-faa-notice { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-weather-video { display: none; transition: none; }
}
/* Hero takeoff animation */
.hero-takeoff {
  position: relative;
  height: 100px;
  margin: -12px 0 16px;
  overflow: hidden;
  isolation: isolate;
}

.hero-takeoff-message {
  position: absolute;
  left: 0;
  bottom: 8px;
  color: #fff;
  font-size: clamp(1rem, 3.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  animation: hero-takeoff-reveal 1.65s linear 0.25s both;
}

.hero-takeoff-plane {
  position: absolute;
  left: -180px;
  bottom: 0;
  z-index: 1;
  width: 170px;
  height: auto;
  max-width: none;
  pointer-events: none;
  transform-origin: 65% 50%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
  animation: hero-plane-takeoff 2.4s ease-in-out 0.15s both;
}

@keyframes hero-takeoff-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes hero-plane-takeoff {
  0% {
    left: -180px;
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(0) rotate(0deg);
  }
  55% {
    transform: translateY(-12px) rotate(-12deg);
  }
  100% {
    left: 110%;
    transform: translateY(-70px) rotate(-18deg);
  }
}

@media (max-width: 600px) {
  .hero-takeoff {
    height: 88px;
    margin-top: -8px;
  }

  .hero-takeoff-plane {
    width: 125px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-takeoff {
    height: 38px;
    margin-top: 0;
  }

  .hero-takeoff-message {
    animation: none;
    clip-path: none;
  }

  .hero-takeoff-plane {
    display: none;
    animation: none;
  }
}
/* Shorter hero with overlapping text block */
.hero {
  min-height: 0;
}

.hero-content {
  padding: 20px 0 24px;
}

.hero-copy {
  transform: translateY(20%);
}

@media (max-width: 700px) {
  .hero-content {
    padding: 16px 0 20px;
  }

  .hero-copy {
    transform: translateY(14%);
  }
}
/* Search inside the dashboard, above its heading */
.guide-search {
  position: relative;
  z-index: 3;
  color: white;
  /* Dashboard padding plus this space clears the overlapping hero copy. */
  padding: 44px 0 40px;
  background: transparent;
}
.guide-search-inner {
  max-width: 720px;
  margin: 0 auto;
}

.guide-search-label {
  display: block;
  margin-bottom: 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.guide-search-field {
  display: flex;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.guide-search-field input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: white;
  font: inherit;
  font-size: 16px;
}

.guide-search-field input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.guide-search-field button {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: white;
  color: var(--green-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.guide-search-field input:focus-visible,
.guide-search-field button:focus-visible,
.guide-search-results a:focus-visible {
  outline: 3px solid #b6d3c0;
  outline-offset: 3px;
}

.guide-search-status {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.85rem;
}

.guide-search-status:empty {
  display: none;
}

.guide-search-results {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.guide-search-results li + li {
  margin-top: 8px;
}

.guide-search-results a {
  display: block;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  text-decoration: none;
}

.guide-search-results a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.guide-search-results strong,
.guide-search-results span {
  display: block;
}

.guide-search-results span {
  margin-top: 4px;
  font-size: 0.85rem;
  opacity: 0.85;
}

@media (max-width: 700px) {
  .guide-search {
    padding: 32px 0 28px;
  }

  .guide-search-field input {
    padding: 10px;
  }

  .guide-search-field button {
    padding: 10px 16px;
  }
}
/* Horizontally scrolling hero navigation */
.hero-topic-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding: 6px 4px 12px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

.hero-topic-nav .button {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  white-space: nowrap;
  scroll-snap-align: start;
}

.hero-topic-nav .button:focus-visible {
  outline: 3px solid #b6d3c0;
  outline-offset: 3px;
}

.hero-topic-nav::-webkit-scrollbar {
  height: 5px;
}

.hero-topic-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}

@media (max-width: 700px) {
  .hero-topic-nav .button {
    padding: 11px 18px;
    font-size: 0.85rem;
  }
}
/* =====================================================
   DASHBOARD REFINEMENT
   COMPACT AIRPORT SCORE + GOWILD BOOKING CALENDAR
   ===================================================== */


/* =====================================================
   AIRPORT SCORE — ROUTE SUMMARY
   ===================================================== */

.dashboard-score-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

.dashboard-score-routes {
  max-width: 190px;
  margin-top: 7px;

  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;

  color: rgba(255, 255, 255, 0.82);
}


/* =====================================================
   GOWILD BOOKING CARD
   ===================================================== */

.dashboard-booking-calendar {
  width: min(100%, 900px);
  max-width: 900px;

  margin: 12px auto 0;
  padding: 24px 26px;

  box-sizing: border-box;

  border-radius: 22px;

  background: #ffffff;
  color: #66766c;

  box-shadow:
    0 8px 24px rgba(20, 34, 25, 0.09);
}


/* =====================================================
   BOOKING HEADER
   ===================================================== */

.dashboard-booking-calendar .dashboard-booking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;
}

.dashboard-booking-calendar .dashboard-booking-kicker {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;

  color: #66766c;
}

.dashboard-booking-calendar .dashboard-booking-heading h3 {
  margin: 4px 0;

  color: #4e5851;

  font-size: 20px;
  line-height: 1.2;
}

.dashboard-booking-calendar .dashboard-booking-heading p {
  margin: 0;

  font-size: 10px;
  line-height: 1.4;

  color: #6b756e;
}

.dashboard-booking-calendar .dashboard-booking-button {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 17px;

  border-radius: 999px;

  background: #66766c;
  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;

  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.dashboard-booking-calendar .dashboard-booking-button:hover {
  background: #526158;
  transform: translateY(-1px);
}


/* =====================================================
   BOOKING SUMMARY
   ===================================================== */

.dashboard-booking-summary {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 9px;

  margin-bottom: 16px;
}

.booking-summary-item {
  min-width: 0;

  padding: 12px 13px;

  border:
    1px solid rgba(102, 118, 108, 0.16);

  border-radius: 13px;

  background: #f7f9f7;
}

.booking-summary-label {
  display: block;

  margin-bottom: 5px;

  color: #66766c;

  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.booking-summary-item strong {
  display: block;

  color: #4e5851;

  font-size: 11px;
  line-height: 1.35;
}

.booking-summary-item > span:last-child {
  display: block;

  margin-top: 3px;

  color: #6b756e;

  font-size: 9px;
  line-height: 1.4;
}

.booking-summary-countdown .booking-timer {
  display: block;

  margin-top: 4px;

  color: #4e5851;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;

  font-variant-numeric: tabular-nums;
}


/* =====================================================
   CALENDAR SHELL
   ===================================================== */

.booking-calendar {
  width: min(100%, 520px);

  margin: 0 auto;

  padding: 15px;

  border:
    1px solid rgba(102, 118, 108, 0.17);

  border-radius: 18px;

  background: #fbfcfb;
}


/* =====================================================
   MONTH HEADER
   ===================================================== */

.booking-calendar-header {
  display: grid;

  grid-template-columns:
    36px 1fr 36px;

  align-items: center;

  gap: 8px;

  margin-bottom: 12px;
}

.booking-calendar-header strong {
  text-align: center;

  color: #4e5851;

  font-size: 14px;
  font-weight: 700;
}

.booking-calendar-nav {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid rgba(102, 118, 108, 0.20);

  border-radius: 50%;

  background: #ffffff;
  color: #66766c;

  font-family: inherit;
  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.booking-calendar-nav:hover {
  background: #66766c;
  color: #ffffff;

  transform: translateY(-1px);
}


/* =====================================================
   WEEKDAYS
   ===================================================== */

.booking-calendar-weekdays {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap: 5px;

  margin-bottom: 5px;
}

.booking-calendar-weekdays span {
  text-align: center;

  color: #7b847e;

  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}


/* =====================================================
   CALENDAR GRID
   ===================================================== */

.booking-calendar-days {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap: 5px;
}

.booking-calendar-day {
  position: relative;

  min-width: 0;
  aspect-ratio: 1 / 0.88;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid rgba(102, 118, 108, 0.11);

  border-radius: 10px;

  background: #ffffff;
  color: #526158;

  font-size: 10px;
  font-weight: 600;

  isolation: isolate;
}

.booking-calendar-day.is-empty {
  border-color: transparent;

  background: transparent;
}


/* =====================================================
   DATE NUMBER
   ===================================================== */

.booking-calendar-number {
  position: relative;
  z-index: 4;

  line-height: 1;
}


/* =====================================================
   TODAY
   ===================================================== */

.booking-calendar-day.is-today {
  outline: 2px solid #354d3d;
  outline-offset: -2px;
  font-weight: 800;
}


/* =====================================================
   STANDARD + INTERNATIONAL
   Today and tomorrow.
   Half green / half blue.
   ===================================================== */

.booking-calendar-day.is-standard.is-international:not(.is-blackout) {
  border-color: #66766c;

  background:
    linear-gradient(
      90deg,
      #66766c 0%,
      #66766c 50%,
      #5f8aa6 50%,
      #5f8aa6 100%
    );

  color: #ffffff;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* =====================================================
   STANDARD ONLY
   Green.
   Fallback if a date is standard but not international.
   ===================================================== */

.booking-calendar-day.is-standard:not(.is-international):not(.is-blackout) {
  border-color: #66766c;

  background: #66766c;
  color: #ffffff;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* =====================================================
   INTERNATIONAL + ADVANCED DOMESTIC
   Half yellow / half blue.
   ===================================================== */

.booking-calendar-day.is-international.is-advanced:not(.is-standard):not(.is-blackout) {
  border-color: #c7b26f;

  background:
    linear-gradient(
      90deg,
      #f6e7b5 0%,
      #f6e7b5 50%,
      #5f8aa6 50%,
      #5f8aa6 100%
    );

  color: #4e5851;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* =====================================================
   INTERNATIONAL ONLY
   Blue.
   ===================================================== */

.booking-calendar-day.is-international:not(.is-standard):not(.is-advanced):not(.is-blackout) {
  border-color: #5f8aa6;

  background: #5f8aa6;
  color: #ffffff;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* =====================================================
   ADVANCED DOMESTIC ONLY
   Yellow.
   ===================================================== */

.booking-calendar-day.is-advanced:not(.is-standard):not(.is-international):not(.is-blackout) {
  border-color: #d8bd76;

  background: #f6e7b5;
  color: #72551b;
}


/* =====================================================
   BLACKOUT
   Red always wins over every other booking state.
   ===================================================== */

.booking-calendar-day.is-blackout {
  border-color: #c96a6a !important;

  background:
    repeating-linear-gradient(
      -45deg,
      #f8dede,
      #f8dede 5px,
      #f2caca 5px,
      #f2caca 10px
    ) !important;

  color: #8d2f2f !important;

  box-shadow:
    inset 0 0 0 2px rgba(141, 47, 47, 0.10) !important;
}


/* =====================================================
   NO DEPARTURES REMAINING
   ===================================================== */

.booking-calendar-day.no-departures {
  padding-right: 8px;
}

.booking-calendar-no-departures {
  position: absolute;

  top: 3px;
  right: 4px;

  z-index: 6;

  color: currentColor;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  opacity: 0.72;
}


/* White X on green standard dates */

.booking-calendar-day.is-standard:not(.is-blackout)
.booking-calendar-no-departures {
  color: #ffffff;
}


/* White X on blue international-only dates */

.booking-calendar-day.is-international:not(.is-standard):not(.is-advanced):not(.is-blackout)
.booking-calendar-no-departures {
  color: #ffffff;
}


/* Dark X on yellow/blue International + Advanced dates */

.booking-calendar-day.is-international.is-advanced:not(.is-standard):not(.is-blackout)
.booking-calendar-no-departures {
  color: #4e5851;
}


/* Dark red X on blackout dates */

.booking-calendar-day.is-blackout
.booking-calendar-no-departures {
  color: #8d2f2f !important;
}


/* =====================================================
   CALENDAR LEGEND
   ===================================================== */

.booking-calendar-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 8px 15px;

  margin-top: 14px;
}

.booking-calendar-legend > span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color: #6b756e;

  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
}

.booking-legend-swatch {
  width: 10px;
  height: 10px;

  flex: 0 0 auto;

  display: inline-block;

  border-radius: 3px;
}


/* Standard
   Green represents the domestic standard window.
   The actual calendar will show green/blue when
   Standard and International overlap. */

.booking-legend-swatch.standard {
  border: 1px solid #66766c;
  background: #66766c;
}


/* International = blue */

.booking-legend-swatch.international {
  border: 1px solid #5f8aa6;
  background: #5f8aa6;
}


/* Advanced Domestic = yellow */

.booking-legend-swatch.advanced {
  border: 1px solid #d8bd76;
  background: #f6e7b5;
}


/* Blackout = red */

.booking-legend-swatch.blackout {
  border: 1px solid #c96a6a;

  background:
    repeating-linear-gradient(
      -45deg,
      #f8dede,
      #f8dede 3px,
      #f2caca 3px,
      #f2caca 6px
    );
}


/* No departures remaining */

.booking-legend-x {
  display: inline-grid;
  place-items: center;

  width: 10px;
  height: 10px;

  color: #66766c;

  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}


/* =====================================================
   BOOKING NOTE
   ===================================================== */

.dashboard-booking-calendar
.dashboard-booking-note {
  max-width: 650px;

  margin: 13px auto 0;

  color: #6b756e;

  text-align: center;

  font-size: 8px;
  line-height: 1.55;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 700px) {

  .dashboard-booking-calendar {
    padding: 20px;
  }

  .dashboard-booking-summary {
    gap: 7px;
  }

  .booking-summary-item {
    padding: 10px;
  }

  .booking-calendar {
    width: min(100%, 470px);
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

  .dashboard-score-routes {
    max-width: 145px;
    font-size: 7px;
  }


  .dashboard-booking-calendar {
    width: auto;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    padding: 17px;

    border-radius: 18px;
  }


  .dashboard-booking-calendar
  .dashboard-booking-heading {
    align-items: flex-start;
    margin-bottom: 14px;
  }


  .dashboard-booking-calendar
  .dashboard-booking-heading h3 {
    font-size: 17px;
  }


  .dashboard-booking-calendar
  .dashboard-booking-button {
    padding: 8px 13px;
    font-size: 9px;
  }


  .dashboard-booking-summary {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }


  .booking-summary-countdown {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
      1fr auto;

    align-items: center;

    column-gap: 12px;
  }


  .booking-summary-countdown
  .booking-summary-label {
    grid-column: 1 / -1;
  }


  .booking-summary-countdown
  .booking-timer {
    margin: 0;

    font-size: 17px;

    text-align: right;
  }


  .booking-calendar {
    width: 100%;

    padding: 12px;

    border-radius: 15px;
  }


  .booking-calendar-header {
    margin-bottom: 9px;
  }


  .booking-calendar-header strong {
    font-size: 12px;
  }


  .booking-calendar-nav {
    width: 29px;
    height: 29px;

    font-size: 18px;
  }


  .booking-calendar-days,
  .booking-calendar-weekdays {
    gap: 4px;
  }


  .booking-calendar-day {
    border-radius: 8px;
    font-size: 9px;
  }


  .booking-calendar-no-departures {
    top: 2px;
    right: 3px;

    font-size: 9px;
  }


  .booking-calendar-legend {
    justify-content: flex-start;

    gap: 7px 12px;

    margin-top: 12px;
  }


  .booking-calendar-legend > span {
    font-size: 7px;
  }

}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 430px) {

  .dashboard-airport-content {
    gap: 8px;
  }


  .dashboard-score {
    max-width: 46%;
  }


  .dashboard-score-routes {
    max-width: 125px;

    margin-top: 5px;

    font-size: 6.5px;
    line-height: 1.35;
  }


  .dashboard-booking-calendar
  .dashboard-booking-heading {
    flex-wrap: wrap;
  }


  .dashboard-booking-calendar
  .dashboard-booking-button {
    margin-left: auto;
  }


  .booking-summary-item strong {
    font-size: 10px;
  }


  .booking-summary-item > span:last-child {
    font-size: 8px;
  }


  .booking-calendar {
    padding: 10px;
  }


  .booking-calendar-days,
  .booking-calendar-weekdays {
    gap: 3px;
  }


  .booking-calendar-day {
    border-radius: 7px;
    font-size: 8px;
  }


  .booking-calendar-weekdays span {
    font-size: 6px;
  }


  .booking-calendar-no-departures {
    font-size: 8px;
  }

}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  .booking-calendar-nav,
  .dashboard-booking-button {
    transition: none;
  }

}
/* =====================================================
   DASHBOARD DESKTOP PAIR
   WEATHER + BOOKING CALENDAR
   ===================================================== */

.dashboard-cards-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 12px;

  margin-top: 12px;

  align-items: stretch;
}


/* =====================================================
   REMOVE OLD TOP MARGINS INSIDE THE NEW GRID
   ===================================================== */

.dashboard-cards-stack .dashboard-weather,
.dashboard-cards-stack .dashboard-booking-calendar {
  width: 100%;
  max-width: none;

  min-width: 0;

  margin-top: 0;
}


/* =====================================================
   FROSTED BOOKING CARD
   ===================================================== */

.dashboard-cards-stack .dashboard-booking-calendar {
  display: flex;
  flex-direction: column;

  padding: 22px;

  border:
    1px solid rgba(255, 255, 255, 0.22);

  border-radius: 22px;

  background:
    rgba(53, 77, 61, 0.14);

  color: #ffffff;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  box-shadow:
    0 10px 30px rgba(20, 34, 25, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* =====================================================
   BOOKING HEADER ON GLASS
   ===================================================== */

.dashboard-cards-stack
.dashboard-booking-calendar
.dashboard-booking-kicker {
  color: rgba(255, 255, 255, 0.80);
}


.dashboard-cards-stack
.dashboard-booking-calendar
.dashboard-booking-heading h3 {
  color: #ffffff;
}


.dashboard-cards-stack
.dashboard-booking-calendar
.dashboard-booking-heading p {
  color: rgba(255, 255, 255, 0.76);
}


/* =====================================================
   BOOK NOW BUTTON
   ===================================================== */

.dashboard-cards-stack
.dashboard-booking-calendar
.dashboard-booking-button {
  border:
    1px solid rgba(255, 255, 255, 0.20);

  background:
    rgba(255, 255, 255, 0.14);

  color: #ffffff;

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}


.dashboard-cards-stack
.dashboard-booking-calendar
.dashboard-booking-button:hover {
  background:
    rgba(255, 255, 255, 0.22);
}


/* =====================================================
   BOOKING STATUS BOXES
   ===================================================== */

.dashboard-cards-stack
.booking-summary-item {
  padding: 10px 11px;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  background:
    rgba(255, 255, 255, 0.10);

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}


.dashboard-cards-stack
.booking-summary-label {
  color: rgba(255, 255, 255, 0.72);
}


.dashboard-cards-stack
.booking-summary-item strong {
  color: #ffffff;
}


.dashboard-cards-stack
.booking-summary-item > span:last-child {
  color: rgba(255, 255, 255, 0.80);
}


.dashboard-cards-stack
.booking-summary-countdown
.booking-timer {
  color: #ffffff;
}


/* =====================================================
   SOLID CALENDAR PANEL
   ===================================================== */

.dashboard-cards-stack
.booking-calendar {
  width: 100%;
  max-width: none;

  margin-top: 0;

  padding: 12px;

  background: #ffffff;

  border:
    1px solid rgba(102, 118, 108, 0.14);

  box-shadow:
    0 8px 22px rgba(20, 34, 25, 0.10);
}


/* =====================================================
   CALENDAR LEGEND + NOTE ON GLASS
   ===================================================== */

.dashboard-cards-stack
.booking-calendar-legend > span {
  color: rgba(255, 255, 255, 0.78);
}


.dashboard-cards-stack
.booking-legend-x {
  color: #ffffff;
}


.dashboard-cards-stack
.dashboard-booking-note {
  color: rgba(255, 255, 255, 0.68);
}


/* =====================================================
   DESKTOP — MATCH WEATHER + CALENDAR HEIGHTS
   ===================================================== */

@media (min-width: 701px) {

  .dashboard-cards-stack {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
  }


  .dashboard-cards-stack
  .dashboard-weather,

  .dashboard-cards-stack
  .dashboard-booking-calendar {
    min-height: 430px;
  }


  .dashboard-cards-stack
  .dashboard-weather-content {
    min-height: 430px;

    padding: 24px;
  }


  .dashboard-cards-stack
  .dashboard-booking-calendar {
    justify-content: flex-start;
  }


  .dashboard-cards-stack
  .dashboard-booking-heading {
    margin-bottom: 12px;
  }


  .dashboard-cards-stack
  .dashboard-booking-summary {
    gap: 7px;

    margin-bottom: 12px;
  }


  .dashboard-cards-stack
  .booking-calendar {
    flex: 0 0 auto;
  }

}


/* =====================================================
   MOBILE / TABLET STACK
   ===================================================== */

@media (max-width: 700px) {

  .dashboard-cards-stack {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .dashboard-cards-stack
  .dashboard-weather,

  .dashboard-cards-stack
  .dashboard-booking-calendar {
    min-height: unset;
  }


  .dashboard-cards-stack
  .dashboard-booking-calendar {
    width: auto;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
  }

}
/* =====================================================
   FROSTED DEPARTURE BOARD
   ===================================================== */

.dashboard-departures {
  background: rgba(53, 77, 61, 0.14);
  color: #ffffff;

  border:
    1px solid rgba(255, 255, 255, 0.22);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  box-shadow:
    0 10px 30px rgba(20, 34, 25, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* Headings on glass */

.dashboard-departures-kicker {
  color: rgba(255, 255, 255, 0.76);
}

.dashboard-departures-heading h3 {
  color: #ffffff;
}

.dashboard-departures-heading p {
  color: rgba(255, 255, 255, 0.78);
}


/* Keep the actual flight board solid for readability */

.departure-board {
  background: #ffffff;

  border:
    1px solid rgba(102, 118, 108, 0.16);

  box-shadow:
    0 8px 22px rgba(20, 34, 25, 0.10);
}


/* Keep flight rows readable */

.departure-row {
  color: #4e5851;
}

.departure-row:nth-child(even) {
  background: #f5f7f4;
}

.departure-row:hover {
  background: #eaf0e8;
}


/* Keep the header sage */

.departure-board-header {
  background: #526158;
  color: #ffffff;
}


/* Show-more button */

.departure-show-more {
  border:
    1px solid rgba(255, 255, 255, 0.18);

  background:
    rgba(255, 255, 255, 0.14);

  color: #ffffff;

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.departure-show-more:hover {
  background:
    rgba(255, 255, 255, 0.22);
}


/* Footer note */

.dashboard-departures-note {
  color: rgba(255, 255, 255, 0.68);
}
/* Keep all departure-board flight data sage */

.departure-board-rows,
.departure-row,
.departure-day,
.departure-time,
.departure-destination,
.departure-destination strong,
.departure-destination span,
.departure-flight,
.departure-booking {
  color: #526158;
}
/* =====================================================
   AIRPORT COMMAND CENTER — RADAR + LIVE CAMERA
   ===================================================== */

/*
 * The outer media cards stay frosted to match the rest
 * of the Command Center. The radar map and live video
 * themselves remain crisp and solid inside the glass.
 */


/* =====================================================
   SHARED MEDIA CARD TREATMENT
   ===================================================== */

.dashboard-radar,
.dashboard-live-cam {
  width: 100%;
  box-sizing: border-box;

  margin-top: 12px;
  padding: 10px;

  border:
    1px solid rgba(255, 255, 255, 0.20);

  border-radius: 16px;

  background:
    rgba(20, 34, 25, 0.22);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 7px 20px rgba(20, 34, 25, 0.10);
}


/* =====================================================
   SHARED MEDIA HEADERS
   ===================================================== */

.dashboard-radar-heading,
.dashboard-live-cam-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 14px;
  margin-bottom: 7px;
}


.dashboard-radar-label,
.dashboard-live-cam-label {
  color:
    rgba(255, 255, 255, 0.90);

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.8px;
}


.dashboard-radar-time,
.dashboard-live-cam-source {
  color:
    rgba(255, 255, 255, 0.70);

  font-size: 8px;
  font-weight: 600;
  line-height: 1;
}


/* =====================================================
   WEATHER RADAR — LEAFLET
   ===================================================== */

.dashboard-radar-map {
  position: relative;

  width: 100%;
  height: 220px;

  overflow: hidden;

  border-radius: 12px;

  background: #dfe5df;

  box-shadow:
    inset 0 0 0 1px rgba(53, 77, 61, 0.12),
    0 3px 10px rgba(20, 34, 25, 0.12);
}


/*
 * Leaflet itself is mounted directly on
 * #weatherRadarMap, so keep its container full size.
 */

.dashboard-radar-map.leaflet-container {
  width: 100%;
  height: 150px !important;
  min-height: 150px;
  max-height: 150px;

  border-radius: 12px;

  font-family:
    "Montserrat",
    sans-serif;

  background: #dfe5df;
}


/* Keep radar tiles smooth while frames switch. */

.dashboard-radar-map
.leaflet-tile-pane {
  transition:
    opacity 0.16s ease;
}


/* Slightly mute the basemap so precipitation stays primary. */

.dashboard-radar-map
.leaflet-tile-pane:first-child {
  filter:
    saturate(0.72)
    contrast(0.94)
    brightness(1.03);
}


/* Hide zoom buttons — this is a status panel, not a map app. */

.dashboard-radar-map
.leaflet-control-zoom {
  display: none;
}


/* Clean, tiny map attribution. */

.dashboard-radar-map
.leaflet-control-attribution {
  margin: 0;

  padding: 2px 5px;

  border-radius: 7px 0 0 0;

  background:
    rgba(255, 255, 255, 0.82);

  color: #526158;

  font-size: 6.5px;
  line-height: 1.25;

  box-shadow:
    0 1px 4px rgba(20, 34, 25, 0.08);
}


.dashboard-radar-map
.leaflet-control-attribution a {
  color: #526158;

  text-decoration: none;
}


.dashboard-radar-map
.leaflet-control-attribution a:hover {
  text-decoration: underline;
}


/* Airport position marker rendered by Leaflet. */

.dashboard-radar-airport-marker {
  width: 16px;
  height: 16px;

  border:
    3px solid #ffffff;

  border-radius: 50%;

  background: #526158;

  box-shadow:
    0 2px 8px rgba(20, 34, 25, 0.38),
    0 0 0 4px rgba(82, 97, 88, 0.16);
}


/* Optional pulse around the selected airport marker. */

.dashboard-radar-airport-marker-wrap {
  position: relative;

  width: 16px;
  height: 16px;
}


.dashboard-radar-airport-marker-wrap::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 28px;
  height: 28px;

  transform:
    translate(-50%, -50%)
    scale(0.65);

  border:
    1px solid rgba(82, 97, 88, 0.60);

  border-radius: 50%;

  animation:
    dashboard-radar-marker-pulse
    2.2s ease-out
    infinite;

  pointer-events: none;
}


@keyframes dashboard-radar-marker-pulse {

  0% {
    opacity: 0.62;

    transform:
      translate(-50%, -50%)
      scale(0.65);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(1.55);
  }

}


/* =====================================================
   LIVE AIRPORT CAMERA
   ===================================================== */

.dashboard-live-cam-source {
  text-decoration: none;
}


.dashboard-live-cam-source:hover {
  color: #ffffff;

  text-decoration: underline;
}


.dashboard-live-cam-frame {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 12px;

  background:
    rgba(20, 34, 25, 0.48);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 3px 10px rgba(20, 34, 25, 0.12);
}


.dashboard-live-cam-frame iframe {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  border: 0;
}


/* Small live indicator. */

.dashboard-live-cam-label::before {
  content: "";

  display: inline-block;

  width: 6px;
  height: 6px;

  margin-right: 6px;

  border-radius: 50%;

  background: #f06a6a;

  box-shadow:
    0 0 0 3px rgba(240, 106, 106, 0.14);

  vertical-align: middle;
}


/* =====================================================
   DESKTOP COMMAND CENTER MEDIA FIT
   ===================================================== */

@media (min-width: 701px) {

  .dashboard-cards-stack
  .dashboard-weather-content {
    display: flex;

    flex-direction: column;
  }


  .dashboard-cards-stack
  .dashboard-radar,
  .dashboard-cards-stack
  .dashboard-live-cam {
    flex: 0 0 auto;
  }


  /*
   * Keep the radar substantial without making the
   * Command Center dramatically taller than the calendar.
   */

.dashboard-radar-map {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
}

}


/* =====================================================
   MOBILE
   Keep the Command Center lightweight.
   ===================================================== */

/* Radar and camera visibility follows the Airport Conditions expander
   on every screen size; the HTML hidden attribute still handles unavailable media. */


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  .dashboard-radar-airport-marker-wrap::after {
    animation: none;
  }


  .dashboard-radar-map
  .leaflet-tile-pane {
    transition: none;
  }


  .dashboard-live-cam-label::before {
    box-shadow: none;
  }

}


/* =====================================================
   KEEP COMMAND CENTER + BOOKING SIDE BY SIDE ON DESKTOP
   ===================================================== */

@media (min-width: 701px) {

  .dashboard-cards-stack {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 12px;

    align-items: start;
  }


  .dashboard-cards-stack > .dashboard-weather {
    grid-column: 1;
    grid-row: 1;

    width: 100%;
    min-width: 0;
    max-width: none;
  }


  .dashboard-cards-stack > .dashboard-booking-calendar {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    min-width: 0;
    max-width: none;

    margin-top: 0;
  }

}


/* =====================================================
   HELPFUL TOOLS — FLOATING FROSTED TRANSITION
   Original four-tool grid and responsive sizing preserved.
   ===================================================== */
.tools-section {
  position: relative;
  isolation: isolate;
  background: #040706;
  color: #ffffff;
}

/* Continue the dark bottom of the Dashboard seamlessly
   through the Helpful Tools section. */
.tools-section::before,
.tools-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tools-section::before {
  z-index: -2;
  background: #040706;
}

/* Very subtle sage atmosphere toward the bottom */
.tools-section::after {
  z-index: -1;
  background:
    radial-gradient(
      ellipse 75% 55% at 50% 110%,
      rgba(102, 118, 108, 0.14) 0%,
      rgba(52, 66, 59, 0.07) 38%,
      rgba(4, 7, 6, 0) 72%
    );
}

.tools-section .tools-heading {
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.tools-section .simple-tool {
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 20px;
  background: rgba(102, 118, 108, 0.18);
  color: #ffffff;
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.18s ease, background 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease;
}

.tools-section .simple-tool:hover {
  transform: translateY(-3px);
  background: rgba(102, 118, 108, 0.28);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tools-section .simple-tool:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.tools-section .simple-tool-icon,
.tools-section .simple-tool-title {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(102, 118, 108, 0.36);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.tools-section .simple-tool:hover .simple-tool-title {
  background: rgba(102, 118, 108, 0.52);
}

.tools-section .simple-tool-description {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

/* Blend the matching dark edge into the existing animated sky.
   Only the immediately following credit-card section is affected.
   Preserve its original overlay underneath this additional fade. */
.tools-section + .credit-cards-section::after {
  background:
    linear-gradient(
      180deg,
      #040706 0,
      rgba(4, 7, 6, 0.80) 40px,
      rgba(4, 7, 6, 0.34) 100px,
      rgba(4, 7, 6, 0) 180px
    ),
    linear-gradient(
      rgba(8, 16, 13, 0.10),
      rgba(8, 16, 13, 0.20)
    );
}

@media (max-width: 600px) {
  .tools-section .simple-tool {
    padding: 16px 10px;
    border-radius: 16px;
  }
}

/* Readable translucent fallback for browsers without backdrop blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tools-section .simple-tool {
    background: rgba(38, 51, 43, 0.78);
  }
  .tools-section .simple-tool:hover {
    background: rgba(53, 77, 61, 0.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tools-section .simple-tool {
    transition: none;
  }
  .tools-section .simple-tool:hover {
    transform: none;
  }
}

/* A compact frosted continuation beneath the wallet. */
#topics.everything-else {
  padding: 12px 0 18px;
  background: #66786b;
  color: #fff;
}
#topics .everything-else-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 18px 20px;
  border: 1px solid rgba(230, 244, 233, .28);
  border-radius: 22px;
  background: #465e4f;
  box-shadow: 0 8px 24px rgba(4, 7, 6, .14), inset 0 1px 0 rgba(255, 255, 255, .12);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #topics .everything-else-inner {
    background: linear-gradient(120deg, rgba(230, 244, 233, .12), rgba(230, 244, 233, .02)), rgba(16, 31, 22, .38);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
  }
}
#topics .everything-else-title { flex: 0 0 auto; margin: 0; color: #fff; font-size: 1.15rem; line-height: 1.3; }
#topics .hero-topic-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  width: 100%; min-width: 0; margin: 0; padding: 6px 4px;
  overflow: visible; scroll-snap-type: none;
}
#topics .hero-topic-nav .button { padding: 10px 16px; font-size: .8rem; }
@media (max-width: 700px) {
  #topics .everything-else-inner { padding: 16px 12px; }
  #topics .everything-else-title { margin-bottom: 0; }
}
/* Standalone questions and answers on More! */
.more-page { background: #f3f6f1; color: #172c22; }
.more-header { padding: 20px 0; background: #040706; color: #fff; }
.more-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.more-brand { font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; }
.more-home { font-size: .85rem; text-underline-offset: 4px; }
.more-main { max-width: 900px; margin: 0 auto; padding: 64px 24px 80px; }
.more-main h1 { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -.04em; margin-bottom: 16px; }
.more-intro { font-size: 1rem; line-height: 1.75; margin-bottom: 36px; }
.more-answers { display: grid; gap: 20px; }
.more-answer { padding: 28px; border: 1px solid #c5d3c5; border-radius: 20px; background: #fff; scroll-margin-top: 24px; }
.more-answer h2 { font-size: 1.2rem; line-height: 1.5; margin: 0 0 14px; }
.more-answer p { line-height: 1.8; margin: 0 0 14px; }
.more-answer p:last-child { margin-bottom: 0; }
.more-answer a { text-decoration: underline; text-underline-offset: 3px; }
.more-answer:target { outline: 3px solid #66786b; outline-offset: 4px; }
.more-empty { border-top: 1px solid #c5d3c5; padding-top: 24px; color: #506452; }
.more-page a:focus-visible { outline: 3px solid #8ea58f; outline-offset: 4px; }
.more-footer { background: #040706; color: #fff; padding: 24px 0; }
.more-footer .hero-topic-nav { margin: 0; }
@media (max-width: 600px) {
  .more-main { padding: 40px 20px 56px; }
  .more-answer { padding: 22px; }
}
/* Keep every credit card panel as tall as the largest panel. */
.credit-card-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.credit-card-panel,
.credit-card-panel.is-active {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  align-self: stretch;
  min-width: 0;
}
/* Compact ID90Travel sponsor pill below the airport command center. */
.dashboard-cards-stack > .dashboard-ad-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 9px 16px;
  border: 1px solid rgba(210, 218, 255, .38);
  border-radius: 999px;
  background: linear-gradient(115deg, #5540bd, #376ea6 65%, #3c899b);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(26, 22, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: border-color .18s ease, box-shadow .18s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dashboard-cards-stack > .dashboard-ad-slot {
    background: linear-gradient(115deg, rgba(82, 51, 239, .55), rgba(49, 111, 222, .48) 65%, rgba(48, 173, 207, .42));
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
}
.dashboard-ad-logo { flex: 0 0 70px; width: 70px; height: 28px; object-fit: contain; }
.dashboard-ad-content { flex: 1; min-width: 0; }
.dashboard-ad-label { display: block; margin-bottom: 2px; font-size: 9px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-ad-copy { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.dashboard-ad-arrow { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.dashboard-cards-stack > .dashboard-ad-slot:hover { color: #fff; border-color: rgba(230, 237, 255, .7); box-shadow: 0 6px 20px rgba(26, 22, 70, .24), inset 0 1px 0 rgba(255, 255, 255, .22); }
.dashboard-cards-stack > .dashboard-ad-slot:focus-visible { outline: 3px solid #d8e3ff; outline-offset: 3px; }
@media (min-width: 701px) {
  .dashboard-cards-stack > .dashboard-ad-slot { grid-column: 1; grid-row: 2; align-self: end; }
  .dashboard-cards-stack > .dashboard-booking-calendar { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 390px) {
  .dashboard-cards-stack > .dashboard-ad-slot { padding-inline: 12px; gap: 9px; }
  .dashboard-ad-logo { flex-basis: 54px; width: 54px; height: 26px; }
  .dashboard-ad-copy { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-cards-stack > .dashboard-ad-slot { transition: none; }
}
/* Compact ID90Travel sponsor pill below the airport command center. */
.dashboard-cards-stack > .dashboard-ad-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 9px 16px;
  border: 1px solid rgba(210, 218, 255, .38);
  border-radius: 999px;
  background: linear-gradient(115deg, #5540bd, #376ea6 65%, #3c899b);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(26, 22, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: border-color .18s ease, box-shadow .18s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dashboard-cards-stack > .dashboard-ad-slot {
    background: linear-gradient(115deg, rgba(82, 51, 239, .55), rgba(49, 111, 222, .48) 65%, rgba(48, 173, 207, .42));
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
}
.dashboard-ad-logo { flex: 0 0 70px; width: 70px; height: 28px; object-fit: contain; }
.dashboard-ad-content { flex: 1; min-width: 0; }
.dashboard-ad-label { display: block; margin-bottom: 2px; font-size: 9px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-ad-copy { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.dashboard-ad-arrow { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.dashboard-cards-stack > .dashboard-ad-slot:hover { color: #fff; border-color: rgba(230, 237, 255, .7); box-shadow: 0 6px 20px rgba(26, 22, 70, .24), inset 0 1px 0 rgba(255, 255, 255, .22); }
.dashboard-cards-stack > .dashboard-ad-slot:focus-visible { outline: 3px solid #d8e3ff; outline-offset: 3px; }
@media (min-width: 701px) {
  .dashboard-cards-stack > .dashboard-ad-slot { grid-column: 1; grid-row: 2; align-self: end; }
  .dashboard-cards-stack > .dashboard-booking-calendar { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
}
@media (max-width: 390px) {
  .dashboard-cards-stack > .dashboard-ad-slot { padding-inline: 12px; gap: 9px; }
  .dashboard-ad-logo { flex-basis: 54px; width: 54px; height: 26px; }
  .dashboard-ad-copy { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-cards-stack > .dashboard-ad-slot { transition: none; }
}
/* Faster, more visible star drift behind the credit cards. */
.credit-cards-section::before {
  animation-duration: 20s;
}

@keyframes credit-card-sky-drift {
  from { transform: translateX(-4%) scale(1.04); }
  to { transform: translateX(4%) scale(1.04); }
}


/* Airport Command Center — frosted security card beneath the radar. */
.dashboard-security[hidden]{display:none!important}
.dashboard-security{width:100%;box-sizing:border-box;margin:12px 0 0;padding:16px;background:rgba(20,34,25,.22);border:1px solid rgba(255,255,255,.20);border-radius:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 7px 20px rgba(20,34,25,.10);color:rgba(255,255,255,.95)}
.security-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.security-heading h3{margin:5px 0 16px;font-size:22px;font-weight:800;color:#314d3b}
.security-source{font-size:12px;color:#596e60;text-decoration:none;white-space:nowrap;padding-top:3px}
.security-source:hover{text-decoration:underline}
.security-lane-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.security-lane-button{padding:8px 14px;border:1px solid #d4ddd6;border-radius:999px;background:#f4f7f4;color:#435c4d;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.security-lane-button[aria-pressed=true]{background:#596e60;color:white;border-color:#596e60}
.security-lane-button:focus-visible,.security-more summary:focus-visible{outline:3px solid #83998a;outline-offset:3px}
.security-checkpoints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.security-checkpoint{padding:16px;background:#f3f6f2;border:1px solid #e2e8e0;border-radius:14px;min-width:0}
.security-checkpoint h4{margin:0 0 10px;font-size:14px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.security-lane-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:8px 0}
.security-lane-name{font-size:12px;color:#637368}
.security-wait{font-size:15px;font-weight:800;text-align:right;overflow-wrap:anywhere}
.security-wait.is-closed{color:#7e847f;font-weight:600}
.security-hours,.security-lane-updated,.security-note{margin:5px 0 0;color:#6c7b70;font-size:11px;line-height:1.5}
.security-closing{margin:7px 0 0;color:#8b632b;font-size:12px;font-weight:700}
.security-recommendation{background:#e8eee6;border-radius:12px;margin:0 0 16px;padding:12px 14px;font-size:12px;line-height:1.6;color:#48604f}
.security-footer{margin:15px 0 0;font-size:11px;line-height:1.6;color:#708075}
.security-more{margin-top:12px}
.security-more summary{font-size:12px;font-weight:700;cursor:pointer;padding:8px 0;color:#546c5b}
.security-more[open] summary{margin-bottom:8px}
@media(max-width:640px){.dashboard-security{padding:18px;border-radius:18px}.security-heading h3{font-size:19px}.security-heading{gap:8px}.security-source{font-size:10px}.security-checkpoints{grid-template-columns:1fr}.security-lane-button{padding:8px 11px}}

/* White typography and translucent surfaces match the radar's frosted frame. */
.dashboard-security .dashboard-booking-kicker{color:rgba(255,255,255,.80);font-size:9px;letter-spacing:.8px}
.dashboard-security .security-heading h3{color:#fff;font-size:18px}
.dashboard-security .security-source{color:rgba(255,255,255,.85);font-size:10px}
.security-lane-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:100%;flex-wrap:wrap;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09);color:#fff;font-size:11px}
.security-lane-button[aria-pressed=true]{background:rgba(255,255,255,.23);border-color:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.security-lane-logo{display:block;object-fit:contain;max-width:72px;height:18px;flex:none}
.security-lane-logo[hidden]{display:none}
.security-logo-clear{max-width:50px}
.security-lane-button:focus-visible,.security-more summary:focus-visible,.security-source:focus-visible{outline:3px solid #fff;outline-offset:3px}
.security-checkpoints{grid-template-columns:1fr;gap:10px}
.security-checkpoint{padding:12px;background:rgba(20,34,25,.16);border-color:rgba(255,255,255,.14);border-radius:12px}
.security-checkpoint h4,.security-wait{color:#fff}
.security-lane-name,.security-wait.is-closed{color:rgba(255,255,255,.85)}
.security-hours,.security-lane-updated,.security-note{color:rgba(255,255,255,.82)}
.security-closing{color:#ffe4ac}
.security-recommendation{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.14);color:#fff}
.security-footer{color:rgba(255,255,255,.80)}
.security-more summary{color:rgba(255,255,255,.90)}
@media(max-width:640px){.dashboard-security{padding:14px;border-radius:16px}.dashboard-security .security-heading h3{font-size:17px}}

/* Append after your existing security-card styles. */
#airportSecurity .security-source-links{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0}
#airportSecurity .security-guidance-note{margin:0 0 14px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.94)}
#airportSecurity .security-unavailable{padding:12px;margin:0 0 14px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.08);font-size:12px;color:#fff}
#airportSecurity .security-unavailable p{margin:5px 0 0;line-height:1.5}
#airportSecurity .security-priority{display:inline-block;margin:0 0 7px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.16);font-size:10px;font-weight:750;line-height:1.5;color:#fff}
#airportSecurity .security-priority-recommended{border-color:rgba(255,255,255,.42)}
#airportSecurity .security-checkpoint-closed{border-style:dashed;border-color:rgba(255,255,255,.20)}
#airportSecurity .security-checkpoint-closed .security-priority{background:rgba(255,255,255,.08)}
#airportSecurity .security-gate-label{margin:0 0 7px;font-size:12px;font-weight:650;line-height:1.5;color:rgba(255,255,255,.96)}
#airportSecurity .security-airlines{margin:10px 0 12px}
#airportSecurity .security-airline-caption{margin:0 0 5px;font-size:10px;line-height:1.5;color:rgba(255,255,255,.82)}
#airportSecurity .security-airline{display:inline-flex;align-items:center;gap:7px;font-size:11px;line-height:1.5;color:#fff;min-width:0}
#airportSecurity .security-airline img{display:block;width:38px;height:26px;object-fit:contain;flex:none}
#airportSecurity .security-airline img[hidden]{display:none}
#airportSecurity .security-airline-details summary{display:flex;align-items:center;gap:7px;width:fit-content;max-width:100%;cursor:pointer;font-size:11px;line-height:1.5;color:#fff;flex-wrap:wrap}
#airportSecurity .security-airline-details summary::after{content:'\25be';font-size:12px}
#airportSecurity .security-airline-details[open] summary::after{content:'\25b4'}
#airportSecurity .security-airline-details summary::-webkit-details-marker{display:none}
#airportSecurity .security-airline-details summary:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:3px}
#airportSecurity .security-airline-list{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px}
#airportSecurity .security-section-label{margin:16px 0 9px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.96)}
#airportSecurity .security-more>summary{line-height:1.6}
@media(max-width:420px){#airportSecurity .security-heading{flex-wrap:wrap}#airportSecurity .security-source-links{align-items:flex-start;flex-direction:row;flex-wrap:wrap;margin-bottom:12px}#airportSecurity .security-lane-row{flex-wrap:wrap}#airportSecurity .security-wait{text-align:left}}

/* Append after your existing security-card styles. */
#airportSecurity .security-source-links{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0}
#airportSecurity .security-guidance-note{margin:0 0 14px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.94)}
#airportSecurity .security-unavailable{padding:12px;margin:0 0 14px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.08);font-size:12px;color:#fff}
#airportSecurity .security-unavailable p{margin:5px 0 0;line-height:1.5}
#airportSecurity .security-priority{display:inline-block;margin:0 0 7px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.16);font-size:10px;font-weight:750;line-height:1.5;color:#fff}
#airportSecurity .security-priority-recommended{border-color:rgba(255,255,255,.42)}
#airportSecurity .security-checkpoint-closed{border-style:dashed;border-color:rgba(255,255,255,.20)}
#airportSecurity .security-checkpoint-closed .security-priority{background:rgba(255,255,255,.08)}
#airportSecurity .security-gate-label{margin:0 0 7px;font-size:12px;font-weight:650;line-height:1.5;color:rgba(255,255,255,.96)}
#airportSecurity .security-airlines{margin:10px 0 12px}
#airportSecurity .security-airline{display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none;width:38px;height:26px;color:#fff}
#airportSecurity .security-airline img{display:block;width:38px;height:26px;object-fit:contain}
#airportSecurity .security-airline img[hidden],#airportSecurity .security-airline-fallback[hidden]{display:none}
#airportSecurity .security-airline-fallback{font-size:10px;font-weight:750;background:rgba(255,255,255,.16);border-radius:6px;padding:3px 5px}
#airportSecurity .security-airline-details summary{display:flex;align-items:center;gap:9px;width:fit-content;max-width:100%;cursor:pointer;list-style:none;color:#fff}
#airportSecurity .security-airline-details summary::after{content:none}
#airportSecurity .security-airline-details summary::-webkit-details-marker{display:none}
#airportSecurity .security-airline-details summary:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:8px}
#airportSecurity .security-airline-stack{display:flex;align-items:center;flex-wrap:wrap;min-width:0;row-gap:7px}
#airportSecurity .security-airline-list{display:none;margin:0;gap:0}
#airportSecurity .security-airline-details[open] .security-airline-list{display:contents}
#airportSecurity .security-airline-list .security-airline{margin-left:-9px}
#airportSecurity .security-airline-list .security-airline:hover{z-index:1}
#airportSecurity .security-airline-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;min-width:35px;padding:4px 8px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:700;line-height:1.4}
#airportSecurity .security-airline-pill::after{content:'\25be';font-size:10px}
#airportSecurity .security-airline-details[open] .security-airline-pill::after{content:'\25b4'}
#airportSecurity .security-airline-details summary:hover .security-airline-pill{background:rgba(255,255,255,.22)}
#airportSecurity .security-section-label{margin:16px 0 9px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.96)}
#airportSecurity .security-more>summary{line-height:1.6}
@media(max-width:420px){#airportSecurity .security-heading{flex-wrap:wrap}#airportSecurity .security-source-links{align-items:flex-start;flex-direction:row;flex-wrap:wrap;margin-bottom:12px}#airportSecurity .security-lane-row{flex-wrap:wrap}#airportSecurity .security-wait{text-align:left}}


/* BOOKING CALENDAR — SAGE FROSTED GLASS
   Append at the end of style.css. Date-state rules and layout stay intact. */

.dashboard-cards-stack .dashboard-booking-calendar {
  background: #465e4f;
  border-color: rgba(230, 244, 233, .28);
  box-shadow: 0 8px 24px rgba(20, 34, 25, .14),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Light sage glass keeps dark month labels and neutral dates readable. */
.dashboard-booking-calendar .booking-calendar {
  background: #e0e9df;
  border-color: rgba(230, 244, 233, .42);
  box-shadow: 0 6px 18px rgba(20, 34, 25, .10),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dashboard-cards-stack .dashboard-booking-calendar {
    background:
      linear-gradient(120deg, rgba(230, 244, 233, .12), rgba(230, 244, 233, .02)),
      rgba(16, 31, 22, .38);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
  .dashboard-booking-calendar .booking-calendar {
    background:
      linear-gradient(135deg, rgba(244, 250, 242, .26), rgba(218, 234, 216, .10)),
      rgba(224, 233, 223, .86);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
  }
}

.dashboard-booking-calendar .booking-calendar-header strong { color: #263c2e; }
.dashboard-booking-calendar .booking-calendar-weekdays span { color: #425849; }

.dashboard-booking-calendar .booking-calendar-nav {
  background: rgba(246, 251, 244, .72);
  border-color: rgba(53, 77, 61, .24);
  color: #354d3d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40);
}
.dashboard-booking-calendar .booking-calendar-nav:hover {
  background: #526b59;
  color: #ffffff;
}
.dashboard-booking-calendar .booking-calendar-nav:focus-visible {
  outline: 2px solid #354d3d;
  outline-offset: 2px;
}

/* Exclude empty placeholders and every booking state. The original split
   fills, blackout precedence, X markers and today outline remain in force. */
.dashboard-booking-calendar .booking-calendar-day:not(.is-empty):not(.is-standard):not(.is-international):not(.is-advanced):not(.is-blackout) {
  background: rgba(247, 251, 245, .68);
  border-color: rgba(53, 77, 61, .16);
  color: #2d4434;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.dashboard-cards-stack .dashboard-booking-calendar .booking-calendar-legend > span,
.dashboard-cards-stack .dashboard-booking-calendar .dashboard-booking-note {
  color: rgba(255, 255, 255, .90);
}
/* =========================================
   BOOKING TIMELINE — CHECKBOX FIX
   Modal + FAQ | Desktop + Mobile
   ========================================= */

.tool-modal-content .tool-booking-timeline .check-toggle input[type="checkbox"],
#faq .gw-booking-widget .check-toggle input[type="checkbox"] {
  display: block;
  position: static;
  opacity: 1;
  visibility: visible;
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: #66766c;
  cursor: pointer;
}

.tool-modal-content .tool-booking-timeline .toggle-box,
#faq .gw-booking-widget .toggle-box {
  display: none;
}

.tool-modal-content .tool-booking-timeline .check-toggle,
#faq .gw-booking-widget .check-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  min-height: 28px;
}

/* Routes live in the same frosted departures card. */
.departure-route-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.24); }
.departure-route-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.departure-route-heading h4 { margin:5px 0 6px; font-size:22px; color:#fff; }
.departure-route-heading p { margin:0; font-size:13px; color:rgba(255,255,255,.85); }
.departure-route-tabs { display:flex; gap:5px; padding:5px; background:rgba(24,45,34,.23); border:1px solid rgba(255,255,255,.20); border-radius:13px; }
.departure-route-tab { cursor:pointer; border:0; border-radius:9px; padding:10px 16px; background:transparent; color:#fff; font:inherit; font-size:13px; font-weight:700; }
.departure-route-tab[aria-pressed="true"] { background:#eff5e9; color:#354d3d; box-shadow:0 2px 8px rgba(20,34,25,.12); }
.departure-route-tab:hover { background:rgba(255,255,255,.17); }
.departure-route-tab[aria-pressed="true"]:hover { background:#fff; }
.departure-route-canvas { overflow:hidden; border-radius:18px; background:#edf2ed; border:1px solid rgba(255,255,255,.45); }
.departure-route-canvas svg { display:block; width:100%; height:auto; }
.departure-route-empty { margin:0; min-height:220px; display:grid; place-items:center; padding:32px; text-align:center; color:#425d4b; font-size:15px; }
.route-ocean { fill:#e6eee9; }
.route-grid { fill:none; stroke:#cbd9d1; stroke-width:.7; opacity:.55; }
.route-land { fill:#f6f7ed; stroke:#c6d3c6; stroke-width:1; stroke-linejoin:round; }
.route-line { fill:none; stroke:#5c846b; stroke-width:1.7; opacity:.64; }
.route-line.is-selected { stroke:#214f35; stroke-width:3; opacity:1; }
.route-line.is-muted { opacity:.19; }
.route-hit { fill:none; stroke:transparent; stroke-width:16; cursor:pointer; pointer-events:stroke; }
.route-origin { fill:#31583e; stroke:#fff; stroke-width:3; }
.route-airport { fill:#6a896c; stroke:#fff; stroke-width:1.5; }
.route-leader { fill:none; stroke:#809980; stroke-width:.7; }
.route-label-box { fill:#fff; fill-opacity:.96; stroke:#cbd8c8; stroke-width:.7; }
.route-label-box.is-origin { fill:#31583e; stroke:#31583e; }
.route-label { fill:#3c5845; font-family:system-ui,sans-serif; font-size:12px; font-weight:750; }
.route-label.is-origin { fill:#fff; }
.route-plane { cursor:pointer; }
.route-plane-halo { fill:#fff; fill-opacity:.92; stroke:#afc2ac; stroke-width:1; }
.route-plane-icon { fill:#294f37; stroke:#fff; stroke-width:.7; }
.departure-route-legend { display:flex; flex-wrap:wrap; gap:10px 20px; padding:11px 1px 0; color:rgba(255,255,255,.9); font-size:12px; }
.departure-route-legend span { display:inline-flex; align-items:center; gap:7px; }
.departure-route-legend-line { display:inline-block; width:22px; height:2px; background:#bed1b7; }
.departure-route-legend-plane { font-size:17px; }
.departure-route-note { margin:9px 0 0; color:rgba(255,255,255,.79); font-size:12px; line-height:1.6; }
.departure-route-note a { color:inherit; text-decoration:underline; }
.departure-route-destinations { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.departure-route-chip { padding:7px 11px; border:1px solid rgba(255,255,255,.32); border-radius:9px; background:rgba(255,255,255,.10); color:#fff; font:inherit; font-size:12px; cursor:pointer; }
.departure-route-chip[aria-pressed="true"] { background:#eff5e9; color:#354d3d; border-color:#eff5e9; font-weight:700; }
.departure-route-chip:hover { border-color:#fff; }
.departure-route-detail-title { margin:18px 0 9px; font-size:15px; color:#fff; }
.departure-route-flight-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:8px; max-height:260px; overflow:auto; }
.departure-route-flight { display:flex; flex-wrap:wrap; gap:5px 12px; align-items:center; padding:12px; background:rgba(255,255,255,.91); color:#3e5946; border-radius:10px; text-decoration:none; font-size:12px; }
.departure-route-flight:hover { background:#fff; }
.departure-route-flight-status { flex-basis:100%; font-size:11px; color:#57735f; }
.departure-route-local-note { margin:9px 0 0; font-size:12px; color:rgba(255,255,255,.8); }
.departure-route-tab:focus-visible,.departure-route-chip:focus-visible,.departure-route-flight:focus-visible { outline:3px solid #e9f3aa; outline-offset:3px; }
@media(max-width:650px) {
  .departure-route-heading h4 { font-size:20px; }
  .departure-route-tabs { width:100%; }
  .departure-route-tab { flex:1; padding:10px 7px; }
  .departure-route-canvas svg { min-height:250px; }
  .departure-route-section { margin-top:18px; padding-top:18px; }
}
/* Native details preserves the user's open/closed choice when board data refreshes. */
.departure-route-section { padding-top:0; border:1px solid rgba(255,255,255,.24); border-radius:15px; background:rgba(255,255,255,.045); }
.departure-route-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 19px; cursor:pointer; list-style:none; }
.departure-route-toggle::-webkit-details-marker { display:none; }
.departure-route-toggle::marker { content:""; }
.departure-route-title { display:block; font-size:19px; font-weight:750; color:#fff; }
.departure-route-description { display:block; margin-top:4px; font-size:12px; color:rgba(255,255,255,.8); }
.departure-route-toggle-action { display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:12px; font-weight:650; color:#fff; }
.departure-route-close-label { display:none; }
.departure-route-section[open] .departure-route-open-label { display:none; }
.departure-route-section[open] .departure-route-close-label { display:inline; }
.departure-route-chevron { font-size:20px; }
.departure-route-section[open] .departure-route-chevron { transform:rotate(180deg); }
.departure-route-content { padding:2px 19px 19px; }
.departure-route-toggle:focus-visible { outline:3px solid #e9f3aa; outline-offset:3px; border-radius:14px; }
@media(max-width:650px) { .departure-route-section { padding-top:0; } .departure-route-toggle { padding:15px 13px; } .departure-route-content { padding:0 13px 15px; } .departure-route-description { max-width:220px; } }
/* Calendar and collapsible map share the right desktop column. */
.dashboard-calendar-column { display:flex; flex-direction:column; gap:12px; min-width:0; }
.dashboard-calendar-column .departure-route-section { margin:0; flex:0 0 auto; background:rgba(53,77,61,.25); box-shadow:0 8px 24px rgba(20,34,25,.10),inset 0 1px 0 rgba(255,255,255,.10); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.dashboard-cards-stack .dashboard-calendar-column .dashboard-booking-calendar { min-height:0; height:auto; margin:0; flex:0 0 auto; }
@media(min-width:701px) { .dashboard-cards-stack > .dashboard-calendar-column { grid-column:2; grid-row:1 / span 2; align-self:start; } }
.route-plane.is-muted { opacity:.16; pointer-events:none; }

/* Align both desktop columns while Departures Map is expanded. */
@media (min-width: 701px) {
  .dashboard-cards-stack > .dashboard-calendar-column:has(> #departureRouteCard[open]) {
    align-self: stretch;
    justify-content: space-between;
  }
}

/* Consistent expandable dashboard cards: icon, title, description, View/Close. */
#dashboard .dashboard-expander {
  padding: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  background: rgba(53,77,61,.25);
  color: #fff;
  box-shadow: 0 8px 24px rgba(20,34,25,.10), inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#dashboard .dashboard-expander > .dashboard-expander-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 18px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  color: #fff;
}
#dashboard .dashboard-expander-header::-webkit-details-marker { display: none; }
#dashboard .dashboard-expander-header::marker { content: ""; }
#dashboard .dashboard-expander-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  background: rgba(255,255,255,.065);
  color: #e9f1e4;
}
#dashboard .dashboard-expander-icon svg { width: 26px; height: 26px; display: block; }
#dashboard .dashboard-expander-copy { display: block; flex: 1; min-width: 0; }
#dashboard .dashboard-expander-title { display: block; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; }
#dashboard .dashboard-expander-description { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; font-weight: 400; color: rgba(255,255,255,.8); }
#dashboard .dashboard-expander-action { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 12px; font-weight: 650; white-space: nowrap; color: #fff; }
#dashboard .dashboard-expander-close { display: none; }
#dashboard .dashboard-expander[open] > summary .dashboard-expander-view { display: none; }
#dashboard .dashboard-expander[open] > summary .dashboard-expander-close { display: inline; }
#dashboard .dashboard-expander-chevron { display: inline-block; font-size: 20px; line-height: 1; }
#dashboard .dashboard-expander[open] > summary .dashboard-expander-chevron { transform: rotate(180deg); }
#dashboard .dashboard-expander-header:focus-visible { outline: 3px solid #e9f3aa; outline-offset: 3px; border-radius: 17px; }
#dashboard .dashboard-expander-header:hover { background: rgba(255,255,255,.035); border-radius: 17px; }
#dashboard .dashboard-expander-body,
#dashboard .dashboard-expander > .den-map-content,
#dashboard .dashboard-expander > .departure-route-content { padding: 0 18px 18px; }
#dashboard .dashboard-expander-context { margin: 0 0 6px; font-size: 15px; color: #fff; }
#dashboard .dashboard-expander-context-description { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.8); }
@media (max-width: 650px) {
  #dashboard .dashboard-expander > .dashboard-expander-header { padding: 14px; gap: 10px; }
  #dashboard .dashboard-expander-title { font-size: 16px; }
  #dashboard .dashboard-expander-description { font-size: 11px; }
  #dashboard .dashboard-expander-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
  #dashboard .dashboard-expander-icon svg { width: 23px; height: 23px; }
  #dashboard .dashboard-expander-action { gap: 5px; font-size: 11px; }
  #dashboard .dashboard-expander-body,
  #dashboard .dashboard-expander > .den-map-content,
  #dashboard .dashboard-expander > .departure-route-content { padding: 0 14px 14px; }
}

/* Keep each line icon centered and contained in its header box. */
#dashboard .dashboard-expander > summary .dashboard-expander-icon {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  align-self: center;
}
#dashboard .dashboard-expander > summary .dashboard-expander-icon > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  flex: none;
}

/* Compact conditions/security column and collapsible booking calendar. */
.dashboard-conditions-column { display:flex; flex-direction:column; gap:12px; min-width:0; }
#dashboard .dashboard-conditions-column .dashboard-weather { min-height:0; height:auto; border-radius:18px; }
#dashboard #airportConditionsCard { position:relative; z-index:2; border:0; border-radius:inherit; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
#dashboard #airportConditionsCard .dashboard-weather-content { min-height:0; padding:0 18px 18px; gap:14px; }
#dashboard #airportConditionsCard .dashboard-expander-header { align-items:flex-start; }
#dashboard #airportConditionsCard .dashboard-expander-icon { align-self:flex-start; }
#dashboard #airportConditionsCard .dashboard-expander-action { margin-top:9px; }
#dashboard .airport-conditions-preview { display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; margin-top:12px; font-size:13px; line-height:1.5; color:#fff; }
#dashboard .airport-conditions-temperature { font-size:24px; font-weight:700; line-height:1; }
#dashboard .airport-conditions-wind { font-size:12px; }
#dashboard .airport-conditions-warning { display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:#ffe5a0; font-size:12px; font-weight:700; }
#dashboard .airport-conditions-warning[hidden] { display:none; }
#dashboard .airport-conditions-warning svg { width:18px; height:18px; flex:none; }
#dashboard #airportSecurityCard[hidden] { display:none; }
#dashboard #airportSecurityCard #airportSecurity { margin:0; padding:0; background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
#dashboard .dashboard-calendar-column #bookingCalendarCard { display:block; padding:0; min-height:0; }
#dashboard #airportConditionsCard[open] .dashboard-radar:not([hidden]),
#dashboard #airportConditionsCard[open] .dashboard-live-cam:not([hidden]) { display:block; }
@media(min-width:701px) {
  .dashboard-cards-stack > .dashboard-conditions-column { grid-column:1; grid-row:1; }
  .dashboard-cards-stack > .dashboard-calendar-column { grid-column:2; grid-row:1 / span 2; }
}
@media(max-width:650px) {
  #dashboard #airportConditionsCard .dashboard-weather-content { padding:0 14px 14px; }
  #dashboard .airport-conditions-preview { gap:5px 9px; font-size:12px; }
}

#dashboard .security-compact-row { display:flex; flex-wrap:wrap; gap:3px 12px; margin-top:6px; }
#dashboard .security-compact-checkpoint { flex-basis:100%; font-size:12px; color:#fff; }
#dashboard .security-compact-wait { font-size:12px; color:rgba(255,255,255,.9); }

/* One full-width dashboard column on desktop. */
@media (min-width: 701px) {
  #dashboard .dashboard-cards-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #dashboard .dashboard-cards-stack > .dashboard-conditions-column,
  #dashboard .dashboard-cards-stack > .dashboard-calendar-column {
    display: contents;
  }
  #dashboard .dashboard-cards-stack > .dashboard-ad-slot {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
  }
  #dashboard .dashboard-cards-stack .dashboard-weather,
  #dashboard .dashboard-cards-stack .dashboard-expander {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
  }
}

/* Compact pill controls shared by every expandable dashboard card. */
#dashboard .dashboard-expander-action {
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  line-height: 1.2;
}
#dashboard .dashboard-expander-header:hover .dashboard-expander-action {
  background: rgba(255,255,255,.19);
  border-color: rgba(255,255,255,.5);
}
#dashboard .dashboard-expander-chevron { display: none; }
@media(max-width:650px) {
  #dashboard .dashboard-expander-action { padding:6px 10px; }
}

/* Airport search matches the guide's frosted search field. */
#dashboard .dashboard-airport-picker { position:relative; margin:16px 0; }
#dashboard .airport-picker-label { display:block; margin:0 0 8px 10px; font-size:12px; color:rgba(255,255,255,.86); }
#dashboard .airport-picker-field { display:flex; align-items:center; gap:8px; padding:7px 16px; border:1px solid rgba(255,255,255,.30); border-radius:999px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 8px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.12); }
#dashboard .airport-picker-field > svg { width:21px; height:21px; flex:none; color:#fff; }
#dashboard .airport-picker-field input { flex:1; min-width:0; padding:10px 4px; border:0; border-radius:999px; background:transparent; color:#fff; font:inherit; font-size:16px; }
#dashboard .airport-picker-field input::placeholder { color:rgba(255,255,255,.8); }
#dashboard .airport-picker-field:focus-within { outline:2px solid #b6d3c0; outline-offset:3px; }
#dashboard .airport-picker-field input:focus-visible { outline:none; }
#dashboard .airport-picker-panel { margin-top:10px; padding:12px; border:1px solid rgba(255,255,255,.30); border-radius:18px; background:#344e3e; box-shadow:0 10px 26px rgba(0,0,0,.18); color:#fff; }
#dashboard .airport-picker-panel[hidden] { display:none; }
#dashboard .airport-picker-status { margin:0 5px 10px; font-size:12px; color:rgba(255,255,255,.8); }
#dashboard .airport-picker-results { max-height:310px; overflow-y:auto; scrollbar-width:thin; }
#dashboard .airport-picker-result { width:100%; display:flex; align-items:center; gap:13px; padding:12px; border:1px solid transparent; border-radius:11px; background:transparent; color:#fff; text-align:left; font:inherit; cursor:pointer; }
#dashboard .airport-picker-result > strong { min-width:36px; font-size:15px; }
#dashboard .airport-picker-result > span:not(.airport-picker-selected) { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
#dashboard .airport-picker-result > span > strong { font-size:13px; }
#dashboard .airport-picker-result > span > span { font-size:11px; opacity:.8; }
#dashboard .airport-picker-result:hover,#dashboard .airport-picker-result[aria-selected="true"] { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.12); }
#dashboard .airport-picker-selected { border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:4px 7px; font-size:10px; flex:none; }
#dashboard .security-compact-age { display:block; margin-top:7px; font-size:10px; color:rgba(255,255,255,.7); }

/* Every dropdown occupies one full-width row in a single shared stack. */
#dashboard #dashboardMain > .dashboard-cards-stack {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  grid-template-columns:none;
}
#dashboard #dashboardMain > .dashboard-cards-stack > .dashboard-weather,
#dashboard #dashboardMain > .dashboard-cards-stack > .dashboard-expander,
#dashboard #dashboardMain > .dashboard-cards-stack > .dashboard-ad-slot {
  display:block;
  flex:0 0 auto;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  box-sizing:border-box;
  align-self:stretch;
  grid-column:auto;
  grid-row:auto;
}
#dashboard #dashboardMain > .dashboard-cards-stack > .dashboard-weather { min-height:0; height:auto; border-radius:18px; }
#dashboard #dashboardMain > .dashboard-cards-stack > #bookingCalendarCard { padding:0; min-height:0; height:auto; }
#dashboard #dashboardMain > .dashboard-cards-stack > .dashboard-ad-slot { display:flex; }
#dashboard #dashboardMain > .dashboard-cards-stack > [hidden] { display:none; }

/* Decorative security conveyor stays below the checkpoint preview and content. */
#dashboard #airportSecurityCard { position:relative; padding-bottom:34px; overflow:hidden; }
#dashboard .security-conveyor { position:absolute; left:0; right:0; bottom:0; height:32px; overflow:hidden; pointer-events:none; color:#dce8dc; opacity:.75; }
#dashboard .security-conveyor-rollers { position:absolute; left:0; right:0; bottom:0; height:7px; border-top:1px solid rgba(255,255,255,.28); background:radial-gradient(circle at 4px 4px,rgba(220,232,220,.5) 1.4px,transparent 1.8px) 0 0 / 12px 7px; }
#dashboard .security-conveyor-bag { position:absolute; bottom:6px; left:-36px; width:28px; height:26px; animation:security-belt-travel 22s linear infinite; animation-play-state:paused; }
#dashboard .security-conveyor-bag svg { display:block; width:100%; height:100%; }
#dashboard .security-conveyor-bag:nth-child(2) { animation-delay:-5.5s; width:32px; }
#dashboard .security-conveyor-bag:nth-child(3) { animation-delay:-11s; width:25px; }
#dashboard .security-conveyor-bag:nth-child(4) { animation-delay:-16.5s; width:30px; }
#dashboard #airportSecurityCard.is-belt-active .security-conveyor-bag { animation-play-state:running; }
@keyframes security-belt-travel { from { left:-36px; } to { left:calc(100% + 36px); } }
@media(prefers-reduced-motion:reduce) {
  #dashboard .security-conveyor-bag { animation:none; left:16%; }
  #dashboard .security-conveyor-bag:nth-child(2) { left:38%; }
  #dashboard .security-conveyor-bag:nth-child(3) { left:60%; }
  #dashboard .security-conveyor-bag:nth-child(4) { left:82%; }
}

/* Dashboard dropdown cards always share one vertical column at every width. */
#dashboard #dashboardMain #dashboardCardStack {
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  grid-template-columns:none !important;
  columns:auto !important;
  width:100%;
  min-width:0;
}
#dashboard #dashboardMain #dashboardCardStack > .dashboard-weather,
#dashboard #dashboardMain #dashboardCardStack > .dashboard-expander,
#dashboard #dashboardMain #dashboardCardStack > .dashboard-ad-slot {
  width:100% !important;
  max-width:none !important;
  min-width:0;
  float:none !important;
  flex:0 0 auto !important;
  grid-column:auto !important;
  grid-row:auto !important;
  box-sizing:border-box;
  margin-inline:0 !important;
}

/* Interactive route viewport and native destination/tracking links. */
#dashboard .departure-route-canvas { position:relative; }
#dashboard .departure-route-canvas .route-map-interactive { touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; aspect-ratio:1000 / 520; height:auto; min-height:0; }
#dashboard .route-map-interactive.is-dragging { cursor:grabbing; }
#dashboard .route-booking-link, #dashboard .route-plane { cursor:pointer; }
#dashboard .route-booking-link:hover .route-label-box, #dashboard .route-booking-link:focus-visible .route-label-box { stroke:#31583e; stroke-width:2; }
#dashboard .route-booking-link:focus-visible .route-airport, #dashboard .route-plane:focus-visible .route-plane-halo { stroke:#31583e; stroke-width:3; }
#dashboard .route-map-interactive:focus-visible { outline:3px solid #31583e; outline-offset:-4px; }
#dashboard .departure-route-map-controls { position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:4px; padding:5px; border:1px solid #cbd8c8; border-radius:12px; background:rgba(255,255,255,.95); color:#31583e; box-shadow:0 2px 9px #172c2620; }
#dashboard .departure-route-map-control { min-width:34px; min-height:34px; padding:5px 9px; border:1px solid #cbd8c8; border-radius:8px; background:#fff; color:#31583e; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
#dashboard .departure-route-map-control:disabled { opacity:.4; cursor:default; }
#dashboard .departure-route-map-control:focus-visible { outline:2px solid #31583e; outline-offset:2px; }
#dashboard .departure-route-zoom-level { font-size:11px; min-width:38px; text-align:center; }
#dashboard .departure-route-map-help { margin:10px 0 4px; font-size:12px; line-height:1.5; color:rgba(255,255,255,.9); }
#dashboard a.departure-route-chip { display:inline-flex; align-items:center; text-decoration:none; }

/* Calendar dates are native buttons; selected-day schedules stay inside the card. */
#dashboard button.booking-calendar-day { font-family:inherit; padding:0; cursor:pointer; }
#dashboard button.booking-calendar-day:focus-visible { outline:3px solid #d6ebc0; outline-offset:2px; z-index:1; }
#dashboard button.booking-calendar-day.is-selected { outline:2px solid #31583e; outline-offset:1px; box-shadow:inset 0 0 0 2px #fff; }
#dashboard .calendar-departures-hint { margin:12px 0 8px; font-size:12px; color:rgba(255,255,255,.85); }
#dashboard .calendar-departures { margin:12px 0; padding:14px; border:1px solid rgba(255,255,255,.25); border-radius:14px; background:rgba(20,34,25,.18); color:#fff; }
#dashboard .calendar-departures[hidden] { display:none; }
#dashboard .calendar-departures-title { margin:0 0 7px; font-size:15px; color:#fff; }
#dashboard .calendar-departures-summary,#dashboard .calendar-departures-note { margin:6px 0 10px; font-size:11px; line-height:1.5; color:rgba(255,255,255,.85); }
#dashboard .calendar-departures-list { display:flex; flex-direction:column; gap:6px; max-height:420px; overflow-y:auto; overscroll-behavior:contain; }
#dashboard .calendar-departure-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.16); font-size:12px; }
#dashboard .calendar-departure-time { min-width:75px; color:#fff; }
#dashboard .calendar-departure-destination { flex:1 1 120px; }
#dashboard .calendar-departure-number,#dashboard .calendar-departure-status { font-size:11px; color:rgba(255,255,255,.8); }
#dashboard .calendar-departure-link { margin-left:auto; }