@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: light-dark(#f8f9ff, #121327);
  --ink: light-dark(#18152f, #f8f9ff);
  --ink-soft: light-dark(#5b5674, #c9c8e0);
  --accent: light-dark(#8b74f7, #a999ff);
  --accent-ink: #18152f;
  --sky: light-dark(#e8eeff, #202547);
  --mint: light-dark(#def9f1, #153633);
  --line: color-mix(in oklch, var(--ink) 16%, transparent);
  --display: "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --body: "Switzer", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --pill: 999px;
  --pad: clamp(1rem, 4vw, 3rem);
  --nav-height: 68px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1.05rem, 1.2vw, 1.25rem)/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
summary {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

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

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

[hidden] {
  display: none !important;
}

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

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.wrap {
  width: min(100%, 1320px);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.surface {
  border-radius: 24px;
}

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

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

.skip-link {
  position: fixed;
  top: .6rem;
  left: .6rem;
  z-index: 100;
  padding: .7rem 1rem;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-height);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: clamp(.7rem, 2vw, 1.7rem);
}

.brand {
  flex: 0 0 auto;
  font: 700 1.45rem/1 var(--display);
  letter-spacing: -.03em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  margin-left: auto;
  white-space: nowrap;
}

.sound-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: transform .18s var(--ease-out), background-color .2s var(--ease-out);
}

/* The same lift as the brand, the links and the install button beside it: the
   one control whose job is to acknowledge a press answers its own. */
.sound-toggle:hover {
  background: var(--sky);
  transform: translateY(-2px);
}

.sound-toggle:active {
  background: var(--sky);
  transform: translateY(1px) scale(.96);
}

.sound-toggle[aria-pressed="false"] {
  color: var(--ink-soft);
}

.sound-toggle__off,
.sound-toggle[aria-pressed="false"] .sound-toggle__on {
  display: none;
}

.sound-toggle[aria-pressed="false"] .sound-toggle__off {
  display: inline;
}

.nav__links a,
.footer__links a,
.text-link {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

.nav__links a,
.footer__links a {
  font-size: .92rem;
  font-weight: 500;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.home .brand,
.home .nav__links a,
.home .footer__links a,
.home .text-link {
  transition: transform .2s var(--ease-out);
}

.home .nav__links a,
.home .footer__links a,
.home .text-link {
  display: inline-flex;
}

.home .brand:hover {
  transform: translateY(-2px) rotate(-2deg);
}

.home .nav__links a:hover,
.home .footer__links a:hover,
.home .text-link:hover {
  transform: translateY(-2px);
}

.install-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.4rem;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 1rem/1 var(--display);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.install-button:hover {
  transform: translateY(-2px);
}

.install-button:active {
  transform: translateY(8px) scale(.98);
}

.install-button--nav {
  min-height: 42px;
  padding: .65rem 1rem;
  font-size: .9rem;
}

.install-button--hero {
  min-height: 100px;
  padding: 1.2rem clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 8px 0 color-mix(in oklch, var(--accent) 60%, var(--ink));
  font-size: clamp(1.65rem, 2.5vw, 1.8rem);
}

.install-button--hero:active {
  box-shadow: 0 0 0 color-mix(in oklch, var(--accent) 60%, var(--ink));
}

.hero {
  display: grid;
  align-items: center;
  min-height: min(700px, calc(100svh - var(--nav-height)));
  padding-block: clamp(1.4rem, 4vh, 3.2rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  grid-template-areas: "copy world";
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}

.hero__copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
}

.hero h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero h1 {
  max-width: 11ch;
  font-size: clamp(2.4rem, 6.6vw, 6rem);
  line-height: .9;
}

.rise {
  display: inline-block;
  animation: word-rise .62s both var(--ease-out);
}

.rise + .rise {
  animation-delay: .09s;
}

.hero__line {
  max-width: 32ch;
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
  width: min(100%, 25rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.text-link {
  font-weight: 600;
  white-space: nowrap;
}

.hero__browser-link {
  display: inline-block;
  justify-content: center;
  margin-top: .3rem;
}

.hero__world {
  --drift-x: 0px;
  --drift-y: 0px;
  grid-area: world;
  position: relative;
  min-height: min(64vh, 590px);
  overflow: visible;
  background: var(--sky);
  border-radius: 46% 54% 42% 58% / 39% 46% 54% 61%;
  isolation: isolate;
}

.world__ground,
.world__tree,
.world__house,
.world__bush,
.world__planet,
.hero__world > .mascot {
  position: absolute;
  animation: world-pop .62s both var(--ease-out);
}

.world__ground {
  left: 4%;
  bottom: 1%;
  z-index: 1;
  width: 92%;
  animation-delay: .06s;
}

.world__tree {
  left: 4%;
  bottom: 18%;
  z-index: 2;
  width: 18%;
  transform: rotate(-7deg);
  animation-delay: .12s;
}

.world__house {
  right: 0;
  bottom: 11%;
  z-index: 2;
  width: 33%;
  animation-delay: .18s;
}

.world__bush {
  right: 25%;
  bottom: 8%;
  z-index: 1;
  width: 24%;
  animation-delay: .18s;
}

.world__planet {
  top: -5%;
  right: -3%;
  z-index: 0;
  width: 31%;
  animation: world-pop .62s .24s both var(--ease-out), planet-drift 7s 1s infinite ease-in-out;
}

.world__planet,
.world__tree,
.world__house,
.world__bush {
  transition: translate .35s var(--ease-out);
}

.world__planet { translate: var(--drift-x) var(--drift-y); }
.world__tree { translate: calc(0px - var(--drift-x)) var(--drift-y); }
.world__house { translate: var(--drift-x) calc(0px - var(--drift-y)); }
.world__bush { translate: calc(0px - var(--drift-x)) calc(0px - var(--drift-y)); }

.hero__world > .mascot {
  left: 33%;
  bottom: 9%;
  z-index: 4;
  width: 34%;
  animation-delay: .3s;
}

.bot {
  --ex: 0px;
  --ey: 0px;
  --tilt: 0deg;
  position: relative;
  transform: rotate(var(--tilt));
  transform-origin: 50% 62%;
  transition: transform .28s var(--ease-out);
}

.mascot__svg {
  width: 100%;
  height: auto;
}

.bot:not(.is-working):not(.is-done) .mascot__svg,
.bot:not(.is-working):not(.is-done) .mascot__face {
  animation: mascot-bob 3.2s infinite ease-in-out;
}

.mascot__face {
  position: absolute;
  top: 14%;
  left: 34.4%;
  z-index: 2;
  width: 30.65%;
  height: 15%;
  pointer-events: none;
}

.mascot__screen {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18%;
  width: 100%;
  height: 64%;
  border-radius: 28%;
  background: #0f172a;
}

.eye {
  display: grid;
  place-items: center;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #5eead4;
  transform-origin: center;
  transition: transform .2s var(--ease-out);
}

.pupil {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(var(--ex), var(--ey));
}

.mascot__mouth {
  position: absolute;
  top: 69%;
  left: 31%;
  display: grid;
  place-items: center;
  width: 38%;
  height: 31%;
  border-radius: 50%;
  background: #5eead4;
}

.mascot__mouth::after {
  width: 36%;
  height: 28%;
  border-radius: 0 0 var(--pill) var(--pill);
  background: #0f172a;
  content: "";
}

.bot.is-curious .eye {
  transform: scale(1.1);
}

.bot.is-blinking .eye {
  transform: scaleY(.1);
}

.bot.is-working .eye {
  width: 23%;
  border: 2px solid #5eead4;
  border-right-color: transparent;
  background: transparent;
  animation: eye-spin .55s infinite linear;
}

.bot.is-working .eye:last-child {
  animation-direction: reverse;
}

.bot.is-working .pupil,
.bot.is-done .pupil {
  display: none;
}

.bot.is-done {
  animation: happy-jump .38s var(--ease-out);
}

.bot.is-done .eye {
  width: 25%;
  height: 42%;
  border: 0;
  border-top: 3px solid #5eead4;
  border-radius: 50% 50% 0 0;
  background: transparent;
}

.bot.is-blocked .eye {
  height: 12%;
  border-radius: 2px;
}

.bot.is-blocked .mascot__mouth::after {
  height: 3px;
  border-radius: 2px;
}

.mascot--small {
  width: clamp(92px, 10vw, 132px);
}

.confetti {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.confetti__piece {
  position: absolute;
  top: 18%;
  left: 45%;
  width: 9%;
  opacity: 0;
  transform: translate(0, 0) scale(.25) rotate(0);
}

.is-done .confetti__piece {
  animation: confetti-pop .7s var(--ease-out);
}

.confetti__piece--1 { --tx: -88px; --ty: -72px; --rot: -38deg; }
.confetti__piece--2 { --tx: -48px; --ty: -112px; --rot: 30deg; }
.confetti__piece--3 { --tx: 4px; --ty: -128px; --rot: -22deg; }
.confetti__piece--4 { --tx: 50px; --ty: -108px; --rot: 45deg; }
.confetti__piece--5 { --tx: 92px; --ty: -66px; --rot: -26deg; }
.confetti__piece--6 { --tx: 24px; --ty: -76px; --rot: 64deg; }

.home .reveal-ready > .wrap {
  opacity: .86;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.home .reveal-ready.is-revealed > .wrap {
  opacity: 1;
  transform: translateY(0);
}

/* Sections. The chunky offset shadow is the one repeated gesture on this page:
   the install button has it, so every surface that holds a claim has it too. */
.bench,
.pricing {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.home-details {
  width: 100%;
  text-align: left;
}

.home-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding-block: 1rem;
  font: 600 clamp(1.3rem, 3vw, 2rem)/1.2 var(--display);
  list-style: none;
  cursor: pointer;
}

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

.home-details > summary::after {
  content: "+";
  flex: 0 0 auto;
  transition: transform .2s var(--ease-out);
}

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

.details-body {
  padding-block: 1rem 2rem;
}

.finish .details-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bench h2 {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: .98;
}

.bench__lead {
  max-width: 46ch;
  margin: 1rem 0 clamp(2.5rem, 5vw, 4rem);
  color: var(--ink-soft);
}

/* Four charts, three weights. The price chart is the claim, so it runs full width;
   the two middle charts are the evidence and sit side by side; the last one is a
   footnote about size and speed, so it is wide but quiet. */
.bench__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.chart {
  min-width: 0;
  margin: 0;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 8px 0 var(--sky);
}

.chart:first-child,
.chart:last-child {
  grid-column: 1 / -1;
}

.chart:last-child {
  background: var(--sky);
  box-shadow: none;
}

.chart__title {
  margin: 0 0 .8rem;
  font: 600 clamp(1.15rem, 1.9vw, 1.5rem)/1.15 var(--display);
  letter-spacing: -.01em;
  text-wrap: balance;
}

.chart__plot {
  min-height: 180px;
}

.chart__svg {
  width: 100%;
  height: auto;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}

.chart__axis path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s var(--ease-out);
}

.is-drawn .chart__axis path {
  stroke-dashoffset: 0;
}

.chart__bar {
  color: var(--ink-soft);
}

.chart__bar--mine {
  color: var(--accent);
}

.chart.is-animatable .chart__grow {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform .68s var(--ease-out) calc(var(--i) * 80ms + .2s);
}

.chart.is-drawn .chart__grow {
  transform: scaleY(1);
}

.chart__grow path {
  fill: none;
  stroke: currentColor;
}

.chart__outline path {
  stroke: var(--ink);
  stroke-width: 2;
}

.chart.is-animatable .chart__bar--empty .chart__grow {
  transform: none;
  opacity: 0;
  transition: opacity .5s var(--ease-out) calc(var(--i) * 80ms + .2s);
}

.chart__bar--empty .chart__grow path {
  stroke: var(--ink-soft);
}

.chart.is-drawn .chart__bar--empty .chart__grow {
  opacity: .55;
}

.chart__value,
.chart__label,
.chart__tick {
  fill: var(--ink);
  font-family: var(--body);
  transition: opacity .4s var(--ease-out) calc(var(--i, 0) * 80ms + .45s);
}

.chart.is-animatable .chart__value,
.chart.is-animatable .chart__label,
.chart.is-animatable .chart__tick {
  opacity: 0;
}

.chart.is-drawn .chart__value,
.chart.is-drawn .chart__label,
.chart.is-drawn .chart__tick {
  opacity: 1;
}

.chart__value {
  font-size: 20px;
  font-weight: 600;
  text-anchor: middle;
}

.chart__value--empty {
  fill: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}

.chart__label {
  fill: var(--ink-soft);
  font-size: 14px;
  text-anchor: middle;
}

.chart__tick {
  fill: var(--ink-soft);
  font-size: 13px;
  text-anchor: end;
}

.chart__caption {
  display: grid;
  gap: .45rem;
  margin-top: 1.2rem;
}

/* The source badge is not decoration: it is the reason the number is allowed
   on the page, so it sits under every chart at the same weight. */
.chart__source {
  justify-self: start;
  padding: .3rem .7rem;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  font-size: .78rem;
  font-weight: 600;
}

.chart__note,
.chart__also {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.chart__also {
  font-weight: 600;
}

.pricing__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.pricing__card {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 44ch;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 10px 0 var(--mint);
}

.pricing__card h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
}

.pricing__line {
  margin: 1rem 0 0;
  color: var(--ink-soft);
}

.pricing__rate {
  margin: 1.4rem 0 0;
  font: 600 clamp(1.3rem, 2.4vw, 1.9rem)/1.25 var(--body);
  font-variant-numeric: tabular-nums;
}

.pricing__caveat {
  margin: .5rem 0 1.2rem;
  color: var(--ink-soft);
  font-size: .9rem;
}

.rate-details {
  margin-block: 1rem;
  font-size: .95rem;
}

.rate-details summary {
  cursor: pointer;
  padding-block: .6rem;
}

.auth__continue {
  min-height: 60px;
  margin-block: 1rem 3rem;
}

.chip {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  font-size: .8rem;
  font-weight: 600;
}

.pricing__cta {
  display: block;
  min-height: 56px;
  margin-top: 1.4rem;
  padding: 1rem 1.4rem;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--paper);
  font: 700 1.1rem/1.2 var(--display);
  text-align: center;
  transition: transform .18s var(--ease-out);
}

.pricing__cta:hover {
  transform: translateY(-2px);
}

.pricing__cta:active {
  transform: translateY(3px) scale(.99);
}

.pricing__prop {
  width: clamp(80px, 12vw, 150px);
  transform: rotate(4deg);
}

.finish__lead {
  max-width: 42ch;
  margin: 1rem auto 0;
  color: var(--ink-soft);
}

.tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, 780px);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.tool {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
}

/* Four ways in, and the one you used last leads. They are peers, so they look
   alike; the difference the eye needs is link versus command, and that shows in
   the body of the card, not in its frame. */
.tool__go {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 56px;
  padding: .85rem 1rem;
  border: 0;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 1.05rem/1.15 var(--display);
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease-out);
}

.tool__go:hover {
  transform: translateY(-2px);
}

.tool__go:active {
  transform: scale(.97);
}

.tool__done {
  flex: 0 0 auto;
  padding: .25rem .6rem;
  border-radius: var(--pill);
  background: var(--paper);
  font-size: .78rem;
  font-weight: 600;
}

.tool__go[data-done] .tool__done {
  background: var(--ink);
  color: var(--paper);
}

.tool__command {
  min-width: 0;
  overflow-x: auto;
  padding: .6rem .75rem;
  border-radius: 12px;
  background: var(--sky);
  font-size: .78rem;
  white-space: nowrap;
}

.tool__hint,
.tool__status {
  margin: 0;
  color: var(--ink-soft);
  font-size: .85rem;
}

.tool__status:empty {
  display: none;
}

.finish__any {
  margin: 1.6rem 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.finish__any code {
  color: var(--ink);
  font-weight: 600;
}

.finish__shell {
  width: min(100%, 780px);
  margin-top: 1.4rem;
  text-align: left;
}

.finish__shell summary {
  padding: .6rem 0;
  color: var(--ink-soft);
  font-size: .9rem;
  cursor: pointer;
}

.finish__shell-body {
  display: grid;
  gap: .6rem;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 16px;
}

.finish__shell-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .85rem;
}

.finish {
  background: var(--sky);
}

.finish__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.finish h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1;
}

.finish__bot {
  margin-bottom: 1.5rem;
}

.footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 104px;
  padding-block: 1.5rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .7rem 1.3rem;
  margin-left: auto;
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__line,
.hero__actions {
  animation: hero-enter .58s both var(--ease-out);
}

.hero__line { animation-delay: .16s; }
.hero__actions { animation-delay: .24s; }

@keyframes word-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes world-pop {
  from { opacity: 0; scale: .92; }
  to { opacity: 1; scale: 1; }
}

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes planet-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(-5px, -8px, 0) rotate(2deg); }
}

@keyframes eye-spin {
  to { transform: rotate(1turn); }
}

@keyframes happy-jump {
  0% { transform: translateY(0) rotate(var(--tilt)); }
  55% { transform: translateY(-14px) rotate(var(--tilt)); }
  100% { transform: translateY(0) rotate(var(--tilt)); }
}

@keyframes confetti-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.25) rotate(0); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.75) rotate(var(--rot)); }
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "world" "copy";
  }

  .hero__world {
    min-height: clamp(260px, 58vw, 430px);
  }

  .hero__copy {
    padding-top: 1rem;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 8vw, 5rem);
  }
}

@media (max-width: 700px) {
  :root {
    --nav-height: 64px;
  }

  .nav__inner {
    gap: .6rem;
  }

  .nav__links {
    gap: .55rem;
  }

  .nav__links a {
    font-size: .76rem;
  }

  .install-button--nav {
    padding-inline: .8rem;
    font-size: .8rem;
  }

  .hero {
    padding-block: 1rem 4rem;
  }

  .hero__grid {
    gap: .6rem;
  }

  .hero__world {
    min-height: 248px;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 11vw, 4.4rem);
    line-height: .94;
  }

  .hero__actions {
    gap: 1rem;
    margin-top: 1.35rem;
  }

  .install-button--hero {
    width: 100%;
    min-height: 88px;
    font-size: 1.45rem;
  }

  .text-link {
    width: 100%;
    text-align: center;
  }

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

  .chart {
    padding: 1.1rem;
  }

  .chart__value { font-size: 24px; }
  .chart__label { font-size: 17px; }
  .chart__tick { font-size: 16px; }
  .chart__value--empty { font-size: 17px; }

  .pricing__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .pricing__prop {
    align-self: flex-end;
  }

  .footer__inner {
    align-items: flex-start;
  }
}

@media (max-width: 440px) {
  .brand {
    font-size: 1.15rem;
  }

  .nav__links a {
    font-size: .74rem;
  }

  .nav__inner,
  .nav__links {
    gap: .32rem;
  }

  /* The nav carries four controls on a 320px phone. The links shrink and scroll
     rather than pushing the page sideways; the inset keeps focus rings visible.
     The scrollbar stays visible and thin: it is the only signal that the list
     runs past the edge, and the browser shows it only when it actually does. */
  .nav__links {
    min-width: 0;
    overflow-x: auto;
    padding-block: 7px;
    margin-block: -7px;
    scrollbar-width: thin;
  }

  .install-button--nav {
    padding-inline: .5rem;
    font-size: .74rem;
  }

  .hero__world {
    min-height: 230px;
  }

  .footer__inner {
    display: block;
  }

  .footer__links {
    justify-content: flex-start;
    margin-top: 1.2rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .home .reveal-ready > .wrap {
    opacity: 1;
    transform: none;
  }

  .pupil {
    transform: none;
  }

  .is-done .confetti__piece {
    opacity: 1;
    transform: none;
  }

  .chart__grow {
    transform: scaleY(1);
    opacity: 1;
  }

  .chart__axis path {
    stroke-dashoffset: 0;
  }

  .chart__value,
  .chart__label,
  .chart__tick {
    opacity: 1;
  }
}