/* The site is mostly monochrome. Colour appears where it means something:
   each app's own gradient marks that app, in its name, its icons, the
   underline of its link and the flock once it has arrived behind it. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --radius: 22px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --content: 1080px;
  /* Space between the page's edge and the header's and footer's contents. */
  --edge: 20px;
  /* Light and dark trade places as the sky does, which takes 1.8 seconds
     along a smoothstep curve (SUN_SPEED in src/sky/mod.rs); this bezier
     follows that curve. */
  --theme-fade: 1.8s;
  --theme-ease: cubic-bezier(0.45, 0, 0.55, 1);
  transition-property: --bg, --text, --text-2, --text-3, --panel, --panel-strong, --line, --line-strong, --field, --field-hover, --placeholder, --button, --button-text, --danger, --sheen;
  transition-duration: var(--theme-fade);
  transition-timing-function: var(--theme-ease);
}

/* The theme's colours are registered so they can be animated: switching
   between light and dark cross-fades every one of them along the sky's
   curve, wherever it is used. */
@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #070d0e;
}

@property --text {
  syntax: "<color>";
  inherits: true;
  initial-value: #f1f1ee;
}

@property --text-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.62);
}

@property --text-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.42);
}

@property --panel {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(8, 14, 15, 0.56);
}

@property --panel-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(8, 14, 15, 0.8);
}

@property --line {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.09);
}

@property --line-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.22);
}

@property --placeholder {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.3);
}

@property --field {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.06);
}

@property --field-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.09);
}

@property --button {
  syntax: "<color>";
  inherits: true;
  initial-value: #f1f1ee;
}

@property --button-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #0b0e12;
}

@property --danger {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff6b6f;
}

@property --sheen {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.08);
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070d0e;
  --text: #f1f1ee;
  /* The quieter text colours are see-through, at the brightness they'd
     have as solid greys over the panels, so the sky and the flock tint
     them as they pass behind. */
  --text-2: rgba(255, 255, 255, 0.62);
  --text-3: rgba(255, 255, 255, 0.42);
  --panel: rgba(8, 14, 15, 0.56);
  --panel-strong: rgba(8, 14, 15, 0.8);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.22);
  --field: rgba(255, 255, 255, 0.06);
  --field-hover: rgba(255, 255, 255, 0.09);
  /* Hints in empty fields are see-through, so the sky and the flock tint
     them as they pass behind. */
  --placeholder: rgba(255, 255, 255, 0.3);
  --button: #f1f1ee;
  --button-text: #0b0e12;
  --danger: #ff6b6f;
  --sheen: rgba(255, 255, 255, 0.08);
  --halo: rgba(7, 13, 14, 0.6);
  --halo-strong: rgba(4, 8, 9, 0.8);
  --aurora: linear-gradient(90deg, #3df5a7, #3a85b3, #3df5a7);
  --sunset: linear-gradient(90deg, #ec376e, #f5b062, #ec376e);
  --neon: linear-gradient(90deg, #f500ff, #0affff, #f500ff);
  --mint: linear-gradient(90deg, #169fa0, #b9f5c0, #169fa0);
  --glacier: linear-gradient(90deg, #57dff3, #6199ff, #57dff3);
  --accent-amusia: linear-gradient(90deg, #3df5a7, #096fe0);
  --accent-tailfeather: linear-gradient(90deg, #09fcff, #fc03ff);
  --accent-birdseye: linear-gradient(90deg, #6199ff, #57dff3);
  --accent-amusia-loop: linear-gradient(90deg, #3df5a7, #096fe0, #3df5a7);
  --accent-tailfeather-loop: linear-gradient(90deg, #09fcff, #fc03ff, #09fcff);
  --accent-birdseye-loop: linear-gradient(90deg, #6199ff, #57dff3, #6199ff);
  --shot-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e7eeea;
  --text: #15181a;
  --text-2: rgba(20, 26, 30, 0.75);
  --text-3: rgba(20, 26, 30, 0.54);
  --panel: rgba(244, 248, 245, 0.6);
  --panel-strong: rgba(244, 248, 245, 0.84);
  --line: rgba(20, 26, 30, 0.09);
  --line-strong: rgba(20, 26, 30, 0.24);
  --field: rgba(20, 26, 30, 0.05);
  --field-hover: rgba(20, 26, 30, 0.08);
  --placeholder: rgba(20, 26, 30, 0.5);
  --button: #15181a;
  --button-text: #f4f4f1;
  --danger: #c4282d;
  --sheen: rgba(255, 255, 255, 0.95);
  --halo: rgba(238, 242, 229, 0.75);
  --halo-strong: rgba(244, 247, 240, 0.92);
  --aurora: linear-gradient(90deg, #0e9f6e, #2a6f9e, #0e9f6e);
  --sunset: linear-gradient(90deg, #d4305f, #d9822b, #d4305f);
  --neon: linear-gradient(90deg, #c400cc, #0098a6, #c400cc);
  --mint: linear-gradient(90deg, #0f8a8b, #3f9f63, #0f8a8b);
  --glacier: linear-gradient(90deg, #0a9cc2, #2b6ce6, #0a9cc2);
  --accent-amusia: linear-gradient(90deg, #0f9e64, #0a5ec2);
  --accent-tailfeather: linear-gradient(90deg, #0095a8, #b800bb);
  --accent-birdseye: linear-gradient(90deg, #2b6ce6, #0a9cc2);
  --accent-amusia-loop: linear-gradient(90deg, #0f9e64, #0a5ec2, #0f9e64);
  --accent-tailfeather-loop: linear-gradient(90deg, #0095a8, #b800bb, #0095a8);
  --accent-birdseye-loop: linear-gradient(90deg, #2b6ce6, #0a9cc2, #2b6ce6);
  --shot-shadow: 0 24px 60px -18px rgba(20, 26, 30, 0.35);
}

[data-accent="amusia"] {
  --accent: var(--accent-amusia);
  --accent-loop: var(--accent-amusia-loop);
}

[data-accent="tailfeather"] {
  --accent: var(--accent-tailfeather);
  --accent-loop: var(--accent-tailfeather-loop);
}

[data-accent="birdseye"] {
  --accent: var(--accent-birdseye);
  --accent-loop: var(--accent-birdseye-loop);
}

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

html {
  /* With the sky drawn, the page's background is the sky's colour along
     the bottom of the viewport, which Safari on iOS shows behind its
     toolbar (set in src/app.rs). */
  background: var(--sky-bottom, var(--bg));
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100svh;
  font-size: 17px;
  line-height: 1.55;
}

::selection {
  background: rgba(128, 128, 128, 0.3);
}

img {
  user-select: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100lvh;
  display: block;
  z-index: -1;
  pointer-events: none;
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease;
}

.is-scrolled .site-header {
  background: var(--panel-strong);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
}

/* Safari on iOS paints the strip behind its status bar in one flat colour:
   the background colour of a bar fixed along the top edge. It cannot draw
   the sky or a blur there. It keeps that colour in step only with a bar of
   some height, takes a translucent colour as solid only when it is mostly
   opaque, and passes over a bar with a backdrop filter. So on iOS the
   header is tinted throughout with the colour the top of the sky settles
   into (set in src/app.rs and src/sky). The sky keeps that colour behind
   the header, so the tint only shows once the page scrolls under it.
   Scrolled, the blur behind the header is a layer of its own. */
@supports (-webkit-touch-callout: none) {
  .has-sky .site-header,
  .has-sky.is-scrolled .site-header {
    background: color-mix(in srgb, var(--sky-top) 80%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .has-sky.is-scrolled .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    backdrop-filter: saturate(1.4) blur(18px);
  }
}

.site-header-inner {
  max-width: var(--content);
  height: 68px;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The header's words and switch keep a soft glow of the sky behind them,
   which keeps them clear of the flock when it flies under the header. The
   colour is the sky's along the top of the viewport (set in src/app.rs). */
.site-header {
  --header-halo: color-mix(in srgb, var(--sky-top, var(--bg)) 85%, transparent);
}

.wordmark,
.site-nav a {
  text-shadow:
    0 0 2px var(--header-halo),
    0 0 6px var(--header-halo),
    0 0 14px var(--header-halo);
}

.wordmark {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  position: relative;
  padding: 8px 12px;
  color: var(--text-2);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--text);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  /* The gradient runs out and back across four times the line's width,
     so each colour fills the line for a while, and sliding it by that
     width loops seamlessly. */
  background: var(--link-accent) 0 0 / 400% 100%;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease);
}

/* Slides a gradient four times the width of its box by its own width:
   with a background that wide, -133.33% moves it by four widths of the
   box. */
@keyframes accent-flow {
  to {
    background-position: -133.333% 0;
  }
}

.site-nav a[data-nav="amusia"] {
  --link-accent: var(--accent-amusia-loop);
}

.site-nav a[data-nav="tailfeather"] {
  --link-accent: var(--accent-tailfeather-loop);
}

.site-nav a[data-nav="birdseye"] {
  --link-accent: var(--accent-birdseye-loop);
}

.site-nav a[aria-current]::after {
  transform: scaleX(1);
  animation: accent-flow 8s linear infinite;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--header-halo);
  box-shadow: 0 0 12px var(--header-halo);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.theme-toggle:hover {
  border-color: var(--line-strong);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme="dark"] .icon-moon,
[data-theme="light"] .icon-sun {
  display: none;
}

/* Pages. Only the page named on the root element is shown. */

.page {
  display: none;
}

[data-page="home"] .page[data-page="home"],
[data-page="amusia"] .page[data-page="amusia"],
[data-page="tailfeather"] .page[data-page="tailfeather"],
[data-page="birdseye"] .page[data-page="birdseye"],
html:not([data-page]) .page {
  display: block;
}

/* The home page is a single screen: the wordmark over the flock, with the
   footer at the bottom. */
[data-page="home"] .page[data-page="home"] {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page[data-page="home"] .hero {
  flex: 1;
}

.page[data-page="home"] .site-footer {
  margin-top: 0;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

main {
  animation: arrive 1.4s var(--ease) 0.35s backwards;
  transition:
    opacity 0.7s ease,
    transform 1s var(--ease);
}

.is-leaving main {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.4s ease,
    transform 0.45s ease-in;
}

.is-entering main {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}

/* Heroes sit straight on the sky, with the flock resting behind them. */

.hero {
  /* A soft glow of sky behind the words keeps them clear of the flock: a
     close one around the letters, and a wide one as an oval of colour
     behind each line (below), which stays cheap to draw while the page
     slides in and out. */
  text-shadow: 0 0 18px var(--halo);
  max-width: var(--content);
  min-height: min(78svh, 780px);
  margin: 0 auto;
  padding: 120px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The wide glow is an oval of colour behind each line of a heading,
   however many lines it wraps to. It is drawn by a hidden copy of the
   heading's text, laid out the same way right behind it, so the ovals sit
   under every line of the real text rather than over the line above. */
.hero-wordmark,
.hero-title {
  position: relative;
  isolation: isolate;
}

.hero .glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  text-shadow: none;
  pointer-events: none;
  user-select: none;
}

/* The padding sets each oval's size, and the negative margin keeps it from
   changing where the lines wrap. */
.hero .glow > span {
  padding: 0.35em 0.6em;
  margin: 0 -0.6em;
  background: radial-gradient(closest-side, var(--halo) 45%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-wordmark {
  margin: 0;
  font-size: clamp(52px, 10vw, 120px);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.hero-lede {
  position: relative;
  isolation: isolate;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--text-2) 30%, var(--text));
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500;
  /* Thin letters need a tighter, denser glow than the headline to stay
     clear of the flock. */
  text-shadow:
    0 0 1px var(--halo-strong),
    0 0 4px var(--halo-strong),
    0 0 12px var(--halo-strong),
    0 0 28px var(--halo);
}

/* A soft oval of sky behind the line, which dims the flock where it passes
   behind the text. */
.hero-lede::before {
  content: "";
  position: absolute;
  inset: -18px -48px;
  z-index: -1;
  background: radial-gradient(closest-side, var(--halo-strong), transparent);
}

.app-title {
  display: flex;
  align-items: center;
  gap: 14px;
  /* The name is gradient text, painted as a background, which a text
     shadow would cover. A drop shadow sits under the logo and the name
     alike. */
  text-shadow: none;
  filter: drop-shadow(0 0 3px var(--halo-strong)) drop-shadow(0 0 12px var(--halo));
  margin-bottom: 24px;
}

.app-title-icon {
  width: 56px;
  height: 56px;
  border-radius: 13px;
}

.app-title-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-title {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(40px, 7.4vw, 88px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.store-badge {
  display: block;
  border-radius: 9px;
  transition:
    transform 0.4s var(--ease),
    opacity 0.3s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.store-badge img {
  display: block;
  height: 46px;
}

/* Holds a store badge's place until the app is in the store. */
.store-soon {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  margin: 0;
  padding: 0 20px;
  border-radius: 9px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-shadow: none;
}

/* Gradients, each with its own meaning. */

.text-accent,
.text-aurora,
.text-sunset,
.text-neon,
.text-mint,
.text-glacier {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-accent {
  background-image: var(--accent);
}

/* An app's name in its hero runs its gradient round in a loop, as the
   underline of its link does. */
.app-title-name.text-accent {
  background-image: var(--accent-loop);
}

/* The coloured words run round their gradients too. Each gradient goes out
   and back across four times the text's width, so each colour fills the
   words for a while, and sliding it by that width loops seamlessly. */
.app-title-name.text-accent,
.text-aurora,
.text-sunset,
.text-neon,
.text-mint,
.text-glacier {
  background-size: 400% 100%;
  animation: accent-flow 8s linear infinite;
}

.text-aurora {
  background-image: var(--aurora);
}

.text-sunset {
  background-image: var(--sunset);
}

.text-neon {
  background-image: var(--neon);
}

.text-mint {
  background-image: var(--mint);
}

.text-glacier {
  background-image: var(--glacier);
}

/* Panels: frosted glass over the sky, so text stays readable wherever the
   flock happens to be. */

.panel {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}

/* A thin highlight just inside the top edge, fading out toward the
   corners, like light catching the edge of the glass. */
.panel::before,
.store-soon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: var(--radius);
  right: var(--radius);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sheen) 25%, var(--sheen) 75%, transparent);
  pointer-events: none;
}

.store-soon::before {
  left: 9px;
  right: 9px;
}

.content {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 20px;
}

.feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 48px;
}

.feature-reverse {
  grid-template-columns: 1fr 1.1fr;
}

.feature-text h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.feature-text h2.spaced {
  margin-top: 36px;
}

.feature-text p {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: 18px;
}

.feature-text p.lead {
  color: var(--text);
  font-size: 20px;
}

.feature-text p:last-child {
  margin-bottom: 0;
}

.device {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-screen {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
}

.device-watch .device-screen {
  height: 55%;
}

.device-phone .device-screen {
  height: 91%;
}

/* For an app whose screen is mostly text, so it stays legible. */
.device-large {
  height: 540px;
}

.device-screen video,
.device-screen img {
  display: block;
  width: auto;
  height: 100%;
}

.device-screen .shot-light {
  position: absolute;
  inset: 0;
  width: 100%;
}

.device-frame {
  position: relative;
  z-index: 2;
  height: 100%;
}

.device-panel {
  height: 480px;
  display: flex;
  justify-content: center;
}

.device-panel video {
  display: block;
  height: 100%;
  border-radius: 18px;
}

/* Screenshots of an app in both themes, stacked. The one for the other
   theme is transparent, and they cross-fade as the theme changes. */
.shot-dark,
.shot-light {
  transition: opacity var(--theme-fade) var(--theme-ease);
}

[data-theme="dark"] .shot-light,
[data-theme="light"] .shot-dark {
  opacity: 0;
}

.shot {
  display: grid;
  justify-content: center;
}

.shot img {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  box-shadow: var(--shot-shadow);
}

.shot-mac img {
  height: 600px;
  border-radius: 11px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tile {
  padding: 32px 28px;
  text-align: center;
}

/* A disc of the app's gradient with the icon cut out of it, so the panel
   shows through the icon. */
.tile-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask:
    var(--icon) center / 30px 30px no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    var(--icon) center / 30px 30px no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.tile h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.tile p {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
}

.prose {
  padding: 48px clamp(24px, 6vw, 72px);
}

.prose h2 {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.prose h3 {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.prose p {
  max-width: 68ch;
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 16px;
}

.prose p.updated {
  margin-top: 24px;
  color: var(--text-3);
  font-size: 14px;
}

/* Support */

.support {
  padding: 48px clamp(24px, 6vw, 72px);
  text-align: center;
}

.support-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.support-icon {
  width: 24px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url(/icon-mail.svg) center / contain no-repeat;
  mask: url(/icon-mail.svg) center / contain no-repeat;
}

form[data-support] {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

form[data-support] fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 12px;
  transition: opacity 0.3s ease;
}

form[data-support].is-loading fieldset {
  opacity: 0.5;
}

form[data-support] textarea,
form[data-support] input[type="text"],
form[data-support] input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

form[data-support] textarea {
  min-height: 160px;
  resize: vertical;
}

form[data-support] textarea:hover,
form[data-support] input:hover {
  background: var(--field-hover);
}

form[data-support] textarea:focus,
form[data-support] input:focus {
  outline: none;
  border-color: var(--line-strong);
}

form[data-support] ::placeholder {
  color: var(--placeholder);
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row input {
  flex: 1;
  min-width: 0;
}

form[data-support] button {
  align-self: center;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

form[data-support] button:hover {
  opacity: 0.86;
}

.form-status {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 15px;
  text-align: center;
}

.form-status[data-state="failed"] {
  color: var(--danger);
}

.hidden {
  display: none;
}

/* Footer: a line of small print straight on the sky. */

.site-footer {
  margin-top: 56px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
}

.site-footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--edge) var(--edge) calc(var(--edge) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer p {
  margin: 0;
}

.made-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.made-in:hover {
  color: var(--text);
}

@media (max-width: 760px) {
  .hero {
    padding-top: 104px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature,
  .feature-reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px;
  }

  .feature .feature-media {
    order: -1;
  }

  .device {
    height: 300px;
  }

  .device-large {
    height: 440px;
  }

  .device-panel {
    height: 380px;
  }

  .shot-mac img {
    height: 500px;
    border-radius: 9px;
  }

  .form-row {
    flex-direction: column;
  }

  :root {
    --edge: 16px;
  }

  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .site-nav a {
    padding: 8px 8px;
  }

  .site-nav a::after {
    left: 8px;
    right: 8px;
  }
}

/* Phones: the wordmark, three app names and the theme switch share one
   line. */
@media (max-width: 420px) {
  .wordmark {
    font-size: 16px;
  }

  .site-nav {
    gap: 0;
  }

  .site-nav a {
    padding: 8px 6px;
    font-size: 14px;
  }

  .site-nav a::after {
    left: 6px;
    right: 6px;
  }

  .theme-toggle {
    width: 34px;
    height: 34px;
    margin-left: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main,
  .site-nav a[aria-current]::after,
  .app-title-name.text-accent,
  .text-aurora,
  .text-sunset,
  .text-neon,
  .text-mint,
  .text-glacier {
    animation: none;
  }

  /* Still, the gradients show from one colour to the other. */
  .site-nav a::after,
  .app-title-name.text-accent,
  .text-aurora,
  .text-sunset,
  .text-neon,
  .text-mint,
  .text-glacier {
    background-size: 200% 100%;
  }

  main,
  .is-leaving main {
    transition: none;
  }
}