/* Starship Rescue — starship-rescue.com
   Vector-display palette: everything is line work on near-black, lit by a
   phosphor bloom. Colour never carries meaning on its own. */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  --bg: #04060b;
  --ink: #e6ebff;      /* default text */
  --ink-bright: #eafbff; /* headings and the wordmark */
  --lead: #c9d3f5;     /* opening paragraphs, card headings */
  --prose: #8e97b8;    /* body copy                     7.02:1 */
  --soft: #7c839e;     /* small print, nav, card copy   5.40:1 */
  --label: #6e7899;    /* eyebrow labels, captions      4.64:1 */

  /* --soft and --label are lifted from the designs' #6A7290 and #5E6786,
     which came to 4.27:1 and 3.63:1 on --bg against the 4.5:1 WCAG AA needs
     at the sizes they are used. Hue and saturation are unchanged, and the
     three text tiers stay a visible step apart. */

  --cyan: #22e8ff;
  --amber: #ffb020;
  --mint: #2bf5c4;
  --violet: #8a5cff;

  --rule-strong: rgba(91, 60, 216, 0.35);
  --rule-soft: rgba(91, 60, 216, 0.22);
  --hair-cyan: rgba(34, 232, 255, 0.24);
  --hair-violet: rgba(91, 60, 216, 0.35);
  --edge-cyan: rgba(34, 232, 255, 0.3);

  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1080px;
  --gutter: 24px;
}

/* ---------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

picture {
  display: block;
}

a {
  color: var(--cyan);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

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

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

::selection {
  background: rgba(34, 232, 255, 0.28);
  color: var(--ink-bright);
}

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

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

.section {
  padding: 86px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.section--tight {
  padding: 76px 0 66px;
}

.section--last {
  border-bottom: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: var(--cyan);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip:focus {
  left: 0;
}

/* ------------------------------------------------------------ site head -- */

.sitehead {
  position: relative;
  border-bottom: 1px solid var(--rule-strong);
  overflow: hidden;
}

.sitehead__bar {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--ink-bright);
  text-decoration: none;
  text-shadow: 0 0 18px rgba(34, 232, 255, 0.55);
}

.wordmark:hover {
  color: var(--ink-bright);
  text-shadow: 0 0 22px rgba(34, 232, 255, 0.9);
}

.nav {
  display: flex;
  gap: 26px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.nav a {
  color: var(--soft);
  text-decoration: none;
}

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

.nav a[aria-current='page'] {
  color: var(--cyan);
}

/* Drifting wireframe rocks behind the masthead. */
#rocks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

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

.hero {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 86px var(--gutter) 84px;
  text-align: center;
}

/* Darkens the field under the type so the rocks never fight the wordmark. */
.hero::before {
  content: '';
  position: absolute;
  inset: -10% -20%;
  pointer-events: none;
  background: radial-gradient(
    58% 46% at 50% 42%,
    rgba(4, 6, 11, 0.94) 0%,
    rgba(4, 6, 11, 0.82) 45%,
    rgba(4, 6, 11, 0) 100%
  );
}

.hero > * {
  position: relative;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  margin: 14px 0 0;
  font-size: clamp(44px, 9vw, 86px);
  letter-spacing: 0.09em;
  line-height: 0.98;
  color: var(--ink-bright);
  text-shadow: 0 0 6px var(--cyan), 0 0 30px rgba(34, 232, 255, 0.75),
    0 0 70px rgba(34, 232, 255, 0.4);
}

.hero .rule {
  margin: 26px auto 0;
}

.hero .lead {
  margin: 26px auto 0;
}

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

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--amber);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 176, 32, 0.8);
}

.kicker {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--label);
  text-transform: uppercase;
}

.kicker--amber {
  color: var(--amber);
}

.rule {
  width: 150px;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  margin: 26px 0 0;
  border: 0;
}

.page-title {
  font-family: var(--display);
  font-weight: 700;
  margin: 16px 0 0;
  font-size: clamp(32px, 6vw, 54px);
  letter-spacing: 0.1em;
  line-height: 1.04;
  color: var(--ink-bright);
  text-shadow: 0 0 6px var(--cyan), 0 0 34px rgba(34, 232, 255, 0.5);
}

.page-title--wide {
  font-size: clamp(34px, 7vw, 64px);
  letter-spacing: 0.08em;
  line-height: 1;
}

h2.heading {
  font-family: var(--display);
  font-weight: 700;
  margin: 14px 0 16px;
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

h2.heading--flush {
  margin-bottom: 0;
}

.lead {
  max-width: 34em;
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--lead);
  text-wrap: pretty;
}

.lead--wide {
  max-width: 36em;
}

.prose {
  max-width: 46em;
  font-size: 15px;
  line-height: 1.9;
  color: var(--prose);
  text-wrap: pretty;
}

.prose em {
  color: var(--lead);
  font-style: normal;
}

.prose--spaced {
  margin-top: 34px;
}

.prose--intro {
  margin: 16px 0 0;
}

.note {
  max-width: 36em;
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 2;
  color: var(--prose);
}

/* ---------------------------------------------------------------- grids -- */

/* Hairline grids: a 1px gap over a coloured backdrop draws the rules, so the
   cells stay flush and the lines never double up at the seams. */
.grid {
  display: grid;
  gap: 1px;
  background: var(--hair-cyan);
  margin-top: 44px;
}

.grid--violet {
  background: var(--hair-violet);
}

/* Column counts are explicit rather than auto-fit: the hairlines are the
   container's background showing through the 1px gaps, so a part-filled last
   row would leak that colour across the empty tracks. Every count below
   divides its item count exactly. */

/* Three cells: how-it-works, support contacts. */
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Six cells: the fact table, the accessibility settings. */
.grid--6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four cells: the privacy summary, the storyboard specs. */
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .grid--6,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--hair-violet);
  margin-top: 42px;
}

.stack--cyan {
  background: var(--hair-cyan);
}

.cell {
  background: var(--bg);
  padding: 28px 24px;
}

.cell--sm {
  padding: 26px 24px;
}

.cell--row {
  padding: 30px 26px;
  display: grid;
  gap: 14px;
}

.cell--fact {
  padding: 20px 18px;
}

.cell--stat {
  padding: 22px 20px;
}

.cell__num {
  font-size: 22px;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 176, 32, 0.7);
}

.cell h3 {
  margin: 14px 0 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lead);
}

.cell--row h2,
.cell--row h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lead);
}

.cell--sm h3 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lead);
}

/* Body copy inside a cell. Scoped to unclassed paragraphs so the modifier
   classes below (.tag, .cell__value, .stat__value, .beat__meta) are not
   outranked by this rule's extra type selector. */
.cell p:not([class]) {
  margin: 0;
  font-size: 12px;
  line-height: 1.95;
  color: var(--soft);
}

.cell--row p:not([class]) {
  max-width: 52em;
  font-size: 13px;
  line-height: 2;
  color: var(--prose);
  text-wrap: pretty;
}

.cell--sm {
  display: grid;
  gap: 10px;
}

.tag {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}

.tag--amber {
  color: var(--amber);
}

.tag--mint {
  color: var(--mint);
}

.tag--violet {
  color: var(--violet);
}

.cell__value {
  margin-top: 12px;
  font-size: 16px;
  color: var(--ink);
}

.cell__value a,
.stat__value a {
  text-decoration: none;
  word-break: break-all;
}

.cell__aside {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.9;
  color: var(--soft);
}

.cell__note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.9;
  color: var(--soft);
}

.stat__value {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--mint);
}

.stat__value--link {
  color: var(--ink);
}

/* ----------------------------------------------------------------- dl -- */

.facts {
  margin: 40px 0 0;
}

.facts dt {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--label);
  text-transform: uppercase;
}

.facts dd {
  margin: 9px 0 0;
  font-size: 14px;
  color: var(--ink);
}

.facts .sub {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--label);
  text-transform: uppercase;
}

/* -------------------------------------------------------------- actions -- */

.actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
}

/* The store row sits above the secondary action, so it takes the full top
   margin and the one below it tightens up. */
.actions--stores {
  gap: 16px;
}

.actions--stores + .actions {
  margin-top: 18px;
}

/* ------------------------------------------------------- store buttons -- */

/* Deliberately NOT reproductions of Apple's and Google's official badges.
   Both stores supply badge artwork and require it be used unaltered, at their
   own minimum sizes and clear space — and neither badge may be shown for an
   app that is not on the store. So these are the site's own buttons, in the
   site's own palette, carrying the store names as plain text. Swap in the
   official assets when the listings go live and the links become real.

   The glyphs are generic on purpose: a download arrow and a play triangle,
   not the Apple mark or the Play four-colour device, which are trademarks. */
.storebtn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 12px 22px 12px 18px;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 0 26px rgba(34, 232, 255, 0.45);
}

.storebtn:hover {
  background: #7cf3ff;
  border-color: #7cf3ff;
  box-shadow: 0 0 34px rgba(34, 232, 255, 0.7);
}

.storebtn:focus-visible {
  outline: 2px solid var(--ink-bright);
  outline-offset: 3px;
}

.storebtn__glyph {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The play triangle is a solid shape, not an outline. */
.storebtn[data-store-link="google"] .storebtn__glyph {
  fill: currentColor;
  stroke-width: 1.2;
}

.storebtn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.storebtn__kicker {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
}

.storebtn__name {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* Stacked, the two buttons size to their own text and the shorter one reads as
   a mistake. Fix the width so the column has one edge. */
@media (max-width: 560px) {
  .actions--stores {
    flex-direction: column;
    align-items: center;
  }

  .storebtn {
    width: min(268px, 100%);
  }
}

.btn {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 26px;
  text-decoration: none;
  border: 1px solid var(--cyan);
}

.btn--solid {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 26px rgba(34, 232, 255, 0.45);
}

.btn--solid:hover {
  background: #7cf3ff;
  border-color: #7cf3ff;
  color: var(--bg);
  box-shadow: 0 0 34px rgba(34, 232, 255, 0.7);
}

.btn--ghost {
  border-color: rgba(34, 232, 255, 0.45);
  color: var(--cyan);
}

.btn--ghost:hover {
  background: rgba(34, 232, 255, 0.14);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Currently unused: the hero's "in development" strip was removed. Kept
   because the launch badge is the same component with different words --
   "Now on the App Store" wants exactly this treatment. Delete it if that
   never happens. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  border: 1px solid rgba(255, 176, 32, 0.4);
  padding: 11px 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--amber);
  text-transform: uppercase;
}

.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- shots -- */

.shots {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 44px 0 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-cyan) transparent;
}

.shots::-webkit-scrollbar {
  height: 6px;
}

.shots::-webkit-scrollbar-thumb {
  background: var(--edge-cyan);
}

.shot {
  flex: 0 0 auto;
  width: 246px;
  margin: 0;
  scroll-snap-align: start;
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--edge-cyan);
  background: #000;
}

.shot figcaption {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--label);
  text-transform: uppercase;
}

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

.sitefoot {
  padding: 56px 0 76px;
  font-size: 11px;
  line-height: 2.1;
  color: var(--label);
}

.sitefoot__links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.sitefoot__links a {
  color: var(--soft);
  text-decoration: none;
}

.sitefoot__links a:hover {
  color: var(--cyan);
}

.sitefoot p {
  max-width: 52em;
}

.sitefoot strong {
  color: var(--soft);
  font-weight: 400;
}

/* ------------------------------------------------------------ storyboard -- */

.beat {
  background: var(--bg);
  padding: 26px 24px;
  display: grid;
  gap: 22px;
}

.beat__head {
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
}

.beat__time {
  font-size: 22px;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 176, 32, 0.7);
}

.beat__head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.beat__body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.beat__body > div:last-child {
  display: grid;
  gap: 14px;
}

.beat__body p:not([class]) {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: var(--prose);
  text-wrap: pretty;
}

.beat__body img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--edge-cyan);
  background: #000;
}

.beat__meta {
  font-size: 11px;
  line-height: 1.9;
  color: var(--label);
}

.beat__meta span {
  color: var(--lead);
}

/* Placeholder for a frame that has to be captured on a device. */
.beat__todo {
  width: 100%;
  aspect-ratio: 402 / 874;
  border: 1px solid var(--edge-cyan);
  background: repeating-linear-gradient(135deg, #04060b 0 7px, #0a0e1a 7px 14px);
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: 0.14em;
  color: var(--label);
  text-transform: uppercase;
}

.beat__endcard {
  width: 100%;
  aspect-ratio: 402 / 874;
  border: 1px solid var(--edge-cyan);
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
}

.beat__endcard b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink-bright);
  text-shadow: 0 0 18px rgba(34, 232, 255, 0.6);
  line-height: 1.4;
}

.beat__endcard span {
  display: block;
  margin-top: 10px;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--amber);
  text-transform: uppercase;
}

.callout {
  border: 1px solid rgba(255, 176, 32, 0.4);
  padding: 26px 24px;
  display: grid;
  gap: 12px;
}

.callout p:not([class]) {
  margin: 0;
  max-width: 52em;
  font-size: 13px;
  line-height: 2;
  color: var(--prose);
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .beat__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .beat__body picture,
  .beat__todo,
  .beat__endcard {
    max-width: 180px;
  }
}

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

.oops {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px var(--gutter);
}

.oops .rule {
  margin: 26px auto 0;
}

.oops .lead {
  margin-left: auto;
  margin-right: auto;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--cyan);
  background: rgba(34, 232, 255, 0.08);
  padding: 1px 5px;
}

/* -------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #rocks {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Bloom is decoration; when the reader has asked for contrast, drop it. */
@media (prefers-contrast: more) {
  .hero h1,
  .page-title,
  .wordmark,
  .eyebrow,
  .cell__num,
  .beat__time {
    text-shadow: none;
  }

  .rule {
    box-shadow: none;
  }

  body {
    color: #f2f5ff;
  }

  :root {
    --prose: #b6bedd;
    --soft: #9aa2c0;
    --label: #8a92b0;
  }
}

/* --------------------------------------------------------------- print -- */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  #rocks,
  .actions,
  .skip {
    display: none;
  }

  .hero h1,
  .page-title,
  .wordmark {
    color: #000;
    text-shadow: none;
  }

  .prose,
  .lead,
  .cell p {
    color: #222;
  }
}