/* Saira, Barlow, and IBM Plex Mono are self-hosted under the SIL Open Font
   License so the site makes no third-party requests. See assets/fonts/OFL.txt. */
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/saira-600.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: "Saira";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/saira-700.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: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/barlow-400.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: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/barlow-500.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/plexmono-500.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;
}

/* The palette comes from the app icon: a Vision Jet on a runway at sunrise,
   deep navy below and amber above. The page commits to the dark half of it. */
:root {
  color-scheme: dark;

  --ink: #080b16;
  --ink-panel: #10152a;
  --hull: #eef1f8;
  --hull-dim: #8a93ac;
  --amber: #e18e41;
  --amber-lift: #f6ac5e;
  --hairline: rgb(238 241 248 / 10%);
  --hairline-strong: rgb(238 241 248 / 18%);

  --font-display: "Saira", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --wrap-width: 72rem;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--hull);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

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

.wrap {
  width: min(100% - 2 * var(--space-md), var(--wrap-width));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 10;
  padding: var(--space-xs) var(--space-sm);
  background: var(--ink-panel);
  border: 1px solid var(--amber);
}

/* An eyebrow names the part of the app a section covers, set as a cockpit
   placard. The dash before it echoes the runway centerline in the app icon. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-sm);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 2.5rem;
  height: 2px;
  flex: none;
  background: repeating-linear-gradient(
    to right,
    var(--amber) 0 0.5rem,
    transparent 0.5rem 0.875rem
  );
  content: "";
}

/* Buttons */

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button--primary {
  background: var(--amber);
  color: var(--ink);
}

.button--primary:hover {
  background: var(--amber-lift);
}

.button--quiet {
  border-color: var(--hairline-strong);
  color: var(--hull);
}

.button--quiet:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.button--large {
  padding: 0.9375rem 2rem;
  font-size: 0.875rem;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgb(8 11 22 / 88%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand__icon {
  border-radius: 0.375rem;
}

.site-nav__list,
.footer-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a:not(.button) {
  color: var(--hull-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.site-nav a:not(.button):hover,
.site-nav [aria-current="page"] {
  color: var(--hull);
}

.nav-toggle {
  display: none;
  padding: 0.5rem 0.875rem;
  background: none;
  border: 1px solid var(--hairline-strong);
  color: var(--hull);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (width < 52rem) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    flex-basis: 100%;
  }

  .site-nav[data-open="true"] {
    display: block;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-block: var(--space-sm) var(--space-md);
  }
}

/* Screenshots */

.device {
  margin: 0;
}

.device img {
  display: block;
  width: 100%;
  background: var(--ink-panel);
  border: 1px solid var(--hairline-strong);
  border-radius: 1.75rem;
}

.device--phone {
  max-width: 17.5rem;
}

/* Hero. The climb profile beneath it is the page's signature: the aircraft's
   own climb path over terrain, the analysis the app exists to perform. */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-xl);
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: 1.15fr 0.85fr;
  padding-bottom: var(--space-lg);
}

.hero__title {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
}

.hero__subtitle {
  max-width: 34rem;
  margin-block: var(--space-md) 0;
  color: var(--hull-dim);
  font-size: 1.1875rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-md) 0;
}

.hero__meta {
  margin-block: var(--space-md) 0;
  color: var(--hull-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__device {
  justify-self: center;
}

.climb-profile {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}

.climb-profile__terrain {
  fill: var(--ink-panel);
  stroke: var(--hairline-strong);
  stroke-width: 1;
}

.climb-profile__path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.climb-profile__marker {
  stroke: var(--hull-dim);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

/* Anchored left of the marker: the flight path climbs to the right, so the
   wedge above and behind each fix is the only space it never crosses. */
.climb-profile__label {
  fill: var(--hull-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-anchor: end;
}

/* Feature spotlights */

.spotlight {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
}

.spotlight__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

.spotlight h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
}

.spotlight p {
  max-width: 34rem;
  margin-block: var(--space-sm) 0;
  color: var(--hull-dim);
}

.spotlight--reversed .spotlight__copy {
  order: 2;
}

.spotlight__device {
  justify-self: center;
}

/* Secondary features, set as an instrument panel: hairline-divided cells
   rather than floating cards. */

.grid-section {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
}

.grid-section__title {
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
}

.feature-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-block: var(--space-lg) 0;
  padding: 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  list-style: none;
}

.feature {
  padding: var(--space-md);
  background: var(--ink);
}

.feature h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.feature p {
  margin-block: var(--space-xs) 0;
  color: var(--hull-dim);
  font-size: 0.9375rem;
}

/* Requirements, set as an aircraft specification table */

.specs {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--hairline);
}

.specs__list {
  display: grid;
  gap: 0 var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 0;
}

.spec {
  padding-block: var(--space-sm);
  border-top: 1px solid var(--hairline);
}

.spec dt {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.spec dd {
  margin: 0.375rem 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Closing call to action */

.cta {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.cta__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.cta__actions {
  margin-block: var(--space-md) 0;
}

/* Long-form pages */

.prose-page {
  padding-block: var(--space-lg) var(--space-xl);
}

.prose {
  width: min(100% - 2 * var(--space-md), 44rem);
}

.prose h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
}

.prose h2 {
  margin-block: var(--space-lg) var(--space-sm);
  font-size: 1.375rem;
}

.prose p {
  color: var(--hull-dim);
}

.prose__lede {
  margin-block: var(--space-md) 0;
  color: var(--hull);
  font-size: 1.1875rem;
}

.prose ul {
  padding-left: 1.25rem;
  color: var(--hull-dim);
}

.prose li {
  margin-block: var(--space-xs);
}

.prose li::marker {
  color: var(--amber);
}

.prose strong {
  color: var(--hull);
  font-weight: 500;
}

.prose a {
  color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Footer */

.site-footer {
  padding-block: var(--space-lg);
  background: var(--ink-panel);
  border-top: 1px solid var(--hairline);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-md);
}

.disclaimer {
  max-width: 46rem;
  margin: 0;
  color: var(--hull-dim);
  font-size: 0.875rem;
}

.copyright {
  margin: 0;
  color: var(--hull-dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-nav__list {
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-nav a {
  color: var(--hull-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--amber);
}

/* Motion. The climb path draws itself once, the way the app plots it. */

@media (prefers-reduced-motion: no-preference) {
  .climb-profile__path {
    stroke-dasharray: var(--path-length, 2000);
    stroke-dashoffset: var(--path-length, 2000);
    animation: draw-climb 2.2s cubic-bezier(0.33, 0.9, 0.5, 1) 0.15s forwards;
  }

  .js-reveal[data-revealed="false"] {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  .js-reveal {
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
}

@keyframes draw-climb {
  to {
    stroke-dashoffset: 0;
  }
}

@media (width < 52rem) {
  .hero__inner,
  .spotlight__inner {
    grid-template-columns: 1fr;
  }

  .spotlight--reversed .spotlight__copy {
    order: 0;
  }

  .hero__actions .button {
    flex: 1 1 14rem;
    text-align: center;
  }

  /* The band scales with the viewport, which shrinks the fix annotations past
     legibility. Below this width the climb path carries the idea alone. */
  .climb-profile__marker,
  .climb-profile__label {
    display: none;
  }

  :root {
    --space-xl: 4.5rem;
    --space-lg: 2.5rem;
  }
}