/* landing.fyi marketing page. OWNER: workstream C.
   Light theme, accent #2c6fb3 -- echoes the OG card / app design language.
   Mobile-first; tested clean down to ~360px. */

/* Brand tokens (--accent, --ink, --muted, --line, --panel, --panel-tint,
   --good, --r-*) now live in the shared webapp/static/app.css, which base.html
   loads before this file on every marketing/airport page. Don't redefine :root
   here — one source of truth. */

/* app.css paints a subtle top-right brand glow on the body of every page. Hero
   pages (marketing + airport) carry the full `.mkt .hero` glow instead, so drop
   the body one here to avoid doubling it up. */
body { background-image: none; }

/* ---- page scaffold ---- */
.mkt {
  color: var(--ink);
  line-height: 1.6;
}
.mkt .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}
.mkt section {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.mkt section:first-of-type {
  border-top: none;
}
.mkt .kicker {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 14px;
}
.mkt h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 18px;
}
.mkt h2 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.mkt h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.mkt p.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--muted);
  max-width: 40ch;
  margin: 0 0 28px;
}
.mkt .section-intro {
  max-width: 58ch;
  color: var(--muted);
  margin: 0 0 40px;
}

/* ---- buttons ---- */
.mkt .btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background 0.15s, transform 0.05s;
}
.mkt .btn:active { transform: translateY(1px); }
.mkt .btn-primary {
  background: var(--accent);
  color: #fff;
}
.mkt .btn-primary:hover { background: var(--accent-dark); }
.mkt .btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--line);
}
.mkt .btn-ghost:hover { background: var(--panel-tint); }
.mkt .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.mkt .cta-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 14px 0 0;
}

/* ---- hero ---- */
/* The hero glow is a brand signature and must read the SAME on every hero page
   (marketing index/about/features + airport directory/detail + not-covered),
   regardless of how tall that page's hero is. So:
   - The gradient is a FIXED-SIZE ellipse (px, not the size-relative `circle …
     58%`), anchored top-right and fading to a transparent tint of its own
     colour by ~260px down — identical glow on a short airport hero and the tall
     index hero, with no hard edge where a short hero ends.
   - It bleeds to all three outer edges: left/right via the negative-margin/
     padding pair (content stays on the page's column, only the glow extends);
     TOP via the negative margin that cancels <main>'s top padding, so the glow
     tucks right under the header instead of leaving a plain strip above it.
   App/utility pages (dashboard, account, upload, auth) have no `.hero`, so they
   stay glow-free — that's intended; "consistent" means consistent on hero pages. */
.mkt .hero {
  background: radial-gradient(760px 460px at 80% -60px, #e6eff9 0%, rgba(230, 239, 249, 0) 70%);
  border-top: none;
  padding-top: 64px;
  padding-bottom: 64px;
  margin-top: -24px;   /* cancel <main>'s 24px top padding → glow reaches the header */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
@media (max-width: 720px) {
  /* <main> drops to 18px padding on phones — match it so the top bleed stays flush. */
  .mkt .hero { margin-top: -18px; padding-top: 44px; }
}
.mkt .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 820px) {
  .mkt .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  /* The hero wrapper stretches its score card to fill, but the Share section's
     .panel-art centers (doesn't stretch) its card — on a phone that shrinks it
     to min-content and collapses the score bars to invisible nubs. Fill the
     wrapper here so the Share card matches the hero card. */
  .scorecard { width: 100%; }
}

/* ---- score card (hero centerpiece) ---- */
.scorecard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px -22px rgba(31, 82, 136, 0.45);
  overflow: hidden;
  position: relative;
}
.scorecard .runway-motif {
  position: absolute;
  right: -24px;
  bottom: -24px;
  opacity: 0.1;
  pointer-events: none;
}
.scorecard-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 26px 18px;
}
.scorecard .score-num {
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.scorecard .score-of {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}
.scorecard .band {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap; /* keep the band label (e.g. "GREASED IT") on one line */
}
.scorecard .band-cap {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scorecard-subs {
  padding: 4px 26px 18px;
  display: grid;
  gap: 11px;
}
.sub-row {
  display: grid;
  grid-template-columns: 9.5em 1fr 2.6em;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
}
.sub-row .sub-label { color: var(--muted); font-weight: 600; }
.sub-row .sub-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--panel-tint);
  overflow: hidden;
  min-width: 0; /* the 1fr bar column must be free to shrink/grow with the card */
}
.sub-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.scorecard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 26px 22px;
}
.scorecard-foot .chip {
  font-size: 0.78rem;
  background: var(--panel-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  color: var(--ink);
}
.scorecard-foot .chip b { color: var(--muted); font-weight: 600; margin-right: 5px; }

/* ---- how-it-works flow ---- */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 860px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .flow { grid-template-columns: 1fr; } }
.flow .step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 16px;
}
.flow .step .ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--panel-tint);
  color: var(--accent);
  margin-bottom: 12px;
}
.flow .step .num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}
.flow .step p { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; }

/* ---- sub-score breakdown ---- */
.subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 700px) { .subgrid { grid-template-columns: 1fr; } }
.subcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.subcard .meter { flex: 0 0 auto; }
.subcard .meter-num {
  font-size: 1.1rem;
  font-weight: 800;
  fill: var(--ink);
}
.subcard p { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; }

/* ---- bands legend ---- */
.bands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.bands .bandchip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px 6px 8px;
  font-size: 0.88rem;
  font-weight: 600;
}
.bands .dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.bands .rng { color: var(--muted); font-weight: 600; }

/* ---- two-col feature panels (trend + share) ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.split.reverse > .panel-art { order: 2; }
@media (max-width: 820px) { .split.reverse > .panel-art { order: 0; } }
.panel-art {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 14px 40px -26px rgba(31, 82, 136, 0.4);
}
.panel-art .art-cap {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.feature-list { list-style: none; padding: 0; margin: 18px 0 0; }
.feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--muted);
}
.feature-list li b { color: var(--ink); }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--good);
}

/* mini landing list (detection mock) */
.mini-list { display: grid; gap: 8px; }
.mini-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-tint);
  font-size: 0.92rem;
}
.mini-row .rwy { font-weight: 700; }
.mini-row .note { color: var(--muted); font-size: 0.86rem; }
.mini-row .pill {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  border-radius: var(--r-sm);
  padding: 3px 9px;
  font-size: 0.86rem;
}

/* ---- final CTA band ---- */
.cta-band {
  background: linear-gradient(180deg, var(--panel-tint), #fff);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 48px 32px;
  text-align: center;
}
.cta-band h2 { margin-bottom: 10px; }
.cta-band .cta-row { justify-content: center; }

/* ---- footer ---- */
.mkt-footer {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding: 28px 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.mkt-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.mkt-footer nav a { color: var(--muted); margin-left: 16px; text-decoration: none; }
.mkt-footer nav a:hover { color: var(--accent); }
.mkt-footer .footer-brand { font-weight: 600; }

/* ---- generic content (about / features intro) ---- */
.prose { max-width: 64ch; }
.prose p { color: var(--muted); margin: 0 0 16px; }
.prose .note {
  background: var(--panel-tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  color: var(--ink);
}