/* MY FS FLIGHTS — shared styles for index.html, pricing.html and flight-report.html */

:root {
  --blue: #3f94ca;
  --blue-light: #86d5f6;
  --blue-link: #3584b6;
  --page: #fbfdff;
  --ink: #000;
  --btn-gradient: linear-gradient(233deg, #86d5f6 2.36%, #3f94ca 95.86%);
  --container: 1222px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Barlow", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  min-width: 235px;
  padding: 0 24px;
  border-radius: 81px;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--btn-gradient);
  color: #fff;
  font-weight: 800;
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(63, 148, 202, .45); }
.btn-outline {
  border: 2px solid rgba(63, 148, 202, .48);
  color: var(--blue);
  font-weight: 600;
}
.btn-outline:hover { background: rgba(63, 148, 202, .08); }
.btn-nav { min-width: 216px; }

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 321px;
  flex-shrink: 0;
  font-size: 24px;
  color: #fff;
}
.brand img { width: 62px; height: 62px; }
.brand b { font-weight: 700; color: var(--blue-light); }
.brand span { font-weight: 300; }

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 430px;
  height: 58px;
  padding: 0 19px;
  border: 1px solid var(--blue);
  border-radius: 81px;
  background: rgba(217, 217, 217, .02);
  -webkit-backdrop-filter: blur(25.6px);
  backdrop-filter: blur(25.6px);
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 22px;
  border-radius: 81px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.main-nav a:hover { background: rgba(63, 148, 202, .35); }
.main-nav a[aria-current="page"] { background: var(--blue); }

.site-header .btn-nav { margin-left: auto; margin-right: 41px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 760px;
  color: #fff;
  background: #0d2233;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-inner {
  position: relative;
  height: 100%;
  padding-left: 63px;
  padding-right: 31px;
}
.hero h1 {
  padding-top: 180px;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.92px;
  text-shadow: 0 4px 23.2px rgba(0, 0, 0, .17);
}
.hero-lede {
  max-width: 497px;
  margin-top: 21px;
  padding-left: 4px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.72px;
}

/* Home hero */
.hero-home .hero-copy { max-width: 560px; }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 58px;
  margin-top: 41px;
  margin-left: 18px;
}
.text-link {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}
.text-link:hover { text-decoration: underline; }
.hero-report {
  position: absolute;
  top: 138px;
  right: 31px;
  width: 500px;
  height: auto;
}
.hero-stats {
  position: absolute;
  left: 195px;
  right: 0;
  top: 611px;
  display: grid;
  grid-template-columns: 339px 349px auto;
  list-style: none;
  padding: 0;
}
.hero-stats strong {
  display: block;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.44px;
  color: var(--blue-light);
}
.hero-stats span {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.72px;
}

/* Pricing hero */
.hero-pricing h1 { max-width: 522px; padding-top: 176px; margin-left: -8px; }
.hero-pricing .hero-lede { margin-top: 21px; padding-left: 0; margin-left: -4px; }

/* ---------- Light sections + arc decoration ---------- */

.section-light {
  position: relative;
  background: var(--page);
  overflow: hidden;
}
.arc {
  position: absolute;
  pointer-events: none;
  user-select: none;
  max-width: none;
}
.section-light > .container { position: relative; }

h2.display {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.92px;
}

/* ---------- Home: Learn from every flight ---------- */

.learn { padding: 46px 0 22px; }
.learn .arc { top: -7px; left: calc(50% - 71px); width: 1058px; }
.learn h2 { padding-left: 94px; }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 40px;
}
.feature h3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.feature p {
  margin-top: 13px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.72px;
}
.feature-report { margin-top: 10px; }
.feature-report .feature-text { padding-left: 94px; max-width: 561px; }
.feature-report img { width: 456px; margin-left: 51px; }

.feature-opportunity { margin-top: 43px; }
.feature-opportunity img { width: 449px; margin-left: 82px; }
.feature-opportunity .feature-text { padding-left: 44px; max-width: 481px; }

.feature-insights { margin-top: -27px; }
.feature-insights .feature-text { padding-left: 93px; max-width: 549px; }
.feature-insights img { width: 530px; margin-left: 56px; }

.report-collage {
  width: 640px;
  margin: 40px auto 0;
}
.cta-link {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1.44px;
  color: var(--blue-link);
  text-align: center;
}
.cta-link:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Testimonials ---------- */

.testimonials {
  position: relative;
  min-height: 519px;
  padding: 57px 0 60px;
  color: #fff;
  background: #1c2a36 url("assets/v1/city.webp") center 38% / cover no-repeat;
}
.testimonials [hidden] { display: none; }
.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .57);
}
.testimonials .container { position: relative; padding-left: 50px; }
.testimonial-list {
  display: flex;
  gap: 43px;
  max-width: 1130px;
  margin-top: 37px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 15px;
}
.testimonial-list::-webkit-scrollbar { display: none; }
.testimonial-list:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 6px; }
.testimonial {
  /* One review a slide: the real ones run to a few paragraphs, and a full-width card
     keeps them short enough to read without scrolling. */
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 15px;
  background: rgba(0, 0, 0, .05);
  -webkit-backdrop-filter: blur(18.45px);
  backdrop-filter: blur(18.45px);
}
.testimonial blockquote {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.66px;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.6px;
}
.testimonial figure { margin: 0; display: contents; }
.testimonial img {
  width: 73px;
  height: 73px;
  border-radius: 50%;
  flex-shrink: 0;
}
.testimonial b { display: block; font-weight: 700; }
.review-more { display: none; }   /* phones only, see the 900px block */
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 1130px;
  margin-top: 22px;
}
/* Arrows sit either side of the card, level with its middle. The row is pulled left by an
   arrow and a gap so the card itself still lines up under the heading. */
.carousel {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1230px;
  margin: 37px 0 0 -50px;
}
.carousel .testimonial-list { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.carousel-arrow {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.carousel-arrow:hover { background: rgba(255, 255, 255, .15); }
.carousel-arrow:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.dots button {
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.dots button::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background-color .15s ease, transform .15s ease;
}
.dots button[aria-selected="true"]::before { background: #fff; transform: scale(1.25); }
.dots button:focus-visible { outline: 2px solid var(--blue-light); border-radius: 50%; }
.testimonial-placeholder { border-style: dashed; }
.testimonial-placeholder blockquote { opacity: .7; font-style: italic; }
.avatar-blank {
  width: 73px;
  height: 73px;
  flex-shrink: 0;
  border: 1px dashed rgba(255, 255, 255, .6);
  border-radius: 50%;
}

/* ---------- Home: Getting started ---------- */

.start { padding: 83px 0 136px; background: #fff; }
.start .arc {
  right: calc(50% - 978px - 435px);
  bottom: -90px;
  width: 1438px;
  transform: rotate(180deg);
  opacity: .63;
}
.start-grid {
  display: grid;
  grid-template-columns: 1fr 368px;
  column-gap: 40px;
  padding: 0 24px 0 90px;
}
.start h2 { padding-left: 12px; }
.steps {
  margin-top: 36px;
  padding: 0;
  list-style: none;
}
.steps li {
  position: relative;
  padding-left: 63px;
  margin-bottom: 25px;
  max-width: 715px;
}
.steps img {
  position: absolute;
  left: 4px;
  top: 6px;
  width: 44px;
  height: auto;
}
.steps h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.84px;
}
.steps p {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.72px;
}
.start .btn { margin: 11px 0 0 224px; }
.start-photo {
  width: 368px;
  height: 451px;
  margin-top: 39px;
  border-radius: 24px;
  object-fit: cover;
  object-position: 38% 50%;
}

/* ---------- Pricing ---------- */

.pricing-plans { position: relative; z-index: 2; margin-top: -294px; }
.plans {
  display: grid;
  grid-template-columns: repeat(3, 319px);
  gap: 40px;
  justify-content: center;
  width: 1119px;
  max-width: 100%;
  margin-left: 62px;
  padding: 46px 41px 45px;
  border-radius: 15px;
  background: var(--blue) url("assets/v1/pricing-panel.png") center / 100% 100% no-repeat;
}
.plan {
  display: flex;
  flex-direction: column;
  min-height: 414px;
  padding: 18px 10px 18px;
  border: 1px solid #acacac;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 4px 20.4px rgba(0, 0, 0, .25);
}
.plan-featured { border: 4px solid var(--blue-light); padding: 15px 7px 15px; }
.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px 0 14px;
}
.plan h3 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.44px;
}
.plan-price {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1.44px;
  color: var(--blue);
}
.plan-price small { font-size: 14px; }
.plan ul {
  margin-top: 33px;
  padding-left: 33px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.66px;
}
.plan li { margin-bottom: 20px; }
.plan .btn { margin: auto auto 0; }

.included { padding: 55px 0 150px; }
.included .arc {
  top: -230px;
  left: calc(50% - 976px);
  width: 1686px;
  transform: rotate(180deg);
  opacity: .63;
}
.included h2 { padding-left: 62px; }
.included-grid {
  display: grid;
  grid-template-columns: 539px 569px;
  column-gap: 52px;
  margin-top: 48px;
  padding-left: 62px;
}
.included-grid h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.72px;
}
.included-grid p {
  margin-bottom: 30px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.72px;
}

/* ---------- Footer ---------- */

.site-footer { padding: 53px 0 80px; background: var(--page); }
.footer-grid {
  display: grid;
  grid-template-columns: 439px 426px 1fr;
  margin-left: -21px;
}
.site-footer .brand { color: #000; width: auto; }
.footer-tagline { margin-top: 9px; padding-left: 3px; font-size: 20px; }
.footer-copy { margin-top: 60px; padding-left: 3px; font-size: 24px; }
.footer-links { padding-top: 14px; padding-left: 21px; }
.footer-links h4 { margin: 0 0 11px; font-size: 24px; font-weight: 700; }
.footer-links ul { padding: 0; list-style: none; font-size: 20px; font-weight: 300; }
.footer-links li { margin-bottom: 11px; }
.footer-links a:hover { color: var(--blue); }
.footer-cta { padding-top: 3px; padding-left: 21px; }
.footer-cta h4 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.08px;
}
.footer-cta p {
  max-width: 435px;
  margin: 15px 0 10px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.6px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1260px) {
  .brand { width: auto; margin-right: 24px; }
  .main-nav { width: auto; gap: 4px; padding: 0 10px; }
  .main-nav a { padding: 0 14px; }
  .site-header .btn-nav { margin-right: 0; }
  .hero-inner { padding-left: 24px; padding-right: 0; }
  .hero-report { width: 43%; right: 0; top: 160px; }
  .hero-stats { left: 24px; grid-template-columns: repeat(3, 1fr); }
  .learn h2, .feature .feature-text, .included h2, .included-grid { padding-left: 0 !important; }
  .feature img { margin-left: 0 !important; width: 100% !important; max-width: 530px; }
  .feature-insights { margin-top: 40px; }
  .testimonials .container { padding-left: 24px; }
  .testimonial-list { gap: 20px; max-width: none; }
  .dots, .carousel { max-width: none; }
  .carousel { margin-left: 0; }
  .start-grid { padding: 0; }
  .start .btn { margin-left: 63px; }
  .plans { width: auto; margin-left: 0; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 20px; }
  .included-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { margin-left: 0; grid-template-columns: 1.1fr .8fr 1.2fr; }
}

@media (max-width: 900px) {
  .site-header { top: 16px; }
  .site-header .container { flex-wrap: wrap; row-gap: 12px; }
  .brand img { width: 44px; height: 44px; }
  .site-header .btn-nav { display: none; }   /* the hero's own button is one thumb away */
  .main-nav { order: 3; width: 100%; height: 44px; justify-content: space-between; padding: 0 5px; gap: 0; }
  .main-nav a { height: 32px; padding: 0 9px; font-size: 13px; }

  h2.display, .hero h1 { font-size: 42px; letter-spacing: -1.2px; }
  .hero { height: auto; padding-bottom: 40px; }
  .hero h1 { padding-top: 150px !important; margin-left: 0 !important; }
  .hero-lede { font-size: 20px; margin-left: 0 !important; padding-left: 0; }
  .hero-actions { flex-wrap: wrap; gap: 16px 28px; margin-left: 0; margin-top: 28px; }
  .hero-report { position: static; width: 100%; max-width: 580px; margin: 32px auto 0; }
  .hero-stats { position: static; margin-top: 32px; gap: 12px; }
  .hero-stats strong { font-size: 32px; }
  .hero-stats span { font-size: 16px; }
  .hero-inner { padding-right: 24px; }

  .feature { grid-template-columns: 1fr; row-gap: 24px; margin-top: 48px !important; }
  .feature .feature-text { max-width: none !important; }
  .feature-opportunity img { order: 2; }
  .feature p, .steps p, .included-grid p, .included-grid h3 { font-size: 20px; }
  .feature img { margin: 0 auto !important; }
  .report-collage { width: 100%; }
  .cta-link { font-size: 30px; }

  .testimonial-list { align-items: flex-start; transition: height .25s ease; }
  .testimonial { padding: 22px 18px 14px; }
  /* Long reviews are cut to nine lines until Read more is pressed. */
  .testimonial:not(.is-open) blockquote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    line-clamp: 9;
    overflow: hidden;
  }
  .review-more {
    display: block;
    align-self: flex-start;
    margin-top: 6px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--blue-light);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
  }
  .carousel-arrow { display: none; }   /* no room beside the card on a phone: swipe or use the dots */
  .testimonial blockquote { font-size: 18px; }

  .start { padding: 56px 0 72px; }
  .start-grid { grid-template-columns: 1fr; }
  .start h2 { padding-left: 0; }
  .start .btn { margin-left: 0; }
  .start-photo { width: 100%; height: 320px; margin-top: 40px; }

  .pricing-plans { margin-top: 0; padding-top: 24px; }
  .hero-pricing { padding-bottom: 48px; }
  .plans { grid-template-columns: 1fr; }
  .plan { min-height: 0; }
  .plan .btn { margin-top: 12px; }
  .included { padding: 48px 0 72px; }
  .included-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .footer-links, .footer-cta { padding-left: 0; }
  .footer-copy { margin-top: 20px; font-size: 18px; }
  .footer-cta h4 { font-size: 30px; }
}

@media (max-width: 480px) {
  .hero-stats { gap: 8px; }
  .hero-stats strong { font-size: 26px; letter-spacing: -.8px; }
  .hero-stats span { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---------- Flight report page ---------- */

/* The hero and the panel below it line up with the pricing page: same heading position,
   same panel top, left edge and width. */
.hero-tour h1 { max-width: none; }

.tour { position: relative; z-index: 2; margin-top: -294px; padding-bottom: 84px; }
.tour-panel {
  width: 1119px;
  max-width: 100%;
  margin-left: 62px;
  padding: 32px 36px 36px;
  border: 1px solid #d5dde3;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 20.4px rgba(0, 0, 0, .25);
}
.tour-head h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.08px;
}
.tour-head p { margin-top: 6px; font-size: 20px; line-height: 1.2; letter-spacing: -.6px; }

.tour-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 28px;
  align-items: start;
  margin-top: 24px;
}

/* The report sits in its own scrolling window so visitors can also browse it freely. */
.tour-frame {
  position: relative;
  height: 680px;
  overflow: auto;
  border: 1px solid #c9d4dc;
  border-radius: 12px;
  background: #eef3f7;
}
.tour-frame:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.tour-canvas { padding: 22px; }
.tour-sheet { position: relative; }
.tour-sheet picture { display: block; }
.tour-sheet img { width: 100%; border-radius: 8px; }

/* Each area of the report is one big button; the numbered badge sits on its top-left corner. */
.tour-area {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.tour-area:hover { background: rgba(63, 148, 202, .08); box-shadow: inset 0 0 0 2px rgba(63, 148, 202, .55); }
.tour-area:focus-visible { outline: 3px solid #0d2233; outline-offset: 3px; }
.tour-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font: 700 18px/32px "Barlow", "Segoe UI", Arial, sans-serif;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  transition: transform .15s ease, background-color .15s ease;
}
.tour-area:hover .tour-marker { background: #2f7fb3; }
.tour-area[aria-pressed="true"] .tour-marker { background: #0d2233; transform: scale(1.18); }
.tour-highlight {
  position: absolute;
  z-index: 1;
  border: 3px solid var(--blue);
  border-radius: 14px;
  box-shadow: 0 0 0 5px rgba(134, 213, 246, .6);
  pointer-events: none;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}

.tour-caption {
  padding: 22px 22px 20px;
  border-radius: 15px;
  background: #0d2233;
  color: #fff;
}
.tour-count { font-size: 16px; font-weight: 500; color: var(--blue-light); }
.tour-caption h3 {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.84px;
}
.tour-caption p:not(.tour-count) {
  min-height: 7.6em;
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.4px;
}
.tour-nav { display: flex; gap: 10px; margin-top: 16px; }
.tour-nav button {
  flex: 1;
  height: 44px;
  border: 2px solid rgba(134, 213, 246, .6);
  border-radius: 81px;
  background: none;
  color: #fff;
  font: 600 18px/1 "Barlow", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}
.tour-nav button:hover { background: rgba(134, 213, 246, .16); }
.tour-nav .tour-next { border: 0; background: var(--btn-gradient); font-weight: 800; }
.tour-nav .tour-next:hover { background: var(--btn-gradient); box-shadow: 0 6px 18px rgba(63, 148, 202, .45); }
.tour-nav button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.tour-list { margin: 16px 0 0; padding: 0; list-style: none; }
.tour-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #000;
  font: 500 19px/1.2 "Barlow", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.4px;
  text-align: left;
  cursor: pointer;
}
.tour-list button b {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(63, 148, 202, .16);
  color: #1f6594;
  font-size: 15px;
  line-height: 28px;
  text-align: center;
}
.tour-list button:hover { background: rgba(63, 148, 202, .08); }
.tour-list button[aria-current="true"] { background: rgba(63, 148, 202, .16); font-weight: 700; }
.tour-list button[aria-current="true"] b { background: var(--blue); color: #fff; }
.tour-list button:focus-visible { outline: 3px solid var(--blue); }
.tour-list p { margin: 0 10px 12px 50px; font-size: 18px; line-height: 1.25; }
/* With JavaScript the caption above shows the text, so the list becomes a simple index. */
.js .tour-list p { display: none; }

/* Phones do not get the interactive tour: each section is its heading, its explanation and
   then that part of the report (see the 900px block). The picture is the phone report image
   cropped to the section, from the same left/top/width/height percentages the tour uses,
   given on the element as --l --t --w --h. 320 x 5210 is that image's size. */
.tour-crop, .phone-only { display: none; }
.tour-crop {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: calc(var(--w) * 320) / calc(var(--h) * 5210);
  border: 1px solid #c9d4dc;
  border-radius: 10px;
  background: #eef3f7;
}
.tour-crop img {
  position: absolute;
  left: calc(-100% * var(--l) / var(--w));
  top: calc(-100% * var(--t) / var(--h));
  width: calc(10000% / var(--w));
  max-width: none;
  height: auto;
}

/* ---------- Common questions (pricing and flight report pages) ---------- */

.faq { padding: 10px 0 96px; background: var(--page); }
.faq .container { padding-left: 86px; }
.included + .faq { position: relative; margin-top: -70px; }
.faq-list { max-width: 900px; margin-top: 30px; border-top: 1px solid #c9d4dc; }
.faq details { border-bottom: 1px solid #c9d4dc; }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.72px;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: var(--blue);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--blue-link); }
.faq summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.faq details p {
  max-width: 760px;
  padding: 0 4px 24px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.5px;
}

.next-flight { padding: 70px 0 120px; }
.next-flight .arc {
  top: -260px;
  left: calc(50% - 976px);
  width: 1686px;
  transform: rotate(180deg);
  opacity: .63;
}
.next-flight .container { padding-left: 86px; }
.next-flight p {
  max-width: 640px;
  margin: 16px 0 30px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.72px;
}

@media (max-width: 1260px) {
  .tour-panel { width: auto; margin-left: 0; }
  .tour-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; }
  .next-flight .container, .faq .container { padding-left: 24px; }
}

@media (max-width: 900px) {
  .tour { margin-top: 0; padding: 24px 0 56px; }
  .tour-panel { padding: 22px 12px 16px; }
  .tour-head { padding: 0 4px; }
  .tour-head h2 { font-size: 30px; }
  .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  /* No scroll box and nothing to tap: the sections are read one after another. */
  .tour-frame, .tour-caption { display: none !important; }
  .wide-only { display: none; }
  .phone-only { display: inline; }
  .tour-list { margin-top: 4px; }
  .tour-list li { margin-top: 30px; }
  .tour-list li:first-child { margin-top: 8px; }
  .tour-list button,
  .tour-list button:hover,
  .tour-list button[aria-current="true"] {
    padding: 0 4px;
    background: none;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.6px;
    pointer-events: none;
  }
  .tour-list button b,
  .tour-list button[aria-current="true"] b {
    flex-basis: 32px;
    height: 32px;
    background: var(--blue);
    color: #fff;
    font-size: 16px;
    line-height: 32px;
  }
  .tour-list p, .js .tour-list p { display: block; margin: 8px 4px 14px; font-size: 19px; }
  .tour-crop { display: block; }
  .next-flight { padding: 48px 0 72px; }
  .faq { padding-bottom: 64px; }
  .included + .faq { margin-top: -24px; }
  .faq summary { font-size: 20px; padding: 16px 2px; }
  .faq details p { font-size: 19px; }
  .next-flight p { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-area, .tour-marker, .tour-highlight { transition: none; }
}

/* ---------- Cookie banner (built by v1.js) ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 14px 24px;
  color: #fff;
  font-size: 16px;
  background: #0d2233;
  border-top: 1px solid var(--blue);
}
.cookie-banner p { margin: 0; }
.cookie-banner a { color: var(--blue-light); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-banner button {
  height: 36px;
  padding: 0 22px;
  border: 1px solid var(--blue);
  border-radius: 81px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: transparent;
  cursor: pointer;
}
.cookie-banner button[data-consent="yes"] { background: var(--blue); }
.cookie-banner button:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }