/* ============================================================
   Stashbird. Website.
   The colours are the app's own (src/theme.js in the app): warm
   paper and ink, the blue of the icon's tile, the yellow of the
   beak and the folder. Dark mode is the app's midnight with the
   blue glowing down from the top, never near-black.
   Gradients are for words only, as in the app. The one place a
   whole area is coloured is the opening, which is the app's own
   welcome screen: the icon's lit blue.
   ============================================================ */

:root {
  color-scheme: light dark;

  --bg: #F5F0E6;
  --text: #15120F;
  --soft: rgba(21, 18, 15, 0.72);
  --dim: #7A7268;
  --line: rgba(21, 18, 15, 0.12);
  --line-strong: rgba(21, 18, 15, 0.22);
  --link: #1988FF;
  --nav-bg: rgba(245, 240, 230, 0.94);

  /* Words in the brand blue: the icon tile from deep to sky. */
  --word-a: #0A6CE8;
  --word-b: #1988FF;
  --word-c: #48B2FF;

  /* The drawings: a sheet of paper, its grey lines, the folder, the lit line. */
  --page: #FFFFFF;
  --page-edge: rgba(21, 18, 15, 0.16);
  --page-shadow: rgba(10, 40, 120, 0.2);
  --ink-line: rgba(21, 18, 15, 0.15);
  --ink-title: rgba(21, 18, 15, 0.34);
  --ink-found: rgba(21, 18, 15, 0.5);
  --lit: #FFD45E;
  --folder-back: #E2A01E;
  --folder-front: #FCC646;

  /* The icon's lit blue (the app's splash and welcome screens). */
  --sky-light: #6CCBFF;
  --sky: #3890F9;
  --sky-deep: #2259F5;
  --beak-a: #FFE7A8;
  --beak-b: #FBBF38;

  --max: 1120px;
  --pad: clamp(16px, 5vw, 64px);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121C2F;
    --text: #F5F0E6;
    --soft: rgba(245, 240, 230, 0.74);
    --dim: #9AA8BF;
    --line: rgba(154, 176, 212, 0.2);
    --line-strong: rgba(154, 176, 212, 0.34);
    --link: #4DB0FF;
    --nav-bg: rgba(18, 28, 47, 0.94);

    --word-a: #4C9AFF;
    --word-b: #66BBFF;
    --word-c: #5EBEFF;

    --page: #F4F1EC;
    --page-edge: rgba(245, 240, 230, 0.18);
    --page-shadow: rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

/* In dark mode the app's blue glows down from the top of every page into midnight. */
@media (prefers-color-scheme: dark) {
  body {
    background:
      linear-gradient(180deg, rgba(25, 136, 255, 0.24) 0%, rgba(25, 136, 255, 0.12) 220px, rgba(25, 136, 255, 0) 560px) no-repeat,
      var(--bg);
  }
}

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

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

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

::selection { background: rgba(255, 212, 94, 0.55); color: #15120F; }

/* Words in the brand blue, and on the blue opening, in the beak's yellow. */
.blue, .gold {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.blue { background-image: linear-gradient(100deg, var(--word-a) 0%, var(--word-b) 50%, var(--word-c) 100%); }
.gold { background-image: linear-gradient(100deg, var(--beak-a) 0%, var(--beak-b) 100%); }

/* The small line over a heading: sentence case, as in the app. */
.eyebrow {
  margin: 0 0 14px;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  color: var(--dim);
  letter-spacing: -0.005em;
}

/* ---------- top bar ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad);
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid transparent;
  color: var(--text);
}

/* Nothing glides until the page stands as written: script.js puts "ready" on <html> then.
   Why: Safari can work out a first look for the page before the style sheet has arrived,
   and a glide then sets off from the browser's own defaults. */
.ready .nav { transition: background 220ms ease, border-color 220ms ease, color 220ms ease; }

/* Over the blue opening the bar is clear and its words white. Once the page moves under it, it gets a ground of its own. */
.nav.on-sky { color: #FFFFFF; }

.nav.stuck {
  color: var(--text);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 2px 8px rgba(10, 40, 120, 0.18);
}

.brand span {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  font-size: 15px;
  font-weight: 600;
}

.nav-links a { opacity: 0.74; }
.ready .nav-links a { transition: opacity 160ms ease; }
.nav-links a:hover { opacity: 1; }
.nav-links .here { opacity: 1; color: var(--link); }

@media (max-width: 680px) {
  .nav-links .wide { display: none; }
}

/* ---------- the drawings ---------- */

/* Every drawing is sized from one number, --k, so it can be made smaller on a phone as a whole.
   Each moving part says when it starts with --d, written on the part itself. */
.pic {
  position: relative;
  flex-shrink: 0;
}

/* A sheet of paper with grey lines for its words. Never a made-up document: no words, only lines. */
.sheet {
  --sw: calc(var(--w) * var(--k) * 1px);
  --sh: calc(var(--h) * var(--k) * 1px);
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  padding: calc(var(--sh) * 0.12) calc(var(--sw) * 0.13) 0;
  background: var(--page);
  border: 1px solid var(--page-edge);
  border-radius: max(3px, calc(var(--sw) * 0.035));
  box-shadow: 0 calc(5px * var(--k)) calc(12px * var(--k)) var(--page-shadow);
  isolation: isolate;
}

.sheet i {
  display: block;
  position: relative;
  height: max(3px, calc(var(--sh) * 0.022));
  margin-bottom: calc(var(--sh) * 0.058);
  border-radius: 2px;
  background: var(--ink-line);
}

.sheet i:first-child { background: var(--ink-title); }

/* The bird. One character in many poses, standing on its feet. */
.bird {
  position: absolute;
  display: block;
  cursor: pointer;
  transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.bird img {
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* It breathes. Gently: the app's bird gives a few hundredths of its height. */
.ready .bird img { animation: breathe 3.4s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.006, 1.016); }
}

/* Tapped, it jumps and lands in another pose (script.js swaps the picture at the top of the jump). */
.bird.hop { animation: hop 620ms cubic-bezier(0.3, 0.7, 0.3, 1) both; }

@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  14% { transform: translateY(0) scale(1.05, 0.93); }
  46% { transform: translateY(-34px) scale(0.97, 1.04); }
  72% { transform: translateY(0) scale(1.04, 0.95); }
  86% { transform: translateY(0) scale(0.99, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* A bird that leans in from an edge ducks out of sight instead, and comes back. */
.bird.duck-right { animation: duck-right 900ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.bird.duck-down { animation: duck-down 900ms cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes duck-right {
  0%, 100% { transform: translateX(0); }
  40%, 58% { transform: translateX(78%); }
}

@keyframes duck-down {
  0%, 100% { transform: translateY(0); }
  40%, 58% { transform: translateY(80%); }
}

/* A drawing waits ("wait") until it is scrolled to, then plays ("play"). With no script, or with
   less movement asked for, neither is set and every drawing is simply as it ends up. Once its bird
   has arrived the drawing is "landed", and the bird's way in is taken off so a tap can make it jump. */
.ready .pic.wait .drop,
.ready .pic.wait .bird { opacity: 0; }

/* ---------- the opening: the app's welcome screen ---------- */

/* The blue never stops at a hard line: over its last --fade it melts into the page's own colour (paper, or
   midnight in dark mode), so the very bottom of the opening is exactly the colour of the page under it.
   Jason, 18 October 2026, on the first live copy: "there's a sharp change of colour it's so bad". */
.hero {
  --fade: 240px;
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient(180deg, var(--sky-light) 0%, var(--sky) 40%, var(--sky-deep) calc(100% - var(--fade)), var(--bg) 100%);
  /* Where the browser can mix colours, every step is eased (slow at each end, like a cosine) and mixed the way
     the eye sees colour: a straight blend shows a ridge of deep blue where one stretch meets the next, and blue
     into cream passes through grey. Stops made by a short script; keep them in step if a colour changes. */
  background: linear-gradient(180deg,
    var(--sky-light) 0%,
    color-mix(in oklab, var(--sky-light), var(--sky) 14.6%) 10%,
    color-mix(in oklab, var(--sky-light), var(--sky) 50%) 20%,
    color-mix(in oklab, var(--sky-light), var(--sky) 85.4%) 30%,
    var(--sky) 40%,
    color-mix(in oklab, var(--sky), var(--sky-deep) 14.6%) calc(40% + (60% - var(--fade)) * 0.25),
    color-mix(in oklab, var(--sky), var(--sky-deep) 50%) calc(40% + (60% - var(--fade)) * 0.5),
    color-mix(in oklab, var(--sky), var(--sky-deep) 85.4%) calc(40% + (60% - var(--fade)) * 0.75),
    var(--sky-deep) calc(100% - var(--fade)),
    color-mix(in oklab, var(--sky-deep), var(--bg) 2.4%) calc(100% - var(--fade) * 0.9),
    color-mix(in oklab, var(--sky-deep), var(--bg) 9.5%) calc(100% - var(--fade) * 0.8),
    color-mix(in oklab, var(--sky-deep), var(--bg) 20.6%) calc(100% - var(--fade) * 0.7),
    color-mix(in oklab, var(--sky-deep), var(--bg) 34.5%) calc(100% - var(--fade) * 0.6),
    color-mix(in oklab, var(--sky-deep), var(--bg) 50%) calc(100% - var(--fade) * 0.5),
    color-mix(in oklab, var(--sky-deep), var(--bg) 65.5%) calc(100% - var(--fade) * 0.4),
    color-mix(in oklab, var(--sky-deep), var(--bg) 79.4%) calc(100% - var(--fade) * 0.3),
    color-mix(in oklab, var(--sky-deep), var(--bg) 90.5%) calc(100% - var(--fade) * 0.2),
    color-mix(in oklab, var(--sky-deep), var(--bg) 97.6%) calc(100% - var(--fade) * 0.1),
    var(--bg) 100%);
}

/* The gloss on the icon's tile, from the top left. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 8% -12%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 58%);
}

.hero-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  min-height: min(100vh, 920px);
  min-height: min(100svh, 920px);
  /* The drawing stands where the blue is still deep, and the melt into the page runs on below it. */
  padding: 120px var(--pad) calc(var(--fade) * 0.62);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 32px;
  align-items: end;
}

.hero-words {
  align-self: center;
  padding-bottom: 40px;
}

.hero .eyebrow { color: rgba(255, 255, 255, 0.9); }

.hero h1 {
  margin: 0;
  font-size: clamp(48px, 7.4vw, 100px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 28px rgba(10, 40, 140, 0.18);
}

.hero h1 .gold { text-shadow: none; }

/* On a wide screen each of the heading's two lines stays one line. */
@media (min-width: 861px) {
  .hero-words { container-type: inline-size; }
  .hero h1 { white-space: nowrap; font-size: clamp(44px, 5vw, 80px); }
  /* Where the browser can measure the column, the heading fills it: "Every document" is about 7 times its size wide. */
  @supports (font-size: 1cqw) {
    .hero h1 { font-size: min(13.8cqw, 96px); }
  }
}

.hero-sub {
  margin: 24px 0 0;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  max-width: 500px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
  font-weight: 700;
}

.facts li { display: flex; align-items: center; gap: 9px; }

.facts li::before {
  content: '';
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--beak-b);
}

/* The fan of pages with the bird in front, standing where the blue meets the paper. */
.pic-fan {
  --k: 1.16;
  justify-self: center;
  width: calc(410px * var(--k));
  height: calc(240px * var(--k));
  --page-shadow: rgba(10, 40, 120, 0.42);
}

.pic-fan .sheet {
  left: calc(66px * var(--k));
  bottom: calc(-10px * var(--k));
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--x) * var(--k) * 1px)) rotate(var(--r));
}

.pic-fan .bird {
  right: calc(6px * var(--k));
  bottom: calc(-8px * var(--k));
  width: calc(196px * var(--k));
}

.ready .pic-fan.play .sheet { animation: fan-out 760ms cubic-bezier(0.2, 0.8, 0.25, 1.06) var(--d, 0ms) both; }

@keyframes fan-out {
  0% { opacity: 0; transform: translate(0, calc(60px * var(--k))) rotate(0deg); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translateX(calc(var(--x) * var(--k) * 1px)) rotate(var(--r)); }
}

.ready .pic-fan.play:not(.landed) .bird { animation: land 820ms cubic-bezier(0.25, 0.8, 0.3, 1) 560ms both; }

@keyframes land {
  0% { opacity: 0; transform: translateY(calc(-170px * var(--k))) scale(0.96, 1.05); }
  12% { opacity: 1; }
  58% { transform: translateY(0) scale(1.05, 0.93); }
  76% { transform: translateY(0) scale(0.98, 1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

/* On a big screen with room to spare, the fan of pages is drawn larger. */
@media (min-width: 1200px) and (min-height: 820px) {
  .pic-fan { --k: 1.3; }
}

@media (max-width: 860px), (max-aspect-ratio: 4/5) {
  .hero { --fade: 190px; }
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 112px;
    gap: 44px;
  }
  .hero-words { padding-bottom: 0; }
  /* Sized by the screen's width so that each of the heading's two lines stays one line. */
  .hero h1 { font-size: clamp(34px, 10.4vw, 76px); }
  .pic-fan { --k: 0.86; }
}

@media (max-width: 400px) {
  .pic-fan { --k: 0.76; }
}

/* ---------- the parts of the page ---------- */

.part {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 132px) var(--pad);
}

.part + .part { padding-top: 0; }

.part h2 {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.part p { margin: 0; }

.lede {
  margin-top: 20px !important;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--soft);
  max-width: 540px;
}

.note {
  margin-top: 14px !important;
  font-size: 16px;
  color: var(--dim);
  max-width: 540px;
}

/* Parts come up into place as they are scrolled to. Without the script they are simply in place. */
.rise.wait { opacity: 0; transform: translateY(26px); }
.ready .rise { transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }

/* A part with words on one side and a drawing on the other. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.split.flip .split-words { order: 2; }

.split-pic {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 300px;
}

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .split-words { order: 0; }
  .split-pic { min-height: 0; }
}

/* "Share it to Stashbird": pages leave the share mark one after another and land in a pile by the bird. */
.pic-share {
  --k: 1.35;
  width: calc(330px * var(--k));
  height: calc(180px * var(--k));
}

.pic-share .bird {
  left: 0;
  bottom: 0;
  width: calc(122px * var(--k));
}

.pic-share .sheet {
  left: calc((124px + var(--x) * 1px) * var(--k));
  bottom: calc(var(--y) * var(--k) * 1px);
  transform: rotate(var(--r));
}

.pic-share .mark {
  position: absolute;
  right: calc(8px * var(--k));
  bottom: calc(46px * var(--k));
  width: calc(64px * var(--k));
  height: calc(76px * var(--k));
  color: var(--link);
}

.ready .pic-share.play .sheet { animation: shared 820ms cubic-bezier(0.25, 0.7, 0.3, 1) var(--d, 0ms) both; }

@keyframes shared {
  0% { opacity: 0; transform: translate(calc(150px * var(--k)), calc(-30px * var(--k))) rotate(calc(var(--r) + 34deg)) scale(0.55); }
  18% { opacity: 1; }
  50% { transform: translate(calc(72px * var(--k)), calc(-78px * var(--k))) rotate(calc(var(--r) + 16deg)) scale(0.8); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1); }
}

.ready .pic-share.play:not(.landed) .bird { animation: arrive 600ms ease both; }

/* "It files itself": pages drop into the folder, and the folder gives a little under each. */
.pic-file {
  --k: 1.35;
  width: calc(340px * var(--k));
  height: calc(180px * var(--k));
}

.pic-file .bird {
  left: 0;
  bottom: 0;
  width: calc(134px * var(--k));
}

.folder {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(172px * var(--k));
  height: calc(166px * var(--k));
  transform-origin: 50% 100%;
}

.folder > * { position: absolute; }

.folder .tab {
  left: 0;
  top: calc(32px * var(--k));
  width: calc(76px * var(--k));
  height: calc(40px * var(--k));
  border-radius: calc(15px * var(--k)) calc(15px * var(--k)) 0 0;
  background: var(--folder-back);
}

.folder .back {
  left: 0;
  top: calc(48px * var(--k));
  width: 100%;
  height: calc(118px * var(--k));
  border-radius: calc(15px * var(--k));
  background: var(--folder-back);
  box-shadow: 0 calc(8px * var(--k)) calc(16px * var(--k)) var(--page-shadow);
}

.folder .sheet {
  left: calc(var(--x) * var(--k) * 1px);
  top: calc(var(--y) * var(--k) * 1px);
  transform: rotate(var(--r));
}

.folder .front {
  left: 0;
  top: calc(68px * var(--k));
  width: 100%;
  height: calc(98px * var(--k));
  border-radius: calc(15px * var(--k));
  background: var(--folder-front);
  border-top: 1.5px solid rgba(255, 255, 255, 0.5);
}

.ready .pic-file.play .folder .sheet { animation: filed 560ms cubic-bezier(0.3, 0.6, 0.35, 1) var(--d, 0ms) both; }

@keyframes filed {
  0% { opacity: 0; transform: translate(calc(-30px * var(--k)), calc(-128px * var(--k))) rotate(calc(var(--r) - 22deg)); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
}

.ready .pic-file.play .folder { animation: give 1600ms linear both; }

@keyframes give {
  0%, 40%, 49%, 65%, 74%, 90%, 99%, 100% { transform: scale(1, 1); }
  43%, 68%, 93% { transform: scale(1.012, 0.965); }
}

.ready .pic-file.play:not(.landed) .bird { animation: arrive 600ms ease both; }

/* "It shows you the line": the bird holds its glass up to a page, and one line lights up. */
.pic-ask {
  --k: 1.3;
  width: calc(300px * var(--k));
  height: calc(240px * var(--k));
}

.pic-ask .bird {
  left: 0;
  bottom: 0;
  width: calc(146px * var(--k));
  z-index: 1;
}

.pic-ask .sheet {
  right: 0;
  bottom: calc(10px * var(--k));
  transform: rotate(3deg);
}

.sheet i.found { background: var(--ink-found); }

/* The line it found, lit like the yellow in the app's document viewer. */
.sheet i.found::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: calc(-6px * var(--k));
  right: calc(-6px * var(--k));
  top: calc(-7px * var(--k));
  bottom: calc(-7px * var(--k));
  border-radius: calc(4px * var(--k));
  background: var(--lit);
  transform-origin: 0 50%;
}

.ready .pic-ask.wait .sheet i.found::before { transform: scaleX(0); }
.ready .pic-ask.play .sheet i.found::before { animation: light 640ms cubic-bezier(0.3, 0.7, 0.3, 1) 520ms both; }

@keyframes light {
  0% { transform: scaleX(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

.ready .pic-ask.play:not(.landed) .bird { animation: arrive 600ms ease both; }

@keyframes arrive {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .pic-share, .pic-file { --k: 1; }
  .pic-ask { --k: 1; }
}

@media (max-width: 360px) {
  .pic-share, .pic-file, .pic-ask { --k: 0.88; }
}

/* Smaller truths: two or three columns of a heading and a few words each. No boxes. */
.truths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 56px) clamp(28px, 4vw, 60px);
  margin-top: clamp(40px, 6vw, 72px);
}

.truths > div { border-top: 1px solid var(--line-strong); padding-top: 20px; }

.truths h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.truths p { margin-top: 10px; color: var(--soft); font-size: 16.5px; }

@media (max-width: 900px) {
  .truths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .truths { grid-template-columns: 1fr; }
}

/* Where it all lives: facts set like a receipt, label on the left, value on the right, a hairline under each. */
.receipt {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.receipt li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.4vw, 18px);
}

.receipt b { font-weight: 600; flex-shrink: 1; }

.receipt span { color: var(--soft); text-align: right; flex-shrink: 1; }

/* The bird stands on the receipt's top rule. */
.receipt-wrap { position: relative; padding-top: 112px; }

.receipt-wrap .bird {
  right: 4px;
  top: 0;
  width: 118px;
}

.more {
  display: inline-block;
  margin-top: 26px !important;
  font-weight: 600;
  color: var(--link);
}

.more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The end: where the app stands. The bird leans in from the right edge of the screen. */
.end {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.end .part {
  padding-top: clamp(80px, 11vw, 150px);
  padding-bottom: clamp(90px, 12vw, 160px);
}

.end h2 { font-size: clamp(56px, 10vw, 128px); line-height: 0.95; }

.end-wave {
  right: 0;
  top: 50%;
  margin-top: -110px;
  width: 220px;
}

/* Said, not offered: it must not look like a button, because there is nothing to press yet. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px !important;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 21px);
  letter-spacing: -0.01em;
}

.status::before {
  content: '';
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--beak-b);
}

@media (max-width: 760px) {
  .end .part { padding-top: 168px; }
  .end-wave { top: 34px; margin-top: 0; width: 132px; }
}

/* ---------- foot ---------- */

/* The foot is on the page's own colour, set apart by one hairline: no band of another colour. */
.foot {
  position: relative;
  border-top: 1px solid var(--line);
}

/* The bird peeks over the foot's top edge. */
.foot-peek {
  right: var(--pad);
  bottom: 100%;
  width: 104px;
}

.foot-cols {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--pad) 28px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}

.foot-tag { margin: 14px 0 0; color: var(--dim); font-size: 15px; max-width: 290px; }

.foot h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
}

.foot-col a {
  display: block;
  padding: 5px 0;
  color: var(--soft);
  font-size: 15px;
}

.foot-col a:hover { color: var(--text); }

.foot-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad) 44px;
  padding-bottom: max(44px, env(safe-area-inset-bottom));
  color: var(--dim);
  font-size: 13.5px;
}

.foot-bottom p { margin: 0 0 6px; }

@media (max-width: 760px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-col-brand { grid-column: 1 / -1; }
}

/* ---------- the reading pages (support, privacy, terms) ---------- */

.doc-top {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 150px var(--pad) 10px;
}

.doc-top h1 {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 72px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.doc-top p { margin: 16px 0 0; color: var(--soft); font-size: 18px; max-width: 600px; }

.doc-top .doc-date { color: var(--dim); font-size: 15px; font-weight: 600; }

.doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px var(--pad) 120px;
  font-size: 17px;
  color: var(--soft);
}

.doc h2 {
  margin: 54px 0 12px;
  font-size: clamp(23px, 2.6vw, 28px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.doc > h2:first-child { margin-top: 30px; }

.doc h3 { margin: 30px 0 8px; font-size: 18px; font-weight: 700; color: var(--text); }

.doc p { margin: 0 0 14px; }

.doc ul { margin: 0 0 16px; padding-left: 22px; }

.doc li { margin-bottom: 8px; }

.doc strong { color: var(--text); font-weight: 600; }

.doc a, .doc-top a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* The short version at the top of the privacy page. */
.doc .short {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.short li {
  position: relative;
  padding-left: 30px;
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.short li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--link);
}

/* Who to write to: plain lines, not boxes. */
.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
  padding: 34px var(--pad) 0;
}

.ways a {
  display: block;
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
  color: var(--text);
}

.ready .ways a { transition: border-color 160ms ease; }
.ways a:hover { border-top-color: var(--link); }

.ways strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

.ways span { display: block; margin-top: 6px; color: var(--soft); font-size: 15.5px; }

@media (max-width: 700px) {
  .ways { grid-template-columns: 1fr; }
}

/* Questions that open. */
.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 36px 20px 0;
  position: relative;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

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

.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  transform: rotate(45deg);
}

.ready .faq summary::after { transition: transform 200ms ease, margin-top 200ms ease; }

.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.faq details p { margin: 0 0 20px; max-width: 680px; }

/* The page that is not there. */
.lost {
  max-width: 820px;
  margin: 0 auto;
  padding: 170px var(--pad) 140px;
}

.lost .bird { position: relative; width: 170px; margin-bottom: 26px; }

.lost h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 80px);
  line-height: 1.0;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.lost p { margin: 18px 0 0; color: var(--soft); font-size: 18px; max-width: 520px; }

.lost .more { font-size: 18px; }

/* ---------- less movement, for those who ask for it ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ready .rise, .rise.wait { opacity: 1; transform: none; transition: none; }
  .ready .bird img { animation: none; }
}