/* The SkyBanner Pro page. It wears the site's look (../styles.css); this file adds the sky at the top, the planned fares,
   and Free and Pro side by side. It stands alone: the checkout isn't on the site until Pro goes on sale. */

/* No section menu here, so Download keeps to the right on its own. */
.topbar .topbar-download { margin-left: auto; }

.pro-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--topbar) + clamp(32px, 6vw, 72px)) 0 clamp(64px, 8vw, 104px);
  background: linear-gradient(180deg, var(--sky-mid), var(--sky-low) 30%, var(--sky-horizon) 72%, var(--paper));
}
.pro-hero .section-head h1 { font-size: clamp(2.7rem, 1.5rem + 4.4vw, 5.2rem); }
.pro-hero .section-head > p:not(.sign) { color: var(--ink); }

/* The fares: one card per plan, the yearly one first, both still to come. */
.fares { display: grid; gap: clamp(20px, 3vw, 28px); max-width: 880px; margin: 0 auto; }
@media (min-width: 760px) { .fares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fare {
  display: grid; align-content: start; gap: 10px;
  padding: 26px clamp(20px, 3vw, 30px) 28px;
  border-radius: 22px;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.fare-soon {
  justify-self: start; padding: 7px 12px 6px;
  border-radius: 6px;
  background: var(--sign); color: var(--amber);
  font: 700 0.8rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase;
}
.fare h2 { margin-top: 6px; font: 700 1.6rem/1 var(--display); font-stretch: 75%; font-variation-settings: "wdth" 75; }
.fare-price { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.fare-price b { font: 700 clamp(2.6rem, 2rem + 2.2vw, 3.6rem)/1 var(--display); font-stretch: 75%; font-variation-settings: "wdth" 75; }
.fare-price span { color: var(--ink-3); }
.fare-note { color: var(--ink-2); }

.fare-wait {
  max-width: 880px; margin: 24px auto 0; padding: 14px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sunshine) 24%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tangerine) 55%, transparent);
  color: var(--ink-2); text-align: center;
}
.fare-wait b { color: var(--ink); }
.fare-terms { display: grid; gap: 10px; max-width: 880px; margin: 24px auto 0; }
@media (min-width: 760px) { .fare-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fare-terms li { display: flex; gap: 10px; align-items: start; font-size: 0.95rem; color: var(--ink); }
.fare-terms svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.fare-tax { max-width: 880px; margin: 18px auto 0; font-size: 0.9rem; color: var(--ink-2); text-align: center; }
.fare-action { max-width: 320px; margin: 26px auto 0; }

/* Free and Pro, side by side */
.pro-compare { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.compare-wrap { max-width: 880px; margin: 0 auto; overflow-x: auto; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font: 600 0.78rem/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.compare thead th:last-child { color: var(--red); }
.compare tbody th { font-weight: 600; }
.compare tbody td { color: var(--ink-2); }
.compare tbody td:last-child { color: var(--ink); font-weight: 600; }
@media (max-width: 559px) {
  .compare th, .compare td { padding: 12px 12px; font-size: 0.92rem; }
}