/* flightdata.eu — the look of an aeronautical chart: pale chart paper,
   navy ink, and the magenta charts use for courses. Magenta is spent on one
   thing only, the route, so that it means "where it is going" everywhere on
   the page. Rules for this file: flightdata.eu/AGENTS.md, "Design". */

/* Self-hosted (OFL) — nothing loads from another origin
   (docs/adr/0224-flightdata-eu-is-a-static-page-in-this-repository.md). */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mark: #f6dc4f;       /* highlighter — the waitlist offer, and nothing else */
  --paper: #e8eee7;      /* chart paper */
  --paper-2: #dfe7de;    /* a tint above it: panels */
  --ink: #142030;        /* navy print */
  --muted: #4d5c6a;
  --grid: #c3cfc4;       /* graticule */
  --route: #a3206c;      /* course magenta — the route, and nothing else */
  --air: #2b5888;        /* airspace blue — the aircraft, links, focus */
  --line: #b7c4b9;
  --error: #9b2b16;

  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --wide: 1120px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1721;    /* a night chart */
    --paper-2: #15212e;
    --ink: #e2e8ec;
    --muted: #9aa8b4;
    --grid: #233140;
    --route: #e2639f;
    --air: #86afdc;
    --line: #2b3a4a;
    --error: #ef8b72;
    --mark: #e9c93a;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  font-optical-sizing: auto;
}

a { color: var(--air); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--air);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -60px;
  background: var(--ink); color: var(--paper); padding: 8px 12px;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- top -- */

.top, main > section, main > nav, .foot {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 22px; padding-bottom: 22px;
}

.mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
}
.mark__glyph { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.mark__glyph path { stroke: var(--route); stroke-width: 2; stroke-linecap: round; }
.mark__glyph .mark__dash { stroke-dasharray: 2 2.4; }

.top__status {
  font: 500 12px/1 var(--mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}

/* --------------------------------------------------------------- hero -- */

.hero { padding-top: clamp(40px, 9vw, 112px); padding-bottom: clamp(40px, 6vw, 72px); }

h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(40px, 7.4vw, 92px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The product's name, inside the h1 so search engines read it as the
   heading, set as a quiet line above the claim. */
.h1__kicker {
  display: block;
  margin-bottom: 18px;
  font: 500 13px/1 var(--mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}

.lede {
  margin: 28px 0 0;
  max-width: 40em;
  font-size: clamp(18px, 2vw, 21px);
  color: var(--muted);
  text-wrap: pretty;
}

h2 {
  margin: 0 0 28px;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.eyebrow {
  font: 500 12px/1 var(--mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------- cta -- */

.cta { margin-top: 36px; max-width: 560px; }

.cta__form { display: flex; gap: 8px; flex-wrap: wrap; }

.cta__form input,
.linkrow input {
  flex: 1 1 240px; min-width: 0;
  height: 50px; padding: 0 16px;
  font: 400 16px var(--sans);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cta__form input::placeholder { color: var(--muted); opacity: 0.8; }
.cta__form input:focus-visible,
.linkrow input:focus-visible { outline-offset: 0; border-color: var(--air); }

.btn {
  flex: 0 0 auto;
  height: 50px; padding: 0 22px;
  font: 600 16px var(--sans);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover { background: var(--air); border-color: var(--air); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.btn--ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.btn--ghost:hover { color: var(--paper); }

.cta__note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* Once an address is in, the form has done its job. */
html[data-waitlist-state] .cta__form,
html[data-waitlist-state] .cta__note { display: none; }

.reveal { padding: 20px 22px; background: var(--paper-2); border-left: 3px solid var(--route); border-radius: 0 6px 6px 0; }
.reveal p { margin: 0 0 10px; }
.reveal p:last-child { margin-bottom: 0; }
.reveal__head { font-weight: 600; font-size: 19px; }
.reveal__tag { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--air); }
.reveal__meta { font: 400 13px var(--mono); color: var(--muted); }
.standing { display: block; margin: 4px 0 10px; font: 600 clamp(44px, 8vw, 64px)/1 var(--mono); letter-spacing: -0.03em; }
.linkrow { display: flex; gap: 8px; margin: 14px 0 10px; }
.linkrow input { font-family: var(--mono); font-size: 14px; height: 44px; }
.linkrow .btn { height: 44px; }

.alert { margin: 12px 0 0; color: var(--error); font-size: 15px; }

/* The waitlist offer, in the yellow of a highlighter pen — what a pilot
   marks the route with on a paper chart. Text on it stays dark in both
   schemes, as ink on a highlighted line does. */
mark {
  background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 88%, transparent 88%);
  color: #142030;
  padding: 0 0.12em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.deal { margin: 0 0 20px; }
.deal__tag { margin: 0 0 8px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.deal__big { margin: 0; font-size: clamp(34px, 5vw, 48px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }
.deal__more { margin: 10px 0 0; font-size: 16px; max-width: 34em; }
.deal__more strong { font-weight: 600; }

.btn--deal { background: var(--mark); border-color: var(--mark); color: #142030; }
.btn--deal:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------ pricing -- */

.pricing { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.pricing__lede { margin: 0 0 32px; max-width: 46em; color: var(--muted); }

.plans {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1040px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.plan--lead { border-color: var(--ink); }
.plan h3 { margin: 0 0 14px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.plan__price { margin: 0; color: var(--muted); font-size: 15px; }
.plan__price span { color: var(--ink); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }
.plan__bill { margin: 2px 0 18px; font: 400 12px var(--mono); color: var(--muted); }
.plan__feat { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.plan__feat li { padding-left: 16px; position: relative; }
.plan__feat li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1.5px; background: var(--muted); }
.plan__deal { margin: -8px 0 18px; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.plan__price s { font-size: 20px; color: var(--muted); text-decoration-thickness: 2px; }
.pricing__deal { margin: -14px 0 18px; font-size: 18px; font-weight: 500; }
.plan__for { margin: auto 0 0; font-size: 14px; color: var(--muted); }

.pricing__small { margin: 24px 0 0; max-width: 52em; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------- figure -- */

.figure { padding-top: 24px; padding-bottom: clamp(56px, 8vw, 104px); }

.figure__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.chart { width: 100%; height: auto; display: block; }
.chart text { font: 500 11px var(--mono); fill: var(--muted); }
.chart__grat path { stroke: var(--grid); stroke-width: 1; fill: none; }

.chart__route path { fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; }
.chart__ahead { stroke-dasharray: 2 9; }

.chart__apt circle { fill: var(--paper); stroke: var(--route); stroke-width: 2.4; }
.chart__apt path { stroke: var(--route); stroke-width: 2.4; }
.chart__apt text { font-size: 13px; font-weight: 600; fill: var(--ink); }

.chart__ac path { fill: var(--air); stroke: var(--paper); stroke-width: 1.4; }

.chart__block rect { fill: var(--paper); stroke: var(--air); stroke-width: 1.2; }
.chart__block text { font-size: 12px; fill: var(--ink); white-space: pre; }
.chart__block .chart__phase { fill: var(--air); font-weight: 600; letter-spacing: 0.08em; }
.chart__leader { stroke: var(--air); stroke-width: 1.2; fill: none; }

.chart [data-k] { transition: opacity 160ms ease; }

.obj__label {
  margin: 0 0 10px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 500 13px var(--mono); color: var(--muted);
}
.obj__label code { color: var(--ink); font: inherit; }
.obj__label span { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }

.obj__code {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--paper-2);
  border-radius: 6px;
  font: 400 13.5px/1.6 var(--mono);
  color: var(--ink);
  tab-size: 2;
}
.obj__code .k { border-radius: 3px; cursor: default; transition: background-color 160ms ease, color 160ms ease; }
.obj__code .k[data-k="route"] { color: var(--route); }
.obj__code .k:focus-visible { outline-offset: 1px; }

/* Pointing at a field lights it and what it describes; the rest of the
   chart steps back. CSS only, so nothing depends on a script. */
.obj__code .k:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--air) 16%, transparent); }
.obj__code .k[data-k="route"]:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--route) 14%, transparent); }

.figure:has(.k:is(:hover, :focus-visible)) .chart [data-k] { opacity: 0.22; }
.figure:has(.k[data-k="route"]:is(:hover, :focus-visible)) .chart [data-k="route"],
.figure:has(.k[data-k="position"]:is(:hover, :focus-visible)) .chart [data-k="position"],
.figure:has(.k[data-k="state"]:is(:hover, :focus-visible)) .chart [data-k="state"],
.figure:has(.k[data-k="id"]:is(:hover, :focus-visible)) .chart [data-k="state"],
.figure:has(.k[data-k="type"]:is(:hover, :focus-visible)) .chart [data-k="state"] { opacity: 1; }

/* -------------------------------------------------------------- parts -- */

.parts, .uses, .plain { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }

.parts__list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 32px;
}
.parts__list dt { font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.parts__list dd { margin: 0; color: var(--muted); }

.uses__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.uses__list h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.uses__list p { margin: 0; color: var(--muted); }

.plain__list { display: grid; gap: 18px; max-width: 46em; }
.plain__list p { margin: 0; color: var(--muted); }
.plain__list strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- close -- */

.close { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); }
.close h2 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.03em; margin-bottom: 0; }

.foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; padding-bottom: 32px;
  border-top: 1px solid var(--line);
  font: 400 13px var(--mono); color: var(--muted);
}
.foot nav { display: flex; gap: 20px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }

/* -------------------------------------------------------- legal pages -- */

.legal { max-width: 46em; padding-top: 40px; padding-bottom: 72px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); max-width: none; margin-bottom: 24px; }
.legal h2 { font-size: 21px; margin: 36px 0 10px; }
.legal p { margin: 0 0 12px; }
.legal .intro { color: var(--muted); font-size: 18px; }

/* ------------------------------------------------------ content pages -- */
/* The comparison and topic pages: a smaller hero, running text, one table,
   and the same waitlist block as the home page. */

.page-hero { padding-top: clamp(32px, 6vw, 80px); padding-bottom: clamp(28px, 4vw, 48px); }
.page-hero h1 { max-width: 20ch; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.02; }
.page-hero .lede { max-width: 42em; }
.page-hero__meta { margin: 18px 0 0; font: 400 12px var(--mono); color: var(--muted); }

.prose { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.prose > * { max-width: 46em; }
.prose h2 { margin-bottom: 16px; }
.prose h3 { margin: 28px 0 8px; font-size: 19px; font-weight: 600; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose code { font: 400 0.88em var(--mono); background: var(--paper-2); padding: 1px 5px; border-radius: 3px; }
.prose .note { font-size: 14px; color: var(--muted); }

/* A comparison table scrolls inside its own frame on a phone, so the page
   itself never scrolls sideways. */
.table-wrap {
  max-width: none;
  margin: 8px 0 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: var(--paper-2); }
.compare tbody th { font-weight: 600; white-space: nowrap; }
.compare td { color: var(--muted); }
.compare .us { color: var(--ink); font-weight: 600; }
.compare caption { caption-side: bottom; padding: 10px 14px; text-align: left; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }

.related { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.related ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 32px; }
.related a { font-weight: 500; }

.foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ------------------------------------------------------------ narrow -- */

@media (max-width: 820px) {
  .figure__grid { grid-template-columns: minmax(0, 1fr); }
  .obj__code { font-size: 12.5px; }
}

@media (max-width: 480px) {
  .figure__grid { padding: 12px; }
  .obj__code { padding: 14px; font-size: 12px; }
  .btn { width: 100%; }
  .cta__form input { flex-basis: 100%; }
  .linkrow .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}