/* Echo Flight site styles. One stylesheet for index, support, privacy, and 404.
   The palette and the four motifs (sky glow, gold halo, gold underline, ruins
   divider) come from the revised legal pages, so the whole site reads as one
   product. Every color below is a token: no stray hex outside :root. */

:root {
  /* Palette. The _rgb triples exist so translucent variants can be built with
     rgba() without repeating a literal color. */
  --base: #0a1530;
  --surface: #172447;
  --raised: #101c3d;
  --border: #24345c;
  --text: #eef3fb;
  --muted: #9ec6e8;
  --gold: #ffd84a;
  --sky: #7cc9ff;

  --base-rgb: 10, 21, 48;
  --gold-rgb: 255, 216, 74;
  --sky-rgb: 124, 201, 255;

  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shell-wide: 68rem;
  --shell-narrow: 44rem;
  --pad: 1.25rem;

  /* Base type stack. The optional display face layers on top of this, and the
     site falls back to exactly this stack if that block is removed. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --tap: 44px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Sticky header on wide screens, so in page anchors need clearance. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(var(--sky-rgb), 0.13), rgba(var(--base-rgb), 0) 62%) no-repeat,
    var(--base);
  font: 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

p { margin: 0 0 0.9rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 0.9rem; padding-left: 1.15rem; }
ul:last-child, ol:last-child { margin-bottom: 0; }
li { margin: 0.4rem 0; }
li::marker { color: var(--gold); }

a {
  color: var(--sky);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
a:hover { color: var(--gold); }

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

/* ------------------------------------------------------------------ type */

h1, h2, h3 {
  margin: 0 0 0.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.75rem, 1.15rem + 3vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.3vw, 1.9rem); color: var(--text); }
h3 { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem); color: var(--sky); }

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
}
.effective { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.5rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.85rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* -------------------------------------------------------------- layout */

.shell {
  width: 100%;
  max-width: var(--shell-wide);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.shell--narrow { max-width: var(--shell-narrow); }

main { display: block; }

/* Vertical only, as longhands. support.html, privacy.html, and 404.html put these
   on the same element as .shell (<main class="shell shell--narrow section">), and
   a "padding: 3rem 0" shorthand there also sets the horizontal padding to zero,
   which wiped out the shell gutter and ran the body copy into both screen edges
   below 44rem. Index never showed it because there .section and .shell sit on
   different elements. */
.section { padding-top: 3rem; padding-bottom: 3rem; }
.section--tight { padding-top: 2rem; padding-bottom: 2rem; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus {
  position: fixed; left: 0.75rem; top: 0.75rem; z-index: 60;
  background: var(--gold); color: var(--base);
  padding: 0.6rem 0.9rem; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}

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

.site-header {
  background: var(--raised);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--text);
  min-height: var(--tap);
}
.brand:hover .brand__name { color: var(--gold); }
.brand__icon { position: relative; display: inline-flex; flex: none; }
.brand__icon img { width: 44px; height: 44px; border-radius: 10px; }
.brand__name { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; }

/* The gold halo ring, carried over from the revised legal pages. */
.halo::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(var(--gold-rgb), 0.45);
  box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.18);
  opacity: 0.7;
}

.nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--sky);
  text-decoration: none;
  font-size: 0.92rem;
}
.nav a:hover { border-color: var(--sky); color: var(--sky); }
.nav a[aria-current="page"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--base);
  font-weight: 600;
}
.nav a[aria-current="page"]:hover { color: var(--base); }

/* Sticky only where there is room for it. At 375 px the nav wraps to a second
   row, and a two row sticky bar would eat a third of the screen. */
@media (min-width: 46rem) {
  .site-header { position: sticky; top: 0; z-index: 30; }
}

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

.hero { padding: 2.75rem 0 2.25rem; }
.hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; }
}
.hero h1 { margin-bottom: 0.9rem; }
.hero .lede { font-size: 1.12rem; max-width: 34rem; }

.phone {
  margin: 0 auto;
  max-width: clamp(190px, 54vw, 268px);
  position: relative;
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 46px rgba(var(--base-rgb), 0.65);
}
.phone--sm { max-width: clamp(160px, 44vw, 214px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
}

/* Status, not a link. Echo Flight is not on the App Store yet, so nothing on
   this site may behave as though it can be downloaded. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.5rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-pill);
  background: var(--raised);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: default;
}
.chip::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--base);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.btn:hover { background: var(--text); border-color: var(--text); color: var(--base); }
.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--sky);
}
.btn--ghost:hover { background: transparent; border-color: var(--sky); color: var(--sky); }

.meta-line { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ----------------------------------------------------------- promises */

.promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.promises li {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.promises li span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 400;
}

/* ----------------------------------------------------------- features */

.feature {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}
.feature:first-of-type { border-top: 0; }
@media (min-width: 52rem) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 3rem; padding: 2.75rem 0; }
  /* Alternating blocks put the media on the left. "order" moves the boxes but not
     the track sizes, so the even rows also mirror the template: without this the
     prose lands in the 0.72fr track and the decoration gets the wide one. */
  .feature:nth-of-type(even) { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
  .feature:nth-of-type(even) .feature__body { order: 2; }
  .feature:nth-of-type(even) .feature__media { order: 1; }
}
.feature__body p:last-of-type { margin-bottom: 0; }
.feature__media { display: grid; gap: 1rem; }

figure { margin: 0; }
figcaption {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.55rem;
  text-align: center;
}

/* Three captures side by side inside one feature block. The count is fixed at
   three rather than auto-fit: the media column is never wide enough for three
   8.5rem tracks, so auto-fit broke the trio into a ragged two plus one. */
.media-trio {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.media-trio .phone { max-width: 100%; }
.media-trio figcaption { font-size: 0.78rem; }

/* Decorative stand in where a feature has no capture of its own. A colonnade of
   pixel ruins standing on a ground line: two column layers of different heights,
   offset from each other, so it reads as a skyline rather than as a loading
   skeleton (one uniform striped bar looked like unloaded content). */
.ruins-panel {
  min-height: 10rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--border), var(--border)) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(90deg,
      rgba(var(--sky-rgb), 0.20) 0 14px,
      rgba(var(--sky-rgb), 0) 14px 36px) bottom left / 100% 66% no-repeat,
    repeating-linear-gradient(90deg,
      rgba(var(--sky-rgb), 0) 0 18px,
      rgba(var(--sky-rgb), 0.11) 18px 30px,
      rgba(var(--sky-rgb), 0) 30px 36px) bottom left / 100% 40% no-repeat,
    radial-gradient(90% 70% at 50% 100%, rgba(var(--sky-rgb), 0.07), rgba(var(--base-rgb), 0) 70%) no-repeat,
    var(--raised);
  overflow: hidden;
}

/* ------------------------------------------------------------ gallery */

/* The scroll container carries the focus and the snap axis. The list inside it
   keeps its list semantics, so a screen reader still announces six items. */
.rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0 1.25rem;
  scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
}
.rail:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.rail__list {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rail__list > li {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(160px, 46vw, 208px);
  margin: 0;
}
.rail .phone { max-width: 100%; }
.rail-hint { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }

/* ---------------------------------------------------------------- faq */

.faq-list { display: grid; gap: 0.7rem; }
details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 1.1rem;
}
details[open] { border-color: rgba(var(--gold-rgb), 0.4); }
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  padding: 0.85rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--gold);
  font-size: 1.35rem;
  line-height: 1;
  flex: none;
}
details[open] summary::after { content: "\2212"; }
.answer { padding: 0 0 1.05rem; color: var(--muted); }
.answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- card */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  margin: 0 0 1.15rem;
}
.card--contact { border-color: rgba(var(--gold-rgb), 0.4); }
.card h2 {
  font-size: 1.15rem;
  margin: 0 0 0.85rem;
  color: var(--sky);
  letter-spacing: 0.01em;
  scroll-margin-top: 5.5rem;
}
/* The gold underline motif. */
.card h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  margin-top: 0.5rem;
}

dl { margin: 0 0 0.9rem; }
dt { font-weight: 700; margin-top: 1.15rem; }
dt:first-of-type { margin-top: 0; }
dd {
  margin: 0.35rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--border);
  color: var(--text);
}

/* Written as ul.jump, not .jump: this list is the only child of its <nav>, so the
   "ul:last-child { margin-bottom: 0 }" rule higher up matched it and dropped the
   gap to zero, leaving the jump links sitting flush on top of the first card.
   Same specificity as that rule, further down the file, so it wins it back. */
ul.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.jump li { margin: 0; }
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 0.88rem;
  padding: 0.35rem 0.8rem;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--sky);
  text-decoration: none;
}
.jump a:hover { border-color: var(--sky); }

/* ------------------------------------------------------------ closing */

.madeby {
  border-top: 1px solid var(--border);
  padding: 1.75rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Section divider. Same two layer colonnade as .ruins-panel, shorter, so the
   motif reads the same wherever it appears. */
.ruins {
  height: 54px;
  margin: 1.75rem 0 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(var(--sky-rgb), 0.16) 0 14px,
      rgba(var(--sky-rgb), 0) 14px 36px) bottom left / 100% 100% no-repeat,
    repeating-linear-gradient(90deg,
      rgba(var(--sky-rgb), 0) 0 18px,
      rgba(var(--sky-rgb), 0.10) 18px 30px,
      rgba(var(--sky-rgb), 0) 30px 36px) bottom left / 100% 58% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 70%);
  mask-image: linear-gradient(180deg, transparent, black 70%);
}

footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0 2.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
footer p { margin: 0; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
}
.footer-links li { margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --------------------------------------------------------------- 404 */

/* Longhands for the same reason as .section: this class sits on the same element
   as .shell, so a shorthand here would zero the gutter. */
.notfound { padding-top: 4rem; padding-bottom: 3rem; text-align: center; }
.notfound .cta-row { justify-content: center; }
.notfound .code {
  display: block;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

/* ------------------------------------------------------------- small */

@media (max-width: 26.25rem) {
  :root { --pad: 1rem; }
  .card { padding: 1.05rem 1rem; }
  .brand { gap: 0.65rem; }
  .brand__name { font-size: 1rem; }
  .lede, .hero .lede { font-size: 1rem; }
  .cta-row .btn, .cta-row .chip { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .halo::after { animation: halo 6s ease-in-out infinite; }
  @keyframes halo {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.045); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- self hosted display face: remove this block if assets/fonts/press-start-2p-latin.woff2 is absent --- */
/* Press Start 2P (SIL OFL 1.1), subset and served from this origin. No Google
   Fonts request, no CDN. It is roughly twice as wide per character as the body
   stack, so each selector below also restates its own size and spacing: delete
   the whole block and every heading falls back to the sizes set further up
   with nothing left dangling. It is never applied to body copy, to feature or
   FAQ text, or to the running text of the support and privacy pages. */
@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/fonts/press-start-2p-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.brand__name,
.eyebrow,
h1,
.display,
.notfound .code {
  font-family: "Press Start 2P", var(--font-body);
  /* The subset ships one weight. Without this, a bold heading gets a synthetic
     bold that smears a pixel face and widens it further. */
  font-synthesis: none;
}

.brand__name {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
h1 {
  font-size: clamp(1.25rem, 0.85rem + 1.85vw, 2rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.display {
  font-size: clamp(1rem, 0.8rem + 0.9vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
}
.notfound .code { font-size: 0.7rem; letter-spacing: 0.1em; }
/* --- end self hosted display face --- */