/* Certified To Fly — single committed dark identity.
   Every colour is painted explicitly; nothing inherits from the host. */

:root {
  --ground:      #0B121C;
  --surface:     #131C29;
  --surface-2:   #1A2534;
  --rule:        #24344A;
  --rule-strong: #35485F;

  --ink:         #E9EFF7;
  --ink-2:       #BDC9D9;
  --muted:       #8496AB;

  --signal:      #F0A72B;  /* taxiway amber — brand + primary action */
  --signal-ink:  #1A1204;
  --link:        #6FB4E8;
  --ok:          #4FBF87;
  --warn:        #E8A33D;
  --alert:       #F0736B;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--link); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--signal);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark { width: 34px; height: auto; flex-shrink: 0; }
.brand-word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-word b { color: var(--signal); font-weight: 700; }
.brand:hover .brand-word { color: var(--signal); }

nav.main { display: flex; flex-wrap: wrap; gap: 0.25rem 1.35rem; }
nav.main a {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}
nav.main a:hover { color: var(--ink); }
nav.main a[aria-current="page"] { color: var(--signal); border-bottom-color: var(--signal); }

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--f-display);
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 0.6rem;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; max-width: 22ch; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; }

p { margin: 0 0 1rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 62ch; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.75rem;
}

section { padding: 3rem 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: none; }
.hero { padding: 3.5rem 0 2rem; }

/* ---------- figures ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 2rem;
  margin: 2rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.figures div { display: flex; flex-direction: column; gap: 0.15rem; }
.figures .n {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.figures .k { font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); }

/* ---------- tables ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  margin-top: 1.5rem;
}
table { border-collapse: collapse; width: 100%; min-width: 720px; }
caption {
  caption-side: top;
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.9rem 1rem 0.6rem;
}
th, td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

td.name { font-family: var(--f-display); font-weight: 600; font-size: 0.98rem; white-space: nowrap; }
td.name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
td.name a:hover { color: var(--signal); border-bottom-color: var(--signal); }
/* The registered-entity line under a provider name must be allowed to wrap.
   Some registered names are very long ("Sentinel Small Unmanned Aviation
   Systems (SUAS) Ltd") and inheriting nowrap from td.name pushed the whole
   register table past its container on desktop. */
span.meta { font-family: var(--f-mono); font-size: 0.78rem; font-weight: 400; color: var(--muted); }
td.name span.meta { display: block; white-space: normal; max-width: 30ch; margin-top: 0.25rem; line-height: 1.45; }
td.price {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
td.meta { font-family: var(--f-mono); font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* ---------- tags ---------- */

.tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tag-ok    { color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tag-warn  { color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tag-alert { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 45%, transparent); }

/* A tag is a label, not a sentence. If one ever grows past the viewport it must
   wrap rather than force the whole page sideways — a single long tag in a
   verification table was enough to break mobile layout on three pages. */
.tag { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 760px) { .tag { white-space: normal; } }

/* ---------- outbound button ---------- */

.out {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}
.out:hover { border-color: var(--link); background: var(--surface-2); }

.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.98rem;
  background: var(--signal);
  color: var(--signal-ink);
  border: none;
  border-radius: 3px;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }

/* ---------- cards / notes ---------- */

.note {
  border-left: 2px solid var(--signal);
  padding-left: 1.1rem;
  margin: 1.5rem 0;
}
.note.plain { border-left-color: var(--rule-strong); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.35rem;
}
.panel h3 { margin-top: 0; }
.panel p { font-size: 0.95rem; color: var(--ink-2); }

/* ---------- capture form ---------- */

.capture {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--signal);
  border-radius: 3px;
  padding: 2rem;
  margin-top: 1.5rem;
}
.capture form { display: flex; flex-direction: column; gap: 1rem; max-width: 30rem; margin-top: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--ink-2); }
.field input, .field select {
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
}
.consent { display: flex; gap: 0.65rem; align-items: flex-start; }
.consent input { margin-top: 0.35rem; flex-shrink: 0; width: 1rem; height: 1rem; accent-color: var(--signal); }
.consent label { font-family: var(--f-body); font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; letter-spacing: 0; }
.form-msg { font-family: var(--f-mono); font-size: 0.85rem; margin-top: 0.5rem; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--alert); }

/* ---------- lists ---------- */

ul.plain { padding-left: 1.15rem; max-width: 68ch; }
ul.plain li { margin-bottom: 0.55rem; }
ul.plain li::marker { color: var(--signal); }

dl.spec { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 1.25rem 0 0; }
dl.spec dd { overflow-wrap: anywhere; margin-left: 0; }
dl.spec dt { font-family: var(--f-mono); font-size: 0.8rem; color: var(--muted); }
dl.spec dd { margin: 0; font-size: 0.95rem; }

/* ---------- footer ---------- */

footer.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 2.5rem 0 4rem;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.8;
}
footer.site-foot a { color: var(--ink-2); }
footer.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }

.disclosure {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.7;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  margin-top: 1.5rem;
  max-width: 76ch;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .figures { gap: 1.25rem 2rem; }
  .figures .n { font-size: 1.7rem; }
  .capture { padding: 1.35rem; }
}

/* ---------- Kit signup form ----------
   Kit injects its own scoped stylesheet at runtime (white inputs, blue button),
   so these overrides are deliberately forceful. Without them the form is the
   one element on the site that looks like it came from somewhere else. */

.capture form.ctf-signup { display: flex; flex-direction: column; gap: 0; max-width: 30rem; margin-top: 1.25rem; }
.capture form.ctf-signup .formkit-fields { display: flex !important; flex-direction: column; gap: 1rem; margin: 0 !important; }
.capture form.ctf-signup .field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 !important; flex: 1 1 auto !important; }

.capture form.ctf-signup .formkit-input {
  background: var(--ground) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 3px !important;
  color: var(--ink) !important;
  font-family: var(--f-body) !important;
  font-size: 1rem !important;
  padding: 0.6rem 0.75rem !important;
  width: 100%;
}
.capture form.ctf-signup .formkit-input:focus {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: var(--signal) !important;
}

.capture form.ctf-signup .formkit-submit {
  background: var(--signal) !important;
  color: var(--signal-ink) !important;
  border-radius: 3px !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  align-self: flex-start;
}
.capture form.ctf-signup .formkit-submit > span { padding: 0.7rem 1.4rem !important; }
.capture form.ctf-signup .formkit-submit:hover > span { background: rgba(0, 0, 0, 0.12); }

.capture form.ctf-signup .formkit-alert {
  background: var(--surface-2) !important;
  border: 1px solid var(--alert) !important;
  color: var(--alert) !important;
  border-radius: 3px !important;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  margin: 0 0 1rem !important;
  padding: 0.7rem !important;
}
.capture form.ctf-signup .formkit-alert:empty { display: none !important; }
.capture form.ctf-signup .formkit-alert-success {
  border-color: var(--ok) !important;
  color: var(--ok) !important;
}

/* Kit's badge, if their script injects one — the disclosure below says who we use. */
.capture form.ctf-signup .formkit-powered-by-convertkit-container { display: none !important; }

/* ---------- jobs feed ---------- */

.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;
}

.jobs-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.jobs-search { flex: 1 1 22rem; }
.jobs-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 0.6rem 0.85rem;
}
.jobs-search input:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.jobs-count { font-family: var(--f-mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

.jobs { display: grid; gap: 1rem; }
.jobs-state { font-family: var(--f-mono); font-size: 0.9rem; color: var(--muted); }

.job {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  border-radius: 3px;
  padding: 1.15rem 1.25rem;
}
.job:hover { border-left-color: var(--signal); }

.job-role { font-size: 1.05rem; margin: 0 0 0.35rem; }
.job-role a { color: var(--ink); text-decoration: none; }
.job-role a:hover { color: var(--signal); text-decoration: underline; }

.job-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  font-family: var(--f-mono); font-size: 0.8rem; margin: 0 0 0.55rem; max-width: none;
}
.job-co { color: var(--ink-2); font-weight: 500; }
.job-loc { color: var(--muted); }
.job-sal { color: var(--signal); font-variant-numeric: tabular-nums; }

.job-sum {
  font-size: 0.94rem; color: var(--ink-2); margin: 0 0 0.7rem;
  max-width: 78ch; line-height: 1.5;
}

.job-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; max-width: none; }
.job-tag {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--muted); border: 1px solid var(--rule);
  border-radius: 2px; padding: 0.1rem 0.4rem;
}
.job-age { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); margin-left: auto; }

.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--link); font: inherit; text-decoration: underline;
}

/* ---------- home page introduction ---------- */

.intro p { max-width: 70ch; }
.intro .lede { margin-bottom: 1.1rem; }
.intro .aim {
  border-left: 2px solid var(--signal);
  padding-left: 1.1rem;
  margin-top: 1.5rem;
  color: var(--ink);
  font-size: 1.05rem;
}
.intro .aim strong { color: var(--signal); font-weight: 600; }

/* The header is sticky, so anything scrolled to needs to clear it. */
section, h2, h3, [id] { scroll-margin-top: 5rem; }

/* ---------- mobile ----------
   Two things break on a phone at the sizes above: the nav wraps to two rows
   and eats a third of the screen, and the price tables scroll sideways so the
   price — the whole point — sits off-screen. Both are fixed here. */

@media (max-width: 760px) {

  /* Nav stays one row and scrolls, so the sticky header stays short. */
  .site-head .wrap {
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  nav.main {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { white-space: nowrap; }
  .brand-word { display: none; }          /* the mark alone carries it at this size */
  .brand-mark { width: 40px; }

  section, h2, h3, [id] { scroll-margin-top: 4rem; }

  /* Tables become stacked cards, one row per card, labels from data-label. */
  .table-scroll { overflow-x: visible; background: none; border: none; border-radius: 0; }
  table, thead, tbody, tr, th, td { display: block; width: auto; }
  table { min-width: 0; }
  thead { position: absolute; left: -9999px; }   /* labels live on each cell now */

  caption { display: block; width: 100%; padding: 0 0 0.75rem; }

  tbody tr {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--rule-strong);
    border-radius: 3px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
  }
  tbody tr:hover { background: var(--surface); }
  tbody tr:last-child { margin-bottom: 0; }

  tbody td {
    border: none;
    padding: 0.2rem 0;
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    white-space: normal;
  }
  /* Cards are flex rows, and a flex item will not shrink below its min-content
     width unless told to. Without min-width:0 a long prose cell — a verification
     table source, say — refuses to wrap and widens the page. */
  tbody td { min-width: 0; }
  tbody td > * { min-width: 0; overflow-wrap: anywhere; }

  tbody td::before {
    content: attr(data-label);
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 0 0 auto;
  }
  /* The provider name leads the card; the price is the number people came for. */
  /* td.name and td.price carry white-space:nowrap in the desktop rules, and a
     class beats the plain `tbody td` reset above — so long text in either column
     used to push the whole page sideways instead of wrapping inside its card. */
  tbody td.name, tbody td.price { white-space: normal; overflow-wrap: anywhere; }
  tbody td.name { font-size: 1.02rem; padding-bottom: 0.5rem; display: block; }
  tbody td.name::before { display: none; }
  tbody td.name span.meta { max-width: none; text-align: left; }

  /* Provider spec list stacks; a long site URL has nowhere to go on one line. */
  dl.spec { grid-template-columns: 1fr; gap: 0.15rem; }
  dl.spec dt { margin-top: 0.9rem; }
  tbody td.price { font-size: 1.25rem; color: var(--signal); }
  tbody td[data-label] > * { text-align: right; }
  tbody tr.row-note td { display: block; padding-top: 0.6rem; }
  tbody tr.row-note td::before { display: none; }
}

/* Beginner signpost — the price tables mean nothing if you don't know the words yet. */
.first-time {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--signal);
  border-radius: 3px;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0 0;
  font-size: 0.98rem;
}
.first-time strong { color: var(--signal); }

/* ---------- guide cross-links ---------- */

.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.guide-nav a, .guide-nav .guide-here {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}
.guide-nav a { color: var(--ink-2); }
.guide-nav a:hover { color: var(--signal); border-color: var(--signal); }
.guide-nav .guide-here {
  color: var(--signal-ink);
  background: var(--signal);
  border-color: var(--signal);
  font-weight: 500;
}

/* ---------- FAQ blocks ---------- */

.faqs { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.faq { border-left: 2px solid var(--rule-strong); padding-left: 1.1rem; }
.faq h3 { margin-bottom: 0.35rem; color: var(--ink); }
.faq p { color: var(--ink-2); margin: 0; }