/* BitRep site: design pack 10, Midnight and Iris, dark theme only */

@font-face { font-family: "Archivo"; src: url("fonts/Archivo_400Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo_700Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/PixelifySans_700Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ground: #0E1020;
  --card: #171A2E;
  --raised: #22263F;
  --text: #F3F3FA;
  --muted: #A3A8C4;
  --accent: #8F8DFF;
  --on-accent: #0E1020;
  --link: #B8B6FF;
  --mint: #5EE0B0;
  --highlight: rgba(255, 255, 255, 0.04);
  --r-control: 12px;
  --r-card: 16px;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Pixelify Sans", var(--body);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.5 var(--body);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p, ul { margin: 0; }
img { max-width: 100%; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 680px; margin-left: auto; margin-right: auto; }

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

.section { margin-top: 56px; }
.section-title { font: 700 17px/1.3 var(--body); text-align: center; margin-bottom: 16px; }
.caption { color: var(--muted); text-align: center; }

/* Header */
.site-header { padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { display: block; width: 130px; height: auto; }
.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 16px/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
}
.header-cta:active { transform: scale(0.97); opacity: 0.88; }
@media (max-width: 359px) { .wordmark { width: 110px; } .header-cta { padding: 0 12px; } }
.wrap-hero { max-width: 1120px; }

/* The app stills are phones on their own dark backdrop. Clip each one to
   the phone's outline, measured on the 900 x 1790 originals: the frame's
   outer edge is 28 px from the top, 36 px from the left, 37 px from the
   right and 27 px from the bottom, and its corners are about 128 px. */
.phone-still { display: block; width: 100%; height: auto; clip-path: inset(1.56% 4.11% 1.51% 4% round 14.2% / 7.15%); }
/* The clip is measured from the image's own box, so a still never takes
   padding or a border: space around it goes on the margin or the parent. */
.phone-still { padding: 0; border: 0; }
.card img { display: block; width: 100%; height: auto; }

/* Hero: the star field sits behind this band only */
.hero-band {
  background:
    linear-gradient(to bottom, rgba(14, 16, 32, 0) 45%, var(--ground) 100%),
    radial-gradient(rgba(255, 255, 255, 0.14) 0.75px, transparent 1.25px) 0 0 / 30px 30px,
    radial-gradient(rgba(143, 141, 255, 0.22) 0.75px, transparent 1.25px) 15px 22px / 46px 46px,
    var(--ground);
}
/* a plain jump to #hero (no script) keeps the header and headline in view */
#hero { scroll-margin-top: 80px; }
.hero {
  padding-top: 24px;
  padding-bottom: 32px;
  display: grid;
  grid-template-areas: "text" "cluster" "fox";
  gap: 24px;
}
.hero-left { display: contents; }
.hero-text { grid-area: text; display: flex; flex-direction: column; gap: 16px; }
h1 { font: 700 30px/1.15 var(--display); text-wrap: balance; }
.lede { font-size: 18px; line-height: 1.45; max-width: 46ch; color: var(--text); }
.hero .waitlist { max-width: 520px; margin-top: 8px; }

/* Three phones: Home in front, Run behind left, Food behind right.
   --f is the front phone's width; the back phones are 80% of it, set
   lower, and the front one overlaps a third of each. */
.cluster {
  grid-area: cluster;
  --f: min(190px, calc((100vw - 32px) / 2.07));
  position: relative;
  justify-self: center;
  width: calc(var(--f) * 2.0667);
  height: calc(var(--f) * 1.9889);
}
.cluster .phone-still { position: absolute; }
.cluster .front { left: calc(var(--f) * 0.5333); top: 0; width: var(--f); z-index: 1; }
.cluster .back { top: calc(var(--f) * 0.2); width: calc(var(--f) * 0.8); filter: brightness(0.75); }
.cluster .left { left: 0; }
.cluster .right { right: 0; }

.hero-fox { grid-area: fox; }
.hero-fox .stages { flex-wrap: nowrap; gap: 4px; }
.hero-fox .stages li { flex: 1 1 0; min-width: 0; }
.hero-fox .caption { margin-top: 8px; font-size: 14px; }

@media (min-width: 600px) { h1 { font-size: 38px; } }
@media (min-width: 900px) {
  .hero {
    padding-top: 48px;
    padding-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "left cluster";
    column-gap: 48px;
    align-items: center;
  }
  .hero-left { grid-area: left; display: flex; flex-direction: column; gap: 32px; }
  .cluster { --f: clamp(200px, 22vw, 290px); }
  h1 { font-size: clamp(38px, 3.4vw, 48px); }
  .lede { font-size: 20px; }
  .hero-fox .stages { gap: 8px; justify-content: flex-start; }
  .hero-fox .caption { text-align: left; }
}

/* Waitlist form */
.waitlist { display: flex; flex-direction: column; gap: 8px; }
.waitlist .row { display: flex; flex-direction: column; gap: 8px; }
.waitlist input, .waitlist button {
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-control);
  font: 400 16px/1.25 var(--body);
}
.waitlist input {
  padding: 0 16px;
  border: 0;
  background: var(--raised);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--highlight);
}
.waitlist input::placeholder { color: var(--muted); opacity: 1; }
/* a text field shows its ring whenever it has focus, however it got it */
.waitlist input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.waitlist button {
  padding: 0 20px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  cursor: pointer;
  transition: transform 80ms ease-out, opacity 80ms ease-out;
}
.waitlist button:active { transform: scale(0.97); opacity: 0.88; }
.fine { font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (min-width: 600px) {
  .waitlist .row { flex-direction: row; align-items: stretch; }
  .waitlist input { flex: 1 1 auto; min-width: 0; }
  .waitlist button { width: auto; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .waitlist button { transition: none; }
  .waitlist button:active { transform: none; }
}

/* Cards */
.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--highlight);
}
.card-body { padding: 16px; }
.card h2, .promises h2 { font: 700 17px/1.3 var(--body); }
.card h2 { margin-bottom: 4px; }

/* Film: portrait 9:16, centred, never wider than the column */
.film { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.film .section-title { margin-bottom: 4px; }
.film-stage { width: 100%; display: flex; justify-content: center; }
.film-frame {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-card);
  overflow: hidden;
  /* makes Safari clip the video layer to the rounded corners */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: var(--card);
}
.film video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-card);
}
/* Play button on the poster until the film has started (added by the script) */
.film-play {
  position: absolute;
  left: 50%;
  top: 33%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.film-play svg { width: 32px; height: 32px; margin-left: 3px; }
.film-play:active { transform: scale(0.97); opacity: 0.88; }
.film-frame.is-started .film-play { display: none; pointer-events: none; }

/* Wide screens: Ember at stage 1 before the film and stage 5 after it.
   Both 620 px squares are drawn at the same size, so the cub is naturally
   smaller than the adult. --fox is 310 px at most: the largest size the
   620 px art covers on a 2x screen without enlarging it. */
.film-fox { display: none; }
@media (min-width: 1024px) {
  .film-stage {
    --fox: min(310px, calc((100vw - 492px) / 2));
    width: min(1240px, 100vw - 32px);
    margin-left: calc((100% - min(1240px, 100vw - 32px)) / 2);
    margin-right: calc((100% - min(1240px, 100vw - 32px)) / 2);
    display: grid;
    grid-template-columns: var(--fox) 380px var(--fox);
    justify-content: center;
    column-gap: 40px;
  }
  .film-frame { max-width: 380px; }
  .film-fox {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: end;
    /* shared baseline in the lower part of the film's height */
    margin-bottom: 96px;
    text-align: center;
  }
}
.film-fox .fox { width: var(--fox); }
.film-fox img { display: block; width: var(--fox); height: var(--fox); image-rendering: auto; }
/* the feet end 2/146 of the square above its bottom edge */
.film-fox-ground { display: block; width: calc(var(--fox) * 0.62); height: 4px; margin-top: calc(var(--fox) * -0.0137 - 1px); background: var(--mint); }
.film-fox figcaption { margin-top: 14px; display: grid; gap: 2px; }
.film-fox figcaption strong { font: 700 18px/1.3 var(--body); color: var(--text); }
.film-fox figcaption span { font-size: 14px; color: var(--muted); }

/* Feature cards: a swipe row on phones and tablets; on wide screens three
   cards then two, centred */
.features {
  list-style: none;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  margin: 0 -16px;
  padding: 0 16px 8px;
}
.features > li { flex: 0 0 78%; scroll-snap-align: start; overflow: hidden; }
.features .phone-still { margin-top: 4px; }
.features .card h2 { font-size: 18px; }
@media (min-width: 1024px) {
  .features {
    width: min(1120px, 100vw - 32px); margin-left: calc((100% - min(1120px, 100vw - 32px)) / 2); margin-right: calc((100% - min(1120px, 100vw - 32px)) / 2);
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    overflow: visible;
    padding: 0;
  }
  .features > li { flex: 0 0 calc((100% - 40px) / 3); }
  .features .phone-still { width: 230px; margin: 20px auto 0; }
  .features .card-body { padding: 16px 20px 20px; }
}

/* The five stages: whole squares, never stretched */
.stages {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.stages li { flex: 0 0 calc((100% - 16px) / 3); }
/* The hero foxes are always drawn smaller than the file they load, so they
   are scaled down smoothly. Art shown at exactly its file size (the film's
   companions, the thanks page) keeps pixelated rendering. */
.stages img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  image-rendering: auto;
}
@media (min-width: 600px) { .stages li { flex-basis: calc((100% - 32px) / 5); } }
.stages + .caption { margin-top: 12px; }

/* What we promise: six tonal panels, 3 x 2 on wide screens, 2 x 3 on
   tablets, one column on phones */
.promise-list { max-width: 1000px; margin-left: auto; margin-right: auto; }
.promise-list ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.promise-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--highlight);
  text-align: left;
}
.tick { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
@media (min-width: 600px) { .promise-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .promise-list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Questions: plain details and summary, no script */
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.faq details:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 10px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; color: var(--accent); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 16px; color: var(--text); }

.join { padding: 20px 16px; }
@media (min-width: 600px) { .join { padding: 24px; } }

/* Footer */
.site-footer { margin-top: 48px; padding-bottom: 40px; text-align: center; }
.site-footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  font-size: 14px;
  color: var(--muted);
}
.site-footer li { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
/* Phones: no separators so the links wrap cleanly, and the copyright gets
   its own centred line under them */
.site-footer li:last-child { flex-basis: 100%; justify-content: center; }
.legal { margin-top: 8px; display: grid; gap: 4px; }
@media (min-width: 600px) {
  .site-footer { text-align: left; }
  .site-footer ul { justify-content: flex-start; column-gap: 8px; }
  .site-footer li:not(:last-child)::after { content: "\00B7"; padding-left: 8px; color: var(--muted); }
  .site-footer li:last-child { flex-basis: auto; }
}

/* Thanks page */
.thanks { padding-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.thanks img { width: 146px; height: auto; aspect-ratio: 1 / 1; image-rendering: pixelated; }
.thanks h1 { font-size: 30px; }
.thanks p { max-width: 36ch; }
.thanks .back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.share-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--r-control);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--highlight);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.button-secondary:active { transform: scale(0.97); opacity: 0.88; }

/* Legal pages: one readable column on the ground colour */
.home-link { display: inline-flex; align-items: center; min-height: 44px; }
.legal-page { max-width: 70ch; padding-top: 32px; }
.legal-page p, .legal-page li, .legal-page dd { font-size: 16px; line-height: 1.65; color: var(--text); }
.legal-page .legal-kicker { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.legal-page h1 { font-size: 30px; margin-bottom: 16px; }
.legal-page .legal-intro { font-size: 18px; }
.legal-page .legal-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.legal-summary { margin: 32px 0 0; display: grid; gap: 16px; }
.legal-summary dt { font-weight: 700; }
.legal-summary dd { margin: 0; }
.legal-page h2 { font: 700 20px/1.3 var(--body); margin: 40px 0 8px; }
.legal-section p + p, .legal-section p + ul, .legal-section ul + p { margin-top: 12px; }
.legal-page ul { padding-left: 1.25em; display: grid; gap: 8px; }
.legal-page b { font-weight: 700; }
.legal-contact { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: grid; gap: 4px; }
.legal-page .legal-label { font-size: 14px; color: var(--muted); }
.legal-contact a { font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.legal-page .legal-contact .fine { font-size: 14px; color: var(--muted); }
@media (min-width: 600px) {
  .legal-page { padding-top: 48px; }
  .legal-page h1 { font-size: 40px; }
}

/* Fox idle animation: vertical moves only, on whole pixels, transform only.
   .fox stays still (it is the hover and tap target, so the hit area never
   moves); .fox-hop runs the scheduled hop; .fox-tap runs the hover or tap
   hop; the img itself bobs. Nothing here affects layout. */
.fox, .fox-hop, .fox-tap { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .fox img { animation: fox-bob 2.8s infinite; }
  /* One shared 18 s schedule: each fox hops twice per cycle, 8 s then 10 s
     apart, and the start points are spread so no two hops ever overlap. */
  .fox-hop { animation: fox-hop-schedule 18s infinite; }
  .fox-tap.tap { animation: fox-hop-once 350ms; }
  @media (hover: hover) and (pointer: fine) {
    .fox:hover .fox-tap { animation: fox-hop-once 350ms; }
  }
  .stages li:nth-child(1) img { animation-duration: 2.4s; animation-delay: -0.3s; }
  .stages li:nth-child(2) img { animation-duration: 3.4s; animation-delay: -1.7s; }
  .stages li:nth-child(3) img { animation-duration: 2.8s; animation-delay: -0.9s; }
  .stages li:nth-child(4) img { animation-duration: 3.1s; animation-delay: -2.2s; }
  .stages li:nth-child(5) img { animation-duration: 2.6s; animation-delay: -1.2s; }
  .stages li:nth-child(1) .fox-hop { animation-delay: 1.5s; }
  .stages li:nth-child(2) .fox-hop { animation-delay: -2.1s; }
  .stages li:nth-child(3) .fox-hop { animation-delay: -5.7s; }
  .stages li:nth-child(4) .fox-hop { animation-delay: -9.3s; }
  .stages li:nth-child(5) .fox-hop { animation-delay: -12.9s; }
  .thanks .fox-hop { animation-delay: 1.5s; }
  .film-fox.before img { animation-duration: 3.1s; animation-delay: -0.6s; }
  .film-fox.after img { animation-duration: 2.7s; animation-delay: -1.8s; }
  .film-fox.before .fox-hop { animation-delay: 4s; }
  .film-fox.after .fox-hop { animation-delay: -5s; }
}
@keyframes fox-bob {
  0%, 100% { transform: translateY(0); animation-timing-function: steps(3, jump-none); }
  50% { transform: translateY(-2px); animation-timing-function: steps(3, jump-none); }
}
@keyframes fox-hop-once {
  0% { transform: translateY(0); animation-timing-function: steps(10, jump-none); }
  50% { transform: translateY(-9px); animation-timing-function: steps(10, jump-none); }
  100% { transform: translateY(0); }
}
/* 350 ms hops at 0 s and 8 s of the 18 s cycle (175 ms up, 175 ms down) */
@keyframes fox-hop-schedule {
  0% { transform: translateY(0); animation-timing-function: steps(10, jump-none); }
  0.972% { transform: translateY(-9px); animation-timing-function: steps(10, jump-none); }
  1.944% { transform: translateY(0); }
  44.444% { transform: translateY(0); animation-timing-function: steps(10, jump-none); }
  45.417% { transform: translateY(-9px); animation-timing-function: steps(10, jump-none); }
  46.389% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* BitRun, playable in place. The frame holds the page in /bitrun/; the home
   page script sizes it to the game. Without the script it keeps the height
   below and scrolls inside. */
.game .caption { margin-bottom: 16px; }
.game-frame { max-width: 860px; margin: 0 auto; }
.game-frame iframe { display: block; width: 100%; height: 900px; border: 0; background: transparent; color-scheme: dark; }