/* Lumby AI's website, one stylesheet for every page. No web fonts and nothing from anyone else: the phone's own type,
   Lumby's mark and the colours of its design languages (packages/design). Phones first, then wider screens.
   Since 2026-11-07 in the emails' look (the founder: "lets update our site to have a similar design like our emails",
   apps/api/src/mail/layout.ts): paper, white cards with round corners, everything edged in ink with an ink shadow
   like a sticker, sun-yellow pill buttons, a cobalt call-out, and Lumby's doodles (public/art, drawn by
   scripts/site-art.cjs from the emails' drawings). */

:root {
  --ink: #141413;
  --paper: #f3f3f1;
  --sun: #ffd54a;
  --cobalt: #2140e6;
  --peach: #f4bbaa;
  --text-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 40px);
  --wide: 1120px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* The emails' sticker edge: an ink line round everything, and an ink shadow under it. */
  --stroke: 2.5px;
  /* The soft panels the doodles sit on, as in the emails (apps/mobile/scripts/brand/doodles.cjs). */
  --tint-sun: #fff0c2;
  --tint-lav: #ece8ff;
  --tint-peach: #fde6dd;
  --tint-mint: #dcf5ec;
  --tint-cobalt: #e0e6ff;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #5f5e5a;
  --line: rgba(20, 20, 19, 0.12);
  --card: #ffffff;
  --link: #2140e6;
  --edge: #141413;
  --lift: #141413;
  --soft: #e9e8e3;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  body {
    --bg: #141413;
    --fg: #f3f3f1;
    --muted: #a9a8a2;
    --line: rgba(243, 243, 241, 0.14);
    --card: #1c1c1b;
    --link: #9aabff;
    /* On ink, a sticker's edge is paper, as in the store's night pictures. */
    --edge: rgba(243, 243, 241, 0.82);
    --lift: rgba(0, 0, 0, 0.55);
    --soft: #262624;
  }
}

main {
  flex: 1 0 auto;
}

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

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

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

/* The bar at the top of every page: the mark and the name, and the way to help. */

.bar-wrap {
  position: relative;
  z-index: 10;
}

/* On the home page the bar floats over the hero, so the hero's light reaches the top of the screen. */
.home .bar-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.doc .bar-wrap {
  position: sticky;
  top: 0;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 12px var(--gutter);
}

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

/* The mark on its ink plate, as the app's icon and the emails' top have it, so its sun tile shows on the sun too. */
.brand .mark {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 5px;
  border-radius: 9px;
  background: #141413;
  color: #f3f3f1;
}

.bar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid var(--edge);
  background: var(--card);
  box-shadow: 2px 3px 0 var(--lift);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  transition: transform 200ms var(--ease), box-shadow 200ms ease;
}

.bar__link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 4px 0 var(--lift);
}

/* Over the home page's sun-yellow top, the bar is ink on sun in light and dark alike. */
.home .bar {
  color: var(--ink);
}

.home .bar__link {
  border-color: var(--ink);
  background: #ffffff;
  box-shadow: 2px 3px 0 var(--ink);
}

/* The home page: say it, and Lumby makes it. Every app on it is one of Lumby's own ideas (packages/starters), in the
   look and colourway its starting point wears (packages/design), with the app's own emblem (apps/mobile,
   src/ui/icons.tsx). What moves is there for the fun of it: without scripts, or for anyone who asks for less motion,
   the page stands still and says the same (the end of this file). */

/* The looks the made apps wear: the paint of each starting point's colourway behind its emblem and its name. */

.tile,
.sticker,
.app-card,
.try__dot {
  background: var(--tile-bg, transparent);
  color: var(--tile-ink, inherit);
}

.tile--care-mint { --tile-bg: #eef6f3; --tile-ink: #0f7360; --tile-name: #10322b; }
.tile--ledger-green { --tile-bg: #edf2ec; --tile-ink: #0d3a2c; --tile-name: #0d3a2c; }
.tile--ledger-blue { --tile-bg: #e9eef5; --tile-ink: #15294a; --tile-name: #15294a; }
.tile--dawn-sunrise { --tile-bg: linear-gradient(160deg, #14183a, #2b2a5e 42%, #4a3768 78%, #5e3b6e); --tile-ink: #ffc48a; --tile-name: #fff6ec; }
.tile--dawn-daylight { --tile-bg: linear-gradient(160deg, #fff7ee, #ffe6cc 55%, #ffcda6); --tile-ink: #b0461a; --tile-name: #3a2416; }
.tile--night-paper { --tile-bg: #f3ede2; --tile-ink: #a04b18; --tile-name: #2b231a; }
.tile--night-ink { --tile-bg: #0d1530; --tile-ink: #f2b45a; --tile-name: #ece4d3; }
.tile--track-red { --tile-bg: #a82722; --tile-ink: #ffe14a; --tile-name: #ffffff; }
.tile--console-light { --tile-bg: #eceef1; --tile-ink: #1b7445; --tile-name: #12161b; }

/* Every emblem: the app's own drawing, on its 24-unit grid with round strokes. */
.glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero {
  /* Lumby's sun, as the App Store's header has it, in light and dark alike: what is on it is ink on sun. */
  --fg: var(--ink);
  --muted: rgba(20, 20, 19, 0.74);
  --line: rgba(20, 20, 19, 0.16);
  --card: #ffffff;
  --edge: var(--ink);
  --lift: var(--ink);
  --link: var(--cobalt);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The bar above it is 68 points tall. */
  padding: calc(68px + clamp(28px, 5vh, 56px)) var(--gutter) clamp(72px, 11vh, 128px);
  text-align: center;
  color: var(--ink);
  background: var(--sun);
  border-bottom: var(--stroke) solid var(--ink);
  border-radius: 0 0 clamp(32px, 6vw, 64px) clamp(32px, 6vw, 64px);
}

/* A softer light in the middle, the doodles' confetti round it, and the whole sky leaning away from the pointer. */
.hero__sky {
  position: absolute;
  inset: -24px;
  z-index: -2;
  background:
    url("/art/sprinkles.svg") center 46% / max(1200px, 100%) auto no-repeat,
    radial-gradient(56% 50% at 50% 46%, rgba(255, 240, 194, 0.95), rgba(255, 213, 74, 0) 72%);
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0);
  transition: transform 700ms var(--ease);
}

/* Apps floating round the maker, each in its own look, leaning toward the pointer. Phones: four, peeking in from
   the edges beside the tiles. Wider: six, in the margins, never over the words (the end of this file). */
.stickers {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px), 0);
  transition: transform 700ms var(--ease);
}

.sticker {
  --size: 52px;
  --turn: 0deg;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 28%;
  border: var(--stroke) solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(var(--turn));
  animation: bob 7s ease-in-out infinite;
}

.sticker .glyph {
  width: 50%;
  height: 50%;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(var(--turn));
  }
  50% {
    transform: translateY(-14px) rotate(calc(var(--turn) + 7deg));
  }
}

.sticker--1 {
  --turn: -14deg;
  left: -14px;
  top: 40%;
}

.sticker--2 {
  --turn: 12deg;
  --size: 46px;
  right: -12px;
  top: 45%;
  animation-delay: -2s;
}

.sticker--3 {
  --turn: 9deg;
  --size: 56px;
  left: -20px;
  top: 55%;
  animation-delay: -4.5s;
}

.sticker--4 {
  --turn: -10deg;
  right: -18px;
  top: 61%;
  animation-delay: -1.2s;
}

.sticker--5 {
  --turn: 8deg;
  animation-delay: -3.3s;
}

.sticker--6 {
  --turn: -12deg;
  --size: 58px;
  animation-delay: -5.4s;
}

.sticker--5,
.sticker--6 {
  display: none;
}

/* Phones: the words, the maker, then the ideas to try. Wide screens: the words beside the maker. */
.hero__inner {
  max-width: var(--wide);
  margin: 0 auto;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(18px, 3vh, 28px);
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #ffffff;
  box-shadow: 2px 3px 0 var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.kicker__dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cobalt);
}

.kicker__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--cobalt);
  opacity: 0;
  animation: ping 2.4s var(--ease) infinite;
}

@keyframes ping {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  80%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.hero__title {
  margin: 0 auto;
  font-family: var(--display-font);
  font-size: clamp(2.375rem, 11.2vw, 6.5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.hero__title > span {
  display: block;
}

/* The second line in cobalt, as the store's header has it. */
.shine {
  padding-bottom: 0.08em;
  color: var(--cobalt);
}

.hero__lede {
  margin: clamp(14px, 2.4vh, 22px) auto 0;
  max-width: 24ch;
  font-size: clamp(1.1875rem, 3.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

/* What everyone should know first: what Lumby makes is ready at once, inside Lumby. */
.hero__ready {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(16px, 2.6vh, 22px) 0 0;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #ffffff;
  box-shadow: 2px 3px 0 var(--ink);
  color: var(--ink);
  font-size: clamp(0.9375rem, 2.4vw, 1.0625rem);
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
}

.hero__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
}

.hero__tick svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The App Store's badge, Apple's own artwork as Apple gives it (app-store-badge.svg, from developer.apple.com, "Marketing
   Resources and Identity Guidelines", read 2026-11-07): never changed, angled or animated, at least 40 points tall,
   with a quarter of its height clear round it. The link opens Lumby AI in the visitor's own App Store. */
.store {
  display: inline-flex;
  border-radius: 10px;
}

.store img {
  display: block;
  width: auto;
  height: 56px;
}

.hero__get {
  margin: 24px 0 0;
}

/* The app's word, in the colours of the app the maker has just made. */
.spin {
  display: inline-grid;
  overflow: hidden;
  margin: 0 0.06em;
  padding: 0 0.34em;
  border-radius: 0.42em;
  vertical-align: bottom;
  background: var(--tile-bg, #ffffff);
  color: var(--tile-name, var(--ink));
  box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink);
  font-weight: 700;
}

.spin__word {
  display: block;
}

.spin__word.is-out {
  animation: spin-out 240ms var(--ease) forwards;
}

.spin__word.is-in {
  animation: spin-in 460ms var(--ease);
}

@keyframes spin-out {
  to {
    transform: translateY(-110%);
    opacity: 0;
  }
}

@keyframes spin-in {
  from {
    transform: translateY(110%);
    opacity: 0;
  }
}

/* The maker: Lumby's mark, its fourth tile the next app to make, on a white card like the emails'. */
.stage {
  max-width: 34rem;
  margin: clamp(36px, 6vh, 60px) auto 0;
  padding: clamp(20px, 5vw, 28px);
  border-radius: clamp(28px, 6vw, 36px);
  border: var(--stroke) solid var(--ink);
  background: #ffffff;
  box-shadow: 6px 7px 0 var(--ink);
}

.maker {
  position: relative;
  width: min(78vw, 344px);
  margin: 0 auto;
}

/* A glow behind the tiles, in the colour of the last app made. */
.maker::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgba(255, 213, 74, 0.35)), transparent);
  transition: background 900ms ease;
}

.tiles {
  position: relative;
  aspect-ratio: 1;
}

.tile {
  --x: 0;
  --y: 0;
  --s: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 46.5%;
  height: 46.5%;
  display: grid;
  place-items: center;
  border-radius: 28%;
  overflow: hidden;
  border: var(--stroke) solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  transform: translate(calc(var(--x) * 115.05%), calc(var(--y) * 115.05%)) scale(var(--s));
  transition:
    transform 950ms var(--ease),
    opacity 650ms ease;
  will-change: transform;
}

.tile[data-slot="1"] {
  --x: 1;
}

.tile[data-slot="2"] {
  --y: 1;
}

.tile[data-slot="3"] {
  --x: 1;
  --y: 1;
}

.tile .glyph {
  width: 40%;
  height: 40%;
}

/* A made app shows its name under its emblem, as its card does in the library. */
.tile.has-name .glyph {
  transform: translateY(-13%);
}

.tile__name {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 12%;
  overflow: hidden;
  font-family: var(--display-font);
  font-size: clamp(0.8125rem, 3.5vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tile-name);
}

.tile.is-born .tile__name {
  animation: rise 520ms var(--ease) 520ms both;
}

@keyframes rise {
  from {
    transform: translateY(40%);
    opacity: 0;
  }
}

.tile .glyph .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 900ms var(--ease) 180ms forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.tile--sun {
  background: #ffd54a;
}

.tile--cobalt {
  background: #2140e6;
}

.tile--peach {
  background: #f4bbaa;
}

/* The next app: the mark's plus tile, drawn in ink with a dashed edge, waiting. */
.tile--plus {
  color: var(--ink);
  border: none;
  box-shadow: none;
}

.tile--plus .plus rect,
.big-mark__tile--plus rect {
  opacity: 1;
  stroke-dasharray: 9 7;
}

.tile--plus .plus {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  50% {
    transform: scale(0.92);
    opacity: 0.8;
  }
}

.tile.is-born {
  animation: born 1000ms var(--ease);
}

.tile.is-born::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  transform: translateX(-70%);
  animation: sweep 1100ms var(--ease) 120ms forwards;
  pointer-events: none;
}

@keyframes born {
  0% {
    transform: translate(calc(var(--x) * 115.05%), calc(var(--y) * 115.05%)) scale(0.7) rotate(-8deg);
  }
  55% {
    transform: translate(calc(var(--x) * 115.05%), calc(var(--y) * 115.05%)) scale(1.1) rotate(3deg);
  }
  100% {
    transform: translate(calc(var(--x) * 115.05%), calc(var(--y) * 115.05%)) scale(1) rotate(0);
  }
}

@keyframes sweep {
  to {
    transform: translateX(70%);
  }
}

.tile.is-leaving {
  --s: 0.55;
  opacity: 0;
}

.tile.is-new {
  --s: 0.5;
  opacity: 0;
}

/* Confetti from the fourth tile when an app is made. */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bit {
  position: absolute;
  left: 76.75%;
  top: 76.75%;
  width: 9px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--ink);
  opacity: 0;
  animation: burst 1150ms cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

.bit--0 { background: #ffd54a; }
.bit--1 { background: #2140e6; }
.bit--2 { background: #f4bbaa; }
.bit--3 { background: #ffffff; border-radius: 50%; width: 10px; height: 10px; }

@keyframes burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1);
  }
}

/* The sentence, as it would be typed into Lumby, and the button that sends it. */
.say {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 5.75rem;
  margin: clamp(26px, 4vh, 36px) 0 0;
  padding: 10px 10px 10px 20px;
  border-radius: 24px;
  border: var(--stroke) solid var(--ink);
  background: #ffffff;
  box-shadow: 3px 4px 0 var(--ink);
  color: var(--ink);
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

.say__words {
  flex: 1;
  min-width: 0;
}

.say__text {
  transition:
    opacity 380ms ease,
    transform 380ms var(--ease);
}

.say.is-sent .say__text {
  opacity: 0;
  transform: translateY(-10px);
}

.say__caret {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  margin-left: 2px;
  vertical-align: -0.2em;
  border-radius: 1px;
  background: var(--cobalt);
  animation: blink 1.05s steps(1) infinite;
}

/* Hidden rather than faded: the blink animates opacity, and an animation outranks this rule. */
.say.is-sent .say__caret {
  visibility: hidden;
}

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

.say__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--tint-sun);
  color: var(--ink);
  transition:
    background-color 260ms ease,
    color 260ms ease,
    transform 260ms var(--ease);
}

.say__send svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.say.is-ready .say__send {
  background: var(--sun);
  color: var(--ink);
  transform: scale(1.06);
}

.say.is-sent .say__send {
  transform: scale(0.84);
}

/* Ideas to try: each makes its app in the maker, nothing more. Shown only when the script is there to do it. */
.try {
  margin-top: 22px;
}

.try__label {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.try__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.try__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 17px 0 9px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 220ms var(--ease),
    background-color 220ms ease,
    border-color 220ms ease;
}

.try__btn:hover {
  background: var(--tint-sun);
  transform: translateY(-2px);
}

.try__btn:active {
  transform: scale(0.95);
}

.try__btn.is-on {
  background: var(--sun);
  box-shadow: 2px 3px 0 var(--ink);
}

.try__dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1.5px solid var(--ink);
}

.try__dot .glyph {
  width: 18px;
  height: 18px;
}

/* Sections after the first. */

.section {
  position: relative;
  padding: clamp(72px, 12vh, 136px) 0;
}

.section__head {
  max-width: var(--wide);
  margin: 0 auto clamp(32px, 5vh, 56px);
  padding: 0 var(--gutter);
  text-align: center;
}

.section__title {
  margin: 0 auto;
  max-width: 15ch;
  font-family: var(--display-font);
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.section__lede {
  margin: 18px auto 0;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  color: var(--muted);
  text-wrap: balance;
}

/* Things arrive as they are scrolled to, one after another. Only with the script, and only with motion. */
.motion .reveal {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity 800ms var(--ease),
    translate 800ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.motion .reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* All the apps a person makes, inside the one app: Lumby's icon with its apps going round it. */

.inside {
  padding-top: clamp(40px, 7vh, 88px);
}

.inside__art {
  position: relative;
  width: min(84vw, 420px);
  aspect-ratio: 1;
  margin: 0 auto clamp(30px, 5vh, 52px);
}

.inside__art::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px dashed var(--muted);
  opacity: 0.45;
}

.inside__home {
  position: absolute;
  inset: 32%;
  display: grid;
  place-items: center;
  border-radius: 26%;
  background: #141413;
  color: var(--paper);
  border: var(--stroke) solid var(--edge);
  box-shadow: 6px 7px 0 var(--lift);
}

.inside__home .mark {
  width: 64%;
  height: 64%;
}

.orbit {
  --r: 207%;
  position: absolute;
  left: 40.5%;
  top: 40.5%;
  display: grid;
  place-items: center;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--tile-bg);
  color: var(--tile-ink);
  border: 2px solid var(--edge);
  box-shadow: 3px 4px 0 var(--lift);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
  animation: around 46s linear infinite;
}

.orbit .glyph {
  width: 48%;
  height: 48%;
}

.orbit--1 { --a: -90deg; }
.orbit--2 { --a: -30deg; }
.orbit--3 { --a: 30deg; }
.orbit--4 { --a: 90deg; }
.orbit--5 { --a: 150deg; }
.orbit--6 { --a: 210deg; }

/* Round the icon, each app staying upright as it goes. */
@keyframes around {
  to {
    transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc((var(--a) + 360deg) * -1));
  }
}

/* Sentences people say, on two tapes crossing the page. */

.say-it {
  padding-bottom: 0;
}

.tapes {
  overflow: hidden;
  padding: max(40px, 4vw) 0 max(48px, 4.5vw);
}

.marquee {
  width: 116%;
  margin-left: -8%;
  overflow: hidden;
  padding: 14px 0;
  border-block: var(--stroke) solid var(--ink);
  box-shadow: 0 5px 0 var(--lift);
}

.marquee--sun {
  position: relative;
  z-index: 1;
  background: var(--sun);
  color: var(--ink);
  transform: rotate(-2.4deg);
}

/* Far enough below the first that the two meet only at the left edge, at any width. */
.marquee--cobalt {
  margin-top: calc(max(4vw, 24px) - 8px);
  background: var(--cobalt);
  color: #ffffff;
  transform: rotate(1.6deg);
}

.marquee__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: slide 72s linear infinite;
}

.marquee--back .marquee__track {
  animation-duration: 88s;
  animation-direction: reverse;
}

.marquee:hover .marquee__track,
.tapes.is-off .marquee__track {
  animation-play-state: paused;
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 4px 26px 4px 0;
  white-space: nowrap;
  font-family: var(--display-font);
  font-size: clamp(1.125rem, 2.8vw, 1.5rem);
  font-weight: 750;
  letter-spacing: -0.015em;
}

.chip__dot {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px currentColor;
  transform: rotate(45deg);
}

.dot--sun { background: #ffd54a; }
.dot--cobalt { background: #6f86ff; }
.dot--peach { background: #f4bbaa; }
.dot--care { background: #8ce6c8; }
.dot--green { background: #4cbf84; }
.dot--ledger { background: #f2d682; }
.dot--dawn { background: #ffc48a; }
.dot--sky { background: #8fd2fb; }
.dot--night { background: #f2b45a; }
.dot--blush { background: #ffb3d0; }
.dot--lavender { background: #c4b8ff; }

/* From a sentence to an app, in three steps. */

.how {
  display: grid;
  gap: 18px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}

.how__step {
  overflow: hidden;
  padding-bottom: 30px;
  border-radius: 30px;
  border: var(--stroke) solid var(--edge);
  background: var(--card);
  box-shadow: 5px 6px 0 var(--lift);
}

.how__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  overflow: hidden;
  border-bottom: var(--stroke) solid var(--edge);
}

.how__art--say {
  background: var(--tint-sun);
}

.how__art--make {
  grid-template-columns: repeat(2, 64px);
  grid-template-rows: repeat(2, 64px);
  gap: 10px;
  place-content: center;
  place-items: stretch;
  background: var(--tint-cobalt);
}

.how__art--yours {
  background: var(--tint-peach);
}

.how__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 24px 26px 0;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--display-font);
  font-weight: 800;
}

.how__title {
  margin: 16px 26px 0;
  font-family: var(--display-font);
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.how__text {
  margin: 8px 26px 0;
  color: var(--muted);
}

.bubble {
  max-width: 236px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 22px 22px 6px 22px;
  border: var(--stroke) solid var(--ink);
  background: #ffffff;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  box-shadow: 3px 4px 0 var(--ink);
}

.bubble__send {
  position: absolute;
  right: calc(50% - 142px);
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  box-shadow: 2px 3px 0 var(--ink);
  animation: nudge 2.6s var(--ease) infinite;
}

.bubble__send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes nudge {
  0%,
  70%,
  100% {
    transform: none;
  }
  80% {
    transform: translateY(-5px) scale(1.08);
  }
}

.mini {
  border-radius: 30%;
  border: 2px solid var(--ink);
  box-shadow: 2px 3px 0 var(--ink);
}

.mini--sun { background: #ffd54a; }
.mini--cobalt { background: #2140e6; }
.mini--peach { background: #f4bbaa; }

.mini--new {
  display: grid;
  place-items: center;
  background: #eef6f3;
  color: #0f7360;
  animation: hop 3.2s var(--ease) infinite;
}

.mini--new .glyph {
  width: 50%;
  height: 50%;
}

@keyframes hop {
  0%,
  60%,
  100% {
    transform: none;
  }
  70% {
    transform: translateY(-8px) rotate(-6deg) scale(1.06);
  }
  82% {
    transform: translateY(0) rotate(2deg);
  }
}

.twinkle {
  position: absolute;
  width: 24px;
  height: 24px;
  fill: #ffd54a;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  animation: twinkle 2.6s ease-in-out infinite;
}

.twinkle--1 {
  left: calc(50% + 66px);
  top: 30px;
}

.twinkle--2 {
  left: calc(50% - 98px);
  bottom: 34px;
  width: 17px;
  height: 17px;
  fill: #f4bbaa;
  animation-delay: -0.9s;
}

.twinkle--3 {
  left: calc(50% + 80px);
  bottom: 28px;
  width: 13px;
  height: 13px;
  fill: #9aabff;
  animation-delay: -1.7s;
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(0.55) rotate(0deg);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.1) rotate(25deg);
    opacity: 1;
  }
}

.app-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 30%;
  border: var(--stroke) solid var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
  transform: rotate(-4deg);
}

.app-card .glyph {
  width: 38%;
  height: 38%;
  transform: translateY(-22%);
}

.app-card__name,
.app-card__sub {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--tile-name);
}

.app-card__name {
  bottom: 27%;
  font-family: var(--display-font);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.app-card__sub {
  bottom: 13%;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
}

.badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 2px 3px 0 var(--ink);
}

.badge svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge--pencil {
  left: calc(50% + 50px);
  top: 20px;
  background: #f4bbaa;
  color: #141413;
  transform: rotate(8deg);
}

.badge--bell {
  left: calc(50% - 100px);
  bottom: 24px;
  background: #2140e6;
  color: #ffffff;
  transform: rotate(-10deg);
  animation: ring 3.4s ease-in-out infinite;
}

@keyframes ring {
  0%,
  76%,
  100% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(8deg);
  }
  84% {
    transform: rotate(-22deg);
  }
  88% {
    transform: rotate(2deg);
  }
}

/* Every app a look of its own: eight of Lumby's looks, each with its signature, leaning toward the pointer. */

.looks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(66vw, 264px);
  gap: 16px;
  margin: 0;
  padding: 4px var(--gutter) 26px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}

.looks::-webkit-scrollbar {
  display: none;
}

.look {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  padding: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  color: var(--look-ink);
  background: var(--look-bg);
  border: var(--stroke) solid var(--edge);
  box-shadow: 5px 6px 0 var(--lift);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 420ms var(--ease);
}

/* The light on a card follows the pointer. */
.look::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.3), transparent 55%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.look:hover::after {
  opacity: 1;
}

.look__decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 700ms var(--ease);
}

.look:hover .look__decor {
  transform: scale(1.06);
}

.look__name {
  position: relative;
  margin: 0;
  font-family: var(--display-font);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.look__for {
  position: relative;
  margin: 2px 0 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--look-muted);
}

.look--ledger {
  --look-bg: #edf2ec;
  --look-ink: #0d3a2c;
  --look-muted: #4a6357;
  border-radius: 22px;
}

.look--track {
  --look-bg: #2140e6;
  --look-ink: #ffffff;
  --look-muted: rgba(255, 255, 255, 0.84);
  border-radius: 6px;
}

.look--atelier {
  --look-bg: #f6e7e2;
  --look-ink: #4a1027;
  --look-muted: #7e5263;
  border-radius: 4px;
  text-align: center;
  align-items: center;
}

.look--night {
  --look-bg: #0d1530;
  --look-ink: #ece4d3;
  --look-muted: #a2a8bf;
  border-radius: 24px;
}

.look--console {
  --look-bg: #0f1215;
  --look-ink: #e6e9ed;
  --look-muted: #959da8;
  border-radius: 12px;
}

.look--play {
  --look-bg: #ffd54a;
  --look-ink: #171717;
  --look-muted: rgba(23, 23, 23, 0.76);
  border-radius: 22px;
}

.look--dawn {
  --look-bg: linear-gradient(180deg, #14183a 0%, #2b2a5e 42%, #4a3768 78%, #5e3b6e 100%);
  --look-ink: #fff6ec;
  --look-muted: rgba(255, 246, 236, 0.86);
  border-radius: 26px;
}

.look--care {
  --look-bg: #eef6f3;
  --look-ink: #10322b;
  --look-muted: #42605a;
  border-radius: 24px;
}

/* Lumby in four numbers, each from the code: its ideas (packages/starters), its looks and their colourways
   (packages/design), its parts (apps/mobile, src/parts), and the records it sends us. */

.numbers {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wide) - 2 * var(--gutter));
  margin: clamp(24px, 4vh, 48px) auto;
  padding: clamp(48px, 9vh, 96px) clamp(20px, 5vw, 48px);
  border-radius: clamp(28px, 5vw, 48px);
  border: var(--stroke) solid var(--ink);
  background: #2140e6;
  box-shadow: 6px 7px 0 var(--lift);
  color: #ffffff;
}

.numbers::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background:
    radial-gradient(30% 40% at 12% 30%, rgba(154, 171, 255, 0.4), transparent 70%),
    radial-gradient(34% 44% at 88% 72%, rgba(244, 187, 170, 0.26), transparent 70%);
}

.numbers__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 16px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

.number__n {
  display: block;
  font-family: var(--display-font);
  font-size: clamp(3.75rem, 16vw, 7.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: #ffd54a;
}

.number__what {
  display: block;
  max-width: 16ch;
  margin: 12px auto 0;
  font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}

/* Three things that are true, each on a tile of the mark's own colours. */

.truths {
  display: grid;
  gap: 16px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.truth {
  padding: 30px 26px 34px;
  border-radius: 30px;
  border: var(--stroke) solid var(--ink);
  box-shadow: 5px 6px 0 var(--lift);
  color: var(--truth-ink);
  background: var(--truth-bg);
  transition: transform 320ms var(--ease);
}

.truth:hover {
  transform: translateY(-6px) rotate(-0.8deg);
}

.truth--sun {
  --truth-bg: #ffd54a;
  --truth-ink: #141413;
  --truth-muted: rgba(20, 20, 19, 0.78);
}

.truth--cobalt {
  --truth-bg: #2140e6;
  --truth-ink: #ffffff;
  --truth-muted: rgba(255, 255, 255, 0.88);
}

.truth--peach {
  --truth-bg: #f4bbaa;
  --truth-ink: #141413;
  --truth-muted: rgba(20, 20, 19, 0.78);
}

.truth__art {
  width: 76px;
  height: 76px;
  margin-bottom: 22px;
  transform: rotate(-4deg);
  transition: transform 420ms var(--ease);
}

.truth:hover .truth__art {
  transform: rotate(-12deg) scale(1.08);
}

.truth h3 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(1.625rem, 3.8vw, 2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.truth p {
  margin: 10px 0 0;
  color: var(--truth-muted);
}

/* The last word: the mark put together, tile by tile, as it is scrolled to. */

.closing {
  --muted: rgba(255, 255, 255, 0.88);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wide) - 2 * var(--gutter));
  margin: clamp(56px, 9vh, 104px) auto clamp(8px, 2vh, 16px);
  padding: clamp(56px, 10vh, 112px) clamp(20px, 5vw, 48px);
  border-radius: clamp(32px, 6vw, 56px);
  border: var(--stroke) solid var(--ink);
  background: var(--cobalt);
  box-shadow: 6px 7px 0 var(--lift);
  color: #ffffff;
  text-align: center;
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/art/sprinkles.svg") center / max(1100px, 100%) auto no-repeat;
  opacity: 0.9;
}

.big-mark {
  position: relative;
  width: clamp(120px, 30vw, 176px);
  aspect-ratio: 1;
  margin: 0 auto 36px;
}

.big-mark__tile {
  position: absolute;
  width: 46.5%;
  height: 46.5%;
  border-radius: 28%;
  border: var(--stroke) solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  transition:
    transform 1000ms var(--ease),
    opacity 800ms ease;
}

.big-mark__tile--sun {
  left: 0;
  top: 0;
  background: #ffd54a;
}

.big-mark__tile--cobalt {
  right: 0;
  top: 0;
  background: #2140e6;
  /* On the cobalt card, the cobalt tile is edged in white so it shows. */
  border-color: #ffffff;
  transition-delay: 90ms;
}

.big-mark__tile--peach {
  left: 0;
  bottom: 0;
  background: #f4bbaa;
  transition-delay: 180ms;
}

.big-mark__tile--plus {
  right: 0;
  bottom: 0;
  color: #ffffff;
  border: none;
  box-shadow: none;
  transition-delay: 270ms;
}

.big-mark__tile--plus svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.motion .big-mark:not(.is-in) .big-mark__tile--sun {
  transform: translate(-140%, -90%) rotate(-50deg);
  opacity: 0;
}

.motion .big-mark:not(.is-in) .big-mark__tile--cobalt {
  transform: translate(140%, -90%) rotate(50deg);
  opacity: 0;
}

.motion .big-mark:not(.is-in) .big-mark__tile--peach {
  transform: translate(-140%, 90%) rotate(40deg);
  opacity: 0;
}

.motion .big-mark:not(.is-in) .big-mark__tile--plus {
  transform: scale(0.3) rotate(-90deg);
  opacity: 0;
}

.closing__kicker {
  margin: 0 auto 16px;
  max-width: 28ch;
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
  font-weight: 650;
  line-height: 1.35;
  color: var(--sun);
  text-wrap: balance;
}

.closing__title {
  margin: 0 auto;
  max-width: 13ch;
  font-family: var(--display-font);
  font-size: clamp(2.5rem, 9vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.closing__lede {
  margin: 18px auto 34px;
  color: var(--muted);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  margin: 0;
}

/* The second button: white, edged and shadowed in ink like the first. */
.button.button--quiet {
  background: #ffffff;
}

/* The emails' button: a sun-yellow pill, edged in ink, with an ink shadow. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  border: var(--stroke) solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 3px 4px 0 var(--ink);
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms ease;
}

.button:hover {
  transform: translate(-1px, -2px);
  box-shadow: 5px 6px 0 var(--ink);
}

.button:active {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* While the hero is out of sight, its lights and its floating apps rest. */
.hero.is-off .sticker,
.hero.is-off .tile--plus .plus {
  animation-play-state: paused;
}

/* The footer, the same on every page. */

.foot {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wide) - 2 * var(--gutter));
  margin: clamp(40px, 7vh, 72px) auto clamp(16px, 3vw, 28px);
  padding-bottom: clamp(88px, 24vw, 132px);
  border-radius: clamp(28px, 5vw, 44px);
  background: var(--soft) url("/art/peek.svg") center bottom / min(520px, 94%) auto no-repeat;
  font-size: 0.875rem;
  color: var(--muted);
}

.foot__inner {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 40px) 8px;
}

.foot .brand {
  color: var(--fg);
  font-size: 1rem;
}

.foot .brand .mark {
  width: 30px;
  height: 30px;
}

.foot__get {
  justify-self: start;
  margin: 2px 0 6px;
}

.foot__get img {
  height: 48px;
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.foot__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.foot__nav a:hover {
  text-decoration: underline;
}

.foot__legal,
.foot__copy {
  margin: 0;
  max-width: 64ch;
  line-height: 1.5;
}

.foot__legal a {
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* The privacy policy, the terms, help, and deleting an account. */

.page {
  padding: clamp(28px, 6vw, 64px) var(--gutter) clamp(64px, 10vw, 104px);
}

.prose {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 48px);
  border-radius: clamp(28px, 5vw, 44px);
  border: var(--stroke) solid var(--edge);
  background: var(--card);
  box-shadow: 6px 7px 0 var(--lift);
}

/* The doodle at the top of each, as the emails open. */
.prose__art,
.lost__art {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto clamp(20px, 4vw, 32px);
}

.prose h1 {
  margin: 0 0 10px;
  font-family: var(--display-font);
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

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

.prose h2 {
  margin: 2.2em 0 0.45em;
  font-family: var(--display-font);
  font-size: 1.4375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  scroll-margin-top: 88px;
}

.prose h3 {
  margin: 1.6em 0 0.3em;
  font-size: 1.0625rem;
}

.prose p,
.prose li {
  overflow-wrap: break-word;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose a {
  color: var(--link);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.prose strong {
  font-weight: 650;
}

.summary {
  --link: var(--cobalt);
  margin: 28px 0 8px;
  padding: 22px 22px 8px;
  border-radius: 22px;
  border: 2px solid var(--edge);
  background: var(--tint-sun);
  color: var(--ink);
}

.summary h2 {
  margin: 0 0 6px;
  font-size: 1.125rem;
}

.summary ul {
  margin: 0;
  padding-left: 1.2em;
}

.summary li {
  margin-bottom: 0.6em;
}

.toc {
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 2px dashed var(--line);
}

.toc p {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2 15rem;
  column-gap: 2rem;
  font-size: 0.9375rem;
}

.toc li {
  break-inside: avoid;
}

.prose .steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.steps li {
  position: relative;
  padding: 14px 16px 14px 56px;
  border-radius: 18px;
  border: 2px solid var(--edge);
  background: var(--card);
  box-shadow: 3px 4px 0 var(--lift);
}

.steps li + li {
  margin-top: 10px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.9375rem;
}

.note {
  --link: var(--cobalt);
  padding: 16px 18px;
  border-radius: 18px;
  border: 2px solid var(--edge);
  background: var(--tint-peach);
  color: var(--ink);
}

/* The page that is not there. */

.lost {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: 48px var(--gutter);
  text-align: center;
}

.lost h1 {
  margin: 8px 0 20px;
  font-family: var(--display-font);
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: -0.03em;
}

/* Wider screens. */

@media (min-width: 720px) {
  /* Tablets: six apps float in the margins beside the maker, clear of the words above it. */
  .sticker {
    --size: 60px;
  }

  .sticker--1 { left: calc(50% - 304px); right: auto; top: 40%; }
  .sticker--2 { right: calc(50% - 300px); left: auto; top: 37%; --size: 54px; }
  .sticker--3 { left: calc(50% - 336px); right: auto; top: 56%; --size: 66px; }
  .sticker--4 { right: calc(50% - 326px); left: auto; top: 59%; }
  .sticker--5 { left: calc(50% - 290px); top: 88%; }
  .sticker--6 { right: calc(50% - 294px); top: 90%; }

  .sticker--5,
  .sticker--6 {
    display: grid;
  }

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

  .looks {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    max-width: var(--wide);
    margin: 0 auto;
    overflow: visible;
    padding: 0 var(--gutter);
  }

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

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

  .foot__inner {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 48px;
  }

  .foot__nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .foot__get {
    grid-column: 1;
    grid-row: 2;
  }

  .foot__legal,
  .foot__copy {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: calc(68px + 48px);
    padding-bottom: 104px;
    text-align: left;
  }

  /* The words beside the maker, centred on it, so the sentence and the app it makes share the first screen. */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas:
      ". stage"
      "kicker stage"
      "title stage"
      "lede stage"
      "ready stage"
      "get stage"
      ". stage";
    column-gap: 64px;
    padding: 0 var(--gutter);
  }

  .kicker {
    grid-area: kicker;
    justify-self: start;
  }

  .hero__title {
    grid-area: title;
    margin: 0;
    font-size: min(5vw, 5.25rem);
  }

  .hero__lede {
    grid-area: lede;
    margin-left: 0;
    margin-right: 0;
  }

  .hero__ready {
    grid-area: ready;
    justify-self: start;
  }

  .hero__get {
    grid-area: get;
    justify-self: start;
    margin-top: 28px;
  }

  .stage {
    grid-area: stage;
    width: 420px;
    max-width: none;
    margin: 0;
    text-align: center;
  }

  .maker {
    width: 100%;
  }

  /* Desktops: the six float in the hero's outer margins, and slip out of sight where there is no room for them. */
  .sticker {
    --size: 66px;
  }

  .sticker--1 { left: calc(50% - 644px); top: 16%; }
  .sticker--2 { right: calc(50% - 652px); top: 12%; --size: 58px; }
  .sticker--3 { left: calc(50% - 690px); top: 50%; --size: 74px; }
  .sticker--4 { right: calc(50% - 696px); top: 47%; }
  .sticker--5 { left: calc(50% - 626px); top: 81%; }
  .sticker--6 { right: calc(50% - 636px); top: 79%; --size: 60px; }
}

/* People who ask for less motion get a still page: the mark as it is, the tapes laid flat with every sentence on
   them, nothing drifting, nothing arriving. */

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

  .sticker,
  .orbit,
  .kicker__dot::after,
  .tile--plus .plus,
  .say__caret,
  .marquee__track,
  .bubble__send,
  .mini--new,
  .twinkle,
  .badge--bell {
    animation: none;
  }

  .marquee {
    width: auto;
    margin-left: 0;
    padding: 18px var(--gutter);
    transform: none;
  }

  .marquee--cobalt {
    margin-top: 0;
  }

  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 0;
    width: auto;
    max-width: var(--wide);
    margin: 0 auto;
  }

  .marquee__track [aria-hidden="true"] {
    display: none;
  }

  .chip {
    white-space: normal;
  }

  .tile,
  .say__text,
  .say__send,
  .look,
  .look__decor,
  .truth,
  .truth__art,
  .try__btn,
  .bar__link,
  .button {
    transition: none;
  }

  .truth:hover,
  .truth:hover .truth__art,
  .bar__link:hover,
  .look:hover .look__decor,
  .try__btn:hover,
  .button:hover {
    transform: none;
  }
}