:root {
  --ink: #050505;
  --muted: #5c5c64;
  --page: #f5f5f7;
  --paper: #ffffff;
  --rule: rgba(0, 0, 0, 0.08);
  --iris: #2945ca;
  --iris2: #4361e0;
  --night: #0a1240;
  --night2: #131e5c;
  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --site: 1280px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

html,
body {
  margin: 0;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
  margin: 0;
}

/* ── header ──────────────────────────────────────────────────────────────── */

.site {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 0.7rem var(--gutter);
  background: rgb(245 245 247 / 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}

.site.on-dark {
  background: rgb(10 18 64 / 0.72);
  color: var(--paper);
}

.site.on-dark .menu-btn {
  background: rgb(255 255 255 / 0.14);
}
.site.on-dark .menu-btn i {
  background: var(--paper);
}
.site.on-dark .pill {
  background: var(--paper);
  color: var(--night);
}
.site.on-dark .pill-go {
  background: var(--night);
  color: var(--paper);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.tile {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.word {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.site-end {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  height: 44px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--iris);
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition:
    transform 0.3s var(--ease),
    background 0.3s var(--ease);
}

.pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.pill:hover {
  transform: translateY(-1px);
}

.pill.dark {
  background: var(--ink);
}

.pill.big {
  height: 56px;
  padding: 0 8px 0 26px;
  font-size: 17px;
  gap: 0.9rem;
}

.pill.big .pill-go {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.pill-go {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
}

.menu-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.menu-btn i {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform 0.2s var(--ease);
}

.menu-btn[aria-expanded="true"] i:first-of-type {
  transform: translateY(3.25px) rotate(40deg);
}
.menu-btn[aria-expanded="true"] i:last-of-type {
  transform: translateY(-3.25px) rotate(-40deg);
}

.menu {
  position: absolute;
  top: calc(100% - 0.35rem);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 0.55rem;
  border-radius: 16px;
  background: #111;
  color: #fff;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.22);
}

.menu[hidden] {
  display: none;
}

.menu a {
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover {
  background: rgb(255 255 255 / 0.08);
}

.menu a[aria-current="page"] {
  color: #8ea2f5;
}
.site-foot nav a[aria-current="page"] {
  color: var(--paper);
}

/* ── platform picker ─────────────────────────────────────────────────────── */

.platform-picker {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.platform-picker[open] {
  z-index: 50;
}

.close-cta {
  display: inline-block;
}

/* The pill look stays on the inner span. display:flex on summary itself
   makes Safari lay the menu out as one line of links. */
.platform-picker > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

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

.platform-picker > summary::marker {
  content: "";
}

.platform-menu {
  position: absolute;
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 200px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 0.4rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 14px;
  background: #111;
  box-shadow:
    0 18px 50px rgb(0 0 0 / 0.28),
    0 2px 8px rgb(0 0 0 / 0.18);
  transform: translateX(-50%);
}

.platform-menu a {
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.platform-menu a:hover,
.platform-menu a:focus-visible {
  background: rgb(255 255 255 / 0.08);
}

.platform-menu a .beta {
  margin-left: 0.35rem;
  color: rgb(255 255 255 / 0.55);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.platform-menu a small {
  display: block;
  margin-top: 2px;
  color: rgb(255 255 255 / 0.6);
  font-size: 12px;
  font-weight: 400;
}

/* Header and landing pickers drop down. The landing one stays above the
   story fade because the hero paints over that section. */
.hero .platform-menu {
  top: calc(100% + 8px);
  bottom: auto;
}

.site-end .platform-menu {
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  left: auto;
  transform: none;
}

/* ── the leaf watermark ──────────────────────────────────────────────────── */

.watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.watermark svg {
  width: min(64vh, 560px, 86vw);
  height: auto;
  color: var(--iris);
  opacity: 0.05;
  transform: translateY(1%);
}

.watermark.small svg {
  width: min(72vh, 620px, 92vw);
  opacity: 0.05;
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  min-height: min(86vh, 760px);
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  text-align: center;
}

.hero > *:not(.watermark, .hero-fall) {
  position: relative;
  z-index: 1;
}

.hero-fall {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

.hero-fall svg {
  --fall-x: 10%;
  --fall-size: 68px;

  position: absolute;
  top: calc(var(--fall-size) * -1 - 12px);
  left: var(--fall-x);
  width: var(--fall-size);
  height: auto;
  color: rgb(41 69 202 / 0.72);
  opacity: 0;
}

.hero-fall svg:nth-child(2) {
  --fall-x: 26%;
  --fall-size: 46px;
  color: rgb(142 162 245 / 0.82);
}

.hero-fall svg:nth-child(3) {
  --fall-x: 50%;
  --fall-size: 78px;
  color: rgb(41 69 202 / 0.88);
}

.hero-fall svg:nth-child(4) {
  --fall-x: 73%;
  --fall-size: 52px;
  color: rgb(10 18 64 / 0.46);
}

.hero-fall svg:nth-child(5) {
  --fall-x: 88%;
  --fall-size: 64px;
  color: rgb(95 119 232 / 0.78);
}

.hero h1 {
  max-width: 19ch;
  font-size: clamp(48px, 8.6vw, 116px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.92;
  text-wrap: balance;
}

/* The headline holds "Make reading" still and trades the tail word. The slot
   is masked top and bottom only, so a word can leave upward while the next one
   arrives from below, and the tail of a wider word is never cut off mid-swap.
   Its width is animated from scene.js, which measures each word. */
.swap {
  position: relative;
  display: inline-block;
  width: var(--swap-w, auto);
  vertical-align: top;
  clip-path: inset(-0.14em -100% -0.26em -100%);
  transition: width 1.8s var(--ease);
}

.swap-word {
  display: block;
  white-space: nowrap;
}

/* Only the word on stage takes up space; the others stack under it so the slot
   still measures right if the script never runs. */
.swap-word:not(.is-on) {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .swap-word {
    opacity: 0;
    transform: translate3d(0, 0.4em, 0);
    filter: blur(9px);
  }

  .swap-word.is-on {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
      opacity 1.8s var(--ease),
      transform 1.8s var(--ease),
      filter 1.8s var(--ease);
  }

  /* The outgoing word leaves a little faster than the next arrives, which is
     what keeps the swap from reading as a crossfade. */
  .swap-word.is-off {
    opacity: 0;
    transform: translate3d(0, -0.4em, 0);
    filter: blur(9px);
    transition:
      opacity 0.7s var(--ease),
      transform 0.9s var(--ease),
      filter 0.7s var(--ease);
  }
}

.lede {
  max-width: 30rem;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.hero-cta {
  position: relative;
  z-index: 4;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .hero {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .hero h1 {
    margin-top: 46px;
  }

  .hero-cta {
    margin-top: 1.6rem;
  }
}

/* ── the story ───────────────────────────────────────────────────────────── */

.story {
  position: relative;
  z-index: 1;
  /* Six quick beats: the session becomes data, then becomes social. */
  height: 340vh;
  background: var(--night);
  color: var(--paper);
}

.story::before,
.story::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30vh;
  z-index: 2;
  pointer-events: none;
}

/*
 * Two things have to be true for this to be seamless.
 *
 * 1. It fades to `transparent`, never to a fixed colour. The pinned section
 *    underneath is not flat --night, it is night plus a blue radial glow, so
 *    any fixed destination colour is wrong somewhere and leaves a hard line
 *    where the overlay stops. Fading to transparent composites over whatever
 *    is actually there, glow included, so there is no edge to see.
 *
 * 2. The alpha is eased, not linear. A two-stop fade steps alpha evenly, but
 *    perceived brightness is not even, so the eye reads a bright shoulder near
 *    the opaque end and a dirty tail near the clear end. These stops follow an
 *    S-curve, which is what actually looks like a fade.
 */
.story::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgb(245 245 247 / 1) 0%,
    rgb(245 245 247 / 0.987) 8.1%,
    rgb(245 245 247 / 0.951) 15.5%,
    rgb(245 245 247 / 0.896) 22.5%,
    rgb(245 245 247 / 0.825) 29%,
    rgb(245 245 247 / 0.741) 35.3%,
    rgb(245 245 247 / 0.648) 41.2%,
    rgb(245 245 247 / 0.55) 47.1%,
    rgb(245 245 247 / 0.45) 52.9%,
    rgb(245 245 247 / 0.352) 58.8%,
    rgb(245 245 247 / 0.259) 64.7%,
    rgb(245 245 247 / 0.175) 70.1%,
    rgb(245 245 247 / 0.104) 77.5%,
    rgb(245 245 247 / 0.049) 84.5%,
    rgb(245 245 247 / 0.013) 91.9%,
    rgb(245 245 247 / 0) 100%
  );
}

.story::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    rgb(245 245 247 / 1) 0%,
    rgb(245 245 247 / 0.987) 8.1%,
    rgb(245 245 247 / 0.951) 15.5%,
    rgb(245 245 247 / 0.896) 22.5%,
    rgb(245 245 247 / 0.825) 29%,
    rgb(245 245 247 / 0.741) 35.3%,
    rgb(245 245 247 / 0.648) 41.2%,
    rgb(245 245 247 / 0.55) 47.1%,
    rgb(245 245 247 / 0.45) 52.9%,
    rgb(245 245 247 / 0.352) 58.8%,
    rgb(245 245 247 / 0.259) 64.7%,
    rgb(245 245 247 / 0.175) 70.1%,
    rgb(245 245 247 / 0.104) 77.5%,
    rgb(245 245 247 / 0.049) 84.5%,
    rgb(245 245 247 / 0.013) 91.9%,
    rgb(245 245 247 / 0) 100%
  );
}

.story-pin {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* The glow sat at 8%, buried under the entry scrim and then revealed all at
     once the moment the scrim ran out. Sitting below the scrim it lights the
     section on its own terms, and the fade above only ever has flat night to
     resolve into. Softened too, so its own falloff does not band. */
  background:
    radial-gradient(
      100% 65% at 50% 40%,
      rgb(41 69 202 / 0.5) 0%,
      rgb(41 69 202 / 0.28) 34%,
      rgb(41 69 202 / 0.1) 58%,
      transparent 78%
    ),
    var(--night);
}

.story-inner {
  position: relative;
  display: grid;
  place-items: center;
  gap: clamp(1rem, 3vh, 2.2rem);
  width: min(100%, var(--site));
  padding: 0 var(--gutter);
  text-align: center;
}

.story-visual {
  position: relative;
  width: min(100%, 660px);
  height: clamp(180px, 30vh, 280px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.75s var(--ease);
}

.story-seed {
  position: absolute;
  top: 28%;
  left: 50%;
  width: clamp(72px, 9vw, 110px);
  height: auto;
  color: #8ea2f5;
  filter: drop-shadow(0 18px 32px rgb(0 0 0 / 0.22));
  transform: translate3d(-50%, -50%, 0) rotate(-14deg);
  transition:
    top 0.8s var(--ease),
    left 0.8s var(--ease),
    color 0.6s var(--ease),
    transform 0.8s var(--ease);
}

.story-inner[data-stage="1"] .story-seed,
.story-inner[data-stage="2"] .story-seed,
.story-inner[data-stage="3"] .story-seed,
.story-inner[data-stage="4"] .story-seed,
.story-inner[data-stage="5"] .story-seed {
  top: 47%;
  left: 15%;
  color: var(--paper);
  transform: translate3d(-50%, -50%, 0) rotate(8deg) scale(0.78);
}

.story-metrics {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: clamp(0.45rem, 1.4vw, 0.85rem);
  padding-top: clamp(4.4rem, 12vh, 7rem);
}

.story-metric {
  display: grid;
  min-width: clamp(92px, 16vw, 132px);
  padding: 1rem 0.8rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.08);
  box-shadow: 0 18px 42px rgb(0 0 0 / 0.14);
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(0.92);
  transition:
    opacity 0.5s var(--ease),
    transform 0.65s var(--ease),
    border-color 0.5s var(--ease);
}

.story-metric.is-on {
  border-color: rgb(142 162 245 / 0.42);
  opacity: 1;
  transform: none;
}

.story-metric b {
  font-family: var(--display);
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

.story-metric small {
  margin-top: 0.45rem;
  color: #aab7ee;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.story-readers {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0.45rem 0.8rem 0.45rem 0.5rem;
  border: 1px solid rgb(110 231 168 / 0.3);
  border-radius: 999px;
  background: rgb(110 231 168 / 0.1);
  opacity: 0;
  transform: translate3d(-50%, 16px, 0);
  transition:
    opacity 0.55s var(--ease),
    transform 0.7s var(--ease);
}

.story-readers.is-on {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.story-reader {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--night);
  border-radius: 50%;
  background: var(--iris);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
}

.story-reader + .story-reader {
  margin-left: -8px;
  background: #6ee7a8;
  color: var(--night);
}

.story-reader-label {
  margin-left: 0.65rem;
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
}

.beats {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(118px, 15vw, 190px);
}

.beat {
  grid-area: 1 / 1;
  max-width: 24ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition:
    opacity 0.55s var(--ease),
    transform 0.65s var(--ease);
  will-change: opacity, transform;
}

.beat > span {
  display: block;
  max-width: 32rem;
  margin: 1rem auto 0;
  color: #aab7ee;
  font-family: var(--sans);
  font-size: clamp(14px, 1.55vw, 18px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.beat.is-on {
  opacity: 1;
  transform: none;
}
.beat.was-on {
  opacity: 0;
  transform: translate3d(0, -44px, 0);
}

.story-end {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(0.75rem, 2vh, 1.5rem);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s var(--ease);
  pointer-events: none;
}

.story-end.is-on {
  opacity: 1;
  transform: none;
}

.story-leaf {
  width: clamp(110px, 15vw, 190px);
  height: auto;
  margin-bottom: 0.4rem;
  color: var(--paper);
}

.story-answer {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(38px, 7.4vw, 96px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}

.story-answer-sub {
  margin: 0;
  color: #8ea2f5;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.story-inner.is-done .beats,
.story-inner.is-done .story-visual {
  opacity: 0;
  transform: scale(0.94);
}

/* ── the demo ────────────────────────────────────────────────────────────── */

.demo {
  position: relative;
  height: 620vh;
  view-timeline-name: --demo-view;
  view-timeline-axis: block;
}

.demo-pin {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.demo-inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 320px);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  width: min(100%, var(--site));
  padding: 0 var(--gutter);
}

.demo-step {
  margin: 0 0 1.6rem;
  color: var(--iris);
  /* Same face and weight as "Available now on" in the hero, just recoloured —
     was set in the mono face, which read as an odd, overly technical accent
     next to the rest of the demo copy's sans type. */
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
}

.demo-slots {
  display: grid;
  min-height: clamp(190px, 26vh, 260px);
  align-content: start;
}

.demo-slot {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
  pointer-events: none;
}

.demo-slot.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.demo-slot h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 500;
  letter-spacing: -0.05em;
}

.demo-slot p {
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.45;
}

.demo-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 320px);
  aspect-ratio: 888 / 1820;
  margin: 0 auto;
  filter: drop-shadow(0 30px 55px rgb(10 18 64 / 0.26));
}

@keyframes demo-push {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1.03);
  }
}

@supports (animation-timeline: view()) {
  .demo-phone {
    animation: demo-push linear both;
    animation-timeline: --demo-view;
    animation-range: contain;
  }
}

.demo-phone .glow {
  display: none;
}

.demo-phone .screen {
  position: relative;
  grid-area: 1 / 1;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 0.45s var(--ease),
    transform 0.7s var(--ease);
}

.demo-phone .screen:not(.is-on) {
  visibility: hidden;
  content-visibility: hidden;
}

.demo-phone video.screen {
  border-radius: 16.89% / 8.24%;
  object-fit: cover;
}

.demo-phone .screen.is-on {
  opacity: 1;
  transform: none;
}

/* ── the numbers ─────────────────────────────────────────────────────────── */

.numbers {
  width: min(100%, var(--site));
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  text-align: center;
}

.numbers h2 {
  font-size: clamp(34px, 5.4vw, 68px);
  font-weight: 500;
}

.numbers .sub {
  max-width: 32rem;
  margin: 1.1rem auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
}

.reading-month {
  position: relative;
  isolation: isolate;
  contain: layout paint;
  overflow: hidden;
  max-width: 760px;
  margin: 3rem auto 0;
  padding: clamp(26px, 5vw, 56px);
  border: 1px solid #344781;
  border-radius: 30px;
  background: radial-gradient(ellipse at 100% 0%, #203271 0%, transparent 55%), #0c123a;
  box-shadow:
    0 32px 65px -30px rgb(12 18 58 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
  color: #fff;
  text-align: left;
}

.reading-month::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(#8191d4 0.6px, transparent 0.6px);
  background-size: 18px 18px;
  opacity: 0.09;
  mask-image: linear-gradient(#000, transparent 65%);
}

.month-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.month-topline svg {
  width: 42px;
  height: 42px;
}
.month-topline time,
.reading-month dt,
.month-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a7b2d4;
}
.reading-month h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 6.4vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.reading-month h3 span {
  color: #718aff;
}
.reading-month dl {
  margin: 0;
}
.reading-month dd {
  margin: 0;
}
.reading-month .month-totals {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: end;
  gap: 24px;
  padding: 38px 0 28px;
  border-bottom: 1px solid #344374;
}
.month-totals dd {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 54px);
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
}
.month-pages dd {
  font-size: clamp(54px, 8vw, 86px);
}
.month-totals dd span {
  font-size: 0.45em;
  color: #a7b2d4;
  letter-spacing: -0.03em;
}
.reading-month .month-details {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid #344374;
}
.month-details dd {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(19px, 2.7vw, 27px);
  letter-spacing: -0.035em;
}
.month-insight {
  margin: 26px 0 32px;
  color: #b7c1dd;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}
.month-insight strong {
  color: #fff;
  font-weight: 500;
}
.month-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.month-label {
  margin: 0 0 18px;
}
.month-label span {
  margin-left: 10px;
  color: #fff;
}
.month-books {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 0 3px;
}
.month-book {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(68px, 10vw, 90px);
  aspect-ratio: 2 / 3;
  padding: 12px 8px 10px;
  border-radius: 2px 5px 5px 2px;
  box-shadow:
    -6px 6px 16px rgb(0 0 0 / 0.3),
    inset 3px 0 3px rgb(0 0 0 / 0.14);
  font-family: Georgia, serif;
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 700;
  line-height: 1.1;
  transform: rotate(-6deg);
}
.month-book + .month-book {
  margin-left: -7px;
}
.month-book small {
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.month-book.money {
  background: #ede6d5;
  color: #272319;
}
.month-book.piranesi {
  background: linear-gradient(135deg, #8575b1, #51457c);
  color: #fff;
  transform: translateY(-5px) rotate(1deg);
}
.month-book.zero {
  background: linear-gradient(#1c211d 62%, #c69c26 62%);
  color: #fff;
  transform: rotate(7deg);
}
.month-wordmark {
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -0.07em;
  color: #a4b4ed;
}
.month-caption {
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 520px) {
  .reading-month {
    border-radius: 22px;
  }
  .reading-month .month-totals {
    gap: 12px;
    padding-top: 28px;
  }
  .reading-month .month-details {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .month-details > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .month-details dd {
    margin: 0;
  }
  .month-break {
    display: none;
  }
  .month-wordmark {
    font-size: 27px;
  }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: clamp(2rem, 5vh, 3.2rem);
}

.stat {
  padding: 1.35rem 0.75rem 1.15rem;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.045);
}

.stat b {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.stat span {
  margin-left: 0.15rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}

.stat em {
  display: block;
  margin-top: 0.7rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ── the founders, in one honest beat ───────────────────────────────────── */

.founder-bridge {
  width: min(calc(100% - (2 * var(--gutter))), 860px);
  margin: clamp(1rem, 4vh, 2.5rem) auto clamp(3rem, 9vh, 6rem);
  padding: clamp(2.6rem, 7vw, 4.8rem);
  border: 1px solid rgb(41 69 202 / 0.12);
  border-radius: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(41 69 202 / 0.14), transparent 58%),
    var(--paper);
  box-shadow: 0 28px 70px -52px rgb(10 18 64 / 0.5);
  text-align: center;
}

.founder-bridge-label {
  margin: 0 0 1rem;
  color: var(--iris);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.founder-bridge h2 {
  max-width: 15ch;
  margin: 0 auto;
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: balance;
}

.founder-bridge > p:not(.founder-bridge-label) {
  max-width: 38rem;
  margin: 1.3rem auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  text-wrap: balance;
}

.founder-bridge-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.8rem;
}

.founder-bridge-links a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

.founder-bridge-links a span {
  margin-left: 0.35em;
}

.founder-bridge-links a:hover {
  color: var(--iris);
}

/* ── who we are ──────────────────────────────────────────────────────────── */

.founders {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(3.5rem, 10vh, 6.5rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  text-align: center;
}

.founders h1,
.founders h2 {
  font-size: clamp(34px, 5.4vw, 68px);
  font-weight: 500;
}

.who-card h2 {
  font-size: 22px;
  letter-spacing: -0.035em;
}

.who-cta {
  margin-top: clamp(2rem, 5vh, 3rem);
}

.founders .sub {
  max-width: 28rem;
  margin: 1.1rem auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
}

.film {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(80% 70% at 50% 0%, rgb(41 69 202 / 0.5) 0%, transparent 62%),
    var(--night);
  color: var(--paper);
}

.film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-inner {
  display: grid;
  place-items: center;
  gap: 0.5rem;
}

.film-play {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
}

.film-play::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--paper);
}

.film-note {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.film-soon {
  margin: 0;
  color: rgb(255 255 255 / 0.5);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.who-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 2.75rem);
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  padding: 0 clamp(0.65rem, 2vw, 1.5rem);
  text-align: left;
}

.who-card {
  --tilt: -3deg;
  min-width: 0;
}

.who-card:last-child {
  --tilt: 3deg;
  padding-top: 1.5rem;
}

.who-polaroid {
  position: relative;
  margin: 0;
  padding: clamp(0.65rem, 1.6vw, 1rem);
  border: 1px solid rgb(10 18 64 / 0.045);
  border-radius: 3px;
  background: var(--paper);
  box-shadow:
    0 2px 3px rgb(10 18 64 / 0.06),
    0 16px 28px -14px rgb(10 18 64 / 0.22);
  rotate: var(--tilt);
  transform-origin: 50% 0;
}

/* A small iris pin anchors each print to the page. */
.who-polaroid::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -9px;
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    #8a9cf3,
    var(--iris) 47%,
    var(--night) 100%
  );
  box-shadow: 1px 3px 5px rgb(10 18 64 / 0.3);
}

.who-shot {
  overflow: hidden;
  background: #e5e9fb;
}

.who-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.who-polaroid figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.15rem 0.25rem 0.4rem;
}

.who-stamp {
  width: 28px;
  height: 28px;
  opacity: 0.85;
  rotate: -8deg;
}

.who-card h2,
.who-card h3 {
  margin: 0;
  color: var(--night);
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.035em;
}

.who-details {
  margin: 2rem 0.35rem 0;
}

.who-one-liner {
  margin: 0;
  color: var(--night);
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.4;
  text-wrap: balance;
}

.who-socials {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.6rem;
}

.who-socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.who-socials a:hover {
  color: var(--iris);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.who-socials a:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 4px;
  border-radius: 2px;
}

.founder-letter {
  max-width: 640px;
  margin: clamp(3.5rem, 8vw, 5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  text-align: left;
  scroll-margin-top: 95px;
}

.founder-letter-label {
  margin: 0 0 1rem;
  color: var(--iris);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.founder-letter h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.1;
}

.founder-letter > p:not(.founder-letter-label, .founder-signature) {
  margin: 0 0 1.25rem;
  color: #38383e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.7;
}

.founder-signature {
  margin: 2rem 0 1.25rem;
  font-size: 14px;
}

.founder-signature span {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 12px;
}

.founder-mission-link {
  color: var(--iris);
  font-size: 13px;
  text-underline-offset: 4px;
}

/* ── who: the pair arrives ───────────────────────────────────────────────── */

/* The two cards land one after the other rather than together, so the page
   reads as an introduction instead of a table. */
.founders .sub {
  --d: 90ms;
}
.founders .film {
  --d: 170ms;
}
.who-grid .who-card:first-child {
  --d: 80ms;
}
.who-grid .who-card:last-child {
  --d: 220ms;
}
.who-cta {
  --d: 80ms;
}

@media (prefers-reduced-motion: no-preference) {
  .who-polaroid {
    transition:
      rotate 0.7s var(--ease),
      transform 0.7s var(--ease),
      box-shadow 0.7s var(--ease);
  }

  .is-motion .who-card[data-intro] .who-polaroid {
    rotate: calc(var(--tilt) * 2);
  }

  .is-motion .who-card[data-intro].in .who-polaroid {
    rotate: var(--tilt);
    transition-delay: var(--d, 0ms);
  }

  .who-portrait {
    transition: transform 1.5s var(--ease);
  }

  /* A single gentle settle keeps the portraits readable once they arrive. */
  .is-motion .who-card[data-intro] .who-portrait {
    transform: scale(1.09);
  }

  .is-motion .who-card[data-intro].in .who-portrait {
    transform: none;
    transition-delay: var(--d, 0ms);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .who-card:hover .who-polaroid,
  .is-motion .who-card[data-intro].in:hover .who-polaroid {
    rotate: 0deg;
    transform: translateY(-4px);
    transition-delay: 0ms;
    box-shadow: 0 20px 35px -12px rgb(10 18 64 / 0.22);
  }

  .who-card:hover .who-portrait {
    transform: scale(1.045);
    transition-duration: 0.9s;
    transition-delay: 0ms;
  }
}

/* ── close / join ────────────────────────────────────────────────────────── */

.close {
  position: relative;
  padding: clamp(4rem, 11vh, 7rem) var(--gutter) clamp(2.4rem, 6vh, 3.4rem);
  text-align: center;
}

.close h2 {
  max-width: 14ch;
  margin: 0 auto;
  font-size: clamp(44px, 8vw, 92px);
  font-weight: 500;
  letter-spacing: -0.055em;
}

.close-sub {
  max-width: 30rem;
  margin: 1.2rem auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 500;
}

.join-wrap {
  width: min(100%, 28rem);
  margin: 2.8rem auto 0;
  text-align: left;
}

.join {
  display: grid;
  gap: 1.7rem;
  padding: 0;
  background: none;
  box-shadow: none;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field-label,
.chips legend {
  padding: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.join input[type="email"],
.join input[type="text"] {
  width: 100%;
  height: 52px;
  padding: 0 0.15rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: border-color 0.25s var(--ease);
}

.join input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.join input:focus {
  outline: none;
  border-color: var(--ink);
}

.join input:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 3px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.chips legend {
  margin-bottom: 0.65rem;
  float: left;
  width: 100%;
}

.chips label {
  cursor: pointer;
}

.chips input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chips span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  height: auto;
  padding: 0 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: all 0.25s var(--ease);
}

.chips label:hover span {
  border-color: rgb(5 5 5 / 0.22);
}

.chips input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

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

.join .pill {
  justify-self: center;
  margin-top: 0.35rem;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
}

.join button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.join.is-joined .pill {
  background: #12833f;
}

.status {
  min-height: 1.3em;
  margin: 0.85rem 0 0;
  font-size: 14px;
  text-align: center;
}
.status.ok {
  color: #12833f;
}
.status.err {
  color: #bb3f2b;
}

.consent {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.consent a {
  color: var(--ink);
}

.agree {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0.2rem 0 0.15rem;
  text-align: left;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.agree input {
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--iris);
}

.agree input:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 3px;
}

.agree a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── footer ──────────────────────────────────────────────────────────────── */

/* The page ends the way the story section starts: the grey eases down into
   night with the same blue glow under it. Two layers, in the order the story
   uses — a page-coloured scrim fading to transparent over a glow sitting on
   flat night — so the fade resolves into whatever is actually there and never
   leaves an edge. The stops are the story's S-curve, measured against the top
   padding rather than the footer's height, so the fade stays the same length
   however tall the wordmark below it grows. */
.site-foot {
  --foot-fade: clamp(9rem, 28vh, 15rem);

  /* Copyright left, links right, wordmark spanning underneath — so the row
     uses the full width instead of both halves hugging the left corner. */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(1.1rem, 3vh, 2rem) 2rem;
  margin-top: clamp(-3.2rem, -7vh, -2.2rem);
  padding: var(--foot-fade) var(--gutter) clamp(2.4rem, 8vh, 4.5rem);
  overflow: hidden;
  container-type: inline-size;
  color: rgb(255 255 255 / 0.84);
  font-size: 13px;
  text-align: left;
  background:
    linear-gradient(
      to bottom,
      rgb(245 245 247 / 1) 0,
      rgb(245 245 247 / 0.987) calc(var(--foot-fade) * 0.081),
      rgb(245 245 247 / 0.951) calc(var(--foot-fade) * 0.155),
      rgb(245 245 247 / 0.896) calc(var(--foot-fade) * 0.225),
      rgb(245 245 247 / 0.825) calc(var(--foot-fade) * 0.29),
      rgb(245 245 247 / 0.741) calc(var(--foot-fade) * 0.353),
      rgb(245 245 247 / 0.648) calc(var(--foot-fade) * 0.412),
      rgb(245 245 247 / 0.55) calc(var(--foot-fade) * 0.471),
      rgb(245 245 247 / 0.45) calc(var(--foot-fade) * 0.529),
      rgb(245 245 247 / 0.352) calc(var(--foot-fade) * 0.588),
      rgb(245 245 247 / 0.259) calc(var(--foot-fade) * 0.647),
      rgb(245 245 247 / 0.175) calc(var(--foot-fade) * 0.701),
      rgb(245 245 247 / 0.104) calc(var(--foot-fade) * 0.775),
      rgb(245 245 247 / 0.049) calc(var(--foot-fade) * 0.845),
      rgb(245 245 247 / 0.013) calc(var(--foot-fade) * 0.919),
      rgb(245 245 247 / 0) var(--foot-fade)
    ),
    radial-gradient(
      130% 90% at 50% 86%,
      rgb(41 69 202 / 0.5) 0%,
      rgb(41 69 202 / 0.28) 36%,
      rgb(41 69 202 / 0.1) 60%,
      transparent 80%
    ),
    var(--night);
}

/* The wordmark is the footer. It is sized so the letterforms themselves span
   the column — 1.745em of ink for "leaf." in Outfit 700 at this tracking, not
   the 1.79em advance box — and pulled left by the 'l' side bearing so its edge
   lines up with the copyright above it. It sits on the bottom edge and fades
   as it drops, so it reads as the ground the page ends on, not a shout. */
.site-foot .wordmark {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
}

.site-foot .tile {
  display: none;
}

.site-foot .word {
  display: block;
  font-size: clamp(80px, 56vw, 1000px);
  font-size: calc(100cqi / 1.75);
  margin-left: -0.048em;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.75;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.62) 0%,
    rgb(255 255 255 / 0.34) 52%,
    rgb(255 255 255 / 0.12) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Browsers without background-clip: text keep a plain, visible wordmark. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .site-foot .word {
    background: none;
    color: rgb(255 255 255 / 0.42);
  }
}

.site-foot p {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
}

.site-foot nav {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.15rem;
}

.site-foot nav a {
  text-decoration: none;
}
.site-foot nav a:hover {
  color: var(--paper);
}

/* ── legal ───────────────────────────────────────────────────────────────── */

.doc {
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: clamp(4rem, 8vh, 6rem) var(--gutter) 3rem;
}

.doc h1 {
  font-size: clamp(36px, 5vw, 52px);
  margin: 0.35rem 0 1rem;
}

.doc h2 {
  margin: 2.2rem 0 0.55rem;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.doc p,
.doc li {
  color: rgb(5 5 5 / 0.72);
  font-size: 15.5px;
  line-height: 1.65;
}

.doc p {
  margin: 0 0 0.9rem;
}
.doc ul {
  margin: 0 0 0.9rem;
  padding-left: 1.15rem;
}
.doc a {
  color: var(--iris);
}
.doc strong {
  color: var(--ink);
}
.doc .updated {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc .back {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: 14px;
}

/* ── intro reveals ───────────────────────────────────────────────────────── */

.is-motion [data-intro] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

.is-motion [data-intro].in {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.8s var(--ease),
    transform 1.8s var(--ease);
  transition-delay: var(--d, 60ms);
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .demo {
    height: 500vh;
  }

  .demo-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(1.2rem, 3vh, 2rem);
    text-align: center;
  }

  .demo-copy {
    order: 2;
  }

  .demo-phone {
    order: 1;
    width: auto;
    height: min(44svh, 400px);
  }

  .demo-step {
    margin-bottom: 1rem;
  }
  .demo-slot p {
    margin-inline: auto;
  }
  .demo-slots {
    min-height: 170px;
  }
  .demo-slot h2 {
    font-size: clamp(30px, 8vw, 44px);
  }
  .demo-slot p {
    font-size: 16px;
  }

  .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat-row .stat:nth-child(4) {
    grid-column: 1 / 2;
  }

  .story {
    height: 380vh;
  }
}

@media (max-width: 360px) {
  .site-end .pill {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
  }
  .hero h1 {
    font-size: clamp(40px, 11vw, 60px);
  }

  /* Longer tails ("a habit again.", "fun again.") are too wide to sit beside
     "Make reading" here, so the tail word takes its own line and both phrases
     stand two lines tall. */
  .hero h1 .swap {
    display: block;
    width: auto;
  }
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-row .stat:nth-child(4) {
    grid-column: auto;
  }
  .stat-row .stat:last-child {
    grid-column: 1 / -1;
  }
  .who-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    max-width: 410px;
    padding-inline: 0.75rem;
  }
  .who-card:last-child {
    padding-top: 0;
  }
  .who-card {
    --tilt: -2deg;
  }
  .who-card:last-child {
    --tilt: 2deg;
  }
  .film {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  /* Too narrow to justify the row; stack it back up. Every child is placed
     explicitly, so the second column has to be unwound here too or the nav
     lands in an implicit column off the side of the page. */
  .site-foot {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
  }

  .site-foot nav {
    grid-row: 2;
    grid-column: 1;
    justify-content: flex-start;
  }

  .site-foot .wordmark {
    grid-row: 3;
    margin-top: clamp(0.6rem, 2vh, 1.2rem);
  }
  .story-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    gap: 0.7rem;
  }

  .story-seed,
  .story-inner[data-stage="1"] .story-seed,
  .story-inner[data-stage="2"] .story-seed,
  .story-inner[data-stage="3"] .story-seed,
  .story-inner[data-stage="4"] .story-seed,
  .story-inner[data-stage="5"] .story-seed {
    position: relative;
    top: auto;
    left: auto;
    width: 48px;
    filter: none;
    transform: rotate(-10deg);
  }

  .story-metrics {
    position: relative;
    inset: auto;
    width: 100%;
    padding-top: 0;
  }

  .story-metric {
    min-width: 0;
    flex: 1;
    padding: 0.85rem 0.35rem 0.75rem;
    border-radius: 14px;
  }

  .story-metric small {
    font-size: 8px;
  }

  .story-readers {
    position: relative;
    left: auto;
    bottom: auto;
    max-height: 0;
    margin: 0;
    padding: 0 0.8rem;
    overflow: hidden;
    pointer-events: none;
    transform: none;
  }

  .story-readers.is-on {
    max-height: 3.2rem;
    padding: 0.45rem 0.8rem 0.45rem 0.5rem;
    overflow: visible;
    pointer-events: auto;
    transform: none;
  }
}

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

  .swap {
    transition: none;
  }

  .swap-word:not(.is-on) {
    visibility: hidden;
  }

  .hero-fall {
    display: none;
  }

  .is-motion [data-intro] {
    opacity: 1;
    transform: none;
  }

  .beat,
  .demo-slot,
  .screen,
  .story-end {
    transition: none !important;
  }

  .story-seed,
  .story-visual,
  .story-metric,
  .story-readers {
    transition: none !important;
  }

  .story {
    height: auto;
  }
  .story-pin {
    position: static;
    height: auto;
    padding: 5rem 0;
  }
  .beats {
    display: block;
    min-height: auto;
  }
  .story-visual {
    height: auto;
    min-height: 250px;
  }
  .story-metric,
  .story-readers {
    opacity: 1;
    transform: none;
  }
  .beat {
    grid-area: auto;
    opacity: 1;
    transform: none;
    margin-bottom: 0.5rem;
  }
  .beat.was-on {
    opacity: 1;
    transform: none;
  }
  .story-end {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: 2rem;
  }
  .story-inner.is-done .beats,
  .story-inner.is-done .story-visual {
    opacity: 1;
    transform: none;
  }
  .demo {
    height: auto;
  }
  .demo-pin {
    position: static;
    height: auto;
    padding: 4rem 0;
  }
  .demo-inner {
    grid-template-columns: 1fr;
  }
  .demo-slots {
    display: block;
    min-height: auto;
  }
  .demo-slot {
    grid-area: auto;
    opacity: 1;
    transform: none;
    margin-bottom: 2rem;
  }
  .demo-phone .screen {
    opacity: 1;
    transform: none;
  }
  .demo-phone .screen:not(.is-on) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 641px) {
  .story-readers {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .story-readers {
    max-height: none;
    overflow: visible;
    padding: 0.45rem 0.8rem 0.45rem 0.5rem;
    pointer-events: auto;
  }
}

/* Illustrative session values change calmly while the cards drift gently. */
.stat b {
  display: inline-block;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}
@keyframes session-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .stat-row.stats-ready .stat {
    animation: session-float 5s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
    animation-play-state: paused;
  }
  .stat-row.stats-active .stat {
    animation-play-state: running;
  }
}

.cookie {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 28px rgb(5 5 5 / 0.1);
  font-size: 13px;
  line-height: 1.45;
}
.cookie p {
  margin: 0;
  flex: 1;
}
.cookie a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie button {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--iris);
  color: var(--paper);
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cookie button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}