/* 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; }
/* 3-card variant (the features scoring-honesty row) */
.flow.flow-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .flow.flow-3 { grid-template-columns: 1fr; } }

/* pull-quote of a real landing review (features page) */
.review-quote {
  margin: 44px auto 0;
  max-width: 760px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 24px 28px;
}
.review-quote blockquote {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
}
.review-quote figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

/* ---- supported-avionics strip (under how-it-works) ---- */
.avionics { margin-top: 28px; text-align: center; }
.avionics-head {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.avionics-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.avionics-strip .av-chip {
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.avionics-strip .av-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.avionics-more {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.avionics-more:hover { text-decoration: underline; }

/* ---- 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);
}
/* A .panel-art slot whose content brings its own chrome (the device composite):
   keeps the split.reverse ordering hook, drops the card styling. */
.panel-art.panel-plain {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.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);
}

/* ---- device composite (real screenshots: browser window + phone) ---- */
.device-duo {
  position: relative;
  /* right/bottom rooms give the phone somewhere to overhang without
     overlapping the next section or the split's text column */
  padding: 0 5% 12% 0;
}
.device-duo::before {
  /* soft brand glow lifting the composite off the page (echoes .hero) */
  content: "";
  position: absolute;
  inset: -6% -8% 4% -8%;
  background: radial-gradient(55% 55% at 55% 42%, #e2edf9 0%, rgba(226, 237, 249, 0) 72%);
  pointer-events: none;
}
.device-duo figure { margin: 0; position: relative; z-index: 1; }
.dd-window {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 32, 54, 0.06), 0 28px 60px -30px rgba(15, 32, 54, 0.35);
}
.dd-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--panel-tint);
  border-bottom: 1px solid var(--line);
}
.dd-dots { display: flex; gap: 5px; }
.dd-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5636a;
}
.dd-dots i:nth-child(2) { background: #eab244; }
.dd-dots i:nth-child(3) { background: #55b467; }
.dd-domain {
  margin: 0 auto;
  transform: translateX(-19px); /* optically centered: offset the dots' width */
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 14px;
  line-height: 1.5;
}
.dd-window img {
  display: block;
  width: 100%;
  height: auto;
}
.device-duo figure.dd-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 24.5%;
  background: #10151d;
  border-radius: 11% / 5.1%;
  padding: 1.9%;
  box-shadow: 0 2px 5px rgba(15, 32, 54, 0.18), 0 30px 55px -24px rgba(15, 32, 54, 0.5);
}
.dd-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8.5% / 3.9%;
}

/* 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; }

/* The page footer is the shared _footer.html (class .site-footer) — single
   source for every page; the old per-page .mkt-footer was removed. */

/* ---- 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);
}