/* The brand, carried over from the app. Palette.swift is the source of
   truth for every colour but one: the gradient's middle stop, #5B5FD6, is
   the film's (Previews/composer/src/Bands.tsx). If a value changes there,
   change it here too: the store presence and the product should not drift
   apart (#51).

   Light is the pre-flight tokens, plus plum, the icon's violet. Dark is the
   run screen's, on its true black, plus the plum lifted to the bug glyph's
   purple so it reads there. The gradient is the icon's meteor: plum to cyan. It is decoration
   only, never behind text, because white on its cyan end is under 2:1. The
   button is solid: petrol with white in light (5.3:1), and the run screen's
   Done button in dark, cyan with its dark label. */

/* The app's own fonts (App/Fonts), served from this origin rather than from
   Google Fonts, so no visitor's IP address goes to Google (#271, #270).
   Built by scripts/site-fonts: WOFF2, Latin subset, only the weights below.
   Licences: fonts/OFL-PublicSans.txt and fonts/OFL-SplineSansMono.txt. */
@font-face {
  font-family: "Public Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PublicSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PublicSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PublicSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Spline Sans Mono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SplineSansMono-Medium.woff2") format("woff2");
}

:root {
  --bg: #f8f8fc;          /* chalk */
  --text: #101718;        /* ink */
  --muted: #485456;       /* inkMuted */
  --link: #097590;        /* petrol */
  --accent: #7b3fc4;      /* plum */
  --hairline: #e2e4ec;
  --rule: #d6d9e2;
  --card: #ffffff;
  --on-button: #ffffff;
  --glow: 0 1px 2px rgba(16, 23, 24, 0.08), 0 12px 32px rgba(16, 23, 24, 0.12);

  --gradient: linear-gradient(90deg, #7b3fc4 0%, #5b5fd6 45%, #40ceeb 100%);
  --button: #097590;      /* petrol */

  --measure: 34rem;
  --gap: clamp(3rem, 8vw, 5.5rem);
}

/* Dark: the run screen's tokens. Applied by the system setting, or always
   when the page says data-look="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-look="light"]) {
    --bg: #000000;        /* runBackground */
    --text: #e9eff0;      /* runInk */
    --muted: #93a2a5;     /* runMuted */
    --link: #40ceeb;      /* runAccent */
    --accent: #9e61f4;    /* bugPurple, 5.5:1 on black */
    --hairline: #223034;  /* runTrack */
    --rule: #2c3d41;
    --card: #000000;
    --glow: 0 0 80px rgba(64, 206, 235, 0.16);
    --button: #40ceeb;    /* runAccent */
    --on-button: #06171c; /* runAccentInk */
  }
}

:root[data-look="dark"] {
  --bg: #000000;
  --text: #e9eff0;
  --muted: #93a2a5;
  --link: #40ceeb;
  --accent: #9e61f4;
  --hairline: #223034;
  --rule: #2c3d41;
  --card: #000000;
  --glow: 0 0 80px rgba(64, 206, 235, 0.16);
  --button: #40ceeb;
  --on-button: #06171c;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main,
header,
footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

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

h1,
h2 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  font-weight: 600;
  margin: 0 0 1rem;
}

/* The meteor's streak, under each page's headline. */
h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--gradient);
}

h2 {
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

p {
  margin: 0 0 1.15rem;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

.wordmark {
  font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo,
    monospace;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.wordmark a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

/* The app icon, rounded the way iOS rounds it. */
.logo {
  width: 2rem;
  height: 2rem;
  border-radius: 22.5%;
  flex: none;
}

.wordmark a {
  color: inherit;
  text-decoration: none;
}

.tagline {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

.attribution {
  color: var(--muted);
  font-style: italic;
  margin-top: -0.5rem;
}

.features {
  margin: 0;
  padding-left: 1.25rem;
}

.features li + li {
  margin-top: 0.4rem;
}

.features li::marker {
  color: var(--accent);
}

.lede {
  font-size: 1.1em;
}

.muted {
  color: var(--muted);
}

/* ---- Layout ---- */

header {
  padding-top: clamp(3rem, 9vw, 5rem);
  padding-bottom: 1.5rem;
}

section {
  padding-block: calc(var(--gap) / 2);
}

section + section {
  border-top: 1px solid var(--hairline);
}

footer {
  padding-block: var(--gap) 3rem;
  color: var(--muted);
  font-size: 0.95rem;
}

footer a {
  color: inherit;
}

/* ---- Components ---- */

.demo {
  margin: 0;
}

.demo video {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  /* Framed in the meteor's gradient, as the signup card is edged with it:
     a transparent border shows the gradient painted under the video. */
  border: 3px solid transparent;
  border-radius: 14px;
  background: linear-gradient(#000, #000) padding-box, var(--gradient) border-box;
  box-shadow: var(--glow);
}

/* The link to the film on YouTube sits under the video, in the video's
   own column, before the transcript. */
.demo .watch {
  max-width: 22rem;
  margin: 0.75rem auto 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.demo figcaption {
  max-width: 22rem;
  margin: 0.75rem auto 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Ringed in the meteor's gradient, like the demo's frame, rather than
   filled: a transparent border shows the gradient painted under the card,
   and the padding box is the page's own colour. */
.signup {
  border: 2px solid transparent;
  border-radius: 8px;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--gradient) border-box;
  padding: 1.5rem;
}

.signup h2 {
  margin-top: 0;
}

.signup p:last-of-type {
  margin-bottom: 0;
}

.more {
  margin: 1.25rem 0 0;
  font-weight: 500;
}

.more a::after {
  content: " \2192" / "";
}

.signup-form {
  margin-top: 1.15rem;
}

.signup-form:not(:last-child) {
  margin-bottom: 1.75rem;
}

.signup-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.signup-row input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.signup-row button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-button);
  background: var(--button);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.signup-row input:focus-visible,
.signup-row button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Read by screen readers, not shown: tells the page's two email fields
   apart in VoiceOver's list of form controls. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The bot trap: off-screen rather than display:none, which some bots skip. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fine-print {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

.name-note {
  font-size: 0.95rem;
}