/* Vibecipe "Electric Blue" (design/README.md): the same colours, type and shapes as the web app
   (src/app/globals.css). Light only, like the design. Mobile first: every section works at 360px. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin.woff2') format('woff2');
}

:root {
  --background: #f4f2ec; /* paper */
  --foreground: #111114; /* ink */
  --ink-hover: #2a2a33;
  --body: #45454f;
  --muted-foreground: #62626e;
  --placeholder: #8a8a96;
  --card: #ffffff;
  --muted: #ebe8e0;
  --image-placeholder: #e9e6de;
  --primary: #2b45ff; /* electric blue */
  --primary-hover: #4a60ff;
  --primary-tint: rgb(43 69 255 / 0.07); /* --primary, faint: a highlighted row */
  --cover-gradient: linear-gradient(135deg, #1a2be0 0%, #2b45ff 55%, #7d8cff 100%); /* example covers */
  --primary-foreground: #f4f2ec;
  --highlight: #fff1a8;
  --highlight-foreground: #5a4a00;
  --success: #ddf3e6;
  --success-foreground: #157a45;
  --danger: #b42318;
  --danger-background: #fdecea;
  --border: #e4e1d8;
  --border-strong: #c7c4ba;
  --input: #d6d3c9;
  --sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Newsreader', ui-serif, Georgia, serif;
  --gutter: 16px;
  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* the sticky header */
  -webkit-text-size-adjust: 100%;
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--primary);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primary-hover);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--primary-foreground);
  font-weight: 700;
}

.skip-link:focus {
  top: 8px;
}

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

.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap-narrow {
  max-width: 1080px;
}

/* Header: sticky, 68px, paper at 90% with a blur. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: rgb(244 242 236 / 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.logo {
  flex: none;
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.logo:hover {
  color: var(--foreground);
}

.logo em {
  color: var(--primary);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-nav .nav-link {
  display: none;
}

/* The chapter numbers (review-later R209) in the header's links, and on phones a Menu that opens
   all six chapters (review-later R211). */
.nav-num {
  margin-right: 6px;
  color: var(--primary);
  font-family: var(--serif);
  font-style: italic;
}

.nav-menu {
  position: static;
}

.nav-menu summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

/* The number of the chapter being read, on the Menu button's corner (nav-menu.js, review-later
   R217). The list marks the same chapter in words for screen readers, so the badge is silent. */
.nav-menu summary[data-chapter]::after {
  content: attr(data-chapter) / '';
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid var(--background);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 18px;
  text-align: center;
}

/* On the narrowest phones the button is just its three lines, still named "Menu". */
@media (max-width: 419px) {
  .nav-menu summary {
    justify-content: center;
    width: 40px;
    padding: 0;
  }

  .nav-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.site-header .button {
  white-space: nowrap;
}

/* Three lines that turn into a cross while the menu is open. */
.nav-menu summary::before {
  content: '';
  width: 14px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}

.nav-menu[open] summary::before {
  height: 14px;
  background:
    linear-gradient(
      45deg,
      transparent calc(50% - 1px),
      currentColor calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      -45deg,
      transparent calc(50% - 1px),
      currentColor calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

.nav-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--gutter);
  left: var(--gutter);
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 28px 48px -24px color-mix(in srgb, var(--foreground) 45%, transparent);
  list-style: none;
}

.nav-menu-list a {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 22px;
  text-decoration: none;
}

.nav-menu-list a:hover,
.nav-menu-list a:focus-visible {
  background: var(--muted);
}

/* The chapter being read (contents.js): dark like a picked tab, with its number in yellow and a
   "You're here" tag. */
.nav-menu-list a[aria-current] {
  background: var(--foreground);
  color: var(--primary-foreground);
}

.nav-menu-list a[aria-current]:hover,
.nav-menu-list a[aria-current]:focus-visible {
  background: var(--ink-hover);
}

.nav-menu-list a[aria-current] .nav-num {
  color: var(--highlight);
}

.nav-menu-list a[aria-current]::after {
  content: 'You’re here' / '';
  align-self: center;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.nav-menu-list .nav-num {
  min-width: 2.2em;
  font-size: 18px;
}

@media (min-width: 768px) {
  .nav-menu {
    display: none;
  }
}

@media (min-width: 768px) {
  .header-nav {
    gap: 0;
  }
  .header-nav .nav-link {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--foreground);
    font-weight: 600;
    text-decoration: none;
  }
  .header-nav .nav-link:hover {
    color: var(--primary);
  }
  .header-nav .button {
    margin-left: 12px;
  }

  /* The section being read (contents.js): a dark pill like a picked tab, with its number in yellow,
     so it doesn't look like the blue Apply button beside it (review-later R217). */
  .header-nav .nav-link[aria-current] {
    background: var(--foreground);
    color: var(--primary-foreground);
  }
  .header-nav .nav-link[aria-current]:hover {
    background: var(--ink-hover);
    color: var(--primary-foreground);
  }
  .header-nav .nav-link[aria-current] .nav-num {
    color: var(--highlight);
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .header-nav .nav-link {
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }
}

/* How far down the page you are: a blue line along the header's foot that grows as you scroll, where
   the browser can tie an animation to scrolling (and not for people who asked for less motion). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 3px;
      background: var(--primary);
      transform-origin: 0 50%;
      animation: read-progress linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes read-progress {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }
  }
}

/* The header floats: a white pill held just under the top of the window, with the page showing round
   it as it scrolls by, instead of a band across the full width (review-later R361). The reading line
   runs along the pill's foot, inside its rounded ends. */
.site-header {
  padding: 10px max(10px, calc((100% - 1320px) / 2 + 10px)) 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .wrap {
  height: 60px;
  padding: 0 8px 0 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 16px 32px -24px color-mix(in srgb, var(--foreground) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (min-width: 768px) {
  .site-header {
    padding-top: 12px;
  }

  .site-header .wrap {
    padding: 0 10px 0 28px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header::after {
      right: max(40px, calc((100% - 1320px) / 2 + 40px));
      bottom: 0;
      left: max(40px, calc((100% - 1320px) / 2 + 40px));
      border-radius: 3px;
    }
  }
}

/* Buttons are pills. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.button:hover {
  background: var(--primary-hover);
  color: var(--primary-foreground);
}

.button-lg {
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

.button-sm {
  min-height: 40px;
  padding: 0 18px;
}

/* The way to apply, in the header and first in the hero, as a ticket like the forms end on: a notch
   cut either side and, past a dashed perforation, its arrow (on phones the header's small one keeps
   just its notches, to fit the header). Review-later R285. The two forms' buttons are the same
   ticket, so sending one is tearing it off (R313). */
.site-header .button,
.hero-actions .button:first-child,
#apply .form-actions .button,
#notify .form-actions .button {
  border-radius: 12px;
  -webkit-mask:
    radial-gradient(circle 0.42em at 0 50%, transparent 97%, black) left / 51% 100% no-repeat,
    radial-gradient(circle 0.42em at 100% 50%, transparent 97%, black) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 0.42em at 0 50%, transparent 97%, black) left / 51% 100% no-repeat,
    radial-gradient(circle 0.42em at 100% 50%, transparent 97%, black) right / 51% 100% no-repeat;
}

/* A mask would cut the focus ring off with the notches: while focused, the ticket is whole. */
.site-header .button:focus-visible,
.hero-actions .button:first-child:focus-visible,
#apply .form-actions .button:focus-visible,
#notify .form-actions .button:focus-visible {
  -webkit-mask: none;
  mask: none;
}

.hero-actions .button:first-child::after,
#apply .form-actions .button::after,
#notify .form-actions .button::after {
  content: '→';
  content: '→' / '';
  margin-left: 6px;
  padding-left: 16px;
  border-left: 2px dashed color-mix(in srgb, currentColor 45%, transparent);
  font-size: 18px;
  line-height: 1;
}

@media (min-width: 768px) {
  .site-header .button::after {
    content: '→';
    content: '→' / '';
    margin-left: 4px;
    padding-left: 12px;
    border-left: 2px dashed color-mix(in srgb, currentColor 45%, transparent);
    line-height: 1;
  }
}

/* The hero's second ask on white with a yellow bell disc at its start, so both buttons read as asks
   rather than one button and a faint outline (review-later R417). The bell is for the eye only. */
.hero-actions .button-outline {
  gap: 10px;
  padding-left: 8px;
  border-color: var(--foreground);
  background: var(--card);
  box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--foreground) 80%, transparent);
}

.hero-actions .button-outline::before {
  content: '' / '';
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--highlight)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")
    center / 18px 18px no-repeat;
}

.button-outline {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--foreground);
}

.button-outline:hover {
  border-color: var(--foreground);
  background: var(--card);
  color: var(--foreground);
}

.button-ink {
  background: var(--foreground);
}

.button-ink:hover {
  background: var(--ink-hover);
}

.button[disabled],
.button[aria-disabled='true'] {
  opacity: 0.6;
  cursor: progress;
}

/* Sections are separated by a 1px line, with generous space. */
.section {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .section {
    padding: 64px 0;
  }
}

/* The page's chapters: each section's title has its number above it, in italic blue with a short
   rule, so the long page reads as a sequence (01 How it works … 06 Questions). The number is for the
   eye: screen readers hear the title alone (review-later R209). */
main > .wrap {
  counter-reset: chapter;
}

main > .wrap > .section {
  counter-increment: chapter;
}

/* Each chapter opens on its number big and hollow, drawn in a blue line like a chapter of a printed
   book, with the title tucked in under its foot (review-later R273). */
.section .section-title::before {
  content: counter(chapter, decimal-leading-zero) / '';
  display: block;
  width: fit-content;
  margin-bottom: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--primary);
  font-size: 96px;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 0.86;
}

@media (min-width: 768px) {
  .section .section-title::before {
    -webkit-text-stroke-width: 2px;
    font-size: 136px;
  }
}

.section-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 40px;
  }
}

.section-lead {
  max-width: 640px;
  margin-top: 14px;
  color: var(--body);
  font-size: 17px;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
}

.eyebrow .sep {
  display: none;
}

@media (min-width: 480px) {
  .eyebrow .sep {
    display: inline;
  }
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

/* The hero's launch line as a small ticket (review-later R293): "Launching in" with a pulsing dot,
   then past a dashed perforation, the year in the serif, yellow on an ink stub. Screen readers hear
   "Launching in 2027"; the pulse stops for people who ask for less motion. */
.hero-launch {
  gap: 10px;
  padding: 0 0 0 16px;
  font-size: 14px;
  overflow: hidden;
  border-color: var(--border-strong);
}

.hero-launch .dot {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent);
}

.hero-launch-year {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin-left: 6px;
  padding: 6px 16px 6px 14px;
  border-left: 2px dashed var(--border-strong);
  background: var(--foreground);
  color: var(--highlight);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero-launch > span:last-child {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-launch .dot {
    animation: launch-pulse 2.4s ease-out infinite;
  }
}

@keyframes launch-pulse {
  70% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 0%, transparent);
  }

  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }
}

/* The page's glows may spread to the screen's edges, never past them into a sideways scroll
   (clip, unlike hidden, keeps the sticky parts sticky). */
main {
  overflow-x: clip;
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 40px;
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--border);
}

/* The hero's seal (review-later R355): a blue disc stuck on the corner of the hero's words, its ring
   of words turning slowly round a yellow centre with the launch year, for people who haven't asked
   for less motion. Top right on phones, beside the launch line; at the foot, right of the figures,
   on wide screens. */
.hero-copy {
  position: relative;
}

.hero-seal {
  position: absolute;
  top: -14px;
  right: 0;
  z-index: 2;
  width: 74px;
  height: 74px;
  filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--primary) 45%, transparent));
  rotate: 10deg;
}

.hero-seal svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-seal-disc {
  fill: var(--primary);
}

.hero-seal-ring {
  transform-origin: 60px 60px;
}

.hero-seal-ring text {
  fill: var(--primary-foreground);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  dominant-baseline: central;
}

.hero-seal-core {
  fill: var(--highlight);
}

.hero-seal-year {
  fill: var(--highlight-foreground);
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  text-anchor: middle;
  dominant-baseline: central;
}

@media (min-width: 1024px) {
  .hero-seal {
    top: auto;
    right: -24px;
    bottom: -6px;
    width: 116px;
    height: 116px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-seal-ring {
    animation: hero-seal-turn 24s linear infinite;
  }
}

@keyframes hero-seal-turn {
  to {
    rotate: 360deg;
  }
}

/* A faint blueprint grid behind the hero, fading out from behind the example build. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, black 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, black 15%, transparent 72%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
    padding: 64px 0 72px;
  }
}

.hero h1 {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 68px;
  }
}

.hero h1 em,
.section-title em {
  color: var(--primary);
}

/* A highlighter stroke under the headline's promise, drawn once from left to right (motion-safe),
   line by line when it wraps. */
.hero h1 em {
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 em {
    animation: hero-highlight 1.1s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

@keyframes hero-highlight {
  from {
    background-size: 0% 0.3em;
  }
}

/* The creators chapter's promise as a label stuck on the title: "Get paid for them." in yellow on the
   brand's blue, tilted a touch, so it lands at a glance (review-later R353). Where the browser ties
   animation to scrolling, it settles into its tilt as the title comes into view; with less motion,
   or without scroll timelines, it's simply there. */
#creators .section-title em {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0.02em 0.22em 0.1em;
  border-radius: 0.16em;
  background: var(--primary);
  color: var(--highlight);
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--primary) 80%, transparent);
  rotate: -2deg;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #creators .section-title em {
      animation: creators-label linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }
}

@keyframes creators-label {
  from {
    rotate: 0deg;
    scale: 0.9;
  }
}

/* The examples chapter's "with AI" as a label on its title, yellow with ink words on the ink band, the
   third of the page's title labels after chapters 03 and 05 (review-later R427). */
#examples .section-title em {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0.02em 0.22em 0.1em;
  border-radius: 0.16em;
  background: var(--highlight);
  color: var(--foreground);
  rotate: -2deg;
}

/* How it works's "works" in the brand's blue over a hand-drawn wavy underline, a different mark from
   the page's title labels, drawn in from the left as the title comes into view where the browser ties
   animation to scrolling (review-later R429). */
#how .section-title em {
  text-decoration: underline wavy var(--primary);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #how .section-title em {
      animation: how-underline linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }
}

@keyframes how-underline {
  from {
    text-decoration-color: transparent;
    text-underline-offset: 0.5em;
  }
}

/* The questions chapter's title wears a speech bubble with a question mark, blue with a yellow mark and
   tilted, for the eye only (its alt text is empty, so the heading still reads "Questions"); it pops
   in as the title scrolls into view where the browser supports it (review-later R431). */
#faq .section-title::after {
  content: '?' / '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.2em;
  border-radius: 50% 50% 50% 12%;
  background: var(--primary);
  color: var(--highlight);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: 0.08em;
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--primary) 80%, transparent);
  rotate: 8deg;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #faq .section-title::after {
      animation: faq-bubble linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }
}

@keyframes faq-bubble {
  from {
    rotate: -12deg;
    scale: 0.6;
  }
}

/* The categories chapter's "one price each" circled in yellow like a pen mark on the ink band, a loose
   ring tilted a touch; the words stay white (review-later R433). */
#categories .section-title em {
  display: inline-block;
  margin: 0.04em -0.06em;
  padding: 0.02em 0.28em 0.08em;
  border: 0.09em solid var(--highlight);
  border-radius: 50% 46% 52% 44% / 58% 50% 54% 46%;
  color: inherit;
  rotate: -2deg;
}

/* Under the worked-out unlock, a pile of yellow coins on the blue, each a little off the one under it,
   as the app's Tokens packs pile theirs: the earnings landing (review-later R447). */
.maths-pile {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin-top: 36px;
  padding-bottom: 12px;
}

.maths-pile i {
  display: block;
  width: 96px;
  height: 24px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--highlight);
  box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--foreground) 22%, transparent);
}

.maths-pile i + i {
  margin-bottom: -11px;
}

/* The coins drop onto the pile one after another as the panel scrolls into view, where the browser
   ties animation to scrolling; with less motion, or without scroll timelines, the pile is simply there
   (review-later R455). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .maths-pile i {
      animation: maths-coin-drop linear both;
      animation-timeline: view();
    }

    .maths-pile i:nth-child(1) {
      animation-range: entry 0% entry 40%;
    }

    .maths-pile i:nth-child(2) {
      animation-range: entry 10% entry 50%;
    }

    .maths-pile i:nth-child(3) {
      animation-range: entry 20% entry 60%;
    }

    .maths-pile i:nth-child(4) {
      animation-range: entry 30% entry 70%;
    }

    .maths-pile i:nth-child(5) {
      animation-range: entry 40% entry 80%;
    }

    .maths-pile i:nth-child(6) {
      animation-range: entry 50% entry 90%;
    }
  }
}

@keyframes maths-coin-drop {
  from {
    opacity: 0;
    transform: translateY(-120px);
  }
}

.maths-pile i:nth-child(2) {
  translate: 5px 0;
}

.maths-pile i:nth-child(3) {
  translate: -3px 0;
}

.maths-pile i:nth-child(4) {
  translate: 7px 0;
}

.maths-pile i:nth-child(5) {
  translate: 1px 0;
}

.maths-pile i:nth-child(6) {
  translate: -5px 0;
  rotate: -4deg;
}

/* The join chapter's promise as a label on its title too, the creators chapter's counterpart: "from the
   start" in yellow on ink, tilted the other way, so both asks to creators land at a glance
   (review-later R407). */
#join .section-title em {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0.02em 0.22em 0.1em;
  border-radius: 0.16em;
  background: var(--foreground);
  color: var(--highlight);
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--foreground) 80%, transparent);
  rotate: 2deg;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #join .section-title em {
      animation: creators-label linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }
}

.hero-lead {
  max-width: 580px;
  margin-top: 22px;
  color: var(--body);
  font-size: 18px;
  text-wrap: pretty;
}

/* The lead's three ideas marked as a reader would (review-later R377): what people show underlined in
   the brand's blue, what they sell under a yellow highlighter's swipe, and "free" on a green chip. */
.lead-mark {
  color: var(--foreground);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lead-mark-show {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.lead-mark-sell {
  padding: 0 1px;
  background: linear-gradient(transparent 52%, var(--highlight) 52%, var(--highlight) 92%, transparent 92%);
}

.lead-mark-free {
  padding: 1px 9px 2px;
  border-radius: 999px;
  background: var(--success);
  color: var(--success-foreground);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Under the hero's buttons, the promise to creators as three chips, each led by its figure: free to
   join, 50% of every unlock, 80% on buyers they bring (review-later R233). */
/* The promise to creators as three figure tiles in one row at every width: each figure big in the
   serif on its colour, its words under it (review-later R271). */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 540px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.hero-proof li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 13px 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 14px 28px -24px color-mix(in srgb, var(--foreground) 70%, transparent);
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.hero-proof-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border-radius: 13px;
  background: var(--success);
  color: var(--success-foreground);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hero-proof li {
    padding: 12px 14px 14px 12px;
    font-size: 14px;
  }

  .hero-proof-badge {
    min-width: 54px;
    height: 54px;
    font-size: 30px;
  }
}

.hero-proof-badge.is-blue {
  background: var(--primary);
  color: var(--primary-foreground);
}

.hero-proof-badge.is-yellow {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

/* The three figures as one ink ticket (review-later R347): the tiles join into a dark strip with a
   blue glow, split by dashed perforations with a notch punched at the top and foot of each, the words
   in the paper colour and the figures on their colours as before. */
.hero-proof {
  gap: 0;
  overflow: clip;
  border-radius: 18px;
  background:
    radial-gradient(
      80% 120% at 100% 0%,
      color-mix(in srgb, var(--primary) 45%, transparent),
      transparent 70%
    ),
    var(--foreground);
  box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--foreground) 90%, transparent);
}

.hero-proof li {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--primary-foreground) 88%, transparent);
}

.hero-proof li + li {
  border-left: 2px dashed color-mix(in srgb, var(--primary-foreground) 28%, transparent);
}

.hero-proof li + li::before,
.hero-proof li + li::after {
  content: '';
  position: absolute;
  left: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--background);
}

.hero-proof li + li::before {
  top: -8px;
}

.hero-proof li + li::after {
  bottom: -8px;
}

/* The example build: a free showcase on top, the locked recipe below, on a soft electric-blue
   glow that keeps to the card (the caption under it stays on paper). */
.example {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

.example::before {
  content: '';
  position: absolute;
  inset: 4% 0 16%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 55%, transparent), transparent);
  filter: blur(36px);
  pointer-events: none;
}

/* Wider than the card only where the page has room for it on both sides. */
@media (min-width: 1024px) {
  .example::before {
    inset: 4% -14% 16%;
  }
}

/* Behind the example, two more builds peek out, tilted, in two categories' colours (yellow and green,
   as on their tiles), so it reads as one of a deck of showcases (review-later R239). For the eye only. */
.example-deck {
  position: relative;
  isolation: isolate;
}

.example-deck::before,
.example-deck::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 48px -32px rgb(17 17 20 / 0.35);
}

.example-deck::before {
  background: var(--highlight);
  transform: rotate(-4deg) translate(-6px, 10px);
}

.example-deck::after {
  background: var(--success);
  transform: rotate(3deg) translate(6px, 6px);
}

@media (min-width: 1024px) {
  .example figcaption {
    margin-top: 40px;
  }

  .example-deck::before {
    transform: rotate(-6deg) translate(-22px, 16px);
  }

  .example-deck::after {
    transform: rotate(5deg) translate(22px, 10px);
  }
}

/* Buttons above the card switch the example between categories (examples.js). */
/* The example's categories as a tab bar on the card's colours, each with its tile's icon: the icon
   above the name on phones, beside it where there's room (review-later R193). */
.example-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--foreground) 45%, transparent);
}

.example-switch button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--body);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.example-switch svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 160ms ease;
}

.example-switch button:hover {
  background: var(--muted);
  color: var(--foreground);
}

.example-switch button[aria-pressed='true'] {
  background: var(--foreground);
  color: var(--card);
}

.example-switch button[aria-pressed='true'] svg {
  stroke: var(--highlight);
}

@media (min-width: 480px) {
  .example-switch button {
    flex-direction: row;
    gap: 7px;
    min-height: 44px;
    font-size: 14px;
  }

  .example-switch svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .example-switch button,
  .example-switch svg {
    transition: none;
  }
}

.example-cover > [data-art],
.example-body,
.example-recipe-meta {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.example-card.is-changing .example-cover > [data-art],
.example-card.is-changing .example-body,
.example-card.is-changing .example-recipe-meta {
  opacity: 0;
  transform: translateY(8px);
}

/* The card is dealt as it turns: it swings off to the side and comes back with the next example, like
   a card off the top of the deck, while its contents fade as before. Only with motion allowed; the
   script turns straight away with less motion (review-later R453). */
@media (prefers-reduced-motion: no-preference) {
  .example-card {
    transition:
      translate 180ms cubic-bezier(0.5, 0, 0.75, 0),
      rotate 180ms cubic-bezier(0.5, 0, 0.75, 0);
  }

  .example-card.is-changing {
    translate: 36px -10px;
    rotate: 5deg;
  }
}

/* Websites: a page with a headline, a button and a picture. */
.art-site {
  position: absolute;
  inset: 22% 10% -8% 10%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px 12px 0 0;
  background: var(--card);
  box-shadow: 0 12px 30px rgb(17 17 20 / 0.25);
}

.art-dots {
  display: flex;
  grid-column: 1 / -1;
  gap: 5px;
}

.art-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}

/* The ceramics studio's site in small (review-later R315): its headline in the serif, a blue button,
   and a shelf of three pots, a vase, a tall one and a bowl, under the sun. */
.art-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.art-title {
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.art-title em {
  color: var(--primary);
}

.art-headline b {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.art-picture {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding-bottom: 14%;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 26%, var(--highlight) 0 16%, transparent 17%),
    linear-gradient(to top, var(--border-strong) 0 14%, var(--muted) 14%);
}

.art-pot {
  width: 24%;
  aspect-ratio: 3 / 4;
  border-radius: 38% 38% 30% 30% / 30% 30% 22% 22%;
  background: var(--highlight-foreground);
}

.art-pot.is-tall {
  width: 18%;
  aspect-ratio: 1 / 2;
  border-radius: 40% 40% 24% 24% / 18% 18% 12% 12%;
  background: var(--primary);
}

.art-pot.is-bowl {
  width: 28%;
  aspect-ratio: 2 / 1;
  border-radius: 6% 6% 50% 50% / 10% 10% 90% 90%;
  background: var(--foreground);
}

/* Images: the tarot deck in small (review-later R319), three cards fanned from the cover's foot,
   each an ink card with a thin yellow frame and its sign: the moon, the sun in the middle, the star. */
.art-gallery {
  position: absolute;
  inset: 18% 10% -10% 10%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.art-card {
  position: relative;
  width: 30%;
  aspect-ratio: 5 / 8;
  margin: 0 -3%;
  border-radius: 10px;
  background: var(--foreground);
  box-shadow: 0 12px 26px rgb(17 17 20 / 0.3);
  transform-origin: 50% 100%;
}

/* The frame, inset from the card's edge. */
.art-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px solid color-mix(in srgb, var(--highlight) 70%, transparent);
  border-radius: 6px;
}

.art-card b {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
}

.art-card.is-moon {
  rotate: -12deg;
  translate: 4% 6%;
  background: var(--primary-hover);
}

/* A crescent: a yellow disc with the card's blue taken out of it. */
.art-card.is-moon b {
  background:
    radial-gradient(circle at 70% 38%, var(--primary-hover) 0 48%, transparent 49%), var(--highlight);
}

.art-card.is-sun {
  z-index: 1;
}

.art-card.is-sun b {
  width: 40%;
  background: var(--highlight);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--highlight) 30%, transparent);
}

.art-card.is-star {
  rotate: 12deg;
  translate: -4% 6%;
  background: var(--highlight);
}

.art-card.is-star::before {
  border-color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

/* A four-pointed star. */
.art-card.is-star b {
  border-radius: 0;
  background: var(--primary);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* Games: the platformer itself, in small (review-later R325): a level on ink under a field of faint stars,
   platforms with a lit edge, two coins, the player (a white block with eyes) mid-jump on a dashed yellow
   arc to the next platform, the goal flag on the highest one, and the score and lives along the top. */
.art-game {
  position: absolute;
  inset: 22% 10% -8% 10%;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--card) 22%, transparent) 1px, transparent 1.6px) 0 0 /
      22px 22px,
    var(--foreground);
  box-shadow: 0 12px 30px rgb(17 17 20 / 0.25);
}

.art-game i {
  position: absolute;
}

.art-platform {
  height: 10px;
  border-radius: 4px;
  background: var(--primary);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--card) 40%, transparent);
}

.art-platform:nth-child(1) {
  bottom: 14%;
  left: 6%;
  width: 34%;
}

.art-platform:nth-child(2) {
  bottom: 38%;
  left: 46%;
  width: 22%;
}

.art-platform:nth-child(3) {
  bottom: 60%;
  left: 74%;
  width: 22%;
}

.art-coin {
  width: 11px;
  height: 11px;
  border: 2px solid var(--highlight-foreground);
  border-radius: 50%;
  background: var(--highlight);
}

.art-coin:nth-of-type(4) {
  bottom: 52%;
  left: 54%;
}

.art-coin:nth-of-type(5) {
  bottom: 74%;
  left: 64%;
}

/* The player: a white block with two eyes looking ahead, a yellow glow under it. */
.art-player {
  bottom: 33%;
  left: 22%;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 58% 38%, var(--foreground) 2px, transparent 2.6px),
    radial-gradient(circle at 84% 38%, var(--foreground) 2px, transparent 2.6px), var(--card);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--highlight) 30%, transparent);
  rotate: -8deg;
}

/* The jump: the top of a dashed ellipse from the player to the middle platform. */
.art-arc {
  bottom: calc(38% + 10px);
  left: 30%;
  width: 22%;
  height: 26%;
  border: 2px dashed var(--highlight);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.art-flag {
  bottom: calc(60% + 10px);
  left: 89%;
  width: 2px;
  height: 20%;
  background: var(--card);
}

.art-flag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 14px;
  height: 11px;
  background: var(--highlight);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The jump's frames (review-later R331): the player drawn again along the arc as faint outlines, and
   "+10" beside the coin it's heading for. The player hops on the spot three times when motion is
   allowed, then rests. */
.art-ghost {
  width: 22px;
  height: 22px;
  border: 1.5px solid color-mix(in srgb, var(--card) 55%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--card) 18%, transparent);
}

/* On the arc (the top of an ellipse 22% wide and 26% high), a little after the start and past the top. */
.art-ghost:nth-of-type(9) {
  bottom: calc(38% + 10px + 23% - 11px);
  left: calc(35% - 11px);
  rotate: 4deg;
}

.art-ghost:nth-of-type(10) {
  bottom: calc(38% + 10px + 18% - 11px);
  left: calc(48% - 11px);
  rotate: 14deg;
}

.art-points {
  position: absolute;
  bottom: calc(52% + 2px);
  left: calc(54% + 16px);
  color: var(--highlight);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .example-card [data-art='games']:not([hidden]) .art-player {
    animation: player-hop 0.9s cubic-bezier(0.3, 0, 0.3, 1) 3;
  }
}

@keyframes player-hop {
  45% {
    translate: 0 -14px;
  }
}

.art-hud {
  position: absolute;
  top: 9px;
  right: 12px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  color: var(--highlight);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.art-lives {
  color: var(--card);
  letter-spacing: 0.05em;
}

.example-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 24px 48px -32px rgb(17 17 20 / 0.35);
}

.example-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 18px;
  background:
    radial-gradient(circle at 80% 15%, rgb(74 96 255 / 0.55), transparent 55%), var(--cover-gradient);
}

.example-window {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 8px;
  inset: 22% 10% -8% 10%;
  border-radius: 12px 12px 0 0;
  background: var(--card);
  box-shadow: 0 12px 30px rgb(17 17 20 / 0.25);
  padding: 14px;
}

/* The apps example's cover is the invoice tracker in small (review-later R309): a header with a
   "+ New" button, then three invoices, each a client's dot, a name line and its state as a pill. */
.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  color: var(--foreground);
}

.app-head b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}

.app-new {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.app-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.app-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
}

.app-dot.is-yellow {
  background: var(--highlight);
}

.app-dot.is-ink {
  background: var(--foreground);
}

.app-name {
  flex: 1;
  max-width: 55%;
  height: 7px;
  border-radius: 4px;
  background: var(--muted);
}

.app-name.is-short {
  max-width: 38%;
}

.app-name.is-mid {
  max-width: 46%;
}

.app-pill {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.app-pill.is-paid {
  background: var(--success);
  color: var(--success-foreground);
}

.app-pill.is-due {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.app-pill.is-sent {
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--primary);
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-free {
  background: var(--success);
  color: var(--success-foreground);
}

.badge-locked {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.example-cover .badge {
  position: relative;
  z-index: 1;
}

.example-body {
  padding: 18px 20px 16px;
}

.example-category {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
}

.example-title {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.example-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.example-tools li {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--body);
  font-size: 13px;
}

/* The example's recipe is the ticket a buyer would tear off, as in the app: on the brand's blue, under
   a perforated edge with a notch cut into the card either side, its price in yellow (review-later
   R251). */
.example-recipe {
  position: relative;
  padding: 18px 20px 20px;
  border-top: 2px dashed color-mix(in srgb, var(--primary-foreground) 45%, var(--primary));
  background: var(--primary);
  color: var(--primary-foreground);
}

.example-recipe::before,
.example-recipe::after {
  content: '';
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--background);
}

.example-recipe::before {
  left: -13px;
}

.example-recipe::after {
  right: -13px;
}

.example-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.example-recipe-title {
  font-weight: 700;
}

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

/* Each step is its number in a light disc, its words a locked bar and a small padlock at the end
   (review-later R303). */
.example-lines li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.example-lines b {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-foreground) 18%, transparent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* The step numbers as the app's unlocked recipe draws them: tiles in the brand's colours in turn,
   tilted a touch and set in the serif (white, yellow, ink on the recipe's blue), a picture of the
   journey a buyer unlocks (review-later R443). */
.example-lines b {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--card);
  color: var(--primary);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  box-shadow: 0 8px 14px -10px rgb(17 17 20 / 0.8);
  rotate: -6deg;
}

.example-lines li:nth-child(2) b {
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 5deg;
}

.example-lines li:nth-child(3) b {
  background: var(--foreground);
  color: var(--highlight);
}

.example-lines li::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: color-mix(in srgb, var(--primary-foreground) 70%, transparent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Empty bars with a light passing over them three times, then still (WCAG 2.2.2): the recipe hasn't
   arrived yet. Three widths wide, so both ends of the sweep and the bar at rest are plain. */
.example-lines i {
  height: 9px;
  border-radius: 4px;
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-foreground) 28%, transparent) 35%,
    color-mix(in srgb, var(--primary-foreground) 60%, transparent) 50%,
    color-mix(in srgb, var(--primary-foreground) 28%, transparent) 65%
  );
  background-size: 300% 100%;
  background-position: 0 0;
  animation: shimmer 2.4s ease-in-out 0.6s 3;
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.example-lines li:nth-child(1) i {
  flex: 0 1 100%;
}

.example-lines li:nth-child(2) i {
  flex: 0 1 82%;
}

.example-lines li:nth-child(3) i {
  flex: 0 1 60%;
}

.example-lines .example-more {
  order: 1;
  margin-left: auto;
  padding-left: 8px;
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* How many more steps follow, as a yellow chip with two more cards stacked behind it, so the locked
   rest of the recipe reads as a pile at a glance (review-later R465). */
.example-lines .example-more {
  position: relative;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 9px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-weight: 700;
  rotate: -3deg;
  box-shadow:
    4px -4px 0 -1px var(--card),
    4px -4px 0 0 var(--primary),
    8px -8px 0 -1px color-mix(in srgb, var(--card) 70%, var(--primary)),
    8px -8px 0 0 var(--primary);
}

.example-more:empty {
  display: none;
}

.example-recipe-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  color: var(--primary-foreground);
  font-size: 13px;
}

.example-price {
  color: var(--highlight);
  font-weight: 700;
}

.example figcaption {
  position: relative; /* above the deck's cards behind the example */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 28px;
  color: var(--muted-foreground);
  font-size: 13px;
  text-align: center;
}

/* The examples take turns by themselves: a yellow line fills under the picked one, then the next
   comes up. Hovering or focusing the example holds it, the Pause button stops it, and picking one
   yourself ends the turns; with less motion they don't start (review-later R203). */
.example-switch button {
  position: relative;
}

.example-switch.is-auto button[aria-pressed='true']::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 5px;
  left: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--highlight);
  transform-origin: left;
  animation: example-turn var(--example-turn, 6s) linear forwards;
}

/* Held while the card or the tabs are pointed at, or a tab has keyboard focus (not the Pause
   button itself, so Play lets the turn go on at once). */
.example:has(.example-card:hover, .example-switch:hover, .example-switch button:focus-visible)
  .example-switch.is-auto
  button::after,
.example-switch.is-auto.is-paused button::after {
  animation-play-state: paused;
}

@keyframes example-turn {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .example-switch.is-auto button::after {
    display: none;
  }
}

.example-pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.example-pause:hover {
  border-color: var(--foreground);
}

.example-pause::before {
  content: '';
  width: 8px;
  height: 10px;
  border-inline: 3px solid currentColor;
}

.example-pause[data-paused='true']::before {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* How it works */
.steps {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.steps .card {
  counter-increment: step;
}

/* Each step is labelled "Step 1" in a pill on the seam between its picture and its text, and its
   number stands big, italic and faint behind its text, like a chapter's. Both are for the eye only:
   the list already counts the steps. */
.steps .card::before {
  content: 'Step ' counter(step);
  content: 'Step ' counter(step) / '';
  position: absolute;
  top: 136px;
  left: 20px;
  z-index: 1;
  padding: 6px 12px;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--foreground);
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.steps .card {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

/* The text fills the card's foot, so the three numbers line up across a row; the number sits behind
   the text it belongs to. */
.steps .card p {
  position: relative;
  z-index: 1;
  flex: 1;
}

.steps .card p::after {
  content: counter(step);
  content: counter(step) / '';
  position: absolute;
  right: -6px;
  bottom: -40px;
  z-index: -1;
  color: color-mix(in srgb, var(--primary) 14%, transparent);
  font-family: var(--serif);
  font-size: 128px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.steps .step-art {
  margin-bottom: 30px;
}

/* Each step shows one example moving on: the free showcase, the recipe behind it, an unlock. */
/* The card doesn't clip, so the arrow between steps can sit across the gap; its picture rounds its
   own top corners instead. */
.steps .card {
  position: relative;
}

.step-art {
  display: grid;
  place-items: center;
  height: 150px;
  margin: -24px -24px 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  border-radius: 13px 13px 0 0;
}

/* The three steps read as one sequence: a blue arrow in the gap before steps 2 and 3, pointing down
   on phones and across from tablet width. For the eye only. */
.steps .card + .card::after {
  content: '↓';
  content: '↓' / '';
  position: absolute;
  top: -22px;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--background);
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .steps .card + .card::after {
    content: '→';
    content: '→' / '';
    top: 61px;
    left: -26px;
    transform: none;
  }
}

.step-art-show {
  background: var(--muted);
}

.step-art-recipe {
  background: var(--highlight);
}

.step-art-earn {
  align-content: center;
  gap: 14px;
  background: var(--foreground);
}

.steps .card:nth-child(3)::before {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

/* The step labels as tags stuck on the seam, big in the serif and tilted, each on its own colour:
   step 1 on blue, step 2 on ink, step 3 on yellow, with a paper edge and a shadow (review-later R373). */
.steps .card::before {
  top: 124px;
  left: 16px;
  padding: 7px 16px 8px;
  border-width: 3px;
  border-radius: 12px;
  background: var(--primary);
  box-shadow: 0 12px 20px -12px color-mix(in srgb, var(--foreground) 80%, transparent);
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  rotate: -5deg;
}

.steps .card:nth-child(2)::before {
  background: var(--foreground);
  rotate: 4deg;
}

.steps .card:nth-child(3)::before {
  rotate: -3deg;
}

.mini-card {
  width: 54%;
  max-width: 165px;
  translate: 8px 0;
  padding: 7px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 30px -18px rgb(17 17 20 / 0.5);
  transform: rotate(-3deg);
}

.mini-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  padding: 26px 12px 0;
  border-radius: 8px;
  background: var(--cover-gradient);
}

.mini-cover i {
  display: block;
  width: 70%;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.75);
}

.mini-cover i:nth-of-type(2) {
  width: 50%;
}

.mini-cover i:nth-of-type(3) {
  width: 30%;
  height: 9px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--card);
}

.mini-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--success);
  color: var(--success-foreground);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mini-title {
  display: block;
  width: 70%;
  height: 7px;
  margin: 9px 2px 6px;
  border-radius: 4px;
  background: var(--foreground);
}

.mini-chips {
  display: flex;
  gap: 4px;
  margin: 0 2px 2px;
}

.mini-chips b {
  width: 24px;
  height: 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

/* The three pictures follow one real example through the steps, the yoga studio's booking site
   from the page's example recipe (review-later R295): its title and tools on the showcase, its
   public step titles on the locked recipe (the outline is free to see; the prompts stay locked).
   For the eye only, like the pictures. */
.steps .mini-card {
  width: 64%;
  max-width: 210px;
}

.steps .mini-cover {
  aspect-ratio: 2.4 / 1;
  padding-top: 24px;
}

/* Step 1's cover is the yoga studio's booking page (review-later R341): a yellow sun for the
   studio's mark, the page's heading, and three class times, the middle one booked in yellow under a
   white pointer. For the eye only, like the rest of the picture. */
.steps .mini-sun {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--highlight);
  box-shadow: 0 0 0 4px rgb(255 241 168 / 0.28);
}

.steps .mini-slots {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.steps .mini-slots b {
  position: relative;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.22);
  color: var(--primary-foreground);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.25;
}

.steps .mini-slots .is-booked {
  background: var(--highlight);
  color: var(--highlight-foreground);
  box-shadow: 0 6px 12px -6px rgb(17 17 20 / 0.6);
}

.steps .mini-slots .is-booked::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: -10px;
  width: 11px;
  height: 14px;
  background: var(--card);
  clip-path: polygon(0 0, 100% 64%, 58% 68%, 80% 100%, 62% 100%, 42% 74%, 0 92%);
}

.steps .mini-title {
  width: auto;
  height: auto;
  margin: 8px 2px 6px;
  border-radius: 0;
  background: none;
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.15;
}

.steps .mini-chips b {
  width: auto;
  height: auto;
  padding: 1px 6px;
  color: var(--body);
  font-size: 8px;
  font-weight: 700;
}

.steps .mini-recipe .mini-step i {
  height: auto;
  overflow: hidden;
  border-radius: 0;
  background: none;
  color: var(--primary-foreground);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The recipe in "How it works" is the ticket a buyer tears off, as in the app and the hero: on the
   brand's blue, a perforation under its head with a notch either side in the picture's yellow
   (review-later R253). */
.mini-recipe {
  position: relative;
  width: 62%;
  max-width: 220px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--primary) 80%, transparent);
  transform: rotate(2deg);
}

.mini-recipe::before,
.mini-recipe::after {
  content: '';
  position: absolute;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--highlight);
}

.mini-recipe::before {
  left: -6px;
}

.mini-recipe::after {
  right: -6px;
}

.mini-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--primary-foreground) 45%, transparent);
  font-size: 11px;
  font-weight: 800;
}

.mini-recipe .mini-step b {
  color: var(--highlight);
}

.mini-recipe .mini-step i {
  background: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
}

.mini-lock {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* How it works' recipe numbers its steps on the tilted tiles the recipes, questions and ending use:
   white, yellow and ink on the recipe's blue (review-later R461). */
.steps .mini-recipe .mini-step b {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--card);
  color: var(--primary);
  font-size: 12px;
  line-height: 1;
  rotate: -6deg;
  box-shadow: 0 8px 14px -10px rgb(17 17 20 / 0.8);
}

.steps .mini-recipe .mini-step:nth-of-type(3) b {
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 5deg;
}

.steps .mini-recipe .mini-step:nth-of-type(4) b {
  background: var(--foreground);
  color: var(--highlight);
}

.mini-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mini-step b {
  color: var(--primary);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
}

.mini-step i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

.mini-step:last-child i {
  flex: 0.6;
}

.mini-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 12px 24px -14px rgb(0 0 0 / 0.6);
}

.mini-coin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow:
    inset 0 0 0 3px var(--highlight),
    inset 0 0 0 5px var(--primary);
}

/* Step 3's earnings card: white, tilted, its head in small capitals, then the bars and a coin pile. */
.mini-earn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 0;
  border-radius: 12px 12px 0 0;
  background: var(--card);
  box-shadow: 0 14px 28px -16px rgb(0 0 0 / 0.6);
  rotate: -2deg;
}

.mini-earn-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--foreground);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mini-earn-head i {
  color: var(--muted-foreground);
  font-style: normal;
  font-weight: 600;
}

.mini-earn-body {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.mini-pile {
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: 2px;
}

.mini-pile i {
  width: 22px;
  height: 7px;
  margin-top: -2px;
  border: 1.5px solid var(--highlight-foreground);
  border-radius: 50%;
  background: var(--highlight);
}

.mini-pile i:nth-child(2) {
  translate: 2px 0;
}

.mini-pile i:nth-child(3) {
  translate: -1px 0;
}

.mini-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 44px;
}

.mini-bars i {
  width: 11px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}

.mini-bars i:nth-child(1) {
  height: 30%;
}

.mini-bars i:nth-child(2) {
  height: 45%;
}

.mini-bars i:nth-child(3) {
  height: 38%;
}

.mini-bars i:nth-child(4) {
  height: 60%;
}

.mini-bars i:nth-child(5) {
  height: 78%;
}

.mini-bars i:nth-child(6) {
  height: 100%;
  background: var(--highlight);
}

.card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.card p {
  margin-top: 8px;
  color: var(--body);
}

/* For creators */
/* For creators: beside the heading, an example recipe that writes itself out: its steps arrive one
   by one and the prompt types into its card, once, when it comes into view. Without JavaScript or
   with less motion it's simply there; the waiting state is only ever set by recipe-demo.js
   (review-later R197). */
.creators-head {
  display: grid;
  gap: 32px;
}

@media (min-width: 1024px) {
  .creators-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: center;
    gap: 56px;
  }
}

.recipe-demo {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--foreground) 45%, transparent);
}

.recipe-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The example is an open recipe, so it wears the app's unlocked ticket: its head on the success green
   with an open-lock seal, over a perforated edge with a notch cut into the card either side
   (review-later R259). */
.recipe-demo {
  overflow: hidden;
}

.recipe-demo-ticket {
  position: relative;
  margin: -20px -20px 18px;
  padding: 20px 20px 18px;
  border-bottom: 2px dashed color-mix(in srgb, var(--success-foreground) 30%, transparent);
  background: var(--success);
}

.recipe-demo-ticket::before,
.recipe-demo-ticket::after {
  content: '';
  position: absolute;
  bottom: -13px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--background);
}

.recipe-demo-ticket::before {
  left: -13px;
}

.recipe-demo-ticket::after {
  right: -13px;
}

.recipe-demo-ticket .badge-free {
  background: var(--card);
}

.recipe-demo-ticket .recipe-demo-count {
  color: var(--success-foreground);
}

.recipe-demo-ticket .recipe-demo-title {
  margin: 12px 0 0;
  padding-right: 64px;
}

.recipe-demo-seal {
  position: absolute;
  right: 20px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--success-foreground);
  color: var(--success);
  box-shadow: 0 0 0 4px var(--success);
  rotate: -12deg;
}

.recipe-demo-seal svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recipe-demo-count {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
}

.recipe-demo-title {
  margin: 12px 0 18px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.recipe-demo-steps {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: demo-step;
}

/* The rail the numbered steps hang on, as in the app's recipes. */
.recipe-demo-steps::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 13px;
  width: 2px;
  background: var(--border);
}

.recipe-demo-steps li {
  position: relative;
  display: grid;
  gap: 6px;
  padding-left: 42px;
  counter-increment: demo-step;
  transition:
    clip-path 450ms ease,
    transform 450ms ease;
}

.recipe-demo-steps li::before {
  content: counter(demo-step, decimal-leading-zero) / '';
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 13px;
}

/* The example recipe numbers its steps as the app's unlocked recipe does: tilted tiles in the brand's
   colours in turn (blue, yellow, ink, green), on a dashed blue path (review-later R463). */
.recipe-demo-steps::before {
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--primary) 45%, transparent) 0 6px,
    transparent 6px 12px
  );
}

.recipe-demo-steps li::before {
  border-radius: 9px;
  rotate: -6deg;
  box-shadow: 0 8px 14px -10px rgb(17 17 20 / 0.7);
}

.recipe-demo-steps li:nth-child(4n + 2)::before {
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 5deg;
}

.recipe-demo-steps li:nth-child(4n + 3)::before {
  background: var(--foreground);
  color: var(--highlight);
}

.recipe-demo-steps li:nth-child(4n + 4)::before {
  background: var(--success);
  color: var(--success-foreground);
  rotate: 5deg;
}

.recipe-demo-step {
  font-size: 15px;
  font-weight: 700;
}

.recipe-demo-note {
  color: var(--body);
  font-size: 14px;
}

.recipe-demo-code {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--foreground);
  color: var(--primary-foreground);
}

.recipe-demo-label {
  color: var(--highlight);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-demo-prompt {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}

/* The prompt as a little AI tool's window: a bar with three dots in the brand's colours and the
   "Exactly as used" label, and the prompt after a yellow ">" like a line typed into it. For the eye
   only; the prompt's words are unchanged (review-later R395). */
.recipe-demo-code {
  gap: 12px;
  padding: 0 16px 16px;
  box-shadow: 0 18px 30px -20px color-mix(in srgb, var(--foreground) 80%, transparent);
}

.recipe-demo-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -16px;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-foreground) 14%, transparent);
}

.recipe-demo-label::before {
  content: '' / '';
  flex: none;
  width: 44px;
  height: 10px;
  background:
    radial-gradient(circle at 5px 5px, var(--primary-foreground) 4.5px, transparent 5px),
    radial-gradient(circle at 22px 5px, var(--highlight) 4.5px, transparent 5px),
    radial-gradient(circle at 39px 5px, var(--primary) 4.5px, transparent 5px);
}

.recipe-demo-prompt::before {
  content: '> ' / '';
  color: var(--highlight);
  font-weight: 700;
}

.recipe-demo figcaption {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 13px;
}

/* Waiting steps are clipped away rather than faded, so their text is never half see-through. */
.recipe-demo.is-waiting .recipe-demo-steps li {
  clip-path: inset(0 0 100% 0);
  transform: translateY(10px);
}

.recipe-demo.is-playing .recipe-demo-steps li:nth-child(2) {
  transition-delay: 250ms;
}

.recipe-demo.is-playing .recipe-demo-steps li:nth-child(3) {
  transition-delay: 500ms;
}

.recipe-demo-rest {
  color: transparent;
}

/* The caret while the prompt types, blinking a few times at most (WCAG 2.2.2). */
.recipe-demo-prompt .is-typing::after {
  content: '' / '';
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-right: -0.55em; /* over the next letter, so the text doesn't shift as it types */
  vertical-align: text-bottom;
  background: var(--highlight);
  animation: demo-caret 0.9s steps(1) 6;
}

@keyframes demo-caret {
  50% {
    opacity: 0;
  }
}

.facts {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.fact-figure {
  display: block;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.fact-title {
  margin-top: 10px;
}

/* Each fact's small chart, drawn only from the numbers in its own text. They grow in once when they
   come into view (facts.js); without JavaScript, or with less motion, they're simply drawn. */
.facts .card {
  display: flex;
  flex-direction: column;
}

.fact-visual {
  margin-top: auto;
  padding-top: 22px;
  font-size: 12px;
  font-weight: 700;
}

.fact-visual i,
.podium-step {
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.split-row {
  display: grid;
  grid-template-columns: 76px 1fr 34px;
  align-items: center;
  gap: 10px;
  color: var(--muted-foreground);
}

.split-row + .split-row {
  margin-top: 8px;
}

.split-row b {
  color: var(--foreground);
  text-align: right;
}

.split-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted);
}

.split-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transform-origin: left;
}

.split-80 {
  width: 80%;
}

.split-50 {
  width: 50%;
  opacity: 0.45;
}

.rise-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
}

.rise-bars i {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: var(--primary);
  transform-origin: bottom;
}

.rise-bars i:nth-child(1) {
  height: 20%;
  opacity: 0.35;
}

.rise-bars i:nth-child(2) {
  height: 40%;
  opacity: 0.5;
}

.rise-bars i:nth-child(3) {
  height: 60%;
  opacity: 0.65;
}

.rise-bars i:nth-child(4) {
  height: 80%;
  opacity: 0.8;
}

.rise-bars i:nth-child(5) {
  height: 100%;
}

.rise-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted-foreground);
}

.rise-ends b:last-child {
  color: var(--primary);
}

.fact-podium {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 78px;
}

.podium-step {
  display: flex;
  flex: 1;
  justify-content: center;
  padding-top: 7px;
  border-radius: 8px 8px 0 0;
  background: var(--muted);
  color: var(--foreground);
  transform-origin: bottom;
}

.podium-1 {
  height: 100%;
  background: var(--primary);
  color: var(--primary-foreground);
}

.podium-2 {
  height: 72%;
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.podium-3 {
  height: 52%;
}

.fact-visual.is-waiting .split-bar i {
  transform: scaleX(0);
}

.fact-visual.is-waiting .rise-bars i,
.fact-visual.is-waiting .podium-step {
  transform: scaleY(0);
}

/* The three facts as ink cards, their figures in yellow and their charts in yellow and faint paper,
   so the numbers creators came for land as the chapter's punchline (review-later R231). */
.facts .card {
  border-color: transparent;
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--primary) 38%, transparent), transparent 70%),
    var(--foreground);
  color: var(--primary-foreground);
}

.facts .fact-figure,
.facts .rise-ends b:last-child {
  color: var(--highlight);
}

.facts .card p,
.facts .split-row,
.facts .rise-ends {
  color: color-mix(in srgb, var(--primary-foreground) 82%, transparent);
}

.facts .split-row b {
  color: var(--primary-foreground);
}

.facts .split-bar {
  background: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
}

.facts .split-bar i,
.facts .rise-bars i {
  background: var(--highlight);
}

.facts .podium-step {
  background: color-mix(in srgb, var(--primary-foreground) 18%, transparent);
  color: var(--primary-foreground);
}

.facts .podium-1 {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.facts .podium-2 {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* The three facts each in their own colour, like the app's number tiles (review-later R317): the
   share on ink, the price rise on the brand's blue, the contest prize on yellow, each chart in colours
   that read on its card. */
.facts .card:nth-child(2) {
  background:
    radial-gradient(
      80% 60% at 100% 0%,
      color-mix(in srgb, var(--highlight) 22%, transparent),
      transparent 70%
    ),
    var(--primary);
}

.facts .card:nth-child(2) p,
.facts .card:nth-child(2) .rise-ends {
  color: var(--primary-foreground);
}

.facts .card:nth-child(3) {
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--card) 55%, transparent), transparent 70%),
    var(--highlight);
  color: var(--highlight-foreground);
}

.facts .card:nth-child(3) .fact-figure {
  color: var(--foreground);
}

.facts .card:nth-child(3) .fact-title {
  color: var(--foreground);
}

.facts .card:nth-child(3) p {
  color: var(--highlight-foreground);
}

.facts .card:nth-child(3) .podium-step {
  background: var(--card);
  color: var(--foreground);
}

.facts .card:nth-child(3) .podium-1 {
  background: var(--foreground);
  color: var(--highlight);
}

.facts .card:nth-child(3) .podium-2 {
  background: var(--primary);
  color: var(--primary-foreground);
}

.points {
  display: grid;
  gap: 14px 16px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The three promises to creators as tiles, each with a little picture of what it means (Day 1 in the
   feed, a free v2 for buyers, a showcase anyone can see), drawn in CSS and hidden from screen readers. */
.points li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--body);
}

.points strong {
  color: var(--foreground);
}

.point-text {
  padding: 18px 20px 20px;
}

/* Each promise leads with its words big in the serif on a line of their own, the rest under them
   (review-later R381). */
.point-text strong {
  display: block;
  margin-bottom: 6px;
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.points li:nth-child(1) .point-text strong::after,
.points li:nth-child(2) .point-text strong::after,
.points li:nth-child(3) .point-text strong::after {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--foreground);
}

.points li:nth-child(2) .point-text strong::after {
  background: var(--highlight-foreground);
}

.points li:nth-child(3) .point-text strong::after {
  background: var(--primary);
}

/* Each promise wears its picture's colour all the way down, ink, yellow and blue like the facts above,
   its words in that colour's ink, the picture parted from them by a dashed tear line, and the three
   tilted in turn like cards laid down (review-later R437). */
.points li:nth-child(1) {
  border-color: var(--foreground);
  background: var(--foreground);
  color: color-mix(in srgb, var(--primary-foreground) 82%, transparent);
  rotate: -1deg;
}

.points li:nth-child(2) {
  border-color: var(--highlight);
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 1deg;
}

.points li:nth-child(3) {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  rotate: -1deg;
}

.points li:nth-child(1) .point-text strong,
.points li:nth-child(3) .point-text strong {
  color: var(--primary-foreground);
}

.points li:nth-child(2) .point-text strong {
  color: var(--foreground);
}

.points li:nth-child(1) .point-text strong::after,
.points li:nth-child(3) .point-text strong::after {
  background: var(--highlight);
}

.points li:nth-child(2) .point-text strong::after {
  background: var(--foreground);
}

.points li .point-art {
  border-bottom: 2px dashed color-mix(in srgb, currentColor 35%, transparent);
}

.point-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 104px;
  border-bottom: 1px solid var(--border);
}

/* Launch day on ink, the first of the facts' three colours (ink, yellow, blue): a yellow-topped Day 1 page
   with three sparks at its corner, beside a yellow "In the feed" chip with a blue live dot. */
.point-art-launch {
  background: var(--foreground);
}

.point-art-launch .point-day {
  position: relative;
  border-color: var(--foreground);
  border-top-color: var(--highlight);
}

.point-spark {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 26px;
  height: 26px;
}

.point-spark i {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--highlight);
  transform-origin: 50% 100%;
}

.point-spark i:nth-child(1) {
  transform: translate(4px, -14px) rotate(-10deg);
}

.point-spark i:nth-child(2) {
  transform: translate(14px, -8px) rotate(40deg);
}

.point-spark i:nth-child(3) {
  transform: translate(18px, 4px) rotate(85deg);
}

.point-art-launch .point-chip-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--highlight);
  color: var(--foreground);
}

.point-art-launch .point-chip-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.point-art-keep {
  background: var(--highlight);
}

.point-art-public {
  background: var(--primary);
}

.point-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 64px;
  border: 1px solid var(--border);
  border-top: 10px solid var(--primary);
  border-radius: 10px;
  background: var(--card);
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 10px 20px -14px rgb(17 17 20 / 0.4);
  transform: rotate(-6deg);
}

.point-day small {
  color: var(--muted-foreground);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.point-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--card);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 14px -10px rgb(17 17 20 / 0.4);
}

.point-version {
  padding: 6px 12px;
  border: 1px dashed var(--highlight-foreground);
  border-radius: 10px;
  color: var(--highlight-foreground);
  font-size: 13px;
  font-weight: 700;
}

.point-version-new {
  border: 0;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 8px 18px -12px rgb(17 17 20 / 0.45);
}

.point-arrow {
  color: var(--highlight-foreground);
  font-size: 20px;
  font-weight: 700;
}

.point-window {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 150px;
  padding: 12px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 14px 28px -16px rgb(0 0 0 / 0.5);
  transform: rotate(3deg);
}

.point-chip-free {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--success);
  color: var(--success-foreground);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
}

.point-line {
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
}

.point-line-short {
  width: 60%;
}

@media (prefers-reduced-motion: no-preference) {
  .points li .point-day,
  .points li .point-window {
    transition: transform 0.3s ease;
  }

  .points li:hover .point-day {
    transform: rotate(0deg) translateY(-3px);
  }

  .points li:hover .point-window {
    transform: rotate(0deg) translateY(-3px);
  }
}

/* The honest maths */
.maths {
  display: grid;
  gap: 24px;
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

@media (min-width: 900px) {
  .maths {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 40px;
    padding: 32px;
  }
}

.maths h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
}

.maths p {
  margin-top: 10px;
  color: var(--body);
}

/* The worked-out unlock opens on a blue panel: its title in paper, its note in paper, and the two
   sales' notifications laid on the blue, opposite the white table (review-later R383). */
.maths > div:first-child {
  margin: -24px -24px 0;
  padding: 24px 24px 28px;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(
      90% 80% at 0% 100%,
      color-mix(in srgb, var(--highlight) 22%, transparent),
      transparent 70%
    ),
    var(--primary);
  color: var(--primary-foreground);
}

@media (min-width: 900px) {
  .maths > div:first-child {
    margin: -32px 0 -32px -32px;
    padding: 32px;
    border-radius: 20px 0 0 20px;
  }
}

.maths > div:first-child h3,
.maths > div:first-child p {
  color: var(--primary-foreground);
}

/* The notifications keep their own ink words on the blue. */
.maths > div:first-child .maths-toast {
  color: var(--foreground);
}

/* Beside the worked-out table, the two sales it works out arrive as the notifications a creator gets,
   with the table's own figures: a picture of the table, so it's hidden from screen readers. */
.maths-toasts {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 28px;
}

.maths-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 360px);
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 18px 32px -22px color-mix(in srgb, var(--foreground) 55%, transparent);
  rotate: -1.5deg;
}

.maths-toast.is-referred {
  width: min(100% - 24px, 360px);
  margin-left: 24px;
  border-color: transparent;
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 1.5deg;
}

.maths-toast .mini-coin {
  width: 30px;
  height: 30px;
  box-shadow:
    inset 0 0 0 6px var(--highlight),
    inset 0 0 0 10px var(--primary);
}

.maths-toast.is-referred .mini-coin {
  box-shadow:
    inset 0 0 0 6px var(--card),
    inset 0 0 0 10px var(--primary);
}

.maths-toast-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
}

.maths-toast-text small {
  color: var(--body);
  font-size: 12px;
}

.maths-toast.is-referred .maths-toast-text small {
  color: inherit;
}

.maths-toast-amount {
  color: var(--primary);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.maths-toast.is-referred .maths-toast-amount {
  color: var(--foreground);
}

/* They slide in as the card comes into view, the referred one a moment later; never faded. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .maths-toast {
      animation: toast-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .maths-toast.is-referred {
      animation-range: entry 20% entry 100%;
    }
  }
}

@keyframes toast-arrive {
  from {
    translate: -32px 18px;
  }
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

thead th {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
}

tbody th {
  font-weight: 600;
}

td {
  font-weight: 700;
}

/* The table's two prices as price tags, a punched hole at the left: the starting price in pale blue, the
   maximum on ink with its figure in yellow. Each plan's share is a chip after its name, yellow for the
   referred buyer's 80% (review-later R323). */
.price-tag {
  position: relative;
  display: inline-block;
  padding: 2px 12px 3px 22px;
  border-radius: 6px 12px 12px 6px;
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.price-tag::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card);
  translate: 0 -50%;
}

.price-tag.is-max {
  background: var(--foreground);
  color: var(--highlight);
  rotate: -3deg;
}

.price-tag-label {
  display: block;
  margin-top: 6px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}

.share-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.is-referred .share-chip {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

/* "One unlock, worked out": each amount with a bar sized against the largest (€16.67), so the two
   plans compare at a glance; the referred row is tinted. The bars repeat the amounts beside them. */
.money {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.money-bar {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0.35;
}

.is-referred .money-bar {
  opacity: 1;
}

.is-referred th,
.is-referred td {
  background: var(--primary-tint);
}

.is-referred th {
  border-radius: 12px 0 0 12px;
}

.is-referred td:last-child {
  border-radius: 0 12px 12px 0;
}

/* The referred buyer's row as a blue band: its name and figures in paper, its bars in yellow, its
   share chip on ink, so the 80% case is the one the eye lands on (review-later R397). */
.is-referred th,
.is-referred td {
  border-bottom-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}

.is-referred .money {
  font-size: 26px;
}

.is-referred .money-bar {
  height: 8px;
  background: var(--highlight);
}

.is-referred .share-chip {
  background: var(--foreground);
  color: var(--highlight);
}

.bar-12 {
  width: 12.5%;
}

.bar-20 {
  width: 20%;
}

.bar-62 {
  width: 62.5%;
}

.bar-100 {
  width: 100%;
}

.small-print {
  margin-top: 14px;
  color: var(--muted-foreground);
  font-size: 13px;
}

/* The road to a payout (review-later R307): a blue-to-yellow track from €0, a blue stop at the Pro
   plan's €400 and a yellow flag at the free plan's €800, the monthly bank transfer as a chip and the
   countries under it. A picture of the small print, which says it all in words. */
.payout-road {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  background: var(--foreground);
  color: var(--background);
}

.payout-road-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.payout-road-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.1;
}

.payout-road-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 700;
}

.payout-road-track {
  position: relative;
  height: 8px;
  margin: 8px 20px 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background) 18%, transparent);
}

.payout-road-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary) 50%, var(--highlight));
}

.payout-road-stop {
  position: absolute;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-top: 18px;
  translate: -50% -9px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

/* The stop's marker sits on the track, its label under it. */
.payout-road-stop::before {
  content: '';
  position: absolute;
  top: 0;
  width: 18px;
  height: 18px;
  border: 3px solid var(--foreground);
  border-radius: 50%;
  background: var(--background);
}

.payout-road-stop b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}

.payout-road-stop small {
  color: color-mix(in srgb, var(--background) 70%, transparent);
  font-size: 11px;
  font-weight: 600;
}

.payout-road-stop.is-start {
  left: 0;
}

.payout-road-stop.is-pro {
  left: 50%;
}

.payout-road-stop.is-pro::before {
  background: var(--primary);
}

.payout-road-stop.is-free {
  left: 100%;
}

/* The free plan's €800 is the finish: a yellow flag. */
.payout-road-stop.is-free::before {
  width: 22px;
  height: 22px;
  top: -2px;
  background: var(--highlight);
}

.payout-road-stop.is-free b {
  color: var(--highlight);
}

/* The finish as a real flag (review-later R385): a paper pole rising from the €800 stop with a yellow
   pennant flying back over the road, and the Pro plan's €400 stop as a blue marker post. For the eye
   only, as the whole picture is. */
.payout-road-stop.is-free::after {
  content: '';
  position: absolute;
  top: -44px;
  right: calc(50% - 1.5px);
  width: 3px;
  height: 46px;
  border-radius: 2px;
  background: var(--background);
}

.payout-road-stop.is-free b::before {
  content: '';
  position: absolute;
  top: -44px;
  right: calc(50% + 1.5px);
  width: 28px;
  height: 20px;
  background: var(--highlight);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.payout-road-stop.is-pro::after {
  content: '';
  position: absolute;
  top: -26px;
  left: 50%;
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: var(--primary);
  translate: -50% 0;
}

.payout-road-head {
  margin-bottom: 44px;
}

.payout-road-places {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.payout-road-places i {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--background) 25%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

/* Categories */
/* "Seven categories": a tile each, with its own colour, the starting price, and a way to apply in that
   category (categories.js picks it in the form). Apps, the widest range, is the larger tile. */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

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

.category-tiles li:first-child {
  grid-column: span 2;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--foreground);
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.tile:hover {
  border-color: var(--border-strong);
  box-shadow: 0 18px 36px -24px rgb(17 17 20 / 0.35);
  color: var(--foreground);
  transform: translateY(-3px);
}

/* Each category's tile carries its picture once more, big and faint in its top corner, tilted, in the
   tile's own text colour, for the eye only (review-later R291). It turns a little on hover, for
   people who haven't asked for less motion. */
.category-tiles .tile {
  position: relative;
  overflow: clip;
}

.category-tiles .tile > * {
  position: relative;
}

.category-tiles .tile::after {
  content: '';
  position: absolute;
  top: -18px;
  right: -18px;
  width: 96px;
  height: 96px;
  background: currentColor;
  opacity: 0.11;
  rotate: -12deg;
  pointer-events: none;
  -webkit-mask: var(--tile-glyph) center / contain no-repeat;
  mask: var(--tile-glyph) center / contain no-repeat;
}

@media (min-width: 768px) {
  .category-tiles .tile::after {
    top: -16px;
    right: -16px;
    width: 120px;
    height: 120px;
  }

  .category-tiles .tile-apps::after {
    top: -28px;
    right: 24px;
    width: 220px;
    height: 220px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .category-tiles .tile::after {
    transition: rotate 0.3s ease;
  }

  .category-tiles .tile:hover::after {
    rotate: -4deg;
  }
}

.tile-apps {
  --tile-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M7 13h6M7 16h4'/%3E%3C/svg%3E");
}

.tile-websites {
  --tile-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}

.tile-automations {
  --tile-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2'/%3E%3Ccircle cx='19' cy='6' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Cpath d='M7 6h10M6 8l5 8M18 8l-5 8'/%3E%3C/svg%3E");
}

.tile-games {
  --tile-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='5'/%3E%3Cpath d='M7 10v4M5 12h4'/%3E%3Ccircle cx='16' cy='11' r='1'/%3E%3Ccircle cx='18' cy='13' r='1'/%3E%3C/svg%3E");
}

.tile-videos {
  --tile-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E");
}

.tile-3d-design {
  --tile-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12L4 7.5M12 12v9'/%3E%3C/svg%3E");
}

.tile-images {
  --tile-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E");
}

.tile-art {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.tile-art svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-name {
  font-size: 15px;
  font-weight: 700;
}

.tile-price {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Each starting price as a price tag (review-later R337), like the worked-out unlock's (R323): white,
   tilted, with a punched hole at its left, on every tile's colour. The words are unchanged. */
.category-tiles .tile .tile-price {
  position: relative;
  width: fit-content;
  margin: 4px 0 2px;
  padding: 2px 12px 4px 24px;
  border-radius: 8px 14px 14px 8px;
  background: var(--card);
  color: var(--foreground);
  white-space: nowrap;
  box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--foreground) 70%, transparent);
  rotate: -2deg;
}

.category-tiles .tile .tile-price::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--background);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  translate: 0 -50%;
}

.category-tiles .tile-apps .tile-price {
  color: var(--primary);
}

/* On phones the half-width tiles' tags take a smaller figure, so "from €0.50" stays on one line. */
@media (max-width: 767px) {
  .category-tiles .tile:not(.tile-apps) .tile-price {
    font-size: 22px;
  }
}

/* How far a recipe's price can rise in the category: the track is the whole range up to the
   decided maximum, filled from where it starts (04 Monetization). Widths are classes, not inline
   styles, because the page's Content-Security-Policy allows no inline styles. */
.tile-range {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.tile-range-bar {
  position: relative;
  flex: 1;
  max-width: 140px;
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
}

.tile-range-bar i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 35%, transparent), var(--primary));
}

.tile-range-bar i::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--primary);
  transform: translateY(-50%);
}

.range-17 i {
  left: 17%;
}

.range-20 i {
  left: 20%;
}

.range-30 i {
  left: 30%;
}

.tile-max {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.tile-apps .tile-range-bar {
  background: color-mix(in srgb, var(--primary-foreground) 25%, transparent);
}

.tile-apps .tile-range-bar i {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-foreground) 45%, transparent),
    var(--primary-foreground)
  );
}

.tile-apps .tile-range-bar i::before {
  border-color: var(--primary);
  background: var(--primary-foreground);
}

.tile-apps .tile-max {
  color: var(--primary-foreground);
}

.tile-cta {
  margin-top: auto;
  padding-top: 12px;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 700;
  transition: color 160ms ease;
}

.tile-cta span {
  display: inline-block;
  transition: transform 160ms ease;
}

.tile:hover .tile-cta {
  color: var(--primary);
}

.tile:hover .tile-cta span {
  transform: translateX(3px);
}

/* Each category's colours, from the tokens. */
.tile-websites .tile-art {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.tile-automations .tile-art {
  background: var(--foreground);
  color: var(--highlight);
}

.tile-videos .tile-art {
  background: var(--success);
  color: var(--success-foreground);
}

.tile-3d-design .tile-art {
  background: var(--muted);
  color: var(--primary);
}

.tile-images .tile-art {
  background: var(--primary-hover);
}

/* Apps: the larger tile, in electric blue. */
.tile-apps {
  border-color: transparent;
  background: radial-gradient(circle at 88% 8%, var(--primary-hover), transparent 55%), var(--primary);
  color: var(--primary-foreground);
}

.tile-apps:hover {
  border-color: transparent;
  color: var(--primary-foreground);
}

.tile-apps .tile-art {
  background: rgb(244 242 236 / 0.16); /* --primary-foreground, faded */
}

.tile-apps .tile-price {
  font-size: 44px;
}

.tile-apps .tile-cta,
.tile-apps:hover .tile-cta {
  color: var(--primary-foreground);
}

/* Every category on its own colour, the one its icon tile had, so the seven read as a set rather
   than one blue tile and six white ones (review-later R235). Small text turns to the body colour on
   the light ones for its contrast; Automations is ink, with yellow details. */
.tile-websites,
.tile-automations,
.tile-games,
.tile-videos,
.tile-3d-design,
.tile-images {
  border-color: transparent;
}

.tile-websites {
  background: var(--highlight);
}

.tile-games {
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

.tile-videos {
  background: var(--success);
}

.tile-3d-design {
  background: var(--muted);
}

.tile-images {
  background: color-mix(in srgb, var(--primary-hover) 16%, var(--card));
}

.tile-websites .tile-art,
.tile-videos .tile-art,
.tile-3d-design .tile-art {
  background: var(--card);
}

.tile-websites .tile-max,
.tile-websites .tile-cta,
.tile-games .tile-max,
.tile-games .tile-cta,
.tile-videos .tile-max,
.tile-videos .tile-cta,
.tile-3d-design .tile-max,
.tile-3d-design .tile-cta,
.tile-images .tile-max,
.tile-images .tile-cta {
  color: var(--body);
}

.tile-websites .tile-range-bar,
.tile-games .tile-range-bar,
.tile-videos .tile-range-bar,
.tile-3d-design .tile-range-bar,
.tile-images .tile-range-bar {
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.tile-automations,
.tile-automations:hover {
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 55%),
    var(--foreground);
  color: var(--primary-foreground);
}

.tile-automations .tile-art {
  background: color-mix(in srgb, var(--primary-foreground) 14%, transparent);
}

.tile-automations .tile-max,
.tile-automations .tile-cta,
.tile-automations:hover .tile-cta {
  color: color-mix(in srgb, var(--primary-foreground) 80%, transparent);
}

/* "Apply to publish" as a real button at each tile's foot: an ink pill with paper words and a yellow
   arrow on every tile, a paper pill on the ink and blue ones, nudging its arrow on hover
   (review-later R387). The whole tile stays the link. */
.category-tiles .tile .tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--primary-foreground);
  box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--foreground) 80%, transparent);
}

.category-tiles .tile .tile-cta span {
  color: var(--highlight);
}

@media (max-width: 639.98px) {
  .category-tiles .tile .tile-cta {
    gap: 5px;
    padding: 8px 11px;
    font-size: 12px;
    white-space: nowrap;
  }
}

.category-tiles .tile-apps .tile-cta,
.category-tiles .tile-automations .tile-cta {
  background: var(--card);
  color: var(--foreground);
}

.category-tiles .tile-apps .tile-cta span,
.category-tiles .tile-automations .tile-cta span {
  color: var(--primary);
}

.category-tiles .tile:hover .tile-cta {
  color: var(--primary-foreground);
}

.category-tiles .tile-apps:hover .tile-cta,
.category-tiles .tile-automations:hover .tile-cta {
  color: var(--foreground);
}

.tile-automations .tile-range-bar {
  background: color-mix(in srgb, var(--primary-foreground) 22%, transparent);
}

.tile-automations .tile-range-bar i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--highlight) 45%, transparent), var(--highlight));
}

.tile-automations .tile-range-bar i::before {
  border-color: var(--foreground);
  background: var(--highlight);
}

/* Sign-up forms */
/* Beside "Be there from the start" (under it on phones): the invite a creator gets when their wave
   opens, as a ticket with a tear-off stub, another one peeking out behind it. A picture only
   (review-later R201). */
.join-head {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .join-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: center;
    gap: 56px;
  }
}

.invite {
  position: relative;
  max-width: 400px;
  margin: 4px auto 0;
  padding: 10px 6px 18px;
}

.invite-ticket {
  --stub: 84px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  min-height: 168px;
  border-radius: 18px;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 28px 44px -26px color-mix(in srgb, var(--foreground) 70%, transparent);
  transform: rotate(-3deg);
  /* Two notches where the stub tears off, cut out of the top and bottom edges. */
  mask:
    radial-gradient(circle 11px at calc(100% - var(--stub)) 0, transparent 97%, black) top / 100% 51%
      no-repeat,
    radial-gradient(circle 11px at calc(100% - var(--stub)) 100%, transparent 97%, black) bottom / 100% 51%
      no-repeat;
  transition: transform 300ms ease;
}

.invite-ticket-back {
  position: absolute;
  inset: 10px 6px 18px;
  background: var(--foreground);
  box-shadow: none;
  transform: rotate(4deg) translate(10px, 4px);
}

@media (prefers-reduced-motion: no-preference) {
  .invite:hover .invite-ticket:not(.invite-ticket-back) {
    transform: rotate(-1deg) translateY(-4px);
  }
}

.invite-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: radial-gradient(circle at 15% 0%, var(--primary-hover), transparent 60%);
  border-radius: 18px 0 0 18px;
}

.invite-brand {
  font-family: var(--serif);
  font-size: 18px;
}

.invite-brand em {
  color: var(--highlight);
}

.invite-eyebrow {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.invite-title {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.invite-text {
  font-size: 13px;
}

.invite-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-left: 2px dashed color-mix(in srgb, var(--primary-foreground) 45%, transparent);
  border-radius: 0 18px 18px 0;
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.invite-stub-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.invite-coin,
.closing-coin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow:
    inset 0 0 0 4px var(--highlight),
    inset 0 0 0 6px var(--primary);
}

/* The thank-you page: the same ticket, waiting in white inside the creators' card, its stub still
   to be torn (review-later R215). */
.invite-pending {
  max-width: 340px;
  margin: 18px 0 0;
  padding: 0;
}

.invite-pending .invite-ticket {
  min-height: 132px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--foreground) 80%, transparent);
  transform: rotate(-2deg);
}

.invite-pending .invite-main {
  gap: 4px;
  padding: 16px 18px;
  background: none;
}

.invite-pending .invite-brand em {
  color: var(--primary);
}

.invite-pending .invite-title {
  color: var(--primary);
  font-size: 28px;
}

.invite-pending .invite-stub {
  border-left-color: var(--border-strong);
}

.signup {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

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

.signup-side {
  display: grid;
  gap: 24px;
}

/* The road from applying to launch, beside the launch form: the steps the questions describe, on the
   brand's blue, with "You are here" on the first. */
.road {
  padding: 24px;
  border-radius: 20px;
  background: var(--primary);
  color: var(--primary-foreground);
}

@media (min-width: 768px) {
  .road {
    padding: 32px;
  }
}

.road-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.road-steps {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: road;
}

.road-steps li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 0 0 24px 48px;
  counter-increment: road;
}

.road-steps li:last-child {
  padding-bottom: 0;
}

/* The step's number in a circle (the list already numbers it for screen readers). */
.road-steps li::before {
  content: counter(road);
  content: counter(road) / '';
  position: absolute;
  top: -3px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid color-mix(in srgb, var(--primary-foreground) 50%, transparent);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

/* The line between one step and the next. */
.road-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 33px;
  bottom: 3px;
  left: 15px;
  width: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
}

.road-steps li.is-now::before {
  border-color: var(--highlight);
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.road-steps li.is-goal::before {
  border-color: var(--primary-foreground);
  background: var(--primary-foreground);
  color: var(--primary);
}

@media (prefers-reduced-motion: no-preference) {
  .road-steps li.is-now::before {
    animation: road-pulse 1.8s ease-out 3;
  }
}

@keyframes road-pulse {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--highlight) 70%, transparent);
  }
  to {
    box-shadow: 0 0 0 14px transparent;
  }
}

/* Where you are on the road lifts off the blue as a white card, tilted a touch with the yellow disc
   on it, and the steps still to come are dashed rings until the white goal, so "you are here" reads
   at a glance (review-later R393). */
.road-steps li.is-now {
  margin: 0 -10px 20px;
  padding: 14px 14px 16px 58px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--foreground) 70%, transparent);
  color: var(--foreground);
  transform: rotate(-1deg);
}

.road-steps li.is-now::before {
  top: 12px;
  left: 10px;
}

.road-steps li.is-now::after {
  top: 100%;
  bottom: auto;
  left: 25px;
  height: 20px;
}

.road-steps li.is-now .road-step-text {
  color: var(--body);
}

.road-steps li:not(.is-now, .is-goal)::before {
  border-style: dashed;
  border-color: var(--primary-foreground);
}

/* The line between the steps is a road: a thick dashed yellow path on the blue, like road markings,
   so the card reads as a journey to launch at a glance (review-later R457). */
.road-steps li:not(:last-child)::after {
  left: 13px;
  width: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(to bottom, var(--highlight) 0 8px, transparent 8px 14px);
}

.road-steps li.is-now::after {
  left: 23px;
}

.road-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}

.road-now {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.road-step-text {
  font-size: 14px;
  line-height: 1.45;
}

.form-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

@media (min-width: 768px) {
  .form-card {
    padding: 32px;
  }
}

.form-card h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.form-card > p {
  margin-top: 8px;
  color: var(--body);
}

/* The launch alert's head: a picture of the one email it sends, on yellow, so "one email" is seen
   as well as read. Decorative; the card's words say it. */
.notify-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  margin: -24px -24px 22px;
  border-bottom: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  background: var(--highlight);
  overflow: hidden;
}

@media (min-width: 768px) {
  .notify-preview {
    margin: -32px -32px 26px;
  }
}

.notify-mail {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(250px, 62%);
  margin-right: 40px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 30px -18px rgb(17 17 20 / 0.45);
  transform: rotate(-3deg);
}

.notify-mail-from {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.notify-mail-from img {
  border-radius: 8px;
}

.notify-mail-from small {
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 11px;
}

.notify-mail-subject {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.1;
}

.notify-mail-line {
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
}

.notify-mail-line-short {
  width: 55%;
}

.notify-count {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--background);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  transform: rotate(8deg);
}

.notify-count small {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .notify-mail {
    transition: transform 0.3s ease;
  }

  .form-card:hover .notify-mail,
  .form-card:focus-within .notify-mail {
    transform: rotate(0deg) translateY(-3px);
  }
}

/* The application's head: on the brand's blue, with the title and a dial of the required answers
   ready so far (apply-progress.js): six marks round a big count, lit in yellow one by one. The words
   under it say the same, so the dial is for the eye only. On wide screens it stands at the head's
   right; on phones it leads the count's line. */
.apply-head {
  position: relative;
  margin: -24px -24px 0;
  padding: 24px;
  border-radius: 20px 20px 0 0;
  background: var(--primary);
  color: var(--primary-foreground);
}

@media (min-width: 768px) {
  .apply-head {
    margin: -32px -32px 0;
    padding: 28px 172px 28px 32px;
  }
}

.apply-head p {
  margin-top: 8px;
  color: var(--primary-foreground);
}

.apply-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--primary-foreground);
  font-size: 14px;
}

.apply-progress[hidden] {
  display: none;
}

.apply-progress b {
  color: var(--highlight);
}

.apply-progress-bar {
  position: relative;
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-foreground) 12%, transparent);
}

@media (min-width: 768px) {
  .apply-progress-bar {
    position: absolute;
    top: 50%;
    right: 32px;
    width: 112px;
    height: 112px;
    translate: 0 -50%;
  }
}

.apply-progress-bar i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 14px;
  margin: -7px 0 0 -3.5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
  transform: rotate(var(--turn)) translateY(-32px);
  transition: background-color 0.25s ease;
}

@media (min-width: 768px) {
  .apply-progress-bar i {
    height: 22px;
    margin-top: -11px;
    transform: rotate(var(--turn)) translateY(-38px);
  }
}

.apply-progress-bar i:nth-child(1) {
  --turn: 0deg;
}

.apply-progress-bar i:nth-child(2) {
  --turn: 60deg;
}

.apply-progress-bar i:nth-child(3) {
  --turn: 120deg;
}

.apply-progress-bar i:nth-child(4) {
  --turn: 180deg;
}

.apply-progress-bar i:nth-child(5) {
  --turn: 240deg;
}

.apply-progress-bar i:nth-child(6) {
  --turn: 300deg;
}

.apply-progress-bar i.is-on {
  background: var(--highlight);
}

.apply-progress-bar b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 768px) {
  .apply-progress-bar b {
    font-size: 40px;
  }
}

/* All six ready: the dial fills with yellow and its count turns ink. */
.apply-progress.is-complete .apply-progress-bar {
  background: var(--highlight);
}

.apply-progress.is-complete .apply-progress-bar i {
  background: var(--highlight-foreground);
}

.apply-progress.is-complete .apply-progress-bar b {
  color: var(--highlight-foreground);
}

@media (prefers-reduced-motion: no-preference) {
  .apply-progress-bar i.is-on {
    animation: dial-mark-on 0.35s ease;
  }
}

@keyframes dial-mark-on {
  50% {
    scale: 1.35;
  }
}

.form-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

@media (min-width: 640px) {
  .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-grid .span-2 {
    grid-column: span 2;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field label,
.field legend {
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

/* The application's questions numbered in blue discs, like the steps on the page, and each disc turns
   green with a tick once its answer is there (apply-progress.js marks the field), so the form reads as
   a short checklist beside its "answers ready" dial. For the eye only (review-later R391). */
form[data-signup='creators'] {
  counter-reset: question;
}

form[data-signup='creators'] .field:has([required]) > label:not(.consent),
form[data-signup='creators'] .field:has([required]) > legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

form[data-signup='creators'] .field:has([required]) > label:not(.consent)::before,
form[data-signup='creators'] .field:has([required]) > legend::before {
  counter-increment: question;
  content: counter(question);
  content: counter(question) / '';
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* The launch alert's one question wears a disc too, an ink "@" that turns into a green tick once the
   address is a valid one (the input's own validity, so no script), as the application's questions do.
   For the eye only (review-later R409). */
form[data-signup='launch'] .field:has(input[type='email']) > label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

form[data-signup='launch'] .field:has(input[type='email']) > label::before {
  content: '@';
  content: '@' / '';
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--highlight);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

form[data-signup='launch'] .field:has(input[type='email']:valid) > label::before {
  content: '✓';
  content: '✓' / '';
  background: var(--success);
  color: var(--success-foreground);
}

@media (prefers-reduced-motion: reduce) {
  form[data-signup='launch'] .field:has(input[type='email']) > label::before {
    transition: none;
  }
}

/* The optional question has no disc, so it keeps the same height to line up beside one. */
form[data-signup='creators'] .field:has(.optional) > label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  font-size: 15px;
}

form[data-signup='creators'] .field.is-answered > label:not(.consent)::before,
form[data-signup='creators'] .field.is-answered > legend::before {
  content: '✓';
  content: '✓' / '';
  background: var(--success);
  color: var(--success-foreground);
  font-family: inherit;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  form[data-signup='creators'] .field:has([required]) > label:not(.consent)::before,
  form[data-signup='creators'] .field:has([required]) > legend::before {
    transition: none;
  }
}

.optional {
  color: var(--muted-foreground);
  font-weight: 400;
}

.hint {
  color: var(--muted-foreground);
  font-size: 13px;
}

input[type='text'],
input[type='email'],
input[type='url'],
select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--input);
  border-radius: 10px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 15px;
}

/* The forms' fields as slots on paper with a thick ink base line, like a line to write on, turning
white with a blue line while one is being filled in (the page's focus ring stays on top), so the
   forms read at a glance as places to write (review-later R439). */
input[type='text'],
input[type='email'],
input[type='url'] {
  border-bottom: 3px solid var(--foreground);
  border-radius: 10px 10px 6px 6px;
  background: var(--background);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus {
  border-color: var(--primary);
  background: var(--card);
}

@media (prefers-reduced-motion: no-preference) {
  input[type='text'],
  input[type='email'],
  input[type='url'] {
    transition:
      border-color 0.15s ease,
      background-color 0.15s ease;
  }
}

select {
  appearance: none;
  padding-right: 40px;
  background: var(--card) no-repeat right 14px center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2362626e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input::placeholder {
  color: var(--placeholder);
}

input[aria-invalid='true'],
select[aria-invalid='true'] {
  border-color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

.field-error:empty {
  display: none;
}

/* "Did you mean …?" under the email field. It stays in the page while empty, so screen readers
   hear it when it fills; the negative margin cancels .field's gap meanwhile. */
.field-suggestion {
  margin: 0;
  color: var(--body);
  font-size: 13px;
}

.field-suggestion:empty {
  margin-top: -6px;
}

.suggestion-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.choice input {
  position: absolute;
  opacity: 0;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--card);
  font-weight: 600;
  cursor: pointer;
}

.choice input:checked + span {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--primary-foreground);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* "How many recipes could you publish before launch?": three tiles, each with a little stack of recipe
   cards, one, three or four of them, drawn with the card's shadows (review-later R213). */
.choices-recipes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 420px;
}

.choices-recipes .choice {
  display: block;
}

.choices-recipes .choice span {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 96px;
  padding: 14px 8px 12px;
  border-radius: 16px;
  text-align: center;
}

.choices-recipes .choice span::before {
  content: '';
  width: 20px;
  height: 26px;
  border: 2px solid var(--primary);
  border-radius: 5px;
  background: var(--primary-tint);
  background-color: var(--card);
}

/* The answers big in the serif under their stacks, like the page's numbers, so the three amounts read
   at a glance (review-later R441). */
.choices-recipes .choice span {
  min-height: 112px;
  font-family: var(--serif);
  font-size: clamp(18px, 4.6vw, 24px);
  white-space: nowrap;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* The cards behind: each one is two shadows, a tinted face over a blue edge. */
.choices-recipes .choice:has(input[value='2-3']) span::before {
  box-shadow:
    6px -5px 0 -2px var(--card),
    6px -5px 0 0 var(--primary),
    12px -10px 0 -2px var(--card),
    12px -10px 0 0 var(--primary);
}

.choices-recipes .choice:has(input[value='4+']) span::before {
  box-shadow:
    5px -4px 0 -2px var(--card),
    5px -4px 0 0 var(--primary),
    10px -8px 0 -2px var(--card),
    10px -8px 0 0 var(--primary),
    15px -12px 0 -2px var(--card),
    15px -12px 0 0 var(--primary);
}

.choices-recipes .choice:has(input[value='2-3']) span::before,
.choices-recipes .choice:has(input[value='4+']) span::before {
  margin-right: 12px;
}

.choices-recipes .choice input:checked + span::before {
  border-color: var(--highlight);
  background-color: var(--highlight);
}

.choices-recipes .choice:has(input[value='2-3']) input:checked + span::before {
  box-shadow:
    6px -5px 0 -2px var(--foreground),
    6px -5px 0 0 var(--highlight),
    12px -10px 0 -2px var(--foreground),
    12px -10px 0 0 var(--highlight);
}

.choices-recipes .choice:has(input[value='4+']) input:checked + span::before {
  box-shadow:
    5px -4px 0 -2px var(--foreground),
    5px -4px 0 0 var(--highlight),
    10px -8px 0 -2px var(--foreground),
    10px -8px 0 0 var(--highlight),
    15px -12px 0 -2px var(--foreground),
    15px -12px 0 0 var(--highlight);
}

/* "What do you build?": the seven categories as chips, each with its tile's icon, the radio itself
   laid over the chip so a tap anywhere picks it (review-later R207). */
.category-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

@media (min-width: 560px) {
  .category-choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.category-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: 14px;
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

.category-choice input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.category-choice:hover {
  border-color: var(--border-strong);
}

.category-choice-art {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.category-choice-art svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-choice-websites .category-choice-art {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.category-choice-automations .category-choice-art {
  background: var(--foreground);
  color: var(--highlight);
}

.category-choice-images .category-choice-art {
  background: var(--primary-tint);
  color: var(--primary);
}

.category-choice-videos .category-choice-art {
  background: var(--success);
  color: var(--success-foreground);
}

.category-choice-3d-design .category-choice-art {
  background: var(--muted);
  color: var(--primary);
}

/* On phones the seventh chip, alone on its row, takes the whole row (review-later R327). */
.category-choice:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 560px) {
  .category-choice:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* The picked one fills with the brand's blue, its icon on white, lifted a little, with a yellow tick in
   its corner (review-later R327). */
.category-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--primary) 90%, transparent);
}

.category-choice:has(input:checked) .category-choice-art {
  background: var(--card);
  color: var(--primary);
}

/* A tick in the corner of the picked one. */
.category-choice:has(input:checked)::after {
  content: '✓' / '';
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--highlight);
  color: var(--foreground);
  font-size: 11px;
  font-weight: 700;
}

.category-choice:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.category-choice:has(input[aria-invalid='true']) {
  border-color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .category-choice {
    transition: none;
  }
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--body);
  font-size: 14px;
}

.consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--primary);
}

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

.turnstile:empty {
  display: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* The application ends like the ticket its blue head starts: a pale blue stub across the card's foot,
   under a perforated edge with a notch cut into the card either side, holding the Apply button
   (review-later R257). The launch alert beside it ends the same way, in its head's yellow (R261). */
#apply,
#notify {
  overflow: hidden;
}

#apply .form-actions,
#notify .form-actions {
  position: relative;
  margin: 8px -24px -24px;
  padding: 22px 24px 24px;
  border-top: 2px dashed color-mix(in srgb, var(--primary) 35%, transparent);
  background: var(--primary-tint);
}

#notify .form-actions {
  border-top-color: color-mix(in srgb, var(--highlight-foreground) 30%, transparent);
  background: color-mix(in srgb, var(--highlight) 55%, var(--card));
}

#apply .form-actions::before,
#apply .form-actions::after,
#notify .form-actions::before,
#notify .form-actions::after {
  content: '';
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--background);
}

#apply .form-actions::before,
#notify .form-actions::before {
  left: -13px;
}

#apply .form-actions::after,
#notify .form-actions::after {
  right: -13px;
}

@media (min-width: 768px) {
  #apply .form-actions,
  #notify .form-actions {
    margin: 8px -32px -32px;
    padding: 26px 32px 30px;
  }
}

@media (max-width: 767px) {
  #apply .form-actions .button,
  #notify .form-actions .button {
    width: 100%;
  }
}

.form-status {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status.error {
  background: var(--danger-background);
  color: var(--danger);
}

.form-done {
  margin-top: 24px;
  padding: 20px;
  border-radius: 14px;
  background: var(--success);
  color: var(--success-foreground);
}

.form-done h4 {
  margin: 0;
  font-size: 17px;
}

.form-done p {
  margin-top: 6px;
  color: var(--success-foreground);
}

.form-done:focus {
  outline: none;
}

.form-share {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(21 122 69 / 0.25); /* --success-foreground, faded */
}

.form-share .button {
  margin-top: 10px;
}

.form-share-status:empty {
  display: none;
}

/* Examples: a slow, endless row of example builds, one or two of each category, edge to edge. It
   moves only with JavaScript and without a wish for less motion; hovering or the Pause button stops
   it (WCAG 2.2.2). Otherwise it's a row to swipe (review-later R195). */
/* Between the hero and the first chapter: the seven categories in the big serif, from edge to edge,
   every other one in italic, with a dot between them. Where the browser can tie an animation to
   scrolling, the line slides sideways as the page scrolls, so it only moves when the reader does; with
   less motion it stays still (review-later R221). The line rides a tilted blue ribbon crossing an ink
   one, like two tapes across the page (review-later R345); the ribbons run past the window's edges and
   the band clips them, so nothing scrolls sideways. */
.category-band {
  position: relative;
  isolation: isolate;
  margin: 0 calc(50% - 50vw);
  padding: 34px 0;
  overflow: clip;
  font-size: 30px;
}

.category-band::before,
.category-band::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -6%;
  right: -6%;
  z-index: -1;
  translate: 0 -50%;
}

/* The ink tape, behind, tilted the other way. */
.category-band::before {
  height: calc(1.15em + 14px);
  background: var(--foreground);
  rotate: 2.4deg;
}

/* The blue tape the words ride on. */
.category-band::after {
  height: calc(1.15em + 30px);
  background: var(--primary);
  box-shadow: 0 18px 36px -22px rgb(17 17 20 / 0.6);
  rotate: -2deg;
}

.category-band-line {
  display: flex;
  gap: 24px;
  width: max-content;
  margin: 0;
  padding-inline: var(--gutter);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 1em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* Turned about the window's middle, not its own (it's many screens wide), so the words stay on the
     tape as the line slides. */
  transform-origin: 50vw 50%;
  rotate: -2deg;
}

.category-band-line span {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.category-band-line span:nth-child(even) {
  color: var(--highlight);
  font-style: italic;
}

.category-band-line span::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border: 3px solid var(--primary-foreground);
  border-radius: 50%;
  background: var(--highlight);
}

/* Each category's separator is its picture on a yellow disc, drawn in the ink colour (#111114 is
   --foreground; a picture in a stylesheet can't read the variable), rather than a plain dot, so the
   tape says what each category is at a glance. For the eye only, as the whole band is (review-later
   R399). */
.category-band-line span::after {
  width: 30px;
  height: 30px;
  border-width: 2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  rotate: -8deg;
}

/* apps */
.category-band-line span:nth-child(7n + 1)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M7 13h6M7 16h4'/%3E%3C/svg%3E");
}

/* websites */
.category-band-line span:nth-child(7n + 2)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}

/* automations */
.category-band-line span:nth-child(7n + 3)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3Cpath d='M8.5 6h7M7.2 8.2l3.6 7.6M16.8 8.2l-3.6 7.6'/%3E%3C/svg%3E");
}

/* games */
.category-band-line span:nth-child(7n + 4)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='11' rx='5.5'/%3E%3Cpath d='M7 11v3M5.5 12.5h3'/%3E%3Ccircle cx='16' cy='11.5' r='1'/%3E%3Ccircle cx='18' cy='14' r='1'/%3E%3C/svg%3E");
}

/* videos */
.category-band-line span:nth-child(7n + 5)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9.5v5l4.5-2.5z'/%3E%3C/svg%3E");
}

/* 3D and design */
.category-band-line span:nth-child(7n + 6)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20.5 7v10L12 21.5 3.5 17V7z'/%3E%3Cpath d='M3.5 7 12 11.5 20.5 7M12 11.5v10'/%3E%3C/svg%3E");
}

/* images */
.category-band-line span:nth-child(7n + 7)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  .category-band {
    padding: 56px 0;
    font-size: 60px;
  }

  .category-band-line,
  .category-band-line span {
    gap: 36px;
  }

  .category-band-line span::after {
    width: 54px;
    height: 54px;
    border-width: 3px;
    background-size: 30px 30px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .category-band-line {
      animation: category-slide linear both;
      animation-timeline: view();
    }
  }
}

/* The band takes the place of the hero's own bottom line. */
.hero:has(+ .category-band) {
  border-bottom: 0;
}

@keyframes category-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-30%);
  }
}

/* Examples are the page's one dark chapter: an ink band from edge to edge with a blue glow, so the
   long paper page has a rhythm, and the white example cards stand out on it (review-later R219). */
.showcase {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  color: var(--primary-foreground);
}

.showcase::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background:
    radial-gradient(70% 60% at 88% 0%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%),
    var(--foreground);
}

.showcase .section-title {
  color: var(--primary-foreground);
}

.showcase .section-title::before {
  -webkit-text-stroke-color: var(--highlight);
}

/* As a chapter comes into view, its hollow number fills in with its line's colour, and stays filled;
   with less motion, or where the browser has no scroll timelines, it stays drawn as a line
   (review-later R277). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section .section-title {
      view-timeline: --chapter block;
    }

    .section .section-title::before {
      animation: chapter-fill linear both;
      animation-timeline: --chapter;
      animation-range: entry 30% cover 45%;
    }

    .showcase .section-title::before {
      animation-name: chapter-fill-dark;
    }
  }
}

@keyframes chapter-fill {
  to {
    color: var(--primary);
  }
}

@keyframes chapter-fill-dark {
  to {
    color: var(--highlight);
  }
}

.showcase .section-lead {
  color: color-mix(in srgb, var(--primary-foreground) 78%, transparent);
}

.showcase .eyebrow,
.showcase .showcase-toggle {
  border-color: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
  background: transparent;
  color: var(--primary-foreground);
}

.showcase .showcase-toggle:hover {
  border-color: var(--primary-foreground);
}

.showcase :focus-visible {
  outline-color: var(--highlight);
}

.showcase-card {
  color: var(--foreground);
}

/* "How it works" is the page's yellow chapter (review-later R349): the brand's yellow from edge to
   edge with a soft paper glow, so the page opens on colour after the hero and its tape. The three
   step cards keep their pictures and words, and get an ink edge and a deeper shadow so they stand
   off the yellow (step 2's own yellow picture included); the arrows between them ring in yellow. */
.section-yellow {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
}

.section-yellow::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background:
    radial-gradient(60% 50% at 90% 0%, color-mix(in srgb, var(--card) 25%, transparent), transparent 70%),
    var(--highlight);
}

.section-yellow .steps .card {
  border-color: var(--foreground);
  box-shadow: 0 26px 48px -30px color-mix(in srgb, var(--foreground) 85%, transparent);
}

.section-yellow .steps .card + .card::after {
  border-color: var(--highlight);
}

/* The coloured chapters (the examples, How it works, the categories) end top and bottom on a ticket's
   perforated edge: a row of half-circles punched out along each edge, so each band reads as one more
   of the site's tickets (review-later R357). */
.showcase::before,
.section-dark::before,
.section-yellow::before {
  --punch: 9px;
  -webkit-mask:
    radial-gradient(circle var(--punch) at 50% 0, transparent 96%, #000) top / 26px 51% repeat-x,
    radial-gradient(circle var(--punch) at 50% 100%, transparent 96%, #000) bottom / 26px 51% repeat-x;
  mask:
    radial-gradient(circle var(--punch) at 50% 0, transparent 96%, #000) top / 26px 51% repeat-x,
    radial-gradient(circle var(--punch) at 50% 100%, transparent 96%, #000) bottom / 26px 51% repeat-x;
}

@media (min-width: 768px) {
  .showcase::before,
  .section-dark::before,
  .section-yellow::before {
    --punch: 12px;
    -webkit-mask-size:
      34px 51%,
      34px 51%;
    mask-size:
      34px 51%,
      34px 51%;
  }
}

/* "Seven categories" is the page's second dark chapter, so the paper runs between the two ink bands
   instead of four chapters in a row (review-later R343): ink from edge to edge with a yellow glow at
   its top and a blue one at its foot, the coloured tiles bright on it, and its number filling in
   yellow. Automations, the ink tile, gets a light edge and a blue glow so it still reads as a tile. */
.section-dark {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  color: var(--primary-foreground);
}

.section-dark::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background:
    radial-gradient(55% 50% at 8% 0%, color-mix(in srgb, var(--highlight) 26%, transparent), transparent 70%),
    radial-gradient(
      60% 55% at 100% 100%,
      color-mix(in srgb, var(--primary) 50%, transparent),
      transparent 70%
    ),
    var(--foreground);
}

.section-dark .section-title {
  color: var(--primary-foreground);
}

.section-dark .section-title::before {
  -webkit-text-stroke-color: var(--highlight);
}

.section-dark .section-lead {
  color: color-mix(in srgb, var(--primary-foreground) 78%, transparent);
}

.section-dark :focus-visible {
  outline-color: var(--highlight);
}

.section-dark .tile {
  box-shadow: 0 22px 44px -28px rgb(0 0 0 / 0.9);
}

.section-dark .tile:hover {
  box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--primary) 70%, transparent);
}

.section-dark .tile-automations {
  border-color: color-mix(in srgb, var(--primary-foreground) 24%, transparent);
  background:
    radial-gradient(
      90% 80% at 100% 100%,
      color-mix(in srgb, var(--primary) 38%, transparent),
      transparent 70%
    ),
    var(--foreground);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-dark .section-title::before {
      animation-name: chapter-fill-dark;
    }
  }
}

.showcase-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* On phones the button sits up beside the eyebrow, so the cards start sooner. */
.showcase-head .showcase-toggle {
  position: absolute;
  top: -4px;
  right: 0;
}

@media (min-width: 768px) {
  .showcase-head .showcase-toggle {
    position: static;
    flex: none;
  }
}

.showcase-head .eyebrow {
  margin-bottom: 14px;
}

.showcase-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.showcase-toggle:hover {
  border-color: var(--foreground);
}

/* Two bars while it moves; a play triangle once paused. */
.showcase-toggle::before {
  content: '';
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}

.showcase.is-paused .showcase-toggle::before {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.showcase-viewport {
  margin: 28px calc(50% - 50vw) 0;
  padding: 4px 0 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));
  scrollbar-width: none;
}

.showcase-rows {
  display: flex;
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));
}

.showcase-row {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 232px;
  padding: 10px 10px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  scroll-snap-align: start;
}

/* The posters lie on the belt like cards laid down, tilted a touch in turn, and one straightens and
   lifts under the pointer or keyboard (only with motion allowed); the belt has room above and below so
   no tilted corner is clipped (review-later R449). */
.showcase-viewport {
  padding-block: 14px 18px;
}

.showcase-row .showcase-card:nth-child(odd) {
  rotate: -1.5deg;
}

.showcase-row .showcase-card:nth-child(even) {
  rotate: 1.5deg;
}

@media (prefers-reduced-motion: no-preference) {
  .showcase-row .showcase-card {
    transition:
      rotate 0.25s ease,
      translate 0.25s ease;
  }

  .showcase-row .showcase-card:is(:hover, :focus-within) {
    rotate: 0deg;
    translate: 0 -4px;
  }
}

.showcase-cover {
  position: relative;
  display: grid;
  place-items: center;
  height: 132px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cover-gradient);
  color: var(--primary-foreground);
}

/* A big faint ring and a small one, in the cover's own ink. */
.showcase-cover::before,
.showcase-cover::after {
  content: '';
  position: absolute;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.22;
}

.showcase-cover::before {
  right: -28px;
  bottom: -44px;
  width: 128px;
  height: 128px;
}

.showcase-cover::after {
  top: 14px;
  right: 16px;
  width: 22px;
  height: 22px;
}

/* Each cover is a poster, as the app draws a build without a picture (review-later R311): the
   category's icon on a small white tile at the top, the build's short name big in the serif at the
   foot, both in the cover's own ink. */
.showcase-cover svg {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: var(--card);
  color: var(--foreground);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--foreground) 60%, transparent);
}

.showcase-name {
  position: absolute;
  right: 14px;
  bottom: 10px;
  left: 14px;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* The first covers drawn as their builds (review-later R335), in the cover's own ink, in place of its
   rings: the habit garden's three plants, each taller than the last, the newest in flower; the yoga
   studio's week of classes, three of them booked in blue. */
.showcase-cover:has(.showcase-scene)::before,
.showcase-cover:has(.showcase-scene)::after {
  display: none;
}

.showcase-scene {
  position: absolute;
  top: 14px;
  right: 14px;
}

.scene-garden {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  width: 112px;
  height: 72px;
  padding: 0 10px;
  border-bottom: 3px solid currentColor;
}

.scene-garden i {
  position: relative;
  width: 4px;
  border-radius: 2px;
  background: currentColor;
}

.scene-garden i:nth-child(1) {
  height: 30%;
}

.scene-garden i:nth-child(2) {
  height: 58%;
}

.scene-garden i:nth-child(3) {
  height: 90%;
}

/* Two leaves on each stem, and on the tallest a yellow flower. */
.scene-garden i::before,
.scene-garden i::after {
  content: '';
  position: absolute;
  top: 26%;
  width: 17px;
  height: 10px;
  border-radius: 50% 0;
  background: currentColor;
}

.scene-garden i::before {
  right: 2px;
  rotate: 25deg;
}

.scene-garden i::after {
  left: 2px;
  rotate: -25deg;
  border-radius: 0 50%;
}

.scene-garden i:nth-child(3)::after {
  top: -14px;
  left: -8px;
  width: 20px;
  height: 20px;
  border: 5px solid var(--highlight);
  border-radius: 50%;
  background: var(--card);
  rotate: none;
}

.scene-week {
  display: grid;
  grid-template-columns: repeat(4, 18px);
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--foreground) 70%, transparent);
  rotate: 4deg;
}

.scene-week i {
  height: 14px;
  border-radius: 4px;
  background: var(--muted);
}

.scene-week i.is-booked {
  background: var(--primary);
}

/* More covers drawn as their builds (review-later R339): the invoicing agent's email turning into a
   paid invoice, the product shot's bottle under a spotlight on a plinth, and the one-button game's big
   yellow button. */
.scene-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  top: 22px;
}

.scene-flow b {
  font-size: 18px;
}

.scene-flow i {
  display: block;
}

.scene-flow .is-mail {
  position: relative;
  width: 40px;
  height: 28px;
  border-radius: 5px;
  background: var(--card);
  overflow: hidden;
}

.scene-flow .is-mail::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background: var(--muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.scene-flow .is-invoice {
  position: relative;
  width: 32px;
  height: 42px;
  border-radius: 4px;
  background:
    linear-gradient(var(--highlight-foreground) 0 0) 7px 9px / 18px 3px no-repeat,
    linear-gradient(var(--highlight-foreground) 0 0) 7px 16px / 12px 3px no-repeat,
    linear-gradient(var(--highlight-foreground) 0 0) 7px 23px / 16px 3px no-repeat,
    var(--highlight);
  rotate: 6deg;
}

/* A green tick: it's sent. */
.scene-flow .is-invoice::after {
  content: '✓';
  position: absolute;
  right: -7px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success);
  color: var(--success-foreground);
  font-size: 10px;
  font-weight: 800;
}

.scene-studio {
  width: 90px;
  height: 92px;
  top: 8px;
}

.scene-studio i {
  position: absolute;
  display: block;
}

.scene-studio .is-beam {
  top: 0;
  left: 15px;
  width: 60px;
  height: 78px;
  background: linear-gradient(var(--highlight), color-mix(in srgb, var(--highlight) 0%, transparent) 95%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}

.scene-studio .is-bottle {
  bottom: 14px;
  left: 33px;
  width: 24px;
  height: 44px;
  border-radius: 8px 8px 6px 6px;
  background: var(--primary);
  box-shadow: inset 6px 0 0 color-mix(in srgb, var(--card) 35%, transparent);
}

.scene-studio .is-bottle::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 7px;
  width: 10px;
  height: 9px;
  border-radius: 3px 3px 0 0;
  background: var(--foreground);
}

.scene-studio .is-plinth {
  bottom: 0;
  left: 15px;
  width: 60px;
  height: 14px;
  border-radius: 4px;
  background: var(--foreground);
}

.scene-arcade {
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--foreground);
  box-shadow: 0 12px 22px -12px rgb(17 17 20 / 0.8);
}

.scene-arcade i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--highlight);
  box-shadow:
    inset 0 -7px 0 color-mix(in srgb, var(--highlight-foreground) 45%, transparent),
    inset 0 5px 0 color-mix(in srgb, var(--card) 70%, transparent);
}

/* The last three covers drawn as their builds (review-later R351): the café film's frame on a strip
   of film with a yellow cup in it; the clay island, a low-poly green hill on a blue sea under a yellow
   sun; the meal planner's week, six white days, some with a meal planned in yellow or green. */
.scene-film {
  display: grid;
  place-items: center;
  width: 96px;
  height: 66px;
  border-radius: 6px;
  background:
    radial-gradient(circle, var(--success) 2.5px, transparent 3px) 0 3px / 12px 9px repeat-x,
    radial-gradient(circle, var(--success) 2.5px, transparent 3px) 0 calc(100% - 3px) / 12px 9px repeat-x,
    var(--foreground);
  box-shadow: 0 12px 22px -12px rgb(17 17 20 / 0.8);
  rotate: -4deg;
}

.scene-film i {
  position: relative;
  width: 26px;
  height: 22px;
  border-radius: 3px 3px 10px 10px;
  background: var(--highlight);
}

.scene-film i::after {
  content: '';
  position: absolute;
  top: 4px;
  right: -9px;
  width: 9px;
  height: 10px;
  border: 3px solid var(--highlight);
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.scene-island {
  width: 100px;
  height: 80px;
  top: 8px;
}

.scene-island i {
  position: absolute;
  display: block;
}

.scene-island .is-sun {
  top: 2px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--highlight);
}

.scene-island .is-hill {
  bottom: 14px;
  left: 18px;
  width: 64px;
  height: 46px;
  background: linear-gradient(105deg, transparent 50%, rgb(17 17 20 / 0.18) 50%), var(--success-foreground);
  clip-path: polygon(50% 0, 72% 38%, 100% 100%, 0 100%, 26% 44%);
}

.scene-island .is-sea {
  bottom: 4px;
  left: 4px;
  width: 92px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
}

.scene-meals {
  display: grid;
  grid-template-columns: repeat(3, 24px);
  gap: 5px;
  padding: 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--foreground) 35%, transparent);
}

.scene-meals i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--card);
}

.scene-meals i.is-yellow::before,
.scene-meals i.is-green::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--highlight);
  box-shadow: inset 0 0 0 2px var(--highlight-foreground);
}

.scene-meals i.is-green::before {
  background: var(--success);
  box-shadow: inset 0 0 0 2px var(--success-foreground);
}

.showcase-websites .showcase-cover {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.showcase-automations .showcase-cover {
  background: var(--foreground);
  color: var(--highlight);
}

.showcase-images .showcase-cover {
  background: var(--primary-tint);
  color: var(--primary);
}

.showcase-games .showcase-cover {
  background: var(--primary);
  color: var(--highlight);
}

.showcase-videos .showcase-cover {
  background: var(--success);
  color: var(--success-foreground);
}

.showcase-3d-design .showcase-cover {
  background: var(--muted);
  color: var(--primary);
}

.showcase-category {
  padding-inline: 6px;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Each poster's category as a chip in its cover's colours, as the app's feed cards now wear theirs, so
   the band reads by kind at a glance (review-later R425). */
.showcase-category {
  width: fit-content;
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.showcase-websites .showcase-category {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.showcase-automations .showcase-category {
  background: var(--foreground);
  color: var(--highlight);
}

.showcase-images .showcase-category {
  background: var(--primary-tint);
  color: var(--primary);
}

.showcase-games .showcase-category {
  background: var(--primary);
  color: var(--highlight);
}

.showcase-videos .showcase-category {
  background: var(--success);
  color: var(--success-foreground);
}

.showcase-3d-design .showcase-category {
  background: var(--muted);
  color: var(--primary);
}

.showcase-title {
  padding-inline: 6px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Each example ends on its recipe's ticket stub, as the app's cards and the hero's example do: yellow,
   under a perforated edge with a notch cut either side in the band's ink, its step count as an ink
   pill (review-later R255). */
.showcase-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin: auto -10px 0;
  padding: 12px 16px 14px;
  border-top: 2px dashed color-mix(in srgb, var(--highlight-foreground) 35%, transparent);
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-size: 13px;
}

.showcase-meta::before,
.showcase-meta::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--foreground);
}

.showcase-meta::before {
  left: -8px;
}

.showcase-meta::after {
  right: -8px;
}

.showcase-steps {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--primary-foreground);
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .showcase-card {
    width: 264px;
  }

  .showcase-cover {
    height: 150px;
  }
}

.showcase.is-moving .showcase-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.showcase.is-moving .showcase-rows {
  padding-inline: 0;
  animation: showcase-drift 90s linear infinite;
}

.showcase.is-paused .showcase-rows,
.showcase-viewport:hover .showcase-rows {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  .showcase.is-moving .showcase-viewport {
    overflow-x: auto;
    mask-image: none;
  }

  .showcase.is-moving .showcase-rows {
    animation: none;
  }
}

/* The hidden attribute loses to a class's display (e.g. .button's inline-flex) without this. */
[hidden] {
  display: none !important;
}

.page .form-share-status {
  margin-top: 12px;
}

/* FAQ: the questions, numbered, with the short answers beside them on wide screens (and above
   them on phones). The open question sits on a white card. */
/* The questions in a chat window (review-later R289): a bar with Vibecipe's "v" over the
   conversation, white bubbles on the chat's grey, and at its foot a message field that writes to
   the team. */
.faq {
  max-width: 820px;
  margin-top: 28px;
  padding: 0 14px 14px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--muted);
  box-shadow: 0 34px 60px -44px color-mix(in srgb, var(--foreground) 55%, transparent);
  counter-reset: faq;
  overflow: clip;
}

@media (min-width: 760px) {
  .faq {
    padding: 0 24px 24px;
  }
}

.faq-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -14px 22px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

@media (min-width: 760px) {
  .faq-bar {
    margin: 0 -24px 26px;
    padding: 16px 24px;
  }
}

.faq-bar-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  line-height: 1;
}

.faq-bar-name {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.faq-bar-name small {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
}

.faq-bar-dots {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.faq-bar-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}

.faq-bar + .faq-group {
  margin-top: 0;
}

/* The chat's bar on the brand's blue, like a messaging app's: the name in paper, its line in yellow,
   the "v" ringed in yellow, the window's dots in paper (review-later R375). */
.faq-bar {
  border-bottom: 0;
  background: radial-gradient(90% 160% at 100% 0%, var(--primary-hover), transparent 60%), var(--primary);
  color: var(--primary-foreground);
}

.faq-bar-avatar {
  box-shadow:
    0 0 0 3px var(--primary),
    0 0 0 5px var(--highlight);
  color: var(--highlight);
}

.faq-bar-name small {
  color: var(--highlight);
}

.faq-bar-dots i {
  background: color-mix(in srgb, var(--primary-foreground) 55%, transparent);
}

/* The message field: a real link that writes to the team, drawn as the chat's input. */
.faq-compose {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 6px 6px 6px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 15px;
  text-decoration: none;
}

.faq-compose:hover {
  border-color: var(--primary);
}

.faq-compose-to {
  overflow: hidden;
  color: var(--foreground);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faq-compose-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 18px;
}

/* On phones the address alone fits beside the button. */
@media (max-width: 479px) {
  .faq-compose-field {
    display: none;
  }
}

/* The chat ends on an ink message bar rather than a white field: "Ask something else" in paper, the
   address in yellow and the send arrow on a yellow disc, like the page's yellow-and-ink buttons, so the
   way to write in reads as the chat's own composer (review-later R411). */
.faq-compose {
  border-color: var(--foreground);
  background: var(--foreground);
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--foreground) 80%, transparent);
  color: color-mix(in srgb, var(--primary-foreground) 72%, transparent);
}

.faq-compose:hover {
  border-color: var(--highlight);
}

.faq-compose-to {
  color: var(--highlight);
}

.faq-compose-send {
  width: 44px;
  height: 44px;
  background: var(--highlight);
  color: var(--foreground);
  font-weight: 700;
}

/* The questions in two groups, each under a divider like a chat's day marker: a pill with the group's
   colour dot, centred on a hairline (review-later R329); the numbering runs on through both. */
.faq-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 14px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-group:first-child {
  margin-top: 0;
}

.faq-group::before,
.faq-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}

.faq-group span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
}

.faq-group span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.faq-group-creators span {
  border-color: transparent;
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.faq-group-creators span::before {
  background: var(--highlight-foreground);
}

/* Vibecipe's greeting, the chat's first message: a big blue bubble under the brand's "v", the hello
   in the serif, so the window opens on a conversation rather than a list (review-later R467). */
.faq-hello {
  position: relative;
  max-width: 440px;
  margin: 0 0 0 40px;
  padding: 18px 20px 20px;
  border-radius: 4px 22px 22px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--primary) 80%, transparent);
}

.faq-hello strong {
  display: block;
  margin-bottom: 6px;
  color: var(--highlight);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.faq-hello::before {
  content: 'v';
  position: absolute;
  top: 0;
  left: -40px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1;
}

.faq-hello + .faq-group {
  margin-top: 26px;
}

@media (min-width: 760px) {
  .faq-hello {
    padding: 22px 26px 24px;
    font-size: 16px;
  }

  .faq-hello strong {
    font-size: 34px;
  }
}

/* Vibecipe typing: three dots in a reply bubble under the brand's "v", over the message field. The
   dots rise in turn a few times and then rest (WCAG 2.2.2), with motion allowed only. */
.faq-typing {
  position: relative;
  display: flex;
  gap: 5px;
  width: fit-content;
  margin: 22px 0 0 40px;
  padding: 14px 16px;
  border-radius: 4px 18px 18px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
}

.faq-typing::before {
  content: 'v';
  position: absolute;
  top: 0;
  left: -40px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1;
}

.faq-typing i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-typing i {
    animation: typing-dot 1.2s ease-in-out 5;
  }

  .faq-typing i:nth-child(2) {
    animation-delay: 0.15s;
  }

  .faq-typing i:nth-child(3) {
    animation-delay: 0.3s;
  }
}

@keyframes typing-dot {
  30% {
    translate: 0 -4px;
    opacity: 1;
  }
}

/* An answer slides open rather than jumping, where the browser can animate to the height of its
   content, and only for people who haven't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .faq {
      interpolate-size: allow-keywords;
    }

    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size 0.3s ease,
        content-visibility 0.3s allow-discrete;
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }
}

/* The questions as a chat (review-later R267): each question is the visitor's message, a white
   bubble on the right with its tail at the bottom right. Open, it fills with ink, and Vibecipe's
   reply comes in under it on the left. */
.faq details {
  margin: 0 0 12px;
  counter-increment: faq;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: min(100%, 640px);
  margin-left: auto;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--border);
  border-radius: 22px 22px 6px;
  background: var(--card);
  box-shadow: 0 12px 26px -22px color-mix(in srgb, var(--foreground) 70%, transparent);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.faq details[open] summary {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--primary-foreground);
}

.faq details[open] summary::before {
  color: var(--highlight);
}

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

/* The number is for the eye: screen readers skip it (the text after the slash). */
.faq summary::before {
  content: counter(faq, decimal-leading-zero);
  content: counter(faq, decimal-leading-zero) / '';
  flex: none;
  width: 24px;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* So is the round button: the question's own open or closed state says the same to screen readers.
   Open, it turns blue and its "+" turns into a "×". */
.faq summary::after {
  content: '+';
  content: '+' / '';
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--primary);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after {
  background: var(--primary);
  color: var(--primary-foreground);
  rotate: 45deg;
}

/* Each question's number on a blue disc and its button on yellow, so the list reads as a chat at a
   glance; open, the number turns yellow on the ink bubble and the button blue (review-later R379). */
.faq summary::before {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 16px;
  font-style: italic;
}

.faq details[open] summary::before {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.faq summary::after {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

/* The numbers as the app's recipe steps draw theirs: tilted tiles in the brand's colours in turn
   (blue, yellow, ink, green), so the eight questions read as eight stops; an open question's number
   stays yellow on its ink bubble (review-later R445). */
.faq summary::before {
  border-radius: 10px;
  rotate: -6deg;
  box-shadow: 0 8px 14px -10px rgb(17 17 20 / 0.7);
}

.faq details:nth-of-type(4n + 2) summary::before {
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 5deg;
}

.faq details:nth-of-type(4n + 3) summary::before {
  background: var(--foreground);
  color: var(--highlight);
}

.faq details:nth-of-type(4n + 4) summary::before {
  background: var(--success);
  color: var(--success-foreground);
  rotate: 5deg;
}

.faq details[open]:nth-of-type(n) summary::before {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

/* An answer is Vibecipe's reply: a bubble in the brand's palest blue, under the brand's "v". */
.faq .answer {
  position: relative;
  max-width: min(calc(100% - 40px), 640px);
  margin: 14px 0 22px 40px;
  padding: 14px 16px;
  border-radius: 4px 18px 18px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
  color: var(--body);
}

.faq .answer::before {
  content: 'v';
  content: 'v' / '';
  position: absolute;
  top: 0;
  left: -40px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1;
}

.faq .answer p + p {
  margin-top: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .faq summary::after {
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      rotate 0.3s ease;
  }

  .faq summary {
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .faq details[open] .answer {
    animation: reply-in 0.35s ease both;
  }
}

/* The reply rises into place; never faded, so its text keeps its contrast. */
@keyframes reply-in {
  from {
    translate: 0 10px;
  }
}

.faq-card {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

.faq-card-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin-top: 16px;
}

.faq-facts dt {
  color: var(--muted-foreground);
  font-size: 13px;
}

.faq-facts dd {
  margin: 2px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.35;
}

.faq-facts strong {
  display: block;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.faq-card-contact {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--body);
  font-size: 14px;
}

.faq-card-contact a {
  color: var(--primary);
  font-weight: 700;
}

/* The short answers on the brand's blue, their figures in yellow and a big faint "?" in the corner, so
   the four answers most people came for stand out from the questions (review-later R229). The labels
   stay in full paper colour for their contrast. */
.faq-card {
  position: relative;
  overflow: clip;
  border-color: transparent;
  background:
    radial-gradient(
      90% 70% at 100% 0%,
      color-mix(in srgb, var(--primary-hover) 70%, transparent),
      transparent 70%
    ),
    var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 28px 56px -32px color-mix(in srgb, var(--primary) 80%, transparent);
}

.faq-card::after {
  content: '?' / '';
  position: absolute;
  right: -8px;
  bottom: -54px;
  color: color-mix(in srgb, var(--primary-foreground) 12%, transparent);
  font-family: var(--serif);
  font-size: 200px;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
}

.faq-card > * {
  position: relative;
  z-index: 1;
}

.faq-card .faq-facts dt,
.faq-card .faq-facts dd,
.faq-card .faq-card-contact {
  color: var(--primary-foreground);
}

.faq-card .faq-facts strong,
.faq-card .faq-card-contact a {
  color: var(--highlight);
}

.faq-card .faq-card-contact {
  border-top-color: color-mix(in srgb, var(--primary-foreground) 25%, transparent);
}

.faq-card :focus-visible {
  outline-color: var(--highlight);
}

/* The card's "Something else?" line as the chat composer in small: an ink pill, the address in yellow,
   ending on a yellow arrow disc, so the way to write in looks the same in both places
   (review-later R413). The arrow is for the eye only. */
.faq-card .faq-card-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.faq-card .faq-card-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 14px;
  border-radius: 999px;
  background: var(--foreground);
  box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--foreground) 80%, transparent);
  text-decoration: none;
}

.faq-card .faq-card-contact a::after {
  content: '→' / '';
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--foreground);
  font-weight: 700;
}

/* Each short answer is its own tile, laid on the blue like four cards tossed down: the launch year on
   yellow, the token's price on paper, the creators' share on ink and the payouts on green, each tilted
   a touch in turn (review-later R359). The figures stay big in the serif, the words under them. */
.faq-card .faq-facts {
  gap: 12px;
}

.faq-card .faq-facts > div {
  padding: 12px 12px 14px;
  border-radius: 14px;
  box-shadow: 0 14px 22px -16px color-mix(in srgb, var(--foreground) 80%, transparent);
}

.faq-card .faq-facts > div:nth-child(1) {
  background: var(--highlight);
  rotate: -2deg;
}

.faq-card .faq-facts > div:nth-child(2) {
  background: var(--card);
  rotate: 1.5deg;
}

.faq-card .faq-facts > div:nth-child(3) {
  background: var(--foreground);
  rotate: 1.5deg;
}

.faq-card .faq-facts > div:nth-child(4) {
  background: var(--success);
  rotate: -2deg;
}

.faq-card .faq-facts > div:nth-child(1) :is(dt, dd, strong) {
  color: var(--highlight-foreground);
}

.faq-card .faq-facts > div:nth-child(2) :is(dt, dd) {
  color: var(--body);
}

.faq-card .faq-facts > div:nth-child(2) strong {
  color: var(--primary);
}

.faq-card .faq-facts > div:nth-child(3) :is(dt, dd) {
  color: var(--primary-foreground);
}

.faq-card .faq-facts > div:nth-child(4) :is(dt, dd, strong) {
  color: var(--success-foreground);
}

.faq-card .faq-facts dt {
  font-weight: 700;
}

/* Beside the questions the card is narrow, so the tiles' figures come down a size to stay inside. */
@media (min-width: 960px) {
  .faq-card .faq-facts strong {
    font-size: 25px;
  }

  .faq-card .faq-facts > div {
    padding: 10px 10px 12px;
  }
}

/* Wide screens: the title and the short answers on the left, staying in view while the questions
   scroll by on the right. */
@media (min-width: 960px) {
  .faq-section {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 72px;
  }

  .faq-section .faq {
    grid-row: 1 / span 2;
    grid-column: 2;
    max-width: none;
    margin-top: 0;
  }

  .faq-card {
    position: sticky;
    top: 96px;
    align-self: start;
    margin-top: 28px;
    padding: 24px;
  }
}

/* Footer */
.site-footer {
  padding: 40px 0 56px;
  color: var(--muted-foreground);
  font-size: 14px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--body);
}

/* The home page's footer: the brand line, then the page's sections, ways to join and contact. */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 32px 24px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

@media (min-width: 860px) {
  .site-footer .footer-grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
}

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

@media (min-width: 860px) {
  .footer-brand {
    grid-column: auto;
  }
}

.footer-brand p {
  max-width: 300px;
  margin-top: 10px;
  color: var(--body);
}

/* The launch year as the hero's small ticket, in the footer's colours (review-later R299): an
   outlined "Launching in", then past a perforation the year in the serif on a yellow stub. */
.footer-brand .footer-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  margin-top: 16px;
  overflow: hidden;
  padding-left: 14px;
  border: 1px solid color-mix(in srgb, var(--primary-foreground) 35%, transparent);
  border-radius: 999px;
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 700;
}

.footer-launch-year {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 6px 14px 6px 12px;
  border-left: 2px dashed color-mix(in srgb, var(--highlight-foreground) 40%, transparent);
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.footer-column h2 {
  margin: 0 0 10px;
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-column ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.footer-column a {
  color: var(--body);
}

.footer-legal {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* The very end of every page: the name, edge to edge, cut off by the bottom of the page. It rises
   into place as the page's end scrolls into view, where the browser can tie motion to scrolling and
   motion is welcome (review-later R205). */
.site-footer:has(.footer-wordmark) {
  overflow: clip;
  padding-bottom: 0;
}

.footer-wordmark {
  margin: 40px 0 -0.2em;
  color: var(--foreground);
  font-family: var(--serif);
  font-size: clamp(84px, 25vw, 360px);
  line-height: 0.8;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.footer-wordmark em {
  color: var(--primary);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .footer-wordmark {
      animation: wordmark-rise linear both;
      animation-timeline: view();
      /* Done by 70% in: the page's foot cuts the name's lower quarter, so it never comes in whole. */
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes wordmark-rise {
  /* Rising only, never faded, so the name keeps its contrast wherever the page is scrolled. */
  from {
    transform: translateY(35%);
  }
}

/* Every page ends on ink: the footer is dark with a blue glow in its corner, its words and links in
   paper, its headings in yellow, and the big name in paper and lighter blue, so each page closes on
   the brand as the examples band does midway (review-later R237). */
.site-footer {
  background:
    radial-gradient(
      70% 80% at 100% 100%,
      color-mix(in srgb, var(--primary) 42%, transparent),
      transparent 70%
    ),
    var(--foreground);
  color: color-mix(in srgb, var(--primary-foreground) 78%, transparent);
}

.site-footer .footer-grid {
  border-top: 0;
}

.site-footer .logo,
.site-footer .footer-wordmark {
  color: var(--primary-foreground);
}

.site-footer .logo em,
.site-footer .footer-wordmark em {
  color: var(--primary-hover);
}

.site-footer .footer-brand p,
.site-footer .footer-column a,
.site-footer .footer-links a {
  color: color-mix(in srgb, var(--primary-foreground) 88%, transparent);
}

.site-footer .footer-column a:hover,
.site-footer .footer-links a:hover {
  color: var(--primary-foreground);
}

.site-footer .footer-column h2 {
  color: var(--highlight);
}

.site-footer .footer-legal {
  border-top-color: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
}

.site-footer :focus-visible {
  outline-color: var(--highlight);
}

/* The page's chapters as tiles: each link a dark card with its chapter number big in the serif, as
   the header and the menu number them, and an arrow at its end; it turns blue under the pointer
   (review-later R363). The numbers and arrows are for the eye: screen readers hear the words. */
.site-footer nav[aria-labelledby='footer-page'] a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--primary-foreground) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-foreground) 6%, transparent);
  color: var(--primary-foreground);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.site-footer nav[aria-labelledby='footer-page'] a::before {
  content: '01' / '';
  flex: none;
  width: 30px;
  color: var(--highlight);
  font-family: var(--serif);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

.site-footer nav[aria-labelledby='footer-page'] li:nth-child(2) a::before {
  content: '03' / '';
}

.site-footer nav[aria-labelledby='footer-page'] li:nth-child(3) a::before {
  content: '06' / '';
}

/* The chapter numbers on tilted tiles in the brand's colours in turn (blue, yellow, green on the ink),
   as the app's recipe steps and the questions number theirs (review-later R451). */
.site-footer nav[aria-labelledby='footer-page'] a::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  rotate: -6deg;
  box-shadow: 0 8px 14px -10px rgb(0 0 0 / 0.9);
}

.site-footer nav[aria-labelledby='footer-page'] li:nth-child(2) a::before {
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 5deg;
}

.site-footer nav[aria-labelledby='footer-page'] li:nth-child(3) a::before {
  background: var(--success);
  color: var(--success-foreground);
}

.site-footer nav[aria-labelledby='footer-page'] a:hover::before {
  background: var(--card);
  color: var(--primary);
}

.site-footer nav[aria-labelledby='footer-page'] a::after {
  content: '→' / '';
  margin-left: auto;
  color: var(--highlight);
}

.site-footer nav[aria-labelledby='footer-page'] a:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

@media (prefers-reduced-motion: no-preference) {
  .site-footer nav[aria-labelledby='footer-page'] a {
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease;
  }
}

/* The contact links as tiles beside the chapters: each a dark card with its picture on a yellow
   square, a letter for the email and a shield for privacy, turning blue under the pointer
   (review-later R367). The square and its picture are for the eye. */
/* Below the four-column footer, the column spans the footer, so the address keeps to one line. */
@media (max-width: 859.98px) {
  .site-footer nav[aria-labelledby='footer-contact'] {
    grid-column: 1 / -1;
  }
}

.site-footer nav[aria-labelledby='footer-contact'] ul {
  gap: 8px;
}

.site-footer nav[aria-labelledby='footer-contact'] a {
  --contact-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--primary-foreground) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-foreground) 6%, transparent);
  color: var(--primary-foreground);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.site-footer nav[aria-labelledby='footer-contact'] li:last-child a {
  --contact-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.5 7 10 4-1.5 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.site-footer nav[aria-labelledby='footer-contact'] a::before {
  content: '';
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--highlight);
}

.site-footer nav[aria-labelledby='footer-contact'] a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 18px;
  background: var(--highlight-foreground);
  translate: 0 -50%;
  -webkit-mask: var(--contact-glyph) center / contain no-repeat;
  mask: var(--contact-glyph) center / contain no-repeat;
}

.site-footer nav[aria-labelledby='footer-contact'] a:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

/* The two ways to join, as the tickets the forms end on: the application in blue, the launch alert in
   yellow, each with a notch cut either side and its arrow past a dashed perforation
   (review-later R283). */
.site-footer nav[aria-labelledby='footer-join'] ul {
  gap: 10px;
}

.site-footer nav[aria-labelledby='footer-join'] a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 270px;
  padding: 11px 14px 11px 18px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  -webkit-mask:
    radial-gradient(circle 7px at 0 50%, transparent 97%, black) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, transparent 97%, black) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 7px at 0 50%, transparent 97%, black) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, transparent 97%, black) right / 51% 100% no-repeat;
}

.site-footer nav[aria-labelledby='footer-join'] a::after {
  content: '→';
  content: '→' / '';
  flex: none;
  padding-left: 14px;
  border-left: 2px dashed color-mix(in srgb, currentColor 45%, transparent);
  font-size: 18px;
}

.site-footer nav[aria-labelledby='footer-join'] a:focus-visible {
  -webkit-mask: none;
  mask: none;
}

.site-footer nav[aria-labelledby='footer-join'] li + li a {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.site-footer nav[aria-labelledby='footer-join'] a:hover {
  color: var(--primary-foreground);
  translate: 0 -2px;
}

.site-footer nav[aria-labelledby='footer-join'] li + li a:hover {
  color: var(--highlight-foreground);
}

@media (prefers-reduced-motion: no-preference) {
  .site-footer nav[aria-labelledby='footer-join'] a {
    transition: translate 0.2s ease;
  }
}

/* The closing band: the headline and both ways to join, once more, at the end of the page. */
/* The page ends on a ticket (review-later R287): the headline and the picture above, then a
   perforation with a notch cut either side, and the stub holding both ways to join. The buttons come
   first in the page for screen readers and keyboards, and are shown last. */
.closing {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Clip, not hidden: "hidden" would make the band a scroll container, and the fan's
     scroll-linked animation would measure against the band instead of the page. */
  overflow: clip;
  margin: 72px 0 24px;
  padding: 40px 28px;
  border-radius: 28px;
  background: radial-gradient(circle at 85% 0%, var(--primary-hover), transparent 55%), var(--primary);
  color: var(--primary-foreground);
}

@media (min-width: 760px) {
  .closing {
    padding: 64px 56px;
  }
}

.closing-mark {
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 120px;
  height: 120px;
  border-radius: 28px;
  opacity: 0.22;
  transform: rotate(-12deg);
}

@media (min-width: 760px) {
  .closing-mark {
    right: -28px;
    bottom: -36px;
    width: 200px;
    height: 200px;
    border-radius: 44px;
  }
}

.closing-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.closing-title {
  position: relative;
  max-width: 640px;
  margin-top: 12px;
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The closing promise in yellow over a highlighter's swipe, as the app's welcome has it, so the page
   ends on the same words it opened with, marked (review-later R389). */
.closing-title em {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 4px;
  background: linear-gradient(
    transparent 60%,
    color-mix(in srgb, var(--foreground) 30%, transparent) 60%,
    color-mix(in srgb, var(--foreground) 30%, transparent) 94%,
    transparent 94%
  );
  color: var(--highlight);
}

.closing-actions {
  position: relative;
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* To the band's edges and its foot: the stub. */
  margin: 36px -28px -40px;
  padding: 28px 28px 30px;
  border-top: 2px dashed color-mix(in srgb, var(--primary-foreground) 45%, transparent);
  background: color-mix(in srgb, var(--foreground) 22%, transparent);
}

/* The notches, in the page's paper, centred on the perforation. */
/* The closing band's main ask in the brand's yellow, ending on an ink arrow disc like the forms'
   buttons, so the last thing on the page is the one button to press (review-later R415). The arrow is
   for the eye only. */
.closing-actions .button-light {
  gap: 12px;
  padding-right: 8px;
  background: var(--highlight);
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--foreground) 80%, transparent);
  color: var(--foreground);
}

.closing-actions .button-light::after {
  content: '→' / '';
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--highlight);
  font-weight: 700;
}

.closing-actions::before,
.closing-actions::after {
  content: '';
  position: absolute;
  top: -19px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--background);
}

.closing-actions::before {
  left: -18px;
}

.closing-actions::after {
  right: -18px;
}

@media (min-width: 760px) {
  .closing-actions {
    margin: 44px -56px -64px;
    padding: 30px 56px 34px;
  }
}

/* "Admit one" as a small ticket of its own, the same as the hero's launch line (review-later R297):
   white, with the coin, then past a perforation the year in the serif, yellow on an ink stub. The page
   opens and closes on it. */
.closing-admit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  overflow: hidden;
  padding-left: 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--foreground) 70%, transparent);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.closing-admit-year {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin-left: 4px;
  padding: 8px 16px 8px 14px;
  border-left: 2px dashed var(--border-strong);
  background: var(--foreground);
  color: var(--highlight);
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* The ending's fan of what the page promised: a showcase, its recipe and an unlock, dealt out as the
   band scrolls into view (where the browser can tie motion to scrolling, and motion is welcome);
   otherwise simply fanned. Beside the title on wide screens, under the buttons on phones
   (review-later R199). */
.closing-fan {
  position: relative;
  width: 100%;
  height: 230px;
  margin: 36px auto 0;
  max-width: 320px;
}

/* Wide screens: the headline beside the picture, the stub across the foot. */
@media (min-width: 1024px) {
  .closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 48px;
  }

  .closing-eyebrow {
    grid-area: 1 / 1;
    align-self: end;
  }

  .closing-title {
    grid-area: 2 / 1;
    align-self: start;
  }

  .closing-fan {
    grid-area: 1 / 2 / 3 / 3;
    width: 380px;
    max-width: none;
    height: 300px;
    margin: 0;
  }

  .closing-actions {
    grid-area: 3 / 1 / 4 / 3;
  }
}

.fan-card,
.fan-toast {
  position: absolute;
  border-radius: 16px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 24px 40px -20px color-mix(in srgb, var(--foreground) 60%, transparent);
}

.fan-showcase {
  top: 0;
  left: 0;
  display: grid;
  gap: 10px;
  width: 58%;
  padding: 10px 10px 14px;
  transform: rotate(-8deg);
}

.fan-cover {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  border-radius: 10px;
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.fan-cover svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fan-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--success);
  color: var(--success-foreground);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fan-line {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

.fan-line-title {
  width: 80%;
  height: 10px;
  background: var(--border-strong);
}

.fan-chips {
  display: flex;
  gap: 6px;
}

.fan-chips i {
  width: 30%;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

/* The ending's picture follows the same real example as How it works (review-later R301): the yoga
   studio's booking site, its tools and its public step titles, all words the page already shows. */
.closing-fan .fan-line-title {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.15;
}

.closing-fan .fan-chips i {
  width: auto;
  height: auto;
  padding: 2px 8px;
  color: var(--body);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.closing-fan .fan-recipe .fan-step i {
  height: auto;
  overflow: hidden;
  border-radius: 0;
  background: none;
  color: var(--primary-foreground);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On the closing band's blue, the same ticket in ink, with its perforation; no notches, since the
   card behind it would show through them. */
.fan-recipe {
  top: 18%;
  right: 0;
  display: grid;
  gap: 10px;
  width: 58%;
  padding: 14px;
  background: var(--foreground);
  color: var(--primary-foreground);
  transform: rotate(6deg);
}

.fan-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--primary-foreground) 40%, transparent);
  font-size: 12px;
  font-weight: 700;
}

.fan-recipe-head b {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fan-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fan-step b {
  color: var(--primary);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
}

.fan-step i {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

.fan-recipe .fan-step b {
  color: var(--highlight);
}

.fan-recipe .fan-step i {
  background: color-mix(in srgb, var(--primary-foreground) 25%, transparent);
}

/* The ending's recipe numbers its steps on the tilted tiles the recipes and questions use, blue,
   yellow and white on its ink card (review-later R459). */
.closing-fan .fan-recipe .fan-step b {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 13px;
  line-height: 1;
  rotate: -6deg;
}

.closing-fan .fan-recipe .fan-step:nth-of-type(3) b {
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 5deg;
}

.closing-fan .fan-recipe .fan-step:nth-of-type(4) b {
  background: var(--card);
  color: var(--primary);
}

.fan-toast {
  bottom: 0;
  left: 14%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(-3deg);
}

.fan-coin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow:
    inset 0 0 0 3px var(--highlight),
    inset 0 0 0 5px var(--primary);
}

@media (min-width: 1024px) {
  .fan-cover {
    height: 120px;
  }

  .fan-toast {
    font-size: 13px;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fan-card,
    .fan-toast {
      animation: fan-deal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

/* Four categories' pictures as stickers stuck round the fan, each on its own colour and tilted, with a
   paper edge like a sticker's: what people make, one last time (review-later R365). */
.fan-sticker {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--card);
  border-radius: 14px;
  box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--foreground) 80%, transparent);
}

.fan-sticker svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.fan-sticker-apps {
  top: -16px;
  right: 2%;
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 12deg;
}

.fan-sticker-images {
  top: -18px;
  left: 30%;
  background: var(--success);
  color: var(--success-foreground);
  rotate: -14deg;
}

.fan-sticker-automations {
  bottom: -18px;
  left: -8px;
  background: var(--card);
  color: var(--primary);
  rotate: 8deg;
}

.fan-sticker-games {
  right: -4px;
  bottom: -16px;
  background: var(--foreground);
  color: var(--highlight);
  rotate: -10deg;
}

@media (min-width: 1024px) {
  .fan-sticker {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .fan-sticker svg {
    width: 26px;
    height: 26px;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fan-sticker {
      animation: sticker-on linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 100%;
    }
  }
}

/* Each sticker is pressed on: from a little larger, flat, to its place. */
@keyframes sticker-on {
  from {
    opacity: 0;
    scale: 1.4;
  }
}

/* From one stack in the middle to where each one rests. */
@keyframes fan-deal {
  from {
    opacity: 0;
    transform: translate(0, 30px) rotate(0deg) scale(0.92);
  }
}

.button-light {
  background: var(--card);
  color: var(--foreground);
}

.button-light:hover {
  background: var(--primary-foreground);
  color: var(--foreground);
}

.button-ghost-light {
  border-color: rgb(244 242 236 / 0.5); /* --primary-foreground, faded */
  background: transparent;
  color: var(--primary-foreground);
}

.button-ghost-light:hover {
  border-color: var(--primary-foreground);
  background: rgb(244 242 236 / 0.1);
  color: var(--primary-foreground);
}

/* The closing band's launch alert ask on ink with the hero's yellow bell disc at its start, so both
   asks at the foot of the page are solid buttons, not one and a faint outline (review-later R419). The
   bell is for the eye only. */
.closing-actions .button-ghost-light {
  gap: 10px;
  padding-left: 8px;
  border-color: var(--foreground);
  background: var(--foreground);
}

.closing-actions .button-ghost-light:hover {
  border-color: var(--highlight);
  background: var(--foreground);
}

.closing-actions .button-ghost-light::before {
  content: '' / '';
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--highlight)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")
    center / 18px 18px no-repeat;
}

/* Once the page has scrolled past the hero, the header's "Apply for the beta" ticket turns the brand's
   yellow, so the ask stays loud while you read; at the top it stays blue beside the hero's own blue
   ticket. Tied to scrolling where the browser can, a colour change rather than a movement; elsewhere
   it simply stays blue (review-later R421). */
@supports (animation-timeline: scroll()) {
  .site-header .button {
    animation: header-ask linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 700px;
  }
}

@keyframes header-ask {
  0%,
  85% {
    background: var(--primary);
    color: var(--primary-foreground);
  }
  100% {
    background: var(--highlight);
    color: var(--foreground);
  }
}

/* Simple pages: privacy, confirmed, not found */
.page {
  max-width: 720px;
  padding: 56px 0 72px;
}

.page h1 {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.page h2 {
  margin-top: 36px;
  font-size: 19px;
  font-weight: 700;
}

.page p,
.page ul {
  margin-top: 12px;
  color: var(--body);
  font-size: 16px;
}

.page ul {
  padding-left: 22px;
}

.page li + li {
  margin-top: 6px;
}

.note {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-weight: 600;
}

.page .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* A document page (privacy): the title over a contents list and numbered sections; from wide
   screens, the contents stay in view on the left and mark the section being read. */
.doc {
  display: grid;
  gap: 28px;
  padding: 48px 0 80px;
}

@media (min-width: 960px) {
  .doc {
    grid-template-columns: 240px minmax(0, 720px);
    grid-template-rows: auto 1fr;
    column-gap: 72px;
    padding: 72px 0 104px;
  }

  .doc-head {
    grid-column: 2;
  }

  .doc-toc {
    grid-row: 1 / span 2;
    grid-column: 1;
    position: sticky;
    top: 104px;
    align-self: start;
  }

  .doc-body {
    grid-column: 2;
  }
}

.doc-eyebrow {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-head h1 {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .doc-head h1 {
    font-size: 64px;
  }
}

/* The notice opens on the brand's blue, with a sheet of it and its seal beside the title, and the
   placeholder note on top like a sticky note (review-later R265). */
.doc-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px 22px 22px;
  border-radius: 24px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.doc-head::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -25%;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary-foreground) 26%, transparent),
    transparent 70%
  );
}

.doc-head .doc-eyebrow {
  color: var(--highlight);
}

.doc-art {
  position: relative;
  width: 150px;
  height: 118px;
  margin-bottom: 20px;
}

.doc-sheet {
  position: absolute;
  top: 0;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100px;
  height: 112px;
  padding: 18px 14px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--foreground) 80%, transparent);
  transform: rotate(4deg);
}

.doc-sheet-back {
  left: 38px;
  background: color-mix(in srgb, var(--card) 45%, var(--primary));
  transform: rotate(15deg);
}

.doc-sheet i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
}

.doc-sheet i:first-child {
  width: 62%;
  height: 9px;
  margin-bottom: 4px;
  background: var(--primary);
}

.doc-sheet i:nth-child(3) {
  width: 82%;
}

.doc-sheet i:last-child {
  width: 52%;
}

.doc-seal {
  position: absolute;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--highlight-foreground);
  box-shadow: 0 0 0 4px var(--primary);
}

@media (min-width: 640px) {
  .doc-head {
    padding: 36px 40px 34px;
    border-radius: 28px;
  }

  .doc-art {
    position: absolute;
    top: 28px;
    right: 40px;
    width: 176px;
    height: 140px;
    margin: 0;
  }

  .doc-sheet {
    width: 118px;
    height: 132px;
    padding: 22px 16px;
  }

  .doc-sheet-back {
    left: 44px;
  }

  .doc-seal {
    width: 60px;
    height: 60px;
  }
}

.doc-toc h2 {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-toc ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.doc-toc li {
  counter-increment: toc;
}

.doc-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* Each section's number on a round badge in its tile's colour, in the same turn (blue, yellow, ink,
   green), so the contents match the sections they lead to (review-later R281). */
.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  content: counter(toc, decimal-leading-zero) / '';
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 11px;
  font-weight: 800;
}

.doc-toc li:nth-child(4n + 2) a::before {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.doc-toc li:nth-child(4n + 3) a::before {
  background: var(--foreground);
  color: var(--highlight);
}

.doc-toc li:nth-child(4n) a::before {
  background: var(--success);
  color: var(--success-foreground);
}

.doc-toc a:hover {
  border-color: var(--primary);
}

.doc-toc a[aria-current] {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--primary-foreground);
}

.doc-toc li a[aria-current]::before {
  background: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
  color: var(--highlight);
}

/* On phones the contents stay in reach while reading: one row of chips under the header that scrolls
   sideways, the one being read dark with its number in yellow, as in the home page's menu
   (review-later R223). */
@media (max-width: 959px) {
  .doc-toc {
    position: sticky;
    top: 68px;
    z-index: 5;
    min-width: 0; /* the one-line row scrolls, rather than widening the page */
    margin-inline: calc(var(--gutter) * -1);
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .doc-toc h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .doc-toc ol {
    flex-wrap: nowrap;
    margin-top: 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .doc-toc li {
    flex: none;
  }
}

/* Side by side, the contents are a quiet list with a rail. */
@media (min-width: 960px) {
  .doc-toc ol {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    border-left: 2px solid var(--border);
  }

  .doc-toc a {
    margin-left: -2px;
    padding: 6px 14px 6px 10px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted-foreground);
  }

  .doc-toc a:hover {
    color: var(--foreground);
  }

  /* The one being read: a dark pill on the rail, its number in yellow (review-later R223). */
  .doc-toc a[aria-current] {
    border-left-color: transparent;
    border-radius: 999px;
    background: var(--foreground);
    color: var(--primary-foreground);
  }

  .doc-toc a[aria-current]::before {
    color: var(--highlight);
  }
}

.doc-body {
  display: grid;
  gap: 14px;
}

.doc-section {
  position: relative;
  padding: 24px 24px 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  scroll-margin-top: 92px;
}

@media (min-width: 768px) {
  .doc-section {
    padding: 28px 32px 30px 96px;
  }
}

/* Each section's number on a tile with its picture, in the home page's colours by turn: blue,
   yellow, ink, green (review-later R265). The number rides on the tile's corner. */
.doc-number {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.doc-number b {
  position: absolute;
  right: -9px;
  bottom: -7px;
  min-width: 26px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.doc-tone-blue {
  background: var(--primary);
  color: var(--primary-foreground);
}

.doc-tone-yellow {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.doc-tone-ink {
  background: var(--foreground);
  color: var(--highlight);
}

.doc-tone-green {
  background: var(--success);
  color: var(--success-foreground);
}

.doc-number svg,
.doc-seal svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .doc-number {
    position: absolute;
    top: 26px;
    left: 26px;
    width: 52px;
    height: 52px;
  }
}

/* Each section wears its tile's colour as a thick spine down its left edge, and its tile is tilted a
   touch, in turn one way then the other, like the app's stat tiles, so the long notice reads as seven
   distinct cards (review-later R423). For the eye only. */
.doc-section:has(.doc-tone-blue) {
  --doc-spine: var(--primary);
}

.doc-section:has(.doc-tone-yellow) {
  --doc-spine: var(--highlight);
}

.doc-section:has(.doc-tone-ink) {
  --doc-spine: var(--foreground);
}

.doc-section:has(.doc-tone-green) {
  --doc-spine: var(--success-foreground);
}

.doc-section {
  border-left: 6px solid var(--doc-spine, var(--border));
}

.doc-number {
  box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--foreground) 75%, transparent);
  rotate: -6deg;
}

.doc-section:nth-child(even) .doc-number {
  rotate: 6deg;
}

.doc-section h2 {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .doc-section h2 {
    margin-top: 4px;
  }
}

.doc-section p,
.doc-section ul {
  margin-top: 10px;
  color: var(--body);
  font-size: 16px;
}

.doc-section ul {
  padding-left: 20px;
}

.doc-section li + li {
  margin-top: 8px;
}

/* The not-found page: the way back as cards, beside a recipe card whose last step is missing, in
   front of a giant 404. The card settles in once, motion-safe. */
.lost {
  display: grid;
  align-items: center;
  gap: 40px;
  padding: 48px 0 72px;
}

@media (min-width: 900px) {
  .lost {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    padding: 80px 0 104px;
  }
}

.lost-eyebrow {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The privacy notice's title, on its blue head, marks "notice" in yellow italics over a darker
   highlighter's swipe, as the home page's closing band marks its promise; the words are unchanged
   (review-later R405). */
.doc-head h1 em {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 4px;
  background: linear-gradient(
    transparent 60%,
    color-mix(in srgb, var(--foreground) 30%, transparent) 60%,
    color-mix(in srgb, var(--foreground) 30%, transparent) 94%,
    transparent 94%
  );
  color: var(--highlight);
}

/* "isn't here." in the hero's blue italics over its highlighter stroke, drawn once (motion-safe), as
   the thank-you page marks its headline, so even a wrong turn speaks the page's language
   (review-later R403). */
.lost-title em {
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.34em;
  color: var(--primary);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
  .lost-title em {
    animation: hero-highlight 1.1s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

.lost-title {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .lost-title {
    font-size: 64px;
  }
}

.lost-lead {
  max-width: 520px;
  margin-top: 14px;
  color: var(--body);
  font-size: 17px;
}

.lost-links {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

/* Each way back has its picture in its own colour, as on the home page: the invite in blue, the one
   email in yellow, the questions in ink (review-later R263). */
.lost-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--foreground);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.lost-link-icon {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

.lost-link-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lost-link-apply {
  background: var(--primary);
  color: var(--primary-foreground);
}

.lost-link-notify {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.lost-link-faq {
  background: var(--foreground);
  color: var(--highlight);
}

.lost-link-title,
.lost-link-text {
  grid-column: 2;
}

/* The arrow is for the eye: the card's words name the link. It sits in a round button that fills
   with the brand's blue on hover. */
.lost-links a::after {
  content: '→';
  content: '→' / '';
  display: grid;
  grid-row: 1 / span 2;
  grid-column: 3;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--primary);
  font-size: 18px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.lost-links a:hover {
  border-color: var(--primary);
  box-shadow: 0 16px 30px -24px color-mix(in srgb, var(--primary) 70%, transparent);
}

.lost-links a:hover::after {
  background: var(--primary);
  color: var(--primary-foreground);
  transform: translateX(3px);
}

.lost-link-title {
  font-weight: 700;
}

.lost-link-text {
  color: var(--muted-foreground);
  font-size: 14px;
}

.lost-actions {
  margin-top: 24px;
}

/* Each way back is a whole card in its colour, laid down a touch askew: the invite on blue, the one
   email on yellow, the questions on ink. Their pictures sit on paper squares in the card's colour, and
   the arrow on a paper circle (review-later R369). */
.lost-links li:nth-child(1) a {
  --lost-bg: var(--primary);
  --lost-fg: var(--primary-foreground);
  --lost-mark: var(--primary);
  rotate: -1deg;
}

.lost-links li:nth-child(2) a {
  --lost-bg: var(--highlight);
  --lost-fg: var(--highlight-foreground);
  --lost-mark: var(--highlight-foreground);
  rotate: 0.8deg;
}

.lost-links li:nth-child(3) a {
  --lost-bg: var(--foreground);
  --lost-fg: var(--primary-foreground);
  --lost-mark: var(--foreground);
  rotate: -0.6deg;
}

.lost-links a {
  border-color: transparent;
  background: var(--lost-bg);
  color: var(--lost-fg);
  box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--foreground) 80%, transparent);
}

.lost-links a .lost-link-icon {
  background: var(--card);
  color: var(--lost-mark);
}

.lost-links a .lost-link-text {
  color: var(--lost-fg);
}

.lost-links a::after {
  background: var(--card);
  color: var(--lost-mark);
}

.lost-links a:hover {
  border-color: transparent;
  rotate: 0deg;
  box-shadow: 0 24px 36px -22px color-mix(in srgb, var(--foreground) 80%, transparent);
}

.lost-links a:hover::after {
  background: var(--card);
  color: var(--lost-mark);
}

@media (prefers-reduced-motion: no-preference) {
  .lost-links a {
    transition:
      rotate 0.2s ease,
      box-shadow 0.2s ease;
  }
}

.lost-art {
  position: relative;
  display: grid;
  min-height: 260px;
  place-items: center;
}

@media (min-width: 900px) {
  .lost-art {
    min-height: 380px;
  }
}

/* On phones the 404 stands above the card, which overlaps its foot; side by side, it's behind it. */
.lost-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 170px;
  line-height: 1;
  letter-spacing: -0.05em;
}

@media (min-width: 900px) {
  .lost-number {
    align-items: center;
    font-size: 260px;
  }
}

.lost-card {
  position: relative;
  width: min(290px, 84%);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 30px 60px -30px rgb(17 17 20 / 0.45);
  margin-top: 120px;
  transform: rotate(-5deg);
}

@media (min-width: 900px) {
  .lost-card {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lost-card {
    animation: lost-settle 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

/* The picture sits on a white panel with the hero's blueprint grid and a blue glow, and on phones it
   comes first, smaller, so the missing step shows without scrolling (review-later R225). */
.lost-art {
  isolation: isolate;
  overflow: clip;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(60% 55% at 50% 40%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 72%),
    var(--card);
}

.lost-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
}

@media (max-width: 899px) {
  .lost {
    gap: 28px;
    padding-top: 28px;
  }

  .lost-art {
    order: -1;
    min-height: 0;
    padding: 18px 0 30px;
  }

  .lost-number {
    top: 18px;
    font-size: 128px;
  }

  .lost-card {
    margin-top: 108px;
  }
}

@keyframes lost-settle {
  from {
    transform: rotate(3deg) translateY(24px);
  }
}

.lost-card-kicker {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lost-card-title {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
}

.lost-steps {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lost;
}

.lost-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  counter-increment: lost;
}

.lost-steps li::before {
  content: counter(lost);
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lost-steps li.is-done::before {
  content: '✓';
  background: var(--success);
  color: var(--success-foreground);
}

.lost-steps li.is-missing::before {
  content: '?';
  border: 2px dashed var(--border-strong);
  background: transparent;
  color: var(--muted-foreground);
}

.lost-steps li.is-missing span {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--highlight);
  color: var(--highlight-foreground);
}

/* A magnifying glass searches the card for its missing step: it sweeps from the title down to the
   blank beside "Step not found" twice and comes to rest there, its glass tinted blue so any words
   under it show through. With less motion it's simply there (review-later R279). */
.lost-lens {
  position: absolute;
  right: 18px;
  bottom: -6px;
  width: 72px;
  height: 72px;
  border: 6px solid var(--foreground);
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--card) 80%, transparent) 0 7%, transparent 8%),
    color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: 0 16px 28px -14px rgb(17 17 20 / 0.55);
  pointer-events: none;
}

.lost-lens::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -14px;
  width: 36px;
  height: 13px;
  border-radius: 7px;
  background: var(--foreground);
  rotate: 42deg;
}

@media (prefers-reduced-motion: no-preference) {
  .lost-lens {
    animation: lost-search 1.5s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 alternate both;
  }
}

@keyframes lost-search {
  from {
    translate: -120px -100px;
  }
}

/* /confirmed, laid out: centred under the celebration, then what happens next as two cards (the
   creators' on the brand's blue, with where they are on the way to an invite), then sharing. */
.page.welcome {
  max-width: 880px;
  margin-inline: auto;
  padding-top: 48px;
  text-align: center;
}

.page.welcome h1 {
  font-size: 48px;
}

@media (min-width: 768px) {
  .page.welcome {
    padding-top: 72px;
  }

  .page.welcome h1 {
    font-size: 64px;
  }
}

/* "the list." in the hero's blue italics over its highlighter stroke, drawn once (motion-safe), so the
   page you land on after confirming speaks the home page's language (review-later R401). */
.page.welcome h1 em {
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.34em;
  color: var(--primary);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
  .page.welcome h1 em {
    animation: hero-highlight 1.1s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

.page.welcome .celebrate {
  margin: 22px auto 40px;
}

.welcome-lead {
  font-size: 18px;
}

.next-steps {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  text-align: left;
}

@media (min-width: 760px) {
  .next-steps {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

.next-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

.page .next-card h2 {
  margin-top: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page .next-card p {
  margin-top: 0;
}

.next-card-creators {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}

.page .next-card-creators p {
  color: var(--primary-foreground);
  font-size: 17px;
}

.next-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.next-progress li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 20px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.next-progress li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
}

/* The simple pages space their list items apart; these pills sit in a row instead. */
.page .next-progress li + li {
  margin-top: 0;
}

.next-progress li.is-done {
  background: var(--primary-foreground);
  color: var(--primary);
}

.next-progress li.is-done::before {
  content: '✓';
  content: '✓' / '';
  background: var(--primary);
  color: var(--primary-foreground);
}

.next-progress li.is-next {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.next-progress li.is-next::before {
  content: '→';
  content: '→' / '';
  border: 2px dashed var(--highlight-foreground);
  width: 16px;
  height: 16px;
  font-size: 10px;
}

/* Everyone's card opens on the one email they'll get, as the launch alert on the home page draws it
   (review-later R227). The card's words say it; the picture is for the eye. */
.next-card-everyone .notify-preview {
  flex: 1 0 auto;
  min-height: 150px;
  margin: -24px -24px 6px;
}

.next-card-everyone .notify-mail {
  margin-right: 0;
}

/* The launch year as a tear-off calendar page (review-later R275): a white sheet with a blue
   "Launching" strip held by two rings, tilted on a second sheet. For the eye only: the sentence above
   it says the same. */
.page .next-year {
  position: relative;
  width: fit-content;
  margin: auto 0 8px 4px;
  padding: 44px 24px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(var(--primary) 0 32px, var(--card) 32px);
  box-shadow:
    6px 7px 0 -1px var(--card),
    6px 7px 0 0 var(--border),
    0 24px 36px -24px color-mix(in srgb, var(--foreground) 70%, transparent);
  color: var(--primary);
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  rotate: -3deg;
}

.page .next-year::before {
  content: '';
  position: absolute;
  top: -9px;
  right: 24px;
  left: 24px;
  height: 20px;
  background:
    linear-gradient(var(--foreground), var(--foreground)) left / 7px 100% no-repeat,
    linear-gradient(var(--foreground), var(--foreground)) right / 7px 100% no-repeat;
}

.page .next-year::after {
  content: 'Launching';
  content: 'Launching' / '';
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  color: var(--primary-foreground);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.page.welcome .share-card {
  text-align: left;
}

/* /confirmed: someone just joined. The site's mark with a check, and a burst of confetti in the brand's
   colours that bursts once and stays scattered; with less motion it's simply drawn. */
.celebrate {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 22px 0 44px 30px;
}

/* The mark sits in a seal on ink, "On the list · Vibecipe · Launching in 2027" running round it in
   yellow; the seal stamps down once (review-later R269). */
.celebrate-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: celebrate-stamp 700ms cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

.celebrate-disc {
  fill: var(--foreground);
}

.celebrate-dash {
  fill: none;
  stroke: var(--primary-foreground);
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  stroke-opacity: 0.35;
  stroke-width: 1.5;
}

.celebrate-ring text {
  fill: var(--highlight);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  dominant-baseline: central;
}

.celebrate-mark {
  position: absolute;
  top: 44px;
  left: 44px;
  z-index: 1;
  display: block;
  border-radius: 20px;
  box-shadow: 0 18px 36px -18px rgb(43 69 255 / 0.6); /* --primary, faded */
  animation: celebrate-pop 520ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.celebrate-check {
  position: absolute;
  right: 36px;
  bottom: 36px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--foreground);
  border-radius: 50%;
  background: var(--success-foreground);
  animation: celebrate-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) 380ms both;
}

.celebrate-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--card);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.celebrate i {
  position: absolute;
  top: 76px;
  left: 76px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--primary);
  animation: celebrate-burst 900ms cubic-bezier(0.15, 0.8, 0.3, 1) 120ms both;
}

.celebrate i:nth-child(3n) {
  border-radius: 50%;
  background: var(--highlight);
}

.celebrate i:nth-child(3n + 1) {
  width: 5px;
  height: 12px;
  background: var(--primary-hover);
}

.celebrate i:nth-child(4n) {
  background: var(--success-foreground);
}

.celebrate i:nth-child(1) {
  translate: -92px -54px;
  rotate: -30deg;
}
.celebrate i:nth-child(2) {
  translate: -32px -88px;
  rotate: 20deg;
}
.celebrate i:nth-child(3) {
  translate: 41px -94px;
  rotate: 0deg;
}
.celebrate i:nth-child(4) {
  translate: 104px -59px;
  rotate: 45deg;
}
.celebrate i:nth-child(5) {
  translate: 139px 4px;
  rotate: -15deg;
}
.celebrate i:nth-child(6) {
  translate: 110px 69px;
  rotate: 60deg;
}
.celebrate i:nth-child(7) {
  translate: 47px 101px;
  rotate: 10deg;
}
.celebrate i:nth-child(8) {
  translate: -29px 97px;
  rotate: -45deg;
}
.celebrate i:nth-child(9) {
  translate: -94px 63px;
  rotate: 30deg;
}
.celebrate i:nth-child(10) {
  translate: -126px 6px;
  rotate: -60deg;
}
.celebrate i:nth-child(11) {
  translate: 170px -38px;
  rotate: 25deg;
}
.celebrate i:nth-child(12) {
  translate: 176px 54px;
  rotate: -20deg;
}

@keyframes celebrate-burst {
  from {
    translate: 0 0;
    rotate: 0deg;
    scale: 0.3;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes celebrate-stamp {
  from {
    scale: 1.35;
    rotate: -50deg;
    opacity: 0;
  }
}

@keyframes celebrate-pop {
  from {
    scale: 0.4;
    opacity: 0;
  }
}

/* The share prompt as a card: the next thing to do. */
/* The ask to share shows the post it would make, tilted on a yellow panel like the Everyone card's
   email: the words of the X post, and the link's card on the brand's blue. For the eye only. */
.share-card {
  display: grid;
  margin-top: 36px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

@media (min-width: 760px) {
  .share-card {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .share-art {
    order: 2;
  }
}

.share-body {
  padding: 24px;
}

.share-card h2 {
  margin-top: 0;
}

.share-card .actions {
  margin-top: 20px;
}

/* The ask to share is on ink: the question big in the serif, its answer in yellow, the post to X on a
   yellow button and the rest as paper outlines, opposite the yellow picture of the post
   (review-later R371). */
.share-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px;
  background:
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--primary) 45%, transparent), transparent 70%),
    var(--foreground);
  color: var(--primary-foreground);
}

@media (min-width: 760px) {
  .share-body {
    padding: 36px 32px;
  }
}

.share-card .share-body h2 {
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.share-card .share-body > p:not(.form-share-status) {
  margin-top: 10px;
  color: var(--highlight);
  font-weight: 600;
}

.share-card .share-body .button {
  border-color: color-mix(in srgb, var(--primary-foreground) 45%, transparent);
  background: transparent;
  color: var(--primary-foreground);
}

.share-card .share-body .button:hover {
  border-color: var(--primary-foreground);
  background: color-mix(in srgb, var(--primary-foreground) 10%, transparent);
  color: var(--primary-foreground);
}

.share-card .share-body .actions .button:first-child {
  border-color: var(--highlight);
  background: var(--highlight);
  color: var(--highlight-foreground);
}

.share-card .share-body .actions .button:first-child:hover {
  border-color: var(--highlight-hover);
  background: var(--highlight-hover);
  color: var(--highlight-foreground);
}

.share-card .share-body .button:has(.share-icon) {
  gap: 10px;
  padding-left: 8px;
}

/* Each share button leads with its own disc, so the four read at a glance: X in ink on the yellow
   post button, LinkedIn's "in" on the brand's blue, sharing in yellow and the way back on paper
   (review-later R435). */
.share-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.share-icon-x {
  background: var(--foreground);
  color: var(--highlight);
}

.share-icon-in {
  background: var(--primary);
  color: var(--primary-foreground);
}

.share-icon-more {
  background: var(--highlight);
  color: var(--foreground);
}

.share-icon-back {
  background: var(--background);
  color: var(--foreground);
}

@media (prefers-reduced-motion: no-preference) {
  .share-icon {
    transition: rotate 0.2s ease;
  }

  .share-card .share-body .button:hover .share-icon {
    rotate: -12deg;
  }
}

.share-card .share-body :focus-visible {
  outline-color: var(--highlight);
}

.share-card .share-body .form-share-status {
  color: var(--primary-foreground);
}

.share-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 28px 20px;
  background: var(--highlight);
}

.share-post {
  display: grid;
  gap: 10px;
  width: min(100%, 290px);
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 18px 32px -20px color-mix(in srgb, var(--foreground) 60%, transparent);
  rotate: -2deg;
}

.share-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-post-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, var(--card));
}

.share-post-name {
  display: grid;
  flex: 1;
  gap: 5px;
}

.share-post-name i {
  display: block;
  width: 46%;
  height: 7px;
  border-radius: 4px;
  background: var(--border);
}

.share-post-name i + i {
  width: 30%;
}

.share-post-text {
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.45;
}

/* The link's card is og.png in small (review-later R305): the site's headline on paper, the blue
   button and the example build tilted off its edge, with the address under it as a post shows it. */
.share-post-link {
  display: grid;
  gap: 6px;
}

.share-og {
  position: relative;
  display: flex;
  overflow: hidden;
  aspect-ratio: 1200 / 630;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
}

.share-og-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 64%;
  padding: 10px 0 10px 12px;
}

.share-post-logo {
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
}

.share-post-logo em {
  color: var(--primary);
}

.share-og-title {
  color: var(--foreground);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.share-og-title em {
  display: block;
  color: var(--primary);
}

.share-og-cta {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

/* The example build: a blue cover, then its locked recipe's lines. */
.share-og-card {
  position: absolute;
  top: 16%;
  right: -8%;
  display: grid;
  grid-template-rows: 44% auto auto auto;
  gap: 4px;
  width: 36%;
  height: 92%;
  padding: 0 0 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--foreground) 60%, transparent);
  rotate: 4deg;
}

.share-og-cover {
  background: linear-gradient(
    135deg,
    var(--primary) 55%,
    color-mix(in srgb, var(--primary) 55%, var(--card))
  );
}

.share-og-lock {
  justify-self: end;
  width: 18px;
  height: 7px;
  margin: 2px 14px 0 0;
  border-radius: 3px;
  background: var(--highlight);
}

.share-og-line {
  height: 4px;
  margin: 0 18px 0 6px;
  border-radius: 2px;
  background: var(--border);
}

.share-og-line + .share-og-line {
  margin-right: 30px;
}

.share-post-url {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}

.share-send {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--highlight);
  font-size: 20px;
  font-weight: 700;
  rotate: 8deg;
}

/* The post settles into place once, a moment after the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .share-post {
    animation: share-post-in 0.6s ease 0.4s both;
  }
}

@keyframes share-post-in {
  from {
    translate: 0 16px;
    rotate: 3deg;
  }
}

/* Each category tile shows one of the examples above as a small tilted card in its corner: a cover
   strip, the example's name in the serif and its step count, so the tile says what such a recipe is
   (review-later R469). For the eye only; it sits over the faint picture (R291). It straightens a
   little on hover when motion is allowed. */
.category-tiles .tile > .tile-sample {
  position: absolute;
  top: 14px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 84px;
  padding: 5px 5px 7px;
  border-radius: 10px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 14px 24px -14px rgb(17 17 20 / 0.6);
  rotate: 6deg;
}

/* Room under the tile's icon, so the card never covers the category's name. */
.category-tiles .tile:has(.tile-sample) .tile-art {
  margin-bottom: 42px;
}

.category-tiles .tile-apps:has(.tile-sample) .tile-art {
  margin-bottom: 12px;
}

.tile-sample-cover {
  display: block;
  height: 30px;
  border-radius: 6px;
  background: var(--cover-gradient);
}

.tile-sample b {
  overflow: hidden;
  padding: 0 2px;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-sample i {
  width: fit-content;
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.tile-apps .tile-sample-cover,
.tile-automations .tile-sample-cover {
  background: var(--highlight);
}

.tile-apps .tile-sample i,
.tile-automations .tile-sample i {
  background: var(--foreground);
  color: var(--highlight);
}

.tile-games .tile-sample,
.tile-3d-design .tile-sample {
  rotate: -5deg;
}

@media (min-width: 768px) {
  .category-tiles .tile > .tile-sample {
    top: 18px;
    right: 18px;
    width: 116px;
    gap: 5px;
    padding: 6px 6px 9px;
  }

  .tile-sample-cover {
    height: 36px;
  }

  .category-tiles .tile:has(.tile-sample) .tile-art {
    margin-bottom: 60px;
  }

  .category-tiles .tile-apps:has(.tile-sample) .tile-art {
    margin-bottom: 12px;
  }

  .tile-sample b {
    font-size: 15px;
  }

  .category-tiles .tile-apps > .tile-sample {
    right: 36px;
    width: 168px;
  }

  .tile-apps .tile-sample-cover {
    height: 76px;
  }

  .tile-apps .tile-sample b {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .category-tiles .tile > .tile-sample {
    transition: rotate 0.3s ease;
  }

  .category-tiles .tile:hover > .tile-sample {
    rotate: 0deg;
  }
}

/* Beside How it works's title, the whole deal in two lines on a tilted ink ticket: the result free on a
   green chip, the recipe for tokens on a yellow one, past a dashed perforation, so the band's idea
   reads before its three cards (review-later R471). On phones it follows the title. */
.how-sticker {
  display: inline-grid;
  gap: 0;
  margin: 18px 0 4px;
  border-radius: 18px;
  background: var(--foreground);
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  box-shadow: 0 26px 44px -26px color-mix(in srgb, var(--foreground) 90%, transparent);
  rotate: 2deg;
}

.how-sticker > span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}

.how-sticker > span + span {
  border-top: 2px dashed color-mix(in srgb, var(--primary-foreground) 35%, transparent);
}

.how-sticker b {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.how-free {
  background: var(--success);
  color: var(--success-foreground);
}

.how-lock {
  background: var(--highlight);
  color: var(--highlight-foreground);
}

@media (min-width: 900px) {
  #how {
    position: relative;
  }

  .how-sticker {
    position: absolute;
    top: 72px;
    right: 16px;
    margin: 0;
    font-size: 26px;
  }

  .how-sticker > span {
    padding: 18px 26px;
  }
}

/* The not-found picture on the brand's blue instead of white: the blueprint grid in faint paper, the
   404 huge in yellow, the white recipe card over it, so the page lands with colour like the home
   page's chapters (review-later R473). */
.lost-art {
  border-color: transparent;
  background: radial-gradient(60% 55% at 50% 40%, var(--primary-hover), transparent 72%), var(--primary);
  box-shadow: 0 34px 60px -40px color-mix(in srgb, var(--primary) 90%, transparent);
}

.lost-art::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary-foreground) 16%, transparent) 1px, transparent 1px),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--primary-foreground) 16%, transparent) 1px,
      transparent 1px
    );
}

.lost-number {
  color: var(--highlight);
}

/* /confirmed opens on a yellow band, like How it works: the seal, the heading and the thanks on it,
   with big tiles in the brand's colours tilted in its corners, the celebration's confetti grown up
   (review-later R475). They land once when motion is allowed. */
.welcome-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 8px 20px 40px;
  border-radius: 28px;
  background:
    radial-gradient(60% 60% at 50% 30%, color-mix(in srgb, var(--card) 45%, transparent), transparent 70%),
    var(--highlight);
}

.welcome-band .welcome-lead {
  color: var(--highlight-foreground);
}

.welcome-tile {
  position: absolute;
  z-index: -1;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 18px 30px -18px rgb(17 17 20 / 0.6);
}

.welcome-tile-blue {
  top: 22px;
  left: -14px;
  background: var(--primary);
  rotate: -14deg;
}

.welcome-tile-ink {
  top: 40px;
  right: -18px;
  width: 76px;
  height: 76px;
  background: var(--foreground);
  rotate: 12deg;
}

.welcome-tile-green {
  bottom: -16px;
  left: 14%;
  width: 52px;
  height: 52px;
  background: var(--success);
  rotate: 18deg;
}

.welcome-tile-white {
  right: 12%;
  bottom: -20px;
  width: 58px;
  height: 58px;
  background: var(--card);
  rotate: -10deg;
}

@media (min-width: 768px) {
  .welcome-band {
    padding: 16px 48px 56px;
  }

  .welcome-tile {
    width: 96px;
    height: 96px;
    border-radius: 22px;
  }

  .welcome-tile-blue {
    top: 48px;
    left: 40px;
  }

  .welcome-tile-ink {
    top: 64px;
    right: 44px;
    width: 120px;
    height: 120px;
    border-radius: 28px;
  }

  .welcome-tile-green {
    bottom: 28px;
    left: 18%;
    width: 72px;
    height: 72px;
  }

  .welcome-tile-white {
    right: 20%;
    bottom: 22px;
    width: 80px;
    height: 80px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .welcome-tile {
    animation: welcome-tile-land 700ms cubic-bezier(0.2, 1.2, 0.4, 1) 200ms both;
  }

  .welcome-tile-ink,
  .welcome-tile-white {
    animation-delay: 320ms;
  }
}

@keyframes welcome-tile-land {
  from {
    translate: 0 -40px;
    scale: 0.6;
  }
}

/* Beside the examples' title, the seven categories as a cluster of tilted tiles in the brand's colours,
   each with its picture, so the band says "seven kinds of things" before its posters (review-later
   R477). For the eye only; a row under the lead on phones. */
.ex-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ex-cat {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 14px 24px -14px rgb(0 0 0 / 0.8);
}

.ex-cat::before {
  content: '';
  width: 58%;
  height: 58%;
  background: currentColor;
  -webkit-mask: var(--ex-glyph) center / contain no-repeat;
  mask: var(--ex-glyph) center / contain no-repeat;
}

@media (min-width: 900px) {
  .ex-cats {
    position: absolute;
    top: 36px;
    right: 24px;
    display: grid;
    grid-template-columns: repeat(4, 76px);
    gap: 14px;
    margin: 0;
  }

  .ex-cat {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }

  .ex-cat:nth-child(n + 5) {
    translate: 45px 0;
  }
}

.ex-cat-apps {
  --ex-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M7 13h6M7 16h4'/%3E%3C/svg%3E");
  background: var(--primary);
  color: var(--primary-foreground);
  rotate: -8deg;
}

.ex-cat-websites {
  --ex-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 6deg;
}

.ex-cat-automations {
  --ex-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2'/%3E%3Ccircle cx='19' cy='6' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Cpath d='M7 6h10M6 8l5 8M18 8l-5 8'/%3E%3C/svg%3E");
  background: var(--card);
  color: var(--foreground);
  rotate: -4deg;
}

.ex-cat-games {
  --ex-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='5'/%3E%3Cpath d='M7 10v4M5 12h4'/%3E%3Ccircle cx='16' cy='11' r='1'/%3E%3Ccircle cx='18' cy='13' r='1'/%3E%3C/svg%3E");
  background: var(--success);
  color: var(--success-foreground);
  rotate: 9deg;
}

.ex-cat-videos {
  --ex-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E");
  background: var(--primary-hover);
  color: var(--primary-foreground);
  rotate: -10deg;
}

.ex-cat-3d-design {
  --ex-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12L4 7.5M12 12v9'/%3E%3C/svg%3E");
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 4deg;
}

.ex-cat-images {
  --ex-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E");
  background: var(--card);
  color: var(--primary);
  rotate: -6deg;
}

/* Beside the categories' title, their starting prices on one ruler from €0.50 to €25: each category's
   tile sits at its own price (the tiles below say the same), stacked where they share one, so "one
   price each" reads as a picture (review-later R479). A log scale, so the cheap end isn't crowded. */
.price-ruler {
  position: relative;
  max-width: 520px;
  height: 196px;
  margin: 18px 0 8px;
  padding: 0 22px 0 4px;
}

.price-ruler ul {
  position: absolute;
  inset: 0 24px 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-ruler::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 24px;
  left: 4px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--highlight), var(--primary));
}

.price-ruler .ex-cat {
  position: absolute;
  width: 40px;
  height: 40px;
  translate: -20px 0;
}

.price-ruler-low,
.price-ruler-high {
  position: absolute;
  bottom: 0;
  color: var(--highlight);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
}

.price-ruler-low {
  left: 0;
}

.price-ruler-label {
  position: absolute;
  top: 0;
  left: 0;
  color: color-mix(in srgb, var(--primary-foreground) 70%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-ruler-high {
  right: 0;
}

@media (min-width: 900px) {
  #categories {
    position: relative;
  }

  .price-ruler {
    position: absolute;
    top: 40px;
    right: 24px;
    width: 440px;
    margin: 0;
  }
}

.price-ruler .ex-cat-images {
  left: 0%;
  bottom: calc(34px + 0 * 46px);
}

.price-ruler .ex-cat-videos {
  left: 17.7%;
  bottom: calc(34px + 0 * 46px);
}

.price-ruler .ex-cat-3d-design {
  left: 17.7%;
  bottom: calc(34px + 1 * 46px);
}

.price-ruler .ex-cat-websites {
  left: 45.8%;
  bottom: calc(34px + 0 * 46px);
}

.price-ruler .ex-cat-automations {
  left: 45.8%;
  bottom: calc(34px + 1 * 46px);
}

.price-ruler .ex-cat-games {
  left: 45.8%;
  bottom: calc(34px + 2 * 46px);
}

.price-ruler .ex-cat-apps {
  left: 58.9%;
  bottom: calc(34px + 0 * 46px);
}

/* Behind the hero, big tiles in the brand's colours tilted at its edges, peeking from behind the words
   and the example, the confetti of /confirmed grown into the first screen's colour (review-later
   R481). For the eye only; they land once when motion is allowed. */
.hero-tile {
  position: absolute;
  z-index: -1;
  border-radius: 22px;
  box-shadow: 0 24px 40px -26px rgb(17 17 20 / 0.6);
  pointer-events: none;
}

.hero-tile-blue {
  top: -14px;
  left: -38px;
  width: 76px;
  height: 76px;
  background: var(--primary);
  rotate: -14deg;
}

.hero-tile-yellow {
  display: none;
  width: 64px;
  height: 64px;
  background: var(--highlight);
  rotate: 16deg;
}

.hero-tile-green {
  display: none;
}

@media (min-width: 900px) {
  .hero-tile-blue {
    top: auto;
    bottom: 40px;
    left: -70px;
    width: 140px;
    height: 140px;
    border-radius: 32px;
  }

  .hero-tile-yellow {
    display: block;
    top: 6px;
    left: 46%;
    width: 96px;
    height: 96px;
  }

  .hero-tile-green {
    display: block;
    right: -40px;
    bottom: 8px;
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: var(--success);
    rotate: 12deg;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-tile {
    animation: welcome-tile-land 800ms cubic-bezier(0.2, 1.2, 0.4, 1) 150ms both;
  }

  .hero-tile-yellow {
    animation-delay: 300ms;
  }

  .hero-tile-green {
    animation-delay: 450ms;
  }
}

/* At the worked-out unlock's foot, the €5 app recipe it works out as a tilted card with its price
   tag, an arrow, then the coins it earns piled up, so the panel's empty foot tells the story at a
   glance (review-later R482). For the eye only; the words and table say it. */
.maths-spread {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}

.maths-spread .maths-pile {
  margin-top: 0;
}

.maths-recipe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 112px;
  padding: 6px 6px 10px;
  border-radius: 14px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 18px 30px -18px rgb(17 17 20 / 0.7);
  rotate: -6deg;
}

.maths-recipe-cover {
  height: 54px;
  border-radius: 9px;
  background: var(--cover-gradient);
}

.maths-recipe b {
  padding: 0 4px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
}

.maths-recipe-price {
  position: absolute;
  top: -12px;
  right: -14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--highlight);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  rotate: 10deg;
}

.maths-arrow {
  align-self: center;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--highlight) 0 7px, transparent 7px 11px);
}

@media (min-width: 900px) {
  .maths > div:first-child {
    display: flex;
    flex-direction: column;
  }

  .maths-spread {
    flex: 1;
    align-items: center;
    gap: 28px;
    margin-top: 40px;
  }

  .maths-recipe {
    width: 160px;
    padding: 8px 8px 14px;
    border-radius: 18px;
  }

  .maths-recipe-cover {
    height: 84px;
    border-radius: 12px;
  }

  .maths-recipe b {
    font-size: 19px;
  }

  .maths-recipe-price {
    font-size: 26px;
  }

  .maths-arrow {
    width: 56px;
  }

  .maths-spread .maths-pile i {
    width: 128px;
    height: 32px;
  }

  .maths-spread .maths-pile i + i {
    margin-bottom: -15px;
  }
}

/* The strip above the header: ink, the open beta in paper with a pulsing yellow dot, the launch year on
   a yellow chip and "Apply" underlined, scrolling away with the page (review-later R485). */
.ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--foreground);
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.ribbon:hover,
.ribbon:focus-visible {
  color: var(--primary-foreground);
}

.ribbon:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: -4px;
}

.ribbon-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--highlight);
}

.ribbon-year {
  display: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
}

.ribbon-go {
  color: var(--highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .ribbon-year {
    display: inline;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ribbon-dot {
    animation: road-pulse 1.8s ease-out 3;
  }
}

/* The application's preview: how the creator will look on Vibecipe, a white card tilted on the blue
   head with their initials on a disc, their name in the serif, their category on a chip and a yellow
   "Creator beta" badge, filled in as they answer (review-later R486). Hidden until the script runs. */
.apply-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'avatar name badge'
    'avatar category recipes';
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  max-width: 420px;
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 18px 30px -18px rgb(17 17 20 / 0.7);
  rotate: -1.5deg;
}

.apply-preview[hidden] {
  display: none;
}

.apply-preview-avatar {
  display: grid;
  grid-area: avatar;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: var(--serif);
  font-size: 18px;
  transition: background-color 0.2s ease;
}

.apply-preview-name {
  overflow: hidden;
  grid-area: name;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.apply-preview-category {
  overflow: hidden;
  grid-area: category;
  width: fit-content;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.apply-preview-badge {
  grid-area: badge;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--highlight-foreground);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  rotate: 4deg;
}

.apply-preview.is-filled .apply-preview-avatar {
  background: var(--primary);
  color: var(--primary-foreground);
}

.apply-preview.is-filled .apply-preview-category {
  background: var(--primary-tint);
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .apply-preview-avatar {
    transition: none;
  }
}

/* "How many recipes": each answer's tile in its own colour, a little more for each, tilted in turn
   (green for one, yellow for a few, blue for many), still ink once picked (review-later R491). */
.choices-recipes .choice span {
  border-color: transparent;
  box-shadow: 0 14px 24px -18px rgb(17 17 20 / 0.6);
  transition: rotate 0.2s ease;
}

.choices-recipes .choice:nth-child(1) span {
  background: var(--success);
  color: var(--success-foreground);
  rotate: -2deg;
}

.choices-recipes .choice:nth-child(2) span {
  background: var(--highlight);
  color: var(--highlight-foreground);
  rotate: 2deg;
}

.choices-recipes .choice:nth-child(3) span {
  background: var(--primary);
  color: var(--primary-foreground);
  rotate: -2deg;
}

.choices-recipes .choice input:checked + span {
  background: var(--foreground);
  color: var(--primary-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .choices-recipes .choice span {
    transition: none;
  }
}

/* The recipe count picked, on an ink chip with a small stack of recipe cards, under the badge
   (review-later R493). */
.apply-preview-recipes {
  display: inline-flex;
  grid-area: recipes;
  align-items: center;
  justify-self: end;
  gap: 8px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--highlight);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.apply-preview-recipes[hidden] {
  display: none;
}

.apply-preview-recipes::before {
  content: '';
  width: 9px;
  height: 11px;
  border-radius: 2px;
  background: var(--highlight);
  box-shadow:
    3px -2px 0 -1px var(--foreground),
    3px -2px 0 0 var(--highlight);
}

/* How it works: the first step's card on the brand's blue and the last on ink, their words in paper
   and their big numbers faint paper (the tags keep their colours and paper edge, R373), the middle one white, so the three steps read blue, white, ink
   at a glance on the yellow band (review-later R494). */
.section-yellow .steps .card:nth-child(1),
.section-yellow .steps .card:nth-child(3) {
  color: var(--primary-foreground);
}

.section-yellow .steps .card:nth-child(1) {
  background: var(--primary);
}

.section-yellow .steps .card:nth-child(3) {
  background: var(--foreground);
}

.section-yellow .steps .card:nth-child(1) :is(h3, p),
.section-yellow .steps .card:nth-child(3) :is(h3, p) {
  color: var(--primary-foreground);
}

.section-yellow .steps .card:nth-child(1) p::after,
.section-yellow .steps .card:nth-child(3) p::after {
  color: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
}

.section-yellow .steps .card:nth-child(3) .step-art {
  border-bottom-color: color-mix(in srgb, var(--primary-foreground) 18%, transparent);
}

/* The footer's tagline as the page's last headline: big in the serif, its promise in yellow italics
   like the hero's, so the site ends on what it says it is (review-later R497). */
.site-footer .footer-brand .footer-tagline {
  max-width: 420px;
  margin-top: 14px;
  color: var(--primary-foreground);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.footer-tagline em {
  color: var(--highlight);
}

@media (min-width: 900px) {
  .site-footer .footer-brand .footer-tagline {
    font-size: 36px;
  }
}