@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist_regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist_medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist_semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist_bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Brand colours, as in the promo (tools/promo-video/src/theme.tsx). */
:root {
  --purple: #7c3aed;
  --light-purple: #d8b4fe;
  --lavender: #f3e8ff;
  --ink: #1c1430;
  --ink-soft: #1c1430b8;
  --night: #14161c;
  --paper: #f8f7f2;
  --gutter: max(20px, calc((100% - 1120px) / 2));

  color-scheme: light;
  font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--lavender);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--lavender);
}

main {
  overflow-x: clip;
}

a {
  color: inherit;
}

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

em {
  font-style: normal;
  color: var(--purple);
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}

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

/* Header, floating over the dark first chapter. */
html.motion {
  scroll-behavior: smooth;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  padding: 24px var(--gutter);
  color: #fff;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 600;
}

.brand img {
  display: block;
  height: 32px;
  width: auto;
}

/* Store badges */
.store-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 17px;
  min-height: 60px;
  border: 1px solid #313037;
  border-radius: 12px;
  background: #25242b;
  color: white;
  font: inherit;
  text-align: left;
  cursor: default;
}

.store-badge svg {
  width: 25px;
  height: 28px;
  fill: currentColor;
  flex-shrink: 0;
}

.store-badge span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-badge small {
  font-size: .75rem;
  line-height: 1.25;
  color: #dddbe3;
}

.store-badge strong {
  font-size: 1.125rem;
  line-height: 1.15;
  font-weight: 500;
}

a.store-badge {
  cursor: pointer;
  text-decoration: none;
}

a.store-badge:hover {
  background: #3a3842;
}

/* Chapters. Each holds a stage; with motion on, the chapter is --len svh tall and the
   stage stays pinned while the chapter scrolls past (see flipage.js). */
.stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.motion .chapter {
  height: calc(var(--len) * 1svh);
}

.motion .stage {
  position: sticky;
  top: 0;
  height: 100svh;
}

/* A page with a paper stack behind it (the promo's Hook and Paper scenes). */
.book {
  position: relative;
  aspect-ratio: 16 / 9;
}

.book-stack i {
  position: absolute;
  inset: 0;
  background: var(--paper);
  box-shadow: 6px 8px 14px #0000003d;
}

/* The stack thins as pages are used up (--left goes 1 → 0, set by flipage.js). */
.book-stack i:nth-child(1) { transform: translate(calc(15px * var(--left, 1)), calc(18px * var(--left, 1))) rotate(calc(.35deg * var(--left, 1))); opacity: .59; }
.book-stack i:nth-child(2) { transform: translate(calc(10px * var(--left, 1)), calc(12px * var(--left, 1))); opacity: .71; }
.book-stack i:nth-child(3) { transform: translate(calc(5px * var(--left, 1)), calc(6px * var(--left, 1))) rotate(calc(-.35deg * var(--left, 1))); opacity: .83; }

.book-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 10px 30px #00000059;
}

.book-page > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chapter 1: intro */
.intro .stage {
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: #fff;
}

.intro em {
  color: var(--light-purple);
}

.intro-backdrop {
  position: absolute;
  inset: -80px;
  background: url("../flipage/frame.webp") center / cover;
  filter: blur(40px) brightness(.45);
  /* Fades into the stage's solid night at the bottom, where the blend to lavender starts. */
  mask-image: linear-gradient(#000 60%, #0000 calc(100% - 80px));
}

.intro-art {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 96px 20px 24px;
}

.intro-book {
  width: min(88vw, 960px, calc((100svh - 400px) * 16 / 9));
  min-width: min(88vw, 300px);
  transform-origin: center;
  will-change: transform;
}

.intro-freeze, .intro .flip-canvas {
  opacity: 0;
}

.intro-freeze {
  transition: opacity .2s;
}

.intro-copy {
  position: relative;
  padding: 0 20px 104px;
  text-align: center;
}

.intro h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  text-shadow: 0 4px 30px #00000073;
}

.intro-line {
  display: block;
}

/* Animated "scroll down" arrow under the headline. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border: 2px solid #ffffff59;
  border-radius: 50%;
  color: #fff;
}

.scroll-cue svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.motion .scroll-cue {
  opacity: var(--cue, 1);
  visibility: var(--cue-visibility, visible);
}

.motion .scroll-cue svg {
  animation: cue 1.6s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(5px); }
}

/* Calms the clip behind the headline; fades once the page has settled onto the stack. */
.intro-scrim {
  display: none;
}

.motion .intro-scrim {
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background: linear-gradient(to top, #0c0e14e6, #0c0e1499 35%, #0c0e1400);
  opacity: calc(1 - var(--settle, 0));
  pointer-events: none;
}

/* Page counter: above the book's right corner, or beside it where there is room. */
.page-count {
  display: none;
}

/* Static layout (no JS or reduced motion): the intro shows the settled page with the clip. */
.no-js .intro-backdrop, .static .intro-backdrop {
  opacity: 1;
}

/* Motion layout: flipage.js drives --settle, --sketch and the page counter. */
.motion .intro-backdrop, .motion .book-stack {
  opacity: var(--settle, 0);
}

.motion .intro .book-page {
  box-shadow: 0 10px 30px rgb(0 0 0 / calc(var(--settle, 0) * .35));
}

.motion .intro .flip-canvas {
  opacity: var(--sketch, 0);
}

.motion .intro.is-frozen .intro-freeze {
  opacity: 1;
}

.motion .page-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: absolute;
  right: 0;
  bottom: calc(100% + 18px);
  margin: 0;
  line-height: .9;
  /* Positioned past the book's edge, so it would otherwise shrink to its narrowest wrap. */
  white-space: nowrap;
  color: #fff;
  font-variant-numeric: tabular-nums;
  opacity: var(--sketch, 0);
}

.page-count b {
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
}

.page-count span {
  font-size: 1rem;
  font-weight: 500;
  color: #ffffffb3;
}

@media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
  .motion .page-count {
    flex-direction: column;
    align-items: flex-start;
    right: auto;
    left: calc(100% + 36px);
    bottom: 0;
  }

  .page-count span {
    margin-top: 10px;
  }
}

/* Chapter 2: steps */
.steps .stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  padding: 48px var(--gutter);
  background: var(--lavender);
}

.step-captions {
  display: grid;
}

.step-caption {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .15s, transform .15s, visibility .15s;
}

/* The outgoing caption leaves first, then the new one rises in. */
.step-caption.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s .15s, transform .3s .15s, visibility 0s;
}

.step-caption h3 {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
}

.step-caption > p:last-child {
  max-width: 30ch;
  margin: 20px 0 0;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-list button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 600;
  color: #1c1430b3;
  cursor: pointer;
  counter-increment: step;
}

.step-list button::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: .875rem;
}

.step-list button[aria-current] {
  color: var(--purple);
}

.step-list button[aria-current]::before {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.phone {
  --ph: min(80svh, 720px);
  height: var(--ph);
  width: calc(var(--ph) * 1110 / 2454);
  padding: calc(var(--ph) * .014);
  border-radius: calc(var(--ph) * .062);
  background: #111;
  box-shadow: 0 40px 80px #3c147840, 0 12px 24px #0000002e;
}

/* Recordings are 1080×2424 (Pixel 9). */
.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--ph) * .048);
  background: #fafafa;
}

.phone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.phone-screen video.is-active {
  opacity: 1;
  visibility: visible;
}

/* Chapters 3 and 4: copy beside the art. */
.style .stage, .paper .stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 56px;
  padding: 48px var(--gutter);
}

.chapter-copy h2 {
  font-size: clamp(2.6rem, 5.4vw, 4.75rem);
}

.style .stage {
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
}

.style .compare {
  order: -1;
}

.style h2 {
  font-size: clamp(2.6rem, 4.6vw, 4.25rem);
}

.paper .stage {
  background: var(--paper);
}

/* A short colour blend between two scenes with different backgrounds. */
.scene-blend {
  height: 20svh;
  background: linear-gradient(var(--from), var(--to));
}

.chapter-copy p {
  max-width: 32ch;
  margin: 20px 0 0;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Original vs Pencil Sketch: the sketch covers everything right of --x. */
.compare {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 24px 50px #3c147840;
}

.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-sketch {
  clip-path: inset(0 0 0 var(--x));
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 12px #00000059;
}

.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed'%3E%3Cpath d='M9 6 3 12l6 6zM15 6l6 6-6 6z'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 4px 14px #0000004d;
}

.compare-tag {
  position: absolute;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
}

.compare-tag-sketch {
  right: 14px;
  background: var(--purple);
  color: #fff;
}

.compare-tag-original {
  left: 14px;
  background: #ffffffe6;
  color: var(--ink);
}

.compare input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.compare:has(input:focus-visible) {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
}

/* Print sheet (A4 landscape) with the cut pages stacked on top of it. */
.paper-art {
  position: relative;
  aspect-ratio: 297 / 210;
}

.sheet {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: rotate(-2deg);
  box-shadow: 0 24px 50px #3c147840;
}

.sheet img, .sheet svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sheet line {
  stroke: var(--purple);
  stroke-width: 3;
  stroke-dasharray: 10 8;
  vector-effect: non-scaling-stroke;
}

.paper-book {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  translate: 0 -50%;
  display: none;
}

.motion .sheet {
  opacity: calc(var(--appear, 0) * (1 - var(--to-flip, 0)));
  transform: translateY(calc((1 - var(--appear, 0)) * 40px)) rotate(-2deg);
}

.motion .paper-book {
  display: block;
  opacity: var(--to-flip, 0);
  scale: calc(.9 + .1 * var(--to-flip, 0));
}

/* Chapter 5: end card. With motion, flipage.js plays the logo with the scroll while it sits
   centred (--drop pushes it down past the hidden copy), then --lift raises it as the copy rises. */
.end .stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 20px;
  text-align: center;
}

.end-logo {
  width: min(220px, 26svh);
  aspect-ratio: 1;
}

.end-logo img, .end-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.end-logo img {
  padding: 14%;
  object-fit: contain;
}

.end h2 {
  margin-top: 12px;
  font-size: clamp(3rem, 7vw, 4.5rem);
}

.tagline {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
}

.end .store-links {
  margin-top: 40px;
}

.motion .end-logo {
  transform: translateY(calc((1 - var(--lift, 0)) * var(--drop, 0px))) scale(calc(1.3 - .3 * var(--lift, 0)));
}

.motion .end-copy {
  opacity: var(--lift, 0);
  visibility: var(--copy-visibility, hidden);
  transform: translateY(calc((1 - var(--lift, 0)) * 32px));
}

/* Scene indicator: one dot per scene at the right edge; the current one stretches and
   fills as you move through it (--fill, set by flipage.js). */
.scene-nav {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 10;
  transform: translateY(-50%);
}

.scene-nav ol {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: 999px;
  background: #1c143059;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.scene-nav a {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  min-height: 24px;
  padding: 4px 0;
}

.scene-nav i {
  display: block;
  position: relative;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff8c;
}

.scene-nav b {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--fill, 0) * 100%);
  background: #fff;
}

.scene-nav a[aria-current] i {
  height: 36px;
  background: #ffffff4d;
}

.scene-nav a:hover i {
  background: #fff;
}

.scene-nav span {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity .2s, transform .2s;
}

.scene-nav ol, .scene-nav i, .scene-nav b {
  transition: background .3s, height .3s;
}

.scene-nav.on-light ol {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.scene-nav.on-light i {
  background: #1c143052;
}

.scene-nav.on-light a[aria-current] i {
  background: #1c14301f;
}

.scene-nav.on-light b {
  background: var(--purple);
}

.scene-nav.on-light a:hover i {
  background: var(--ink);
}

.scene-nav a:hover span, .scene-nav a:focus-visible span {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px var(--gutter);
  background: #fff;
  color: #68646f;
  font-size: .875rem;
  line-height: 1.5;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Phones and narrow windows: everything stacks, copy above the art (the promo's 9:16 cut). */
@media (max-width: 860px) {
  .steps .stage, .style .stage, .paper .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    justify-items: center;
    align-items: start;
    gap: 24px;
    padding: 72px 20px 32px;
    text-align: center;
  }

  .motion .style .stage, .motion .paper .stage {
    align-content: center;
    grid-template-rows: auto auto;
  }

  .chapter-copy p, .step-caption > p:last-child {
    margin-inline: auto;
    font-size: 1.0625rem;
  }

  .step-caption h3 {
    font-size: clamp(2.25rem, 10vw, 3.25rem);
  }

  .step-caption > p:last-child {
    margin-top: 10px;
  }

  /* The step list becomes a row of numbered dots. */
  .step-list {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
  }

  .step-list button {
    justify-content: center;
    width: 44px;
  }

  .step-list button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .phone {
    --ph: min(70svh, 560px);
  }

  .motion .phone {
    --ph: clamp(240px, calc(100svh - 360px), 560px);
  }

  .chapter-copy h2 {
    font-size: clamp(2.25rem, 10vw, 3.25rem);
  }

  .compare, .paper-art {
    width: 100%;
    max-width: 640px;
  }

  .style .compare {
    order: 0;
  }

  .site-footer {
    flex-direction: column-reverse;
    gap: 4px;
    padding-block: 16px;
  }
}

@media (max-width: 540px) {
  .scene-nav {
    right: 6px;
  }

  .scene-nav a {
    width: 22px;
  }

  .scene-nav i {
    width: 6px;
    height: 6px;
  }

  .scene-nav a[aria-current] i {
    height: 28px;
  }

  .store-badge {
    padding: 10px 12px;
    gap: 8px;
  }

  .intro-art {
    padding-top: 80px;
  }

  .intro-copy {
    padding-bottom: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-caption, .phone-screen video, .intro-freeze, .scene-nav * {
    transition: none;
  }
}