/* Nook product page — tokens mirror the app (ui/src/index.css): monochrome,
   Geist, near-black accent on white / near-white accent on dark. */

/* Geist is served from the site itself (assets/fonts/, SIL OFL), not from Google. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'iA Writer Quattro';
  src: url('assets/iAWriterQuattroS-Regular.woff') format('woff');
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --surface-2: #fafafa;
  --fg: #0a0a0a;
  --muted: #6b6b6b;
  --border: #e7e7e7;
  --accent: #171717;
  --on-accent: #ffffff;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.25), 0 10px 30px -15px rgba(0, 0, 0, 0.15);
  --good: #16a34a;
  --radius: 22px;
  /* Soft pastels, used only as backgrounds — text and buttons stay
     monochrome. Each section gets its own tint so the page feels alive
     without any colour competing with the content. */
  --hero-1: #d8e9f5;
  --hero-2: #eaf2f9;
  --sky: #d9e9f6;
  --mint: #d9efe6;
  --sage: #e0ecdb;
  --aqua: #d6ecee;
  --ice: #e2eaf5;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --surface: #181b23;
    --surface-2: #14171e;
    --fg: #f0f4f8;
    --muted: #8a93a6;
    --border: #262a34;
    --accent: #fafafa;
    --on-accent: #0f1117;
    --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 10px 30px -15px rgba(0, 0, 0, 0.6);
    --good: #4ade80;
    --hero-1: #15263d;
    --hero-2: #121c2b;
    --sky: #152233;
    --mint: #132822;
    --sage: #18241b;
    --aqua: #13262a;
    --ice: #171f2d;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 24px;
}

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

/* ── Type ─────────────────────────────────────────── */
h1,
h2,
h3 {
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  font-weight: 700;
}

h2 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 700;
}

h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.lede {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
  margin: 24px auto 0;
}

.lede.small {
  font-size: 19px;
  max-width: 48ch;
  margin: 20px 0 0;
}

.muted {
  color: var(--muted);
}

.section-title {
  margin-bottom: 32px;
}

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

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

.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  padding: 16px 30px;
}

.btn-small {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  padding: 8px 16px;
}

/* ── Nav ──────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Solid: a see-through header blurred the product window's dark sidebar
     into a grey smudge as it scrolled underneath. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.wordmark {
  font-family: 'iA Writer Quattro', ui-monospace, 'SF Mono', monospace;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.brand.small .wordmark {
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  .brand img {
    filter: invert(1);
  }
}

.nav-links {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 14px;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
}

.nav-links a:hover {
  color: var(--fg);
}

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

  .nav-row .btn-small {
    margin-left: auto;
  }
}

/* ── Hero ─────────────────────────────────────────── */
.hero {
  text-align: center;
  padding-top: clamp(40px, 6vw, 80px);
}

.cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cta-note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.cta-note a {
  color: var(--muted);
}

/* As-is / licence line under a download button */
.cta-legal {
  margin: 4px 0 0;
  max-width: 56ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}

.cta-legal a {
  color: inherit;
}

/* Product shot */
.shot {
  margin: 44px auto 0;
  max-width: 980px;
  position: relative;
}

.shot::before {
  content: '';
  position: absolute;
  inset: 12% 8% -8%;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--fg) 10%, transparent), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

.window {
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3e3e3;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
  color: #0a0a0a;
}

.window-bar {
  height: 34px;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 14px;
  border-bottom: 1px solid #e6e6e6;
}

.window-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ddd;
}

.window-bar i:nth-child(1) {
  background: #ff5f57;
}

.window-bar i:nth-child(2) {
  background: #febc2e;
}

.window-bar i:nth-child(3) {
  background: #28c840;
}

.app {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 380px;
  font-size: 13px;
}

.app-side {
  background: #171717;
  color: #fafafa;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-logo {
  font-family: 'iA Writer Quattro', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.app-logo .live {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  color: #4ade80;
  letter-spacing: 0.08em;
}

.app-nav {
  padding: 8px 10px;
  border-radius: 8px;
  color: #a1a1aa;
}

.app-nav.on {
  background: #262626;
  color: #fafafa;
}

.app-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px 4px;
}

.app-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #71717a;
  margin: 14px 10px 4px;
}

.app-transfer {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  display: grid;
  gap: 2px;
}

.app-transfer span {
  color: #a1a1aa;
}

.app-main {
  padding: 20px 24px;
}

.app-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.app-main svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.app-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #737373;
}

.app-icon svg {
  width: 15px;
  height: 15px;
}

.app-search {
  margin-left: auto;
  width: 200px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #f5f5f5;
  color: #737373;
  font-size: 11px;
}

.app-new {
  padding: 6px 12px;
  border-radius: 8px;
  background: #171717;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.app-tabs {
  display: inline-flex;
  gap: 4px;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 3px;
  font-size: 12px;
}

.app-tabs span {
  padding: 5px 12px;
  border-radius: 8px;
  color: #6b6b6b;
}

.app-tabs .on {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.drive {
  padding: 14px 4px;
  border-bottom: 1px solid #efefef;
  display: grid;
  gap: 8px;
}

.drive-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drive b {
  font-size: 15px;
  font-weight: 500;
  margin-right: 2px;
}

.tag {
  font-style: normal;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(150, 150, 150, 0.12);
  color: #737373;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag svg {
  width: 11px;
  height: 11px;
}

.tag.renew {
  background: rgba(74, 222, 128, 0.14);
  color: #16a34a;
}

.ttl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f5f5f5;
}

.ttl svg {
  width: 11px;
  height: 11px;
}

.pipe {
  color: #e5e5e5;
}

.tag.enc {
  background: rgba(96, 165, 250, 0.12);
  color: #3b82f6;
}

.tag.del {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.meta {
  color: #737373;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

.bar {
  width: 128px;
  height: 4px;
  border-radius: 99px;
  background: #e7e7e7;
  overflow: hidden;
  flex-shrink: 0;
}

.bar i {
  display: block;
  height: 100%;
  background: #171717;
}

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

  .app-side,
  .app-search,
  .app-icon {
    display: none;
  }

  .app-head {
    flex-wrap: wrap;
  }

  .app-new {
    margin-left: auto;
  }
}

/* ── Sections ─────────────────────────────────────── */
section {
  padding-block: clamp(40px, 5vw, 72px);
}

/* Neighbouring sections share one gap (the upper one's bottom padding),
   never two paddings stacked. */
main > section + section {
  padding-top: 0;
}

/* Menu links (#swarm, #features, #releases): stop below the 60px sticky header
   with some air, so the section's label and heading aren't hidden under it. */
main > section[id] {
  scroll-margin-top: 92px;
}

.hero {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.statement {
  text-align: center;
}

.statement .narrow > p:not(.eyebrow) {
  font-size: clamp(19px, 2.2vw, 23px);
  color: var(--muted);
  margin: 24px auto 0;
  max-width: 40ch;
}

/* Why Swarm: four short reasons under the statement. */
.reasons {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}

.reasons li {
  padding: 22px 22px 24px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--border);
}

.reasons h3 {
  font-size: 17px;
  margin: 0;
}

.reasons p {
  color: var(--muted);
  font-size: 15px;
  margin: 8px 0 0;
  max-width: none;
}

@media (max-width: 960px) {
  .reasons {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

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

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
}

.card p {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 16px;
}

.icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Release notes */
.release {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Bottom padding is the ::after below. */
  padding: 32px 32px 0;
  background: var(--surface-2);
  /* Long notes scroll inside the box instead of stretching the page. */
  max-height: min(520px, 70vh);
  overflow-y: auto;
}

/* Fades the last lines while there is more to scroll; at the end it is just
   the box's bottom padding. */
.release::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  height: 32px;
  background: linear-gradient(transparent, var(--surface-2));
  pointer-events: none;
}

.release h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}

.release h3:first-child {
  margin-top: 0;
}

.release ul {
  margin: 0;
  padding-left: 20px;
}

.release li {
  margin: 6px 0;
  color: var(--muted);
  font-size: 16px;
}

.release li b,
.release p b {
  color: var(--fg);
  font-weight: 600;
}

.release blockquote {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
}

.release-date {
  font-size: 14px;
  color: var(--muted);
  margin: -32px 0 32px;
}

/* Earlier releases: one compact row each, linking to GitHub. */
.earlier-label {
  margin: 28px 0 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.earlier {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.earlier a {
  display: grid;
  grid-template-columns: 3.5em 7.5em 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
}

.earlier a:hover .h {
  color: var(--fg);
}

.earlier .v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.earlier .d {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.earlier .h {
  color: var(--muted);
  transition: color 0.2s ease;
}

.earlier .arrow {
  color: var(--muted);
}

@media (max-width: 560px) {
  .earlier a {
    grid-template-columns: 3.5em 1fr auto;
  }

  .earlier .h {
    grid-column: 2 / 3;
  }

  .earlier .d {
    grid-column: 2 / 3;
    grid-row: 1;
  }
}

.release-link {
  margin: 20px 0 0;
  font-size: 15px;
}

/* Donate */
.donate {
  margin-top: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--surface-2);
  display: grid;
  gap: 14px;
}

.address-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.address {
  flex: 1 1 280px;
  min-width: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.donate-or {
  margin: 0 0 -6px;
  font-size: 13px;
}

.copy {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  background: var(--accent);
  color: var(--on-accent);
}

/* FAQ */
.faq details {
  border-top: 1px solid var(--border);
  padding: 22px 0;
}

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

.faq summary {
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

.faq summary::after {
  content: '+';
  font-weight: 400;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  color: var(--muted);
  margin: 12px 0 0;
  max-width: 60ch;
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 32px;
  font-size: 14px;
  color: var(--muted);
}

.footer-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.powered {
  margin: 0;
}

.footer-links {
  margin: 0 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* Wrap between links, never inside one ("How it works" stays one piece). */
.footer-links a {
  white-space: nowrap;
}

.footer a {
  color: var(--muted);
}

.footer a:hover {
  color: var(--fg);
}

/* ── How Swarm works ─────────────────────────────── */
.swarm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 860px) {
  .swarm-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* One line that introduces Swarm before the four steps */
.swarm .section-title {
  margin-bottom: 0;
}

.swarm-intro {
  margin: 16px 0 28px;
}

.beats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.beats li {
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Inactive steps stay fully readable: the active one is marked by its card
   and a dark title, not by fading the others out. */
.beats h3 {
  color: var(--muted);
  transition: color 0.4s ease;
}

.beats li.on {
  background: var(--surface-2);
  border-color: var(--border);
}

.beats li.on h3 {
  color: var(--fg);
}

.beats li.on p {
  color: color-mix(in srgb, var(--fg) 75%, var(--muted));
}

.beats p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 16px;
}

.stage {
  margin: 0;
  aspect-ratio: 1;
  max-width: 460px;
  width: 100%;
  justify-self: center;
  color: var(--fg);
}

.stage svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stage .links line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.stage .hood {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}

.stage .file {
  fill: var(--bg);
  stroke: var(--fg);
  stroke-width: 1.5;
  transition: stroke-opacity 0.6s ease;
}

.stage[data-beat='1'] .file,
.stage[data-beat='2'] .file {
  stroke-opacity: 0.2;
}

.stage .labels text,
.stage .offline,
.stage .addr text {
  font-family: 'iA Writer Quattro', ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: central;
}

.stage .labels text {
  fill: var(--muted);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 6px;
  stroke-linejoin: round;
  transition: fill 0.4s ease;
}

.stage[data-beat='1'] .labels text {
  fill: var(--fg);
}

.stage .addr {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.stage[data-beat='0'].cut .addr,
.stage[data-beat='3'] .addr {
  opacity: 1;
}

.stage .addr rect {
  fill: var(--bg);
  stroke: var(--fg);
  stroke-width: 1;
}

.stage .addr line {
  stroke: var(--fg);
  stroke-width: 1;
}

.stage .addr text {
  fill: var(--fg);
}

.stage .offline {
  fill: var(--muted);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.stage[data-beat='2'] .offline {
  opacity: 1;
}

/* Nodes get paid over time for keeping the pieces. */
.stage .pay {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--fg);
  opacity: 0;
}

.stage[data-beat='2'] .pay {
  animation: pay 1.4s ease-out infinite;
}

.stage[data-beat='2'] .pay:nth-child(2n) {
  animation-delay: 0.35s;
}

.stage[data-beat='2'] .pay:nth-child(3n) {
  animation-delay: 0.7s;
}

@keyframes pay {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.stage .node {
  fill: var(--bg);
  stroke: var(--muted);
  stroke-width: 1.5;
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.stage .node.has {
  fill: var(--surface);
  stroke: var(--fg);
}

.stage .piece {
  transform-origin: 0 0;
  transition: transform 1.7s cubic-bezier(0.65, 0, 0.35, 1);
}

/* photo.jpg — the file every loop starts and ends with. */
.stage .pic-sky {
  fill: var(--fg);
}

.stage .pic-sun {
  fill: var(--bg);
}

.stage .pic-mtn {
  fill: var(--muted);
}

.stage .pic-hill {
  fill: var(--fg);
}

.stage .pic-jeep .l {
  fill: var(--bg);
}

.stage .pic-jeep .d {
  fill: var(--fg);
}

.stage .pic-jeep .m {
  fill: var(--muted);
}

.stage .fname {
  font-family: 'iA Writer Quattro', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  fill: var(--muted);
  text-anchor: middle;
  dominant-baseline: central;
}

/* The whole picture, drawn in one piece so it has no seams. */
.stage .whole {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.stage[data-beat='0']:not(.cut) .whole {
  opacity: 1;
  transition: none;
}

.stage.rejoined .whole {
  opacity: 1;
  transition: opacity 0.4s ease 1.4s;
}

/* While whole, only the picture shows: the grown pieces under it leave seams. */
.stage[data-beat='0']:not(.cut) .piece {
  opacity: 0;
}

/* The copy that travels back to whoever reads the file; hidden otherwise. */
.stage .courier {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stage[data-beat='3'] .courier {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .stage .piece,
  .beats li,
  .stage .node,
  .stage .file,
  .stage .labels text,
  .stage .addr,
  .stage .offline,
  .stage .whole {
    transition: none;
  }

  .stage .pay {
    animation: none !important;
  }
}

/* Two white sections in a row: don't double the gap between them. */

/* Colour: one soft wash down the whole page. Each pastel is diluted with
   the page colour and spread over a long stretch, so the hue drifts as you
   scroll instead of sitting in stripes. The body's background covers the
   full document height. */
:root {
  --w-sky: color-mix(in srgb, var(--sky) 26%, var(--bg));
  --w-mint: color-mix(in srgb, var(--mint) 24%, var(--bg));
  --w-sage: color-mix(in srgb, var(--sage) 24%, var(--bg));
  --w-aqua: color-mix(in srgb, var(--aqua) 24%, var(--bg));
  --w-ice: color-mix(in srgb, var(--ice) 30%, var(--bg));
  /* Glows: the same hues, a bit stronger, for the per-section highlights. */
  --g-sky: color-mix(in srgb, var(--sky) 60%, var(--bg));
  --g-mint: color-mix(in srgb, var(--mint) 55%, var(--bg));
  --g-sage: color-mix(in srgb, var(--sage) 55%, var(--bg));
  --g-aqua: color-mix(in srgb, var(--aqua) 55%, var(--bg));
  --g-ice: color-mix(in srgb, var(--ice) 65%, var(--bg));
}

/* Each section owns one soft hue — blues and greens only — strongest in
   its middle and blended with its neighbours' at the edges, so the colour
   shifts from section to section with no white gaps or hard lines. On top,
   one soft glow per section, alternating left and right, gives the page a
   drifting, mesh-like depth; every glow fades out inside its own section,
   so edges stay seamless. */

/* The hero: a sky that's strongest top-left, a hint of mint top-right,
   clearing towards the bottom. Straight down (180deg) so its bottom edge is
   one colour — the exact colour the next section starts with. */
.hero {
  background:
    radial-gradient(70% 45% at 10% 0%, var(--hero-1), transparent 70%),
    radial-gradient(45% 40% at 92% 8%, var(--g-mint), transparent 70%),
    linear-gradient(180deg, var(--hero-2) 0%, var(--hero-2) 25%, color-mix(in srgb, var(--w-sky), var(--w-mint)) 100%);
}

.statement {
  background:
    radial-gradient(62% 48% at 15% 50%, var(--g-mint), transparent 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-sky), var(--w-mint)), var(--w-mint) 50%, color-mix(in srgb, var(--w-mint), var(--w-aqua)));
}

/* The tour: its glow sits centred behind the video, like a spotlight — the
   left/right alternation of the other sections stays as it was. */
.tour {
  background:
    radial-gradient(55% 50% at 50% 60%, var(--g-aqua), transparent 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-mint), var(--w-aqua)), var(--w-aqua) 50%, color-mix(in srgb, var(--w-aqua), var(--w-ice)));
}

.swarm {
  background:
    radial-gradient(62% 48% at 85% 50%, var(--g-ice), transparent 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-aqua), var(--w-ice)), var(--w-ice) 50%, color-mix(in srgb, var(--w-ice), var(--w-sage)));
}

.features {
  background:
    radial-gradient(62% 48% at 15% 50%, var(--g-sage), transparent 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-ice), var(--w-sage)), var(--w-sage) 50%, color-mix(in srgb, var(--w-sage), var(--w-aqua)));
}

.releases {
  background:
    radial-gradient(62% 48% at 85% 50%, var(--g-aqua), transparent 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-sage), var(--w-aqua)), var(--w-aqua) 50%, color-mix(in srgb, var(--w-aqua), var(--w-mint)));
}

.faq {
  background:
    radial-gradient(62% 48% at 15% 50%, var(--g-mint), transparent 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-aqua), var(--w-mint)), var(--w-mint) 50%, color-mix(in srgb, var(--w-mint), var(--w-sky)));
}

.closing {
  background:
    radial-gradient(62% 48% at 85% 50%, var(--g-sky), transparent 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-mint), var(--w-sky)), var(--w-sky) 50%, var(--bg));
}

/* Closing call to action. */
.closing {
  text-align: center;
}

/* One quiet line under the closing button — the only place outside the
   footer that mentions supporting Nook. */
.closing-support {
  margin: 28px auto 0;
  max-width: 60ch;
  font-size: 14px;
  color: var(--muted);
  text-wrap: balance;
}

.closing-support a {
  color: inherit;
  white-space: nowrap;
}

.closing .section-title {
  margin-inline: auto;
}

/* ── Logo (Figma "Logo" page: pebble mark 112:8660, wordmark 112:8650) ── */
.brand .logo {
  display: block;
  width: auto;
  color: var(--fg);
  /* The viewBox is cropped to the letters' cap height so flat edges land on
     whole pixels; the round Os overshoot it slightly, so don't clip them. */
  overflow: visible;
}

.hero h1 {
  font-size: clamp(44px, 6.6vw, 80px);
}

.app-wordmark {
  display: block;
  height: 14px;
  overflow: visible;
  width: auto;
  margin-bottom: 4px;
}

/* Donate page: the hero's sky, sized to its content. */
.donate-page {
  min-height: 60vh;
  background:
    radial-gradient(70% 55% at 10% 0%, var(--hero-1), transparent 70%),
    linear-gradient(180deg, var(--hero-2) 0%, var(--bg) 100%);
}

.donate-page h1.section-title {
  font-size: clamp(36px, 5vw, 56px);
}

/* ── See it in action (one-minute tour) ─────────────── */
.tour {
  text-align: center;
}

.tour .section-title {
  margin-inline: auto;
}

.tour-frame {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.tour-frame video {
  display: block;
  width: 100%;
  height: 100%;
}

.tour-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px 16px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease;
}

.tour-play:hover {
  transform: scale(1.03);
}

.tour-play:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.tour-play svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.tour-frame.playing .tour-play {
  display: none;
}

@media (max-width: 560px) {
  .tour-play span {
    display: none;
  }

  .tour-play {
    padding: 18px;
  }
}

/* ── Guide (docs.html) ──────────────────────────────── */
.guide-hero {
  background:
    radial-gradient(70% 55% at 10% 0%, var(--hero-1), transparent 70%),
    linear-gradient(180deg, var(--hero-2) 0%, var(--bg) 100%);
  padding-bottom: 8px;
}

.guide-hero h1.section-title {
  font-size: clamp(36px, 5vw, 56px);
}

.guide {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-block: 24px 96px;
}

.guide-toc {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 88px);
  font-size: 14px;
}

.guide-toc-title {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.guide-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-toc a {
  color: var(--muted);
  text-decoration: none;
}

.guide-toc a:hover {
  color: var(--fg);
}

.guide-body {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.65;
}

.guide-body section + section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.guide-body section {
  scroll-margin-top: 96px;
}

.guide-body h2 {
  margin: 0 0 12px;
  font-size: 28px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.guide-body h3 {
  margin: 28px 0 6px;
  font-size: 17px;
}

.guide-body p,
.guide-body ul,
.guide-body ol {
  margin: 0 0 12px;
}

.guide-body li + li {
  margin-top: 6px;
}

.guide-body a {
  color: var(--fg);
  text-underline-offset: 3px;
}

.guide-body code {
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.guide-dl dt {
  margin-top: 18px;
  font-weight: 600;
}

.guide-dl dd {
  margin: 4px 0 0;
  color: var(--fg);
}

@media (max-width: 860px) {
  .guide {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .guide-toc {
    position: static;
  }

  .guide-toc ol {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

/* Inside the guide, sections are plain blocks — not the page's padded bands. */
.guide-body section {
  padding: 0;
  background: none;
}

/* The title lines up with the text column (TOC 200px + 56px gap). */
.guide-hero-inner {
  padding-left: calc(24px + 200px + 56px);
}

@media (max-width: 860px) {
  .guide-hero-inner {
    padding-left: 24px;
  }
}

/* ── Specs (specs.html, generated from nook/docs) ───── */
.spec-meta {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.spec-meta a {
  color: var(--muted);
}

.spec-body {
  max-width: 76ch;
}

.spec-body h2.spec-title {
  font-size: 32px;
}

.spec-body h3 {
  margin: 36px 0 8px;
  font-size: 20px;
}

.spec-body h4 {
  margin: 24px 0 6px;
  font-size: 16px;
}

.spec-body blockquote {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  color: var(--fg);
}

.spec-body blockquote p:last-child {
  margin-bottom: 0;
}

.spec-body pre {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}

.spec-body pre code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}

.spec-table {
  margin: 0 0 16px;
  overflow-x: auto;
}

.spec-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
}

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

.spec-table th {
  font-weight: 600;
  white-space: nowrap;
}

.spec-toc {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.spec-toc-gap {
  margin-top: 22px !important;
}

.spec-toc details ol {
  margin: 6px 0 4px 12px;
  gap: 5px;
  font-size: 13px;
}

.spec-toc summary {
  cursor: pointer;
  list-style: none;
}

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

.spec-toc summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: var(--muted);
  transition: transform 0.15s;
}

.spec-toc details[open] summary::before {
  transform: rotate(90deg);
}

@media (max-width: 860px) {
  .spec-toc {
    max-height: none;
  }

  .spec-toc > ol {
    flex-direction: column;
  }
}

/* ── How it works (how-it-works.html) ──────────────── */
.hiw-places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 18px;
}

.hiw-place {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.55;
}

.hiw-place p {
  margin: 0;
}

.hiw-place .hiw-place-title {
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 15px;
}

.hiw-opt {
  display: inline-block;
  padding: 0 6px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

@media (max-width: 700px) {
  .hiw-places {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Wide tables scroll instead of squeezing into narrow columns on phones. */
@media (max-width: 700px) {
  .spec-table table {
    min-width: 620px;
  }
}