/* Pushling landing page. Always dark, drawn like a blueprint: a ruled column, a faint grid and
   numbered section rules. Lime and orange are the two key colours: lime marks a notification
   that landed, orange labels the drawing and marks notices that need a person.
   Dashed means "this device only". */
:root {
  color-scheme: dark;
  --ink: #121110;
  --ink-deep: #0c0b0a;
  --ink-raised: #1a1917;
  --line: #292724;
  --line-strong: #3d3a36;
  --grid: rgb(242 236 228 / 0.04);
  --text: #f2ece4;
  --muted: #aaa39b;
  --faint: #8a837b;
  --lime: #c6f432;
  --orange: #ff6b2c;
  --urgent: var(--orange);
  --art-ink: #5d5852;
  --mono:
    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas,
    monospace;
  --sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --sans-ja:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --column: min(1200px, 100%);
  --pad: clamp(16px, 4.5vw, 64px);
  --accent: var(--lime);
  --header: 64px;
  /* Pulls a child of the column out to the window edges. */
  --bleed: calc(50% - 50vw);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* Rules and the hero art run edge to edge; clipping keeps them from adding a sideways scroll. */
body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}

html:lang(ja) {
  --sans: var(--sans-ja);
  line-height: 1.8;
  line-break: strict;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
}

html:lang(ja) h1,
html:lang(ja) h2 {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

html:lang(en) h1,
html:lang(en) h2 {
  text-wrap: balance;
  letter-spacing: -0.032em;
  line-height: 1.04;
}

p,
dl,
dd {
  margin: 0;
}

code,
pre {
  font-family: var(--mono);
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 20;
  padding: 8px 14px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* Header: translucent so the hero art shows through as it scrolls under. */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header);
  padding-inline: calc((100% - var(--column)) / 2 + var(--pad));
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.header nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.875rem;
}

.header nav a {
  padding: 6px 12px;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  border-radius: 999px;
}

.header nav a:hover {
  color: var(--text);
  background: var(--ink-raised);
}

.header nav .language {
  margin-left: 8px;
  color: var(--text);
  border: 1px solid var(--line-strong);
}

/* Below this width the section links no longer fit beside the wordmark. */
@media (max-width: 880px) {
  .header nav a:not(.language) {
    display: none;
  }
}

/* The ruled column: every section sits between two vertical lines over a faint grid. */
main,
.footer {
  position: relative;
  width: var(--column);
  margin-inline: auto;
  padding-inline: var(--pad);
}

main {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
}

@media (min-width: 760px) {
  main,
  .footer {
    border-inline: 1px solid var(--line);
  }
}

.section {
  position: relative;
  padding-block: clamp(72px, 10vw, 128px);
}

/* A dashed rule across the whole window, labelled where it crosses the column lines. */
.rule {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  height: 1px;
}

.rule::before {
  content: "";
  position: absolute;
  inset: 0 var(--bleed);
  background: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0 8px,
    transparent 8px 16px
  );
}

.rule span {
  display: none;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  padding: 4px 6px;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--faint);
  background: var(--ink);
}

.rule span:last-child {
  left: 100%;
}

@media (min-width: 1024px) {
  .rule span {
    display: block;
  }
}

.section h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
}

html:lang(ja) .section h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
}

.section-head {
  display: grid;
  gap: 16px 48px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head p {
  max-width: 34em;
  font-size: 1.0625rem;
  color: var(--muted);
}

@media (min-width: 960px) {
  .section-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* Orange drawing label above each heading; the stacked shadows draw two tick marks after it. */
.kicker {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  color: var(--ink);
  background: var(--orange);
  border-radius: 2px;
  box-shadow:
    5px 0 0 -3px var(--ink),
    7px 0 0 -3px var(--orange),
    9px 0 0 -3px var(--ink),
    11px 0 0 -3px var(--orange);
}

.note {
  margin-top: 24px;
  font-size: 0.8125rem;
  color: var(--faint);
}

figure {
  margin: 0;
}

figcaption {
  font-size: 0.8125rem;
  color: var(--faint);
}

pre {
  margin: 0;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  tab-size: 2;
}

/* Hero: the copy on the left, the ASCII art (hero-art.js) drawn behind the whole band. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: min(calc(100svh - var(--header) - 96px), 860px);
  padding-block: clamp(56px, 9vw, 120px);
}

/* Without the art the band still has a soft glow where the drawing would sit. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: calc(-1 * var(--header)) var(--bleed) 0;
  background: radial-gradient(
    ellipse 40% 55% at 72% 48%,
    color-mix(in srgb, var(--lime) 7%, transparent),
    transparent 70%
  );
}

.hero-art {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--header));
  left: var(--bleed);
  width: 100vw;
  height: calc(100% + var(--header));
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* Fades out at the bottom and dims behind the copy so the text keeps its contrast. */
  mask-image:
    linear-gradient(to bottom, #000 72%, transparent),
    linear-gradient(90deg, rgb(0 0 0 / 0.25) 0 40%, #000 68%);
  mask-composite: intersect;
}

.hero-art.is-live {
  opacity: 1;
}

/* On narrow screens the art gets its own band above the copy (hero-art.js centres the drawing
   in it) and fades out where the text starts. */
@media (max-width: 960px) {
  .hero {
    --art-band: clamp(200px, 58vw, 320px);
    align-items: start;
    min-height: 0;
    padding-block: var(--art-band) 56px;
  }

  .hero-art {
    mask-image: linear-gradient(
      to bottom,
      #000 calc(var(--header) + var(--art-band) - 48px),
      rgb(0 0 0 / 0.14) calc(var(--header) + var(--art-band) + 40px),
      rgb(0 0 0 / 0.08) 75%,
      transparent
    );
  }

  .hero::before {
    background: radial-gradient(
      ellipse 70% 22% at 50% 14%,
      color-mix(in srgb, var(--lime) 8%, transparent),
      transparent 70%
    );
  }
}

.hero-copy {
  position: relative;
  max-width: 36rem;
}

/* A soft pool of page colour under the copy, so the art never sits directly behind the text.
   It shares the art's layer and comes later, so it paints over the art and under the text. */
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -64px -96px -48px -64px;
  background: radial-gradient(
    closest-side,
    var(--ink) 62%,
    color-mix(in srgb, var(--ink) 75%, transparent) 82%,
    transparent
  );
  pointer-events: none;
}

/* Below the art band only a light veil is needed, and it must not climb into the band. */
@media (max-width: 960px) {
  .hero-copy::before {
    inset: -24px calc(-1 * var(--pad)) -24px;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--ink) 70%, transparent) 24px
    );
  }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
}

.pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
}

.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--lime);
  animation: ping 2.4s ease-out infinite;
}

@keyframes ping {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

.hero h1 {
  margin-top: 28px;
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.5rem);
}

html:lang(ja) .hero h1 {
  font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);
}

/* Each sentence of the headline starts on its own line. */
.hero h1 span {
  display: block;
}

/* The second sentence is where the notification lands. */
.hero h1 span + span {
  color: var(--lime);
}

.lead {
  margin-top: 24px;
  max-width: 32em;
  font-size: 1.125rem;
  color: var(--muted);
}

.terminal {
  margin-top: 36px;
  max-width: 34rem;
  /* No backdrop blur: it would be recomputed for every frame of the art behind it. */
  background: color-mix(in srgb, var(--ink-deep) 92%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.terminal-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.terminal pre {
  padding: 16px 18px 18px;
}

.prompt,
.output {
  color: var(--lime);
}

.prompt {
  user-select: none;
}

/* The inbox, framed as the first drawing below the hero. */
.screen {
  position: relative;
  padding-bottom: clamp(48px, 7vw, 88px);
}

.screen img {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 32px 80px -24px rgb(0 0 0 / 0.8);
}

.screen figcaption {
  margin-top: 12px;
  text-align: right;
}

/* Agent prompt: the one copy control on the page. */
.agent {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(48px, 7vw, 88px);
  padding: clamp(20px, 3vw, 28px);
  background: var(--ink-deep);
  border: 1px solid color-mix(in srgb, var(--lime) 40%, var(--line));
  border-radius: 8px;
}

.agent-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: start;
}

.agent h2 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.agent-head p {
  grid-column: 1;
  font-size: 0.875rem;
  color: var(--muted);
}

.copy {
  visibility: hidden;
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 96px;
  padding: 10px 18px;
  font: 700 0.875rem var(--mono);
  color: var(--ink);
  background: var(--lime);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.copy.is-ready {
  visibility: visible;
}

.copy:hover {
  background: color-mix(in srgb, var(--lime) 85%, white);
}

.agent-prompt {
  padding: 16px 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
  color: var(--text);
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* Answers: the request on one side, what happens to the answer on the other. */
.answers {
  display: grid;
  gap: 16px;
}

@media (min-width: 960px) {
  .answers {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  position: relative;
  padding-left: 22px;
}

.points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
}

/* Send */
.snippets {
  display: grid;
  gap: 16px;
}

@media (min-width: 960px) {
  .snippets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The HTTP API is the primary path, so it gets the full row. */
  .snippets > .snippet:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 24px;
    align-items: start;
  }
}

.snippet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.snippet figcaption {
  display: grid;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--muted);
}

.chip {
  justify-self: start;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lime);
  border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent);
  border-radius: 2px;
}

.snippet pre {
  padding: 14px 16px;
  background: var(--ink-deep);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* Cell grids share their borders, like a table drawn on the grid. */
.levels,
.features {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.level,
.features li {
  background: var(--ink);
}

/* Priority */
@media (min-width: 900px) {
  .levels {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.level {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "value bars"
    "name name"
    "text text";
  gap: 8px 12px;
  align-content: start;
  padding: 24px 20px;
}

.level-value {
  grid-area: value;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.bars {
  grid-area: bars;
  justify-self: end;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}

.bars i {
  width: 5px;
  border-radius: 1px;
  background: var(--line-strong);
}

.bars i:nth-child(1) {
  height: 6px;
}
.bars i:nth-child(2) {
  height: 10px;
}
.bars i:nth-child(3) {
  height: 15px;
}
.bars i:nth-child(4) {
  height: 20px;
}

.bars i.on {
  background: var(--accent);
}

.level h3 {
  grid-area: name;
  margin-top: 12px;
  font-size: 1.0625rem;
}

.level p {
  grid-area: text;
  font-size: 0.875rem;
  color: var(--muted);
}

/* States recolour their marks through --accent; dashed always means "this device only". */
.is-urgent {
  --accent: var(--urgent);
}

.is-private {
  --accent: var(--muted);
}

.level.is-urgent {
  background: color-mix(in srgb, var(--urgent) 7%, var(--ink));
  box-shadow: inset 0 2px 0 var(--urgent);
}

.level.is-urgent .level-value {
  color: var(--accent);
}

/* Ledger */
.log {
  padding: clamp(20px, 3vw, 32px);
  background: var(--ink-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.log ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  --index-column: 28px;
  position: relative;
  display: grid;
  grid-template-columns: var(--index-column) 14px minmax(0, 1fr);
  grid-template-areas:
    "index dot code"
    ". . body";
  gap: 4px 14px;
  padding-bottom: 24px;
}

.entry:last-child {
  padding-bottom: 0;
}

/* The trail runs from below this dot to just above the next one, centred in the dot column. */
.entry:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--index-column) + 14px + 6.5px);
  top: 20px;
  bottom: -4px;
  width: 1px;
  background: var(--line-strong);
}

.entry-index {
  grid-area: index;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--faint);
}

.entry-dot {
  grid-area: dot;
  align-self: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.entry-code {
  grid-area: code;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.entry-body {
  grid-area: body;
  display: grid;
  gap: 4px;
  justify-items: start;
}

.entry h3 {
  font-size: 1.0625rem;
}

.entry p {
  max-width: 44em;
  font-size: 0.9375rem;
  color: var(--muted);
}

.entry.is-private .entry-dot {
  background: none;
  border: 2px dashed var(--accent);
}

.tag {
  margin-top: 6px;
  padding: 1px 10px;
  font-size: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
}

.is-urgent .tag {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.is-private .tag {
  border-style: dashed;
}

@media (min-width: 760px) {
  .entry {
    --index-column: 32px;
    grid-template-columns: var(--index-column) 14px 120px minmax(0, 1fr);
    grid-template-areas: "index dot code body";
    align-items: start;
    padding-bottom: 28px;
  }

  .entry-dot,
  .entry-index,
  .entry-code {
    align-self: start;
    margin-top: 5px;
  }
}

/* Receive */
.platforms {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 70%);
  gap: 20px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.platforms li {
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .platforms {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
}

.phone {
  max-width: 300px;
  padding: 6px;
  background: #000;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
}

.phone img {
  border-radius: 22px;
}

.platforms h3 {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 1rem;
}

.platforms p,
.features p {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Features: nine cells read as an even 3 by 3 table. */
@media (min-width: 640px) {
  .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.features li {
  padding: 24px;
}

.features h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

.features h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
}

/* Plans */
.plans {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan {
  padding: clamp(24px, 3vw, 32px);
  background: var(--ink);
  border: 1px solid var(--lime);
  border-radius: 8px;
}

.plan.is-planned {
  border: 1px dashed var(--faint);
}

.plan h3 {
  font-family: var(--mono);
  font-size: 1.375rem;
}

.plan-kind {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--muted);
}

.plan ul {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.plan li {
  position: relative;
  padding-left: 22px;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
}

.plan.is-planned li::before {
  background: none;
  border: 1px solid var(--muted);
}

/* FAQ: every answer is visible, the question on the left and the answer on the right. */
.faq {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.faq div {
  display: grid;
  gap: 8px 48px;
  padding: 24px;
}

.faq div + div {
  border-top: 1px solid var(--line);
}

.faq dt {
  font-weight: 600;
}

.faq dd {
  max-width: 44em;
  color: var(--muted);
}

@media (min-width: 760px) {
  .faq div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

/* Footer */
.footer {
  display: grid;
  gap: 24px;
  padding-block: 48px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

/* The wordmark keeps full contrast inside the muted footer. */
.footer .brand {
  color: var(--text);
}

.footer p {
  margin-top: 10px;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

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

.footer small {
  color: var(--faint);
}

@media (min-width: 760px) {
  .footer {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .footer small {
    grid-column: 1 / -1;
  }
}

/* 404 */
.missing {
  display: grid;
  justify-items: start;
  gap: 20px;
  padding-block: 20vh;
}

.missing h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

.missing-links {
  display: flex;
  gap: 20px;
}

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

  .pulse::after {
    animation: none;
  }

  .hero-art {
    transition: none;
  }
}