/*
  Fly by Night — the app's own palette and type, on the web.

  Black is the app's night card, not a tint of it. Orange only ever means a
  pattern leg and red only ever means where you're pointed, exactly as on the
  dial; neither is used for decoration.
*/

:root {
  --night: #000;
  --ink: #fff;
  --ink-2: #d9d9d9;     /* Theme.secondary */
  --ink-3: #a8a8a8;     /* Theme.faint */
  --ink-4: #616161;     /* Theme.placeholder */
  --sheet: #131316;     /* Theme.sheet */
  --edge: #2a2a2e;
  --pattern: #ff9e0a;   /* Theme.accent, night */
  --heading: #ff453b;   /* Theme.heading, night */

  --rounded: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, system-ui,
             "Segoe UI", Roboto, sans-serif;

  --measure: 34rem;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--night); }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink-2);
  font: 400 1.125rem/1.55 var(--rounded);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration-color: var(--ink-4); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--pattern);
  outline-offset: 4px;
  border-radius: 4px;
}

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

.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Top bar: the app's top row, word for word ---- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
}

.mark img { width: 36px; height: 36px; border-radius: 9px; }

.bar nav { display: flex; gap: 1.75rem; }

.bar nav a {
  color: var(--ink-3);
  font-weight: 500;
  text-decoration: none;
}

.bar nav a:hover,
.bar nav a[aria-current="page"] { color: var(--ink); }

/* ---- Type ---- */

h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 600; }

h1 {
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3 { font-size: 1.25rem; line-height: 1.3; }

p { margin: 0; max-width: var(--measure); }

.lede { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--ink-2); }

/* The small dim label under every big number. Only ever under a number. */
.caption {
  display: block;
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.155em;
  text-transform: uppercase;
}

.readout { display: flex; flex-direction: column; }
.readout b {
  color: var(--ink);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---- Hero ---- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-top: clamp(1rem, 4vw, 3.5rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
}

.hero-copy { display: flex; flex-direction: column; gap: 1.5rem; }

.get {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.5rem;
  color: var(--pattern);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
}

.get:hover { text-decoration: underline; text-decoration-color: var(--pattern); }

.platforms { color: var(--ink-3); font-size: 0.9375rem; }

/* The instrument: the app's screen, without the phone around it. */
.instrument {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
}

.instrument .top,
.instrument .bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.instrument .top .readout b { font-size: clamp(2.75rem, 5.4vw, 4.25rem); }
.instrument .top .readout:last-child { align-items: flex-end; }

.dial {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
}

.dial svg { width: 100%; height: 100%; overflow: visible; }

.leg-name {
  min-height: 1.5em;
  text-align: center;
  color: var(--pattern);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.instrument .bottom .readout b { font-size: 2rem; font-weight: 500; }
.instrument .bottom .readout:last-child { align-items: flex-end; }

.traffic {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.traffic .letters { display: flex; gap: 0.875rem; font-size: 2rem; line-height: 1; }
.traffic .letters span { color: var(--ink-3); font-weight: 500; }
.traffic .letters span.on { color: var(--ink); font-weight: 700; }

/* ---- Sections ---- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-top: clamp(3.5rem, 8vw, 7rem);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--edge);
}

.feature-copy { display: flex; flex-direction: column; gap: 1.25rem; }

.screen {
  width: min(100%, 20rem);
  justify-self: center;
  border-radius: 2.25rem;
  border: 1px solid var(--edge);
  overflow: hidden;
}

/* The strip under the dial, at a size you can read across a room. */
.strip {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  row-gap: 2.5rem;
  width: 100%;
}

.strip .readout b { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
.strip .readout:nth-child(3n + 2) { align-items: center; }
.strip .readout:nth-child(3n) { align-items: flex-end; }
.strip .descent b { color: var(--pattern); }

.watches { display: flex; gap: 1.25rem; justify-content: center; }

.watches img {
  width: min(44%, 11rem);
  border-radius: 28%/24%;
  border: 1px solid var(--edge);
}

/* ---- Text pages: support, privacy ---- */

.page { padding-top: clamp(1.5rem, 5vw, 4rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.page > * + * { margin-top: 1.25rem; }
.page h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); margin-bottom: 0.5rem; }
.page h2 { font-size: 1.5rem; margin-top: 3rem; }
.page h3 { margin-top: 2rem; }
.page h2 + p, .page h3 + p { margin-top: 0.5rem; }
.page ul { max-width: var(--measure); padding-left: 1.25rem; margin-bottom: 0; }
.page li + li { margin-top: 0.5rem; }
.updated { color: var(--ink-3); font-size: 0.9375rem; }

.contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 2.5rem !important;
  padding: 1.75rem 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  max-width: var(--measure);
}

.contact a {
  color: var(--ink);
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 500;
  text-decoration: none;
  word-break: break-all;
}

.contact a:hover { text-decoration: underline; }

.faq { max-width: var(--measure); }

/* ---- Footer ---- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--edge);
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.foot nav { display: flex; gap: 1.75rem; }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.disclaimer { max-width: 40rem; color: var(--ink-4); font-size: 0.875rem; }

/* ---- Phone ---- */

@media (max-width: 52rem) {
  .hero, .feature { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 2.5rem; }
  .instrument { max-width: 30rem; }
  .feature .screen, .feature .watches { order: 2; }
  .strip { row-gap: 2rem; }
}

@media (max-width: 22rem) {
  .bar nav { gap: 1.25rem; }
  .mark span { display: none; }
}