/*
 * FakeCustomers: one dark theme, quiet on purpose. Near-black surfaces with 1px hairlines, white type and
 * grey for everything secondary; crash-test yellow only for the brand and the call to action, green and red
 * only for passed and failed checks. Inter for everything (its optical sizes give the headlines their display
 * cut), Geist Mono for labels and data, both self-hosted. Plain CSS, no build step. The admin adds admin.css.
 */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-latin-opsz-normal-3ccc852c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/geist-mono-latin-wght-normal-a600ad3f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --bg: #08090a;
  --bg-raised: #0e0f11;
  --bg-raised-2: #141518;
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.13);

  --text: #f7f8f8;
  --text-2: #9b9fa6;
  --text-3: #7b8089;

  --yellow: #ffd23f;
  --yellow-hover: #ffdc66;
  --yellow-soft: rgb(255 210 63 / 0.1);
  --yellow-line: rgb(255 210 63 / 0.4);
  --yellow-ink: #17130a;
  /* The email field: its edge 3.4:1 against the page (WCAG asks 3:1 for a field's outline), its
     placeholder 6:1 on its fill. */
  --field: rgb(255 255 255 / 0.05);
  --field-edge: rgb(255 255 255 / 0.34);
  --field-edge-hover: rgb(255 255 255 / 0.48);
  --placeholder: #8f949c;

  --red: #ff6b6b;
  --red-text: #ff9090;
  --red-soft: rgb(255 107 107 / 0.09);
  --red-line: rgb(255 107 107 / 0.28);
  --green: #46c98b;
  --green-soft: rgb(70 201 139 / 0.12);

  --font: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 16px;
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --header-height: 60px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Cards: a faint top-lit fill and a hairline edge; the small panels inside them sit one step higher. */
  --panel: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.012));
  --panel-edge: inset 0 0 0 1px rgb(255 255 255 / 0.07), inset 0 1px 0 rgb(255 255 255 / 0.04);
  --chip-edge: inset 0 0 0 1px var(--line);
  --float: 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 16px 40px -16px rgb(0 0 0 / 0.8);
}

/* Base */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

b,
strong {
  font-weight: 600;
}

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

::selection {
  background: var(--yellow);
  color: var(--yellow-ink);
}

turbo-frame {
  display: block;
}

/* Elements a controller reveals stay hidden, whatever display their class gives them. */
[hidden] {
  display: none !important;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: var(--yellow);
  color: var(--yellow-ink);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  max-width: 720px;
}

.mono {
  font-family: var(--mono);
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}

.icon--flip {
  transform: scaleX(-1);
}

/* A small label in mono capitals, above a page title. */
.kicker {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Small links and buttons still take a 44px tap on a phone: an invisible area around each, which moves
   nothing and leaves the focus ring where it was. */
.logo,
.site-nav a,
.site-footer__links a,
.button--small,
.journey__tab,
.incident__source,
.waitlist-done a,
.page-back a {
  position: relative;
}

.logo::before,
.site-nav a::before,
.site-footer__links a::before,
.button--small::before,
.journey__tab::before,
.incident__source::before,
.waitlist-done a::before,
.page-back a::before {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 2.75rem) / 2);
}

/* Logo */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mark {
  width: 24px;
  height: 27px;
}

.mark__body {
  fill: var(--yellow);
}

.mark__ring {
  fill: none;
  stroke: var(--bg);
  stroke-width: 3;
}

.mark__cut {
  fill: var(--bg);
}

/* Buttons, tags and avatars */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  /* The form's submit button gets no system look on iOS. */
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  background: var(--yellow);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 0 1px rgb(255 210 63 / 0.5), 0 6px 20px -8px rgb(255 210 63 / 0.55);
  color: var(--yellow-ink);
}

/* Hover only where there is a pointer that hovers: on a touch screen a tap leaves :hover stuck on. */
@media (hover: hover) {
  .button--primary:hover {
    background: var(--yellow-hover);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 0 1px rgb(255 220 102 / 0.6), 0 8px 26px -8px rgb(255 210 63 / 0.7);
  }
}

.button--ghost {
  background: rgb(255 255 255 / 0.03);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
}

@media (hover: hover) {
  .button--ghost:hover {
    background: rgb(255 255 255 / 0.07);
  }
}

.button--small {
  height: 2.125rem;
  padding: 0 0.9rem;
  font-size: 0.8125rem;
}

/* The header's button says less where the full words don't fit beside the logo. */
.button__short {
  display: none;
}

.button--block {
  width: 100%;
}

.button .icon {
  width: 1.05em;
  height: 1.05em;
}

.tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.06);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: middle;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffe17a, #f5c01f);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  color: var(--yellow-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.avatar--small {
  width: 26px;
  height: 26px;
  font-size: 0.5625rem;
}

.avatar--tiny {
  width: 20px;
  height: 20px;
  font-size: 0.5rem;
}

.avatar--alt {
  background: linear-gradient(140deg, #c2f5dd, #7fd9b0);
}

.avatar--alt2 {
  background: linear-gradient(140deg, #ddd5ff, #ab9cf5);
}

/* Header and footer */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgb(8 9 10 / 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--header-height);
}

.site-nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}

.site-nav a {
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--text);
  }
}

.site-footer {
  padding-block: 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.875rem;
}

/* The logo, the copyright in the middle, the links; the outer columns share the rest so the middle one
   sits at the page's centre. */
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 2rem;
}

.site-footer__inner .logo {
  justify-self: start;
}

.logo--small {
  color: var(--text);
  font-size: 0.9375rem;
}

.logo--small .mark {
  width: 20px;
  height: 22px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
}

.site-footer__links a {
  color: var(--text-2);
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer__links a:hover {
    color: var(--text);
    text-decoration: underline;
  }
}

.site-footer__copy {
  font-size: 0.8125rem;
  text-align: center;
}

/* Hero */

/* Its lights reach past the screen's edges: hidden first, for Safari before 16, which has no clip and would
   scroll sideways. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(4.25rem, 2.5rem + 6vw, 7.5rem) clamp(4.5rem, 3rem + 6vw, 8rem);
}

/* A hairline grid that fades out from the top, and a soft light above the headline. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 56rem;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-position: center top;
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 0%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 75% at 50% 0%, #000 15%, transparent 72%);
}

.hero::after {
  content: "";
  position: absolute;
  top: -22rem;
  left: 50%;
  z-index: -1;
  width: min(72rem, 140vw);
  height: 40rem;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.075), transparent);
  transform: translateX(-50%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2rem;
  padding: 0.25rem 0.85rem;
  white-space: nowrap;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgb(255 210 63 / 0.18), 0 0 10px rgb(255 210 63 / 0.7);
}

/* The headline's text is a gradient, white at the top. Its width breaks the line after "bugs" wherever
   the line fits (balancing would break it after "your"). */
.hero__title {
  max-width: 15em;
  margin-top: 1.75rem;
  background: linear-gradient(180deg, #fff 35%, rgb(255 255 255 / 0.66));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.25rem, 1.37rem + 3.8vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.04;
  text-wrap: pretty;
}

.hero__lede {
  max-width: 37rem;
  margin-top: 1.5rem;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* The promise, then on a line of its own what it takes. */
.hero__lede-rest {
  display: block;
}

.hero__form {
  width: min(100%, 30rem);
  margin-top: 2.25rem;
}

/* Who builds it, where a logo strip would sit: set off by a hairline on each side. */
.hero__trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 46rem;
  margin-top: 2.25rem;
  color: var(--text-3);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: balance;
}

.hero__trust b {
  color: var(--text-2);
  font-weight: 500;
}

.hero__trust::before,
.hero__trust::after {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}

.hero__trust::after {
  transform: scaleX(-1);
}

.hero__visual {
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
}

/* App windows: the hero's run and the report */

.window {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, #121315, #0b0c0d 70%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.09),
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 2px 6px rgb(0 0 0 / 0.35),
    0 30px 80px -24px rgb(0 0 0 / 0.85);
  text-align: left;
}

/* A light along the top edge. */
.window::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.4), transparent);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 2.75rem;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.8125rem;
}

.window__crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.window__crumbs i {
  color: rgb(255 255 255 / 0.2);
  font-style: normal;
}

.window__crumbs strong {
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  text-overflow: ellipsis;
}

.window__meta {
  flex: none;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hero: three example runs, one at a time */

.journey {
  --turn: 10s; /* how long each run shows while they take turns (the journeys controller's turn value) */

  position: relative;
}

/* A warm glow under the window. */
.journey::before {
  content: "";
  position: absolute;
  inset: 8% 8% -6%;
  z-index: -1;
  background: radial-gradient(50% 55% at 50% 45%, rgb(255 210 63 / 0.09), transparent 70%);
}

.journey__tabs {
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.journey__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.25rem;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) {
  .journey__tab:hover {
    color: var(--text);
  }
}

.journey__tab[aria-pressed="true"] {
  background: rgb(255 255 255 / 0.09);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  color: var(--text);
}

.journey__tab .icon {
  width: 14px;
  height: 14px;
}

/* While the runs take turns, the pressed button fills with the turn's time. */
.journey.is-cycling .journey__tab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 0.95rem;
  bottom: 0.35rem;
  left: 0.95rem;
  height: 1px;
  background: var(--yellow);
  transform-origin: left;
  animation: fill var(--turn) linear both;
}

.journey.is-waiting .journey__tab[aria-pressed="true"]::after {
  animation-play-state: paused;
}

/* The runs share one place, so the window keeps the tallest one's height. Without JavaScript the
   others are hidden and only the first takes it. */
.journey__runs {
  display: grid;
}

.run {
  grid-area: 1 / 1;
}

.journey.is-ready .run {
  transition: opacity 0.35s ease, visibility 0.35s;
}

.journey.is-ready .run:not(.is-active) {
  visibility: hidden;
  opacity: 0;
}

.journey__body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.journey__run {
  padding: 1.25rem 1.5rem 1.5rem;
  border-right: 1px solid var(--line);
}

.persona {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.persona__who {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.persona__who strong {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.persona__who span {
  color: var(--text-3);
  font-size: 0.8125rem;
}

.persona__ids {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.persona__ids li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: 7px;
  background: rgb(255 255 255 / 0.035);
  box-shadow: var(--chip-edge);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.persona__ids .icon {
  width: 12px;
  height: 12px;
  color: var(--text-3);
}

/* The timeline: a rail through the channel icons, rows that go red where a check fails. */
.timeline {
  --time: 5.1rem;
  --pad: 0.625rem;
  --gap: 0.75rem;

  position: relative;
  display: grid;
  gap: 0.125rem;
  margin-top: 0.875rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: calc(var(--pad) + var(--time) + var(--gap) + 14px);
  width: 1px;
  background: linear-gradient(var(--line-strong), var(--line-strong) 85%, rgb(255 107 107 / 0.45));
}

.event {
  position: relative;
  display: grid;
  grid-template-columns: var(--time) 28px minmax(0, 1fr) 1.125rem;
  align-items: center;
  gap: var(--gap);
  padding: 0.5rem var(--pad);
  border: 1px solid transparent;
  border-radius: 10px;
}

.event__time {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.event__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #15161a;
  box-shadow: var(--chip-edge);
  color: var(--text-2);
}

.event__icon .icon {
  width: 15px;
  height: 15px;
}

.event__text {
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

.event__text b {
  color: var(--text);
  font-weight: 550;
}

.event__status {
  display: grid;
  place-items: center;
  color: var(--green);
}

.event__status .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}

.event--fail {
  border-color: var(--red-line);
  background: var(--red-soft);
}

.event--fail .event__icon {
  background: #1f1213;
  box-shadow: inset 0 0 0 1px var(--red-line);
  color: var(--red);
}

.event--fail .event__status {
  color: var(--red);
}

.quote {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.4rem;
  padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: var(--chip-edge);
  color: var(--text);
  font-size: 0.8125rem;
}

.quote .waveform {
  width: 58px;
  height: 14px;
  fill: var(--text-3);
}

.gap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem var(--pad) 0.45rem calc(var(--pad) + var(--time) + var(--gap) + 9px);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A hollow stop on the rail. */
.gap::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 1px dashed rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background: #0d0e0f;
}

/* Hero: the confirmed bug */

.bug {
  padding: 1.25rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgb(255 107 107 / 0.045), transparent 45%);
}

.bug__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bug__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--red-text);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bug__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgb(255 107 107 / 0.2), 0 0 12px rgb(255 107 107 / 0.6);
}

.bug__severity,
.severity {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: var(--red-soft);
  box-shadow: inset 0 0 0 1px var(--red-line);
  color: var(--red-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
}

.bug__title {
  margin-top: 0.85rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  text-wrap: balance;
}

/* The proof: what the product said, and under it what really happened. */
.evidence {
  display: grid;
  margin-top: 1.1rem;
  overflow: hidden;
  border-radius: 10px;
  background: #0f1012;
  box-shadow: var(--float);
}

.evidence__row {
  display: grid;
  grid-template-columns: 4.6rem auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.evidence__row + .evidence__row {
  border-top-color: var(--line);
}

.evidence__kind {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.evidence__where {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-2);
  white-space: nowrap;
}

.evidence__where .icon {
  width: 13px;
  height: 13px;
}

.evidence__what {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.evidence__row.is-fail {
  border-color: var(--red-line);
  border-radius: 0 0 10px 10px;
  background: var(--red-soft);
}

.evidence__row.is-fail .evidence__kind,
.evidence__row.is-fail .evidence__what {
  color: var(--red-text);
}

/* Who it hits, how often, where and what it costs: a label over each value. */
.bug__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
  margin-top: 1.25rem;
}

.bug__facts dt {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bug__facts dd {
  margin: 0.2rem 0 0;
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.bug__facts div:first-child dd {
  color: var(--green);
}

/* Sections */

.section {
  position: relative;
  padding-block: clamp(5rem, 3.5rem + 6vw, 8.5rem);
  border-top: 1px solid var(--line);
}

/* A two-tone heading: the claim in white, the rest of the thought in grey. */
.section__title {
  max-width: 21em;
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: pretty;
}

.section__title span {
  color: var(--text-2);
}

/* Bugs your tests can't see: four cells, each with its own small picture */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  overflow: hidden;
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--panel-edge);
}

.cell--channels,
.cell--race {
  grid-column: span 7;
}

.cell--days,
.cell--truth {
  grid-column: span 5;
}

.cell > h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  text-wrap: balance;
}

.cell > p {
  max-width: 30rem;
  margin-top: 0.4rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.cell__visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 15.5rem;
  margin-bottom: 1.25rem;
}

/* Small floating panels inside the pictures. */
.hub__who,
.hub__channels li,
.truth__rows,
.race__slot,
.race__people li,
.field,
.tree,
.runs {
  background: #0f1012;
  box-shadow: var(--float);
}

/* Every channel */

.hub {
  grid-template-rows: auto auto;
  align-content: center;
  gap: 2.25rem;
}

.hub__who {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Lines from the customer down to each channel. */
.hub__who::after,
.hub__channels li::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 1.125rem;
  background: var(--line-strong);
}

.hub__who::after {
  top: calc(100% + 1px);
}

.hub__channels li::before {
  bottom: calc(100% + 1px);
}

.hub__channels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.625rem;
  width: min(100%, 36rem);
}

.hub__channels::before {
  content: "";
  position: absolute;
  top: calc(-1.125rem - 1px);
  right: 10%;
  left: 10%;
  height: 1px;
  background: var(--line-strong);
}

.hub__channels li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem 0.35rem 0.75rem;
  border-radius: 12px;
  text-align: center;
}

.hub__channels .icon {
  width: 18px;
  height: 18px;
  margin-bottom: 0.3rem;
  color: var(--text);
}

.hub__channels span {
  font-size: 0.8125rem;
  font-weight: 600;
}

.hub__channels small {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Days, not minutes */

.days__track {
  position: relative;
  width: min(100%, 27rem);
  padding-top: 3.25rem;
}

.days__stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The month, from the first stop to the last, with a tick for every day. */
.days__stops::before,
.days__stops::after {
  content: "";
  position: absolute;
  right: 12.5%;
  left: 12.5%;
}

.days__stops::before {
  top: 6px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--line-strong) 80%, var(--red-line));
}

.days__stops::after {
  top: 3px;
  height: 7px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.14) 0 1px, transparent 1px calc(100% / 30));
}

.days__stops li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-align: center;
}

.days__dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 4px rgb(70 201 139 / 0.4);
}

.days__stops b {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.days__stops span {
  max-width: 6.5rem;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.days__stops .is-fail .days__dot {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 4px var(--red-line), 0 0 14px rgb(255 107 107 / 0.55);
}

.days__stops .is-fail span {
  color: var(--red-text);
}

/* Where a test run ends: minutes after the first stop. The label hangs to the right of its line. */
.days__cutoff {
  position: absolute;
  top: 0;
  left: calc(12.5% + 1.1rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--yellow);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.days__cutoff::after {
  content: "";
  width: 1px;
  height: 2.7rem;
  margin-top: 0.3rem;
  background: repeating-linear-gradient(to bottom, var(--yellow) 0 3px, transparent 3px 6px);
}

/* The test run itself, from the first stop to that line. */
.days__track::after {
  content: "";
  position: absolute;
  top: calc(3.25rem + 5px);
  left: 12.5%;
  width: 1.1rem;
  height: 3px;
  border-radius: 2px;
  background: var(--yellow);
}

/* What really happened */

.truth__rows {
  display: grid;
  gap: 2px;
  width: min(100%, 21rem);
  padding: 0.375rem;
  border-radius: 14px;
}

.truth__row {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.8rem;
  border-radius: 9px;
  font-size: 0.875rem;
}

.truth__where {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.truth__row .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}

.truth__row.is-pass .icon {
  color: var(--green);
}

.truth__row.is-fail {
  background: var(--red-soft);
}

.truth__row.is-fail .icon {
  color: var(--red);
}

/* Several at once */

.race {
  grid-template-columns: auto minmax(3rem, 9rem) auto;
  justify-content: center;
  align-items: stretch;
  padding-block: 3.25rem;
}

.race__people {
  display: grid;
  align-content: space-between;
}

.race__people li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem 0.45rem 0.5rem;
  border-radius: 999px;
}

.race__who {
  display: flex;
  flex-direction: column;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.35;
  white-space: nowrap;
}

.race__who b {
  color: var(--text);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
}

.race__lines {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgb(255 255 255 / 0.22);
  stroke-dasharray: 3 4;
  stroke-width: 1.25;
}

.race__slot {
  align-self: center;
  padding: 0.9rem 1rem;
  border-radius: 12px;
}

.race__name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.race__name .icon {
  width: 15px;
  height: 15px;
  color: var(--text-2);
}

.race__left {
  margin-top: 0.15rem;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.race__result {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.3rem 0.55rem;
  border-radius: 7px;
  background: var(--red-soft);
  box-shadow: inset 0 0 0 1px var(--red-line);
  color: var(--red-text);
  font-size: 0.75rem;
  font-weight: 550;
  white-space: nowrap;
}

.race__result .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

/* How it works */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--line);
}

.step {
  padding: 2rem clamp(1.25rem, 2.5vw, 2.25rem) 0.5rem;
}

.step:first-child {
  padding-left: 0;
}

.step:last-child {
  padding-right: 0;
}

.step + .step {
  border-left: 1px solid var(--line);
}

.step__visual {
  display: grid;
  align-items: center;
  height: 11rem;
  margin-bottom: 1.75rem;
}

.step__num {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.step h3 {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.step > p:last-child {
  margin-top: 0.4rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.field {
  display: grid;
  gap: 0.375rem;
  padding: 0.5rem;
  border-radius: 12px;
}

.field__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.03);
  box-shadow: var(--chip-edge);
  font-size: 0.8125rem;
}

.field__label {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field__value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.field__value .icon {
  width: 14px;
  height: 14px;
  color: var(--text-2);
}

.caret {
  width: 1.5px;
  height: 1em;
  margin-left: -0.15rem;
  background: var(--yellow);
}

.tree {
  padding: 0.85rem 1rem 0.9rem;
  border-radius: 12px;
}

.tree__root {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.tree__root .icon {
  width: 14px;
  height: 14px;
  color: var(--text-2);
}

.tree__root span {
  margin-left: auto;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
}

.tree ul {
  display: grid;
  gap: 0.3rem;
  margin: 0.55rem 0 0 0.4rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--line-strong);
}

.tree li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-2);
  font-size: 0.75rem;
}

.tree li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}

/* The dumb stuff gets a yellow diamond. */
.tree li.is-dumb::before {
  border-radius: 1px;
  background: var(--yellow);
  transform: rotate(45deg);
}

.runs {
  display: grid;
  padding: 0.375rem;
  border-radius: 12px;
}

.runs li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.55rem;
  font-size: 0.75rem;
}

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

.runs__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runs__state {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.625rem;
  white-space: nowrap;
}

.runs__state.is-fail {
  background: var(--red-soft);
  color: var(--red-text);
}

.runs__state.is-running {
  background: var(--yellow-soft);
  color: var(--yellow);
}

.runs__state.is-pass {
  background: var(--green-soft);
  color: var(--green);
}

/* Only confirmed bugs */

.report {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.inbox__list {
  display: grid;
}

.finding {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

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

.severity {
  justify-self: start;
}

.severity--medium {
  background: var(--yellow-soft);
  box-shadow: inset 0 0 0 1px rgb(255 210 63 / 0.25);
  color: var(--yellow);
}

.finding__title {
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.finding__impact {
  margin-top: 0.15rem;
  color: var(--text-3);
  font-size: 0.8125rem;
}

.thumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem 0.35rem 0.45rem;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: var(--chip-edge);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.thumb .icon {
  width: 12px;
  height: 12px;
  color: var(--text);
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 550;
}

.verified .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.inbox__held {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px dashed var(--line-strong);
  color: var(--text-3);
  font-size: 0.8125rem;
}

.inbox__held .icon {
  width: 14px;
  height: 14px;
}

.proof {
  display: grid;
  gap: 1.75rem;
}

.proof li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
}

.proof__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
}

.proof__icon .icon {
  width: 17px;
  height: 17px;
}

.proof h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.proof p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Most AI testing tools next to us: the other side in grey, ours lit. */

.compare {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
}

.compare__table th,
.compare__table td {
  padding: 1.05rem 1.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare__table thead th,
.compare__table thead td {
  padding-block: 1.25rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.compare__table thead tr > :first-child {
  width: 22%;
}

.compare__table thead th {
  color: var(--text-2);
}

.compare__table tbody th {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2;
  text-transform: uppercase;
}

.compare__table tbody td {
  color: var(--text-2);
}

/* Our column: a panel running down the table, its heading with the mark. */
.compare__table .compare__us {
  background: rgb(255 255 255 / 0.03);
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
  color: var(--text);
}

.compare__table thead .compare__us {
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 var(--yellow-line);
}

.compare__table tbody tr:last-child .compare__us {
  border-radius: 0 0 var(--radius) var(--radius);
}

.compare__table tbody tr:last-child > * {
  border-bottom: 0;
}

.compare__table tbody tr:last-child .compare__us {
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
}

.compare__table thead .mark {
  width: 15px;
  height: 17px;
  margin-right: 0.5rem;
  vertical-align: -3px;
}

/* A check, and the answer hanging beside it when it wraps. */
.compare__yes {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.compare__yes .icon {
  width: 15px;
  height: 15px;
  margin-top: 0.15rem;
  color: var(--yellow);
  stroke-width: 2.25;
}

/* Pricing after the beta: three packages side by side, the recommended one lit like our column in the
   comparison. One under another on a phone. */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 2rem;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--panel-edge);
}

/* Our advice: a yellow hairline along the top and a faint warm light under it. */
.plan--recommended {
  background: linear-gradient(180deg, rgb(255 210 63 / 0.055), rgb(255 255 255 / 0.012) 45%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), inset 0 1px 0 var(--yellow-line);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.5rem;
}

.plan__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.plan__tag {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--yellow-soft);
  box-shadow: inset 0 0 0 1px rgb(255 210 63 / 0.3);
  color: var(--yellow);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: 1.25rem;
}

.plan__amount {
  font-size: clamp(2.25rem, 1.95rem + 0.9vw, 2.75rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan__period {
  color: var(--text-3);
  font-size: 0.9375rem;
  font-weight: 500;
}

.plan__join {
  margin-top: 1.5rem;
}

/* What the package adds, under a hairline: "Everything in …, plus:" first where it builds on another. */
.plan__includes,
.plan__features {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.plan__includes {
  color: var(--text-3);
  font-size: 0.8125rem;
}

.plan__features {
  display: grid;
  gap: 0.7rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.plan__includes + .plan__features {
  margin-top: 0.85rem;
  padding-top: 0;
  border-top: 0;
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.plan__features .icon {
  width: 15px;
  height: 15px;
  margin-top: 0.15rem;
  color: var(--text-3);
  stroke-width: 2.25;
}

.plan--recommended .plan__features .icon {
  color: var(--yellow);
}

.plans__note {
  margin-top: 1.5rem;
  color: var(--text-3);
  font-size: 0.8125rem;
  text-align: center;
  text-wrap: balance;
}

/* Public cases of what these bugs cost: a quiet strip under the hero, every line with its source. */

.incidents {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid var(--line);
}

.incidents__title {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.incidents__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.75rem;
}

.incident {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem 2rem;
}

.incident + .incident {
  border-left: 1px solid var(--line);
}

.incident p {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  text-wrap: pretty;
}

.incident__source {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.3rem;
  margin-top: auto;
  color: var(--text-3);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color 0.15s;
}

@media (hover: hover) {
  .incident__source:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.incident__source .icon {
  width: 13px;
  height: 13px;
}

/* FAQ */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem 4rem;
}

.faq__list details {
  border-bottom: 1px solid var(--line);
}

.faq__list details:first-child {
  border-top: 1px solid var(--line);
}

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a cross. */
.faq__list summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat;
  color: var(--text-3);
  transition: transform 0.2s var(--ease-out);
}

.faq__list details[open] summary::after {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .faq__list summary:hover::after {
    color: var(--text);
  }
}

.faq__list details p {
  max-width: 40rem;
  padding-bottom: 1.4rem;
  color: var(--text-2);
}

/* Early access */

.section--cta {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(6rem, 4rem + 7vw, 10rem);
}

.section--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-position: center center;
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, #000 10%, transparent 70%);
}

.section--cta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(60rem, 120vw);
  height: 30rem;
  background: radial-gradient(closest-side, rgb(255 210 63 / 0.08), transparent);
  transform: translate(-50%, -50%);
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta__title {
  max-width: 13em;
  background: linear-gradient(180deg, #fff 35%, rgb(255 255 255 / 0.66));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}

.cta__lede {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--text-2);
  font-size: 1.0625rem;
  text-wrap: balance;
}

.cta__form {
  width: min(100%, 30rem);
  margin-top: 2.25rem;
}

/* The waitlist form: an email field and a button */

.waitlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.waitlist__row {
  display: flex;
  gap: 0.375rem;
  padding: 0.3125rem;
  border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--field-edge), 0 12px 32px -14px rgb(0 0 0 / 0.7);
  transition: box-shadow 0.15s;
}

@media (hover: hover) {
  .waitlist__row:hover {
    box-shadow: inset 0 0 0 1px var(--field-edge-hover), 0 12px 32px -14px rgb(0 0 0 / 0.7);
  }
}

/* The field's focus ring is the whole row's. */
.waitlist__row:focus-within {
  box-shadow: inset 0 0 0 1px var(--yellow-line), 0 0 0 4px rgb(255 210 63 / 0.12), 0 12px 32px -14px rgb(0 0 0 / 0.7);
}

.waitlist__row:has([aria-invalid="true"]) {
  box-shadow: inset 0 0 0 1px var(--red), 0 12px 32px -14px rgb(0 0 0 / 0.7);
}

/* Rails wraps a field with an error (and its label) in a div: it stays out of the row's layout, so the field
   keeps its width. */
.waitlist .field_with_errors {
  display: contents;
}

.waitlist__email {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.5rem 0 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  /* At least 16px, or an iPhone zooms the page in when the field is tapped and leaves it zoomed. */
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.waitlist__email::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.waitlist__email:focus {
  outline: none;
}

/* A browser's autofill keeps the field dark: its own light fill would wait longer than anyone stays. */
.waitlist__email:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 100000s 0s;
}

.waitlist__submit {
  flex: none;
}

.waitlist__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist__note {
  color: var(--text-3);
  font-size: 0.75rem;
  text-align: center;
  text-wrap: balance;
}

/* The package a "Join the beta" picked, over the field of the form at the bottom. */
.waitlist__pick {
  color: var(--text-2);
  font-size: 0.875rem;
  text-align: center;
  text-wrap: balance;
}

.waitlist__pick strong {
  color: var(--text);
}

.waitlist__errors {
  padding: 0.75rem 1rem;
  border: 1px solid var(--red-line);
  border-radius: 12px;
  background: var(--red-soft);
  font-size: 0.9375rem;
  text-align: left;
}

.waitlist__errors:focus {
  outline: none;
}

.waitlist-done {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(140deg, rgb(70 201 139 / 0.1), rgb(70 201 139 / 0.03));
  box-shadow: inset 0 0 0 1px rgb(70 201 139 / 0.3);
  text-align: left;
}

.waitlist-done__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.waitlist-done__icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.waitlist-done__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.waitlist-done__title:focus {
  outline: none;
}

.waitlist-done__body p:not(.waitlist-done__title) {
  margin-top: 0.3rem;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.waitlist-done a {
  color: var(--yellow);
}

/* Plain pages: privacy, thanks, form errors */

/* svh: the screen with the browser's bars showing, so a phone never needs to scroll for an empty page. */
.section--page {
  min-height: 60vh;
  min-height: 60svh;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 0;
}

.page-title {
  margin: 0.9rem 0 1.5rem;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.page-form {
  max-width: 34rem;
}

.prose h2 {
  margin-top: 2.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.prose p {
  margin-top: 0.75rem;
  color: var(--text-2);
}

.prose a {
  color: var(--yellow);
}

.prose .prose__lede {
  color: var(--text);
  font-size: 1.125rem;
}

.prose .prose__meta {
  margin-top: 2.5rem;
  color: var(--text-3);
  font-size: 0.875rem;
}

.page-back {
  margin-top: 2rem;
  text-align: center;
}

.page-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-2);
  text-decoration: none;
}

@media (hover: hover) {
  .page-back a:hover {
    color: var(--text);
  }
}

/* Motion. Every animation only adds a start: without it (reduced motion) everything shows its end state. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes flag {
  from {
    border-color: transparent;
    background-color: transparent;
  }
}

@keyframes fill {
  from {
    transform: scaleX(0);
  }
}

@keyframes tint {
  from {
    color: var(--text);
  }
}

@keyframes flow {
  to {
    stroke-dashoffset: -14;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Hero: the run plays once on load, a row at a time, and ends in the bug. */
.timeline > * {
  --t: calc(0.45s + var(--i, 0) * 0.26s);

  animation: rise 0.5s var(--ease-out) var(--t) both;
}

.timeline > :nth-child(2) { --i: 1; }
.timeline > :nth-child(3) { --i: 2; }
.timeline > :nth-child(4) { --i: 3; }
.timeline > :nth-child(5) { --i: 4; }
.timeline > :nth-child(6) { --i: 5; }
.timeline > :nth-child(7) { --i: 6; }
.timeline > :nth-child(8) { --i: 7; }

.timeline > .event--fail {
  animation:
    rise 0.5s var(--ease-out) var(--t) both,
    flag 0.6s ease calc(var(--t) + 0.35s) both;
}

.event__status {
  animation: fade-in 0.3s ease calc(var(--t) + 0.3s) both;
}

/* Then the bug: what the product said, and what really happened turning red. */
.journey .bug {
  animation: pop 0.7s var(--ease-out) 2.4s both;
}

.journey .evidence__row {
  animation: rise 0.5s var(--ease-out) 2.9s both;
}

.journey .evidence__row.is-fail {
  animation:
    rise 0.5s var(--ease-out) 3.2s both,
    flag 0.6s ease 3.6s both;
}

.journey .evidence__row.is-fail :is(.evidence__kind, .evidence__what) {
  animation: tint 0.6s ease 3.6s both;
}

.journey .bug__facts {
  animation: fade-in 0.6s ease 3.9s both;
}

/* A run plays again each time it comes up: the ones not showing hold no animation. */
.journey.is-ready .run:not(.is-active) * {
  animation: none;
}

.caret {
  animation: blink 1.1s step-end infinite;
}

.race__lines path {
  animation: flow 1.2s linear infinite;
}

/* Pictures further down play once they scroll into view: the reveal controller sets .is-armed, then
   .is-playing. Without JavaScript they never hide. */
.is-armed:not(.is-playing) :is(.hub__channels li, .days__stops li, .days__cutoff, .truth__row, .race__people li, .race__slot, .finding, .inbox__held) {
  opacity: 0;
}

.is-playing :is(.hub__channels li, .days__stops li, .truth__row, .race__people li, .finding) {
  animation: rise 0.5s var(--ease-out) calc(0.15s + var(--i, 0) * 0.12s) both;
}

.is-playing :is(.days__cutoff, .inbox__held) {
  animation: fade-in 0.6s ease 0.75s both;
}

.is-playing .race__slot {
  animation: pop 0.6s var(--ease-out) 0.45s both;
}

.is-playing .truth__row.is-fail {
  animation:
    rise 0.5s var(--ease-out) calc(0.15s + var(--i, 0) * 0.12s) both,
    flag 0.5s ease calc(0.5s + var(--i, 0) * 0.12s) both;
}

:is(.hub__channels, .days__stops, .truth__rows, .race__people, .inbox__list) > :nth-child(2) { --i: 1; }
:is(.hub__channels, .days__stops, .truth__rows, .race__people, .inbox__list) > :nth-child(3) { --i: 2; }
:is(.hub__channels, .days__stops, .truth__rows, .race__people, .inbox__list) > :nth-child(4) { --i: 3; }
:is(.hub__channels, .days__stops, .truth__rows, .race__people, .inbox__list) > :nth-child(5) { --i: 4; }

/* Layout breakpoints */

@media (max-width: 960px) {
  /* The hairlines beside the trust line only where it fits on one line with them. */
  .hero__trust::before,
  .hero__trust::after {
    display: none;
  }

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

  .journey__run {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .cell,
  .cell--channels,
  .cell--days,
  .cell--truth,
  .cell--race {
    grid-column: auto;
  }

  /* The bug's title and proof beside its facts. */
  .bug {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head head"
      "title facts"
      "evidence facts";
    column-gap: 2rem;
  }

  .bug__head {
    grid-area: head;
  }

  .bug__title {
    grid-area: title;
  }

  .evidence {
    grid-area: evidence;
    align-self: start;
  }

  .bug__facts {
    grid-area: facts;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
    margin-top: 0.95rem;
  }

  .incidents__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 36rem;
    margin-inline: auto;
  }

  .incident {
    padding: 0;
  }

  .incident + .incident {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  /* Each step a row: its picture, then its words. */
  .steps {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
  }

  .step,
  .step:first-child,
  .step:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(1.5rem, 5vw, 3rem);
    padding: 2rem 0;
    border-top: 1px solid var(--line);
  }

  .step + .step {
    border-left: 0;
  }

  .step__visual {
    grid-row: 1 / -1;
    height: auto;
    margin: 0;
  }

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

  .proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .proof li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .proof__icon {
    grid-row: auto;
    margin-bottom: 0.4rem;
  }

  .plan {
    padding: 1.5rem 1.25rem 1.75rem;
  }
}

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

  .plan {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .site-nav {
    display: none;
  }

  .site-header__inner {
    justify-content: space-between;
  }

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

  .finding {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem 1rem;
  }

  .finding .severity {
    grid-column: 1 / -1;
  }

  .verified {
    display: none;
  }

  /* Room for the 44px taps of the logo and the links under it. */
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 1.5rem;
  }

  .site-footer__inner .logo {
    justify-self: center;
  }

  .site-footer__links {
    justify-content: center;
  }

  .site-footer__copy {
    order: 1;
  }

  /* Each row of the comparison on its own: the label, then both answers, each named. */
  .compare__table,
  .compare__table tbody,
  .compare__table tr,
  .compare__table th,
  .compare__table td {
    display: block;
  }

  .compare__table thead {
    display: none;
  }

  .compare__table tbody tr {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
  }

  .compare__table tbody tr:first-child {
    border-top: 1px solid var(--line);
  }

  .compare__table tbody th,
  .compare__table tbody td,
  .compare__table tbody tr:last-child > * {
    padding: 0;
    border: 0;
  }

  .compare__table tbody td {
    margin-top: 0.5rem;
  }

  .compare__table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    color: var(--text-3);
    font-size: 0.75rem;
  }

  .compare__table .compare__us,
  .compare__table tbody tr:last-child .compare__us {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .compare__table tbody .compare__us::before {
    color: var(--yellow);
  }
}

@media (max-width: 640px) {
  /* Three lines on a phone: here balancing breaks them best, and leaves the text under it no stray word. */
  .hero__title,
  .hero__lede {
    text-wrap: balance;
  }

  .window__crumbs > :not(strong) {
    display: none;
  }

  .bug {
    display: block;
  }

  .bug__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.25rem;
  }

  .step,
  .step:first-child,
  .step:last-child {
    display: block;
    padding: 0;
    border-top: 0;
  }

  .step + .step {
    margin-top: 3rem;
  }

  .step__visual {
    max-width: 24rem;
    margin-bottom: 1.5rem;
  }

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

  .proof li {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.9rem;
  }

  .proof__icon {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .journey__run,
  .bug {
    padding-inline: 1rem;
  }

  /* What it said under where it said it. */
  .evidence__row {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    row-gap: 0.15rem;
  }

  .evidence__what {
    grid-column: 2;
    text-align: left;
  }

  .timeline {
    --pad: 0.5rem;
    --gap: 0.65rem;
  }

  /* The time goes above the text. */
  .event {
    grid-template-columns: 28px minmax(0, 1fr) 1.125rem;
    grid-template-areas:
      "icon time status"
      "icon text status";
    row-gap: 0.1rem;
  }

  .event__icon {
    grid-area: icon;
    align-self: start;
    margin-top: 0.15rem;
  }

  .event__time {
    grid-area: time;
  }

  .event__text {
    grid-area: text;
  }

  .event__status {
    grid-area: status;
  }

  .timeline::before {
    left: calc(var(--pad) + 14px);
  }

  .gap {
    padding-left: calc(var(--pad) + 9px);
  }

  .cell {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  /* Each picture as tall as it is: the fixed height of the grid's cells leaves empty bands in a column. */
  .cell__visual {
    height: auto;
    padding-block: 1.5rem;
  }

  .hub {
    gap: 1rem;
  }

  /* Three to a row, the last two centred under them. */
  .hub__channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hub__channels li {
    flex: 0 0 calc((100% - 2 * 0.625rem) / 3);
  }

  .hub__channels::before,
  .hub__channels li::before,
  .hub__who::after {
    display: none;
  }

  .race {
    grid-template-columns: auto minmax(1.5rem, 1fr) auto;
    padding-block: 2rem;
  }
}

@media (max-width: 480px) {
  /* The run's buttons share the width, like a phone's own segmented control. */
  .journey__tabs {
    width: 100%;
  }

  .journey__tab {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.4rem;
  }

  .journey.is-cycling .journey__tab[aria-pressed="true"]::after {
    right: 25%;
    left: 25%;
  }

  /* The severity and the video on one line, the bug under them across the whole width. */
  .finding {
    grid-template-areas:
      "severity thumb"
      "main main";
  }

  .finding .severity {
    grid-area: severity;
  }

  .finding__main {
    grid-area: main;
  }

  .thumb {
    grid-area: thumb;
  }
}

@media (max-width: 420px) {
  .site-header__inner {
    gap: 1rem;
  }

  .logo {
    font-size: 1rem;
  }

  .site-header .button--small {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
  }

  /* The field and the button each on their own line, the field with its own ring. The row draws nothing in
     any state, or its pill would show behind both (on an iPhone a tap leaves the row hovered). */
  .waitlist__row,
  .waitlist__row:hover,
  .waitlist__row:focus-within,
  .waitlist__row:has([aria-invalid="true"]) {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .waitlist__email {
    flex: none;
    height: 3rem;
    padding: 0 1.1rem;
    background: var(--field);
    box-shadow: inset 0 0 0 1px var(--field-edge);
  }

  .waitlist__email:focus {
    box-shadow: inset 0 0 0 1px var(--yellow-line), 0 0 0 4px rgb(255 210 63 / 0.12);
  }

  .waitlist__email[aria-invalid="true"] {
    box-shadow: inset 0 0 0 1px var(--red);
  }

  .waitlist__submit {
    width: 100%;
    height: 3rem;
  }

  .persona__ids li:nth-child(2) {
    display: none;
  }

  .race {
    grid-template-columns: auto minmax(0.75rem, 1fr) auto;
  }

  .race__people li {
    padding-right: 0.6rem;
  }
}

@media (max-width: 400px) {
  /* The two people side by side, their lines meeting above the one spot left: side by side with it they no
     longer fit. */
  .race {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .race__people {
    position: relative;
    grid-template-columns: repeat(2, auto);
    gap: 0.5rem;
    padding-bottom: 1.25rem;
  }

  .race__people::after {
    content: "";
    position: absolute;
    right: 25%;
    bottom: 0;
    left: 25%;
    height: 0.875rem;
    border: 1px dashed rgb(255 255 255 / 0.22);
    border-top: 0;
    border-radius: 0 0 0.625rem 0.625rem;
  }

  .race__lines {
    display: none;
  }

  .race__slot {
    position: relative;
    margin-top: 1.125rem;
  }

  .race__slot::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    height: 1.125rem;
    border-left: 1px dashed rgb(255 255 255 / 0.22);
  }

  .is-armed:not(.is-playing) .race__people::after {
    opacity: 0;
  }

  .is-playing .race__people::after {
    animation: fade-in 0.5s ease 0.35s both;
  }
}

/* The narrowest phones. */
@media (max-width: 359px) {
  .button__full {
    display: none;
  }

  .button__short {
    display: inline;
  }

  .journey__tab .icon {
    display: none;
  }

  .cell,
  .plan {
    padding-inline: 1rem;
  }

  .days__stops span {
    font-size: 0.6875rem;
  }

  .race__people .avatar {
    display: none;
  }

  .race__people li {
    padding-inline: 0.75rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Not motion: the autofill's light fill still never arrives. */
  .waitlist__email:-webkit-autofill {
    transition: background-color 100000s 0s !important;
  }
}