/* Shared stylesheet for the content pages and blog.
   Palette, type scale and component shapes are lifted from index.html so the
   whole property reads as one thing. No web fonts, no CDN, no analytics — these
   pages make zero third-party requests, which is the same claim the privacy
   policy makes about the app. */

:root {
  --bg:#ffffff; --fg:#12161a; --muted:#5b6470; --rule:#e3e7ec;
  --accent:#0b6b5e; --accent-fg:#ffffff; --card:#f5f8f7;
  --sky1:#0d3b45; --sky2:#124e4a;
  --sky-fg:#f2f7f6; --sky-sub:#cfe3df; --sky-dim:#a9c7c1; --sky-link:#9fe6d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#101316; --fg:#e8ebee; --muted:#98a2ae; --rule:#252b32;
    --accent:#5fd3bd; --accent-fg:#08211d; --card:#171b20;
    --sky1:#0a2b33; --sky2:#0d3a38;
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}

.wrap { max-width:64rem; margin:0 auto; padding:0 1.25rem; }
.wrap.narrow { max-width:46rem; }

a { color:var(--accent); }
a:focus-visible, button:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* Keyboard users get a way past the nav on every page. */
.skip {
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:var(--accent-fg);
  padding:.65rem 1rem; border-radius:0 0 8px 0; z-index:50; font-weight:600;
}
.skip:focus { left:0; }

/* ---- top bar ---- */
.topbar {
  border-bottom:1px solid var(--rule); background:var(--bg);
  position:sticky; top:0; z-index:20;
}
.bar { display:flex; align-items:center; gap:.75rem 1rem; min-height:3.4rem; flex-wrap:wrap; padding-top:.4rem; padding-bottom:.4rem; }
.brand {
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--fg); font-weight:700; letter-spacing:-.02em; font-size:1.02rem;
}
.brand svg { width:20px; height:20px; color:var(--accent); flex:0 0 auto; }
.brand:hover { color:var(--accent); }
.topbar nav { margin-left:auto; display:flex; gap:.35rem 1.15rem; flex-wrap:wrap; font-size:.95rem; }
.topbar nav a { color:var(--muted); text-decoration:none; }
.topbar nav a:hover { color:var(--accent); text-decoration:underline; }
/* [aria-current] rather than [aria-current="page"] so a blog post can mark the
   section it belongs to with aria-current="true" and still light up. */
.topbar nav a[aria-current] { color:var(--fg); font-weight:600; }

/* ---- page head ---- */
.pagehead {
  background:linear-gradient(160deg, var(--sky1), var(--sky2));
  color:var(--sky-fg); padding:3.25rem 0 2.9rem; border-bottom:1px solid var(--rule);
}
.pagehead .eyebrow {
  text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; font-weight:700;
  color:var(--sky-link); margin:0 0 .8rem;
}
.pagehead h1 {
  font-size:clamp(1.8rem, 4.8vw, 2.7rem); line-height:1.13; margin:0 0 .8rem;
  letter-spacing:-.03em; font-weight:700; max-width:24ch;
}
.pagehead p.sub {
  font-size:clamp(1.02rem, 2.2vw, 1.18rem); color:var(--sky-sub);
  margin:0; max-width:42rem;
}
.pagehead .meta { color:var(--sky-dim); font-size:.9rem; margin:1.2rem 0 0; }
.pagehead a { color:var(--sky-link); }

/* breadcrumb sits above the h1 inside the head */
.crumbs { font-size:.85rem; color:var(--sky-dim); margin:0 0 .9rem; }
.crumbs a { color:var(--sky-link); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs span { padding:0 .4rem; }

/* ---- body sections ---- */
main { display:block; }
section { padding:3.25rem 0; border-bottom:1px solid var(--rule); }
section:last-of-type { border-bottom:0; }
h2 { font-size:clamp(1.35rem,2.9vw,1.75rem); letter-spacing:-.02em; margin:0 0 .7rem; line-height:1.25; }
h3 { font-size:1.1rem; letter-spacing:-.01em; margin:1.9rem 0 .45rem; line-height:1.3; }
.lead { color:var(--muted); max-width:44rem; margin:0 0 2rem; }

/* ---- long-form prose ---- */
/* Vertical only. This was `padding:2.75rem 0 3.25rem`, and because .prose is
   always applied alongside .wrap and appears later in this file at equal
   specificity, the shorthand's horizontal 0 silently overrode .wrap's
   `padding:0 1.25rem`. Every prose page rendered with its body text flush
   against both screen edges on a phone, while /features and /blog/ (which do
   not carry .prose) looked correct -- which is what made it hard to spot.
   Setting only the block axis leaves .wrap's inline padding intact. */
.prose { padding-top:2.75rem; padding-bottom:3.25rem; }
.prose > h2 { margin:2.6rem 0 .7rem; }
.prose > h2:first-child, .prose > p:first-child { margin-top:0; }
.prose p { margin:0 0 1.15rem; }
.prose ul, .prose ol { padding-left:1.3rem; margin:0 0 1.3rem; }
.prose li { margin:.45rem 0; }
.prose li > ul { margin:.4rem 0 .2rem; }
.prose strong { font-weight:650; }
.prose code {
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88em;
  background:var(--card); border:1px solid var(--rule); padding:.08em .35em; border-radius:4px;
}
.prose figure { margin:1.8rem 0; }
.prose figcaption { font-size:.87rem; color:var(--muted); margin-top:.5rem; }

/* ---- callout ---- */
.note {
  background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:1.05rem 1.2rem; margin:1.8rem 0;
}
.note > :first-child { margin-top:0; }
.note > :last-child { margin-bottom:0; }
.note h3 { font-size:1rem; margin:0 0 .4rem; }
.note p { color:var(--muted); }

/* ---- tables ---- */
.tablewrap { overflow-x:auto; margin:1.7rem 0; border:1px solid var(--rule); border-radius:10px; }
table { border-collapse:collapse; width:100%; font-size:.95rem; min-width:30rem; }
th, td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--rule); vertical-align:top; }
thead th { background:var(--card); font-weight:650; }
tbody tr:last-child td { border-bottom:0; }
caption { caption-side:bottom; text-align:left; padding:.7rem .9rem; font-size:.85rem; color:var(--muted); }

/* ---- feature grid ---- */
.features { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(15rem, 100%), 1fr)); }
.feature { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:1.4rem; }
.feature h3 { margin:.35rem 0 .5rem; font-size:1.08rem; }
.feature p { margin:0; color:var(--muted); font-size:.97rem; }
.feature p + p { margin-top:.7rem; }
.feature .ico { width:26px; height:26px; color:var(--accent); }

/* ---- pricing tiers (same shape as the home page) ---- */
.tiers { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(16rem, 100%), 1fr)); max-width:44rem; }
.tier { border:1px solid var(--rule); border-radius:12px; padding:1.5rem; background:var(--card); }
.tier.pro { border-color:var(--accent); }
.tier h3 { margin:0 0 .25rem; font-size:1.15rem; }
.tier .price { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin:.25rem 0 1rem; }
.tier .price small { font-size:.9rem; font-weight:400; color:var(--muted); }
.tier ul { margin:0; padding-left:1.1rem; color:var(--muted); font-size:.95rem; }
.tier li { margin:.35rem 0; }

/* ---- feeders band ---- */
.feeders {
  background:var(--card); border:1px solid var(--accent); border-left-width:4px;
  border-radius:0 12px 12px 0; padding:1.5rem 1.6rem;
}
.feeders h2 { margin-top:0; }
.feeders p { margin:0; color:var(--muted); max-width:44rem; }

/* ---- table of contents ---- */
.toc { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:1.25rem 1.5rem; margin:0 0 2.5rem; }
.toc h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 .7rem; }
.toc ul { list-style:none; margin:0; padding:0; columns:2; column-gap:2rem; }
.toc li { margin:.3rem 0; break-inside:avoid; font-size:.95rem; }
@media (max-width:34rem) { .toc ul { columns:1; } }

/* ---- FAQ ---- */
.faq h2 { font-size:1.15rem; margin:2.5rem 0 .5rem; scroll-margin-top:4.5rem; }
.faq h2:first-of-type { margin-top:0; }
.faq p { margin:0 0 1rem; }
.faq p:last-child { margin-bottom:0; }
.faq .group {
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--accent); margin:3.25rem 0 0; padding-top:1.75rem; border-top:1px solid var(--rule);
}
.faq .group:first-child { margin-top:0; padding-top:0; border-top:0; }

/* ---- blog listing ---- */
.postlist { list-style:none; padding:0; margin:0; display:grid; gap:1.25rem; }
.post-card { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:1.4rem 1.5rem; }
.post-card .meta { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.post-card h2 { font-size:1.2rem; margin:.4rem 0 .55rem; }
.post-card h2 a { text-decoration:none; }
.post-card h2 a:hover { text-decoration:underline; }
.post-card p { margin:0; color:var(--muted); font-size:.97rem; }

/* ---- read next ---- */
.readnext { border-top:1px solid var(--rule); margin-top:3rem; padding-top:1.75rem; }
.readnext h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 .8rem; }
.readnext ul { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.readnext li { margin:0; }

/* ---- download CTA band ---- */
.cta { background:var(--card); border-top:1px solid var(--rule); padding:3rem 0; text-align:center; }
.cta h2 { margin:0 0 .6rem; }
.cta p { color:var(--muted); max-width:36rem; margin:0 auto 1.5rem; }
/* Apple's official "Download on the App Store" artwork, self-hosted and
   byte-for-byte unmodified. The Identity Guidelines forbid recolouring,
   effects, animation or lookalike badges, so these rules set nothing but size
   and clear space. Two cuts, swapped by colour scheme, because the badge sits
   on the page background and has to carry its own contrast in both themes. */
.badge { display:inline-block; line-height:0; padding:.4rem; }
.badge img { height:48px; width:auto; display:block; }
.badge:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:8px; }

/* ---- footer ---- */
footer { padding:2.75rem 0 3rem; font-size:.9rem; color:var(--muted); border-top:1px solid var(--rule); }
footer a { color:var(--muted); }
.footer-links { display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; margin-bottom:1.5rem; }
.attrib { line-height:1.7; margin:0; }

@media (max-width:480px) {
  .pagehead { padding:2.5rem 0 2.25rem; }
  section { padding:2.5rem 0; }
  /* Block axis only, for the same reason as the base rule above. This copy is
     the one that actually bit: it only applies on phones, so the bug was
     invisible on a desktop browser. Note the sibling rules here are safe --
     .pagehead and section CONTAIN a .wrap rather than being one, so their
     horizontal 0 is correct. .prose is the only class applied to the same
     element as .wrap, which is what makes it the only conflict. */
  .prose { padding-top:2.25rem; padding-bottom:2.75rem; }
}

/* ==========================================================================
   APPENDED 2026-08-29 for /airports/* and /near-me. Append only: nothing
   above this line was edited. A handful of rules here deliberately land after
   an earlier one at equal specificity (.mvtable inside .tablewrap is the only
   case) so the later declaration wins without touching the original.
   ========================================================================== */

/* ---- embedded live map frame ----
   One iframe per page pointed at /globe/?ui=embed, which hides the chrome and
   locks the camera while leaving the aircraft detail panel alive. Height is
   viewport-relative with hard limits so the frame never eats a phone screen
   nor floats lost on a desktop. */
.mapframe {
  border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  background:var(--card); margin:0;
}
.mapframe iframe { display:block; width:100%; height:clamp(19rem, 50vh, 30rem); border:0; }
.mapnote { color:var(--muted); font-size:.88rem; margin:.75rem 0 0; }

/* ---- arrivals and departures ---- */
.movements { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(min(20rem, 100%), 1fr)); }
.mvcol > h3 {
  margin:0 0 .55rem; font-size:1.05rem;
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
}
.mvcol > h3 .count { font-weight:400; font-size:.85rem; color:var(--muted); }
.mvtable { font-size:.92rem; }
.mvtable td.num, .mvtable th.num { text-align:right; font-variant-numeric:tabular-nums; }
.mvtable .call { font-weight:650; }
.mvtable .sub2 { display:block; color:var(--muted); font-size:.85em; font-weight:400; }
.mvtable .na { color:var(--muted); }
.mvtable .empty { color:var(--muted); text-align:left; }
.asof { color:var(--muted); font-size:.9rem; margin:0 0 1.3rem; }
.asof .dot {
  display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--accent); margin-right:.45rem; vertical-align:middle;
}

/* ---- key/value fact tiles ---- */
.facts {
  list-style:none; margin:1.7rem 0 1.9rem; padding:0;
  display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(min(11rem, 100%), 1fr));
}
.facts li { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:.85rem 1rem; }
.facts .k {
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin-bottom:.2rem;
}
.facts .v { font-weight:650; letter-spacing:-.01em; }

/* ---- airport link grid (index page and the "nearby" block) ---- */
.aptgrid {
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(min(15rem, 100%), 1fr));
}
.aptgrid li { margin:0; }
.aptgrid a {
  display:block; background:var(--card); border:1px solid var(--rule);
  border-radius:10px; padding:.8rem 1rem; text-decoration:none; color:var(--fg);
  height:100%;
}
.aptgrid a:hover { border-color:var(--accent); }
.aptgrid .code { font-weight:700; letter-spacing:.02em; color:var(--accent); }
.aptgrid .where { display:block; color:var(--muted); font-size:.88rem; margin-top:.15rem; }

/* ---- buttons (only /near-me needs one so far) ---- */
.btn {
  display:inline-block; background:var(--accent); color:var(--accent-fg);
  border:1px solid var(--accent); border-radius:10px; padding:.7rem 1.15rem;
  font:inherit; font-weight:650; line-height:1.2; cursor:pointer; text-decoration:none;
}
.btn:hover { filter:brightness(1.08); }
.btn[disabled] { opacity:.55; cursor:default; filter:none; }

/* ---- /near-me live region ---- */
.status { margin:1.4rem 0 0; }
.status p { margin:0 0 .7rem; }
.status p:last-child { margin-bottom:0; }
.nearlist { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.nearlist li {
  background:var(--card); border:1px solid var(--rule); border-radius:10px;
  padding:.75rem 1rem; display:flex; gap:.35rem 1rem; flex-wrap:wrap; align-items:baseline;
}
.nearlist .who { font-weight:650; }
.nearlist .what { color:var(--muted); font-size:.9rem; }
.nearlist .range { margin-left:auto; font-variant-numeric:tabular-nums; font-size:.9rem; }