/* Prosody site styles. Dark only, warm amber accent, serif display face.
   Order: fonts, tokens, base, layout, header, buttons, hero, sections, pages, motion. */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-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-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-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-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root {
  --bg: #0F0E13;
  --surface: #17161D;
  --surface-2: #1F1E27;
  --line: #2B2933;
  --line-soft: #24222C;

  --text: #E9E6F0;
  --text-dim: #B4B0BF;

  --amber: #E4AC4E;
  --amber-light: #F3D08A;
  --cream: #F3EEE4;
  --teal: #7FD1C3;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
    'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(56px, 9vw, 116px);
  --wrap: 1140px;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 6.2vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.7rem); }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.28rem); line-height: 1.28; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amber-light); }

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

ul { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

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

::selection { background: rgba(228, 172, 78, 0.28); color: var(--text); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--amber);
  color: #0F0E13;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 16px; color: #0F0E13; }

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

/* ---------- layout ---------- */

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

.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }
.section--rule {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--section-y);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head p {
  color: var(--text-dim);
  font-size: 1.05rem;
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 14px;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 14, 19, 0.84);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header[data-scrolled] {
  background: rgba(15, 14, 19, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--text); }
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
}
.site-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 10px 0;
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--text); }

/* The toggle only exists where the panel does, which is small screens with scripting. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.nav-toggle .bar {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease;
  transform-box: view-box;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .bar-top { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar-bot { transform: translateY(-5px) rotate(-45deg); }

/* Without scripting the links simply wrap under the brand, which is the honest fallback. */
@media (max-width: 700px) {
  .site-header .wrap {
    flex-wrap: wrap;
    padding-bottom: 6px;
  }
  .site-nav {
    width: 100%;
    gap: 18px;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) and (scripting: enabled) {
  .site-header .wrap {
    flex-wrap: nowrap;
    padding-bottom: 0;
  }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .site-nav[data-open] {
    display: flex;
    animation: menu-in 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .site-nav a {
    padding: 14px 2px;
    font-size: 1.02rem;
    color: var(--text);
    border-bottom: 1px solid var(--line-soft);
  }
  .site-nav a:last-child { border-bottom: 0; }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.btn:active { transform: translateY(0); }

.btn--primary { background: var(--amber); color: #0F0E13; }
.btn--primary:hover {
  background: var(--amber-light);
  color: #0F0E13;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--amber);
  color: var(--text);
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

/* Play Store placeholder. Deliberately not a link: the app is not on the store yet. */
.play-soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 18px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: var(--surface);
  line-height: 1.3;
}
.play-soon svg {
  width: 22px;
  height: 22px;
  flex: none;
  opacity: 0.8;
}
.play-soon b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
}
.play-soon span {
  display: block;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
}

/* The lead variant stands in for the store button until there is a store listing to link to.
   It stays dashed and non-interactive so it never reads as something you can click. */
.play-soon--lead {
  padding: 13px 26px 13px 22px;
  border-color: rgba(228, 172, 78, 0.4);
  background: rgba(228, 172, 78, 0.07);
}
.play-soon--lead svg {
  width: 26px;
  height: 26px;
  opacity: 1;
  stroke: var(--amber);
}
.play-soon--lead span { font-size: 1rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(40px, 7vw, 88px);
  padding-bottom: clamp(40px, 9vw, 116px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -22% -10% auto -10%;
  height: 640px;
  background: radial-gradient(58% 52% at 68% 34%, rgba(228, 172, 78, 0.13), transparent 70%);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.05fr 0.95fr; }
}

.hero h1 { margin-bottom: 0.28em; }
.hero-lede {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  color: var(--text-dim);
  max-width: 46ch;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.hero-meta li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 13px;
}

.hero-shot {
  position: relative;
  justify-self: center;
  width: min(300px, 76vw);
}
.hero-shot::before {
  content: '';
  position: absolute;
  inset: -16%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(228, 172, 78, 0.3), transparent 72%);
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
}
.hero-shot img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

/* ---------- screenshot rail ---------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(168px, 44vw, 224px);
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: 6px 22px;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
  scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}
.rail::-webkit-scrollbar-thumb:hover { background: var(--amber); }

.rail figure {
  margin: 0;
  scroll-snap-align: center;
}
.rail img {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}
.rail figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.rail-hint {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 4px 0 0;
}

/* ---------- foldables ---------- */

.fold-grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .fold-grid { grid-template-columns: repeat(2, 1fr); }
  .fold-grid figure.is-wide { grid-column: 1 / -1; }
}

.fold-grid figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(8px, 2.4vw, 18px);
}
.fold-grid img {
  width: 100%;
  border-radius: var(--r-md);
}
.fold-grid figcaption {
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--text-dim);
  text-align: center;
}
.fold-grid figure.is-wide img {
  max-width: 880px;
  margin-inline: auto;
}

/* ---------- feature grid ---------- */

.features {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 28px);
}
.card h3 { margin-bottom: 0.4em; }
.card p {
  color: var(--text-dim);
  font-size: 0.97rem;
  margin-bottom: 0;
}

.card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.card-icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--amber);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- steps ---------- */

.steps {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps li {
  counter-increment: step;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 30px);
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(228, 172, 78, 0.13);
  border: 1px solid rgba(228, 172, 78, 0.32);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.steps h3 { margin-bottom: 0.4em; }
.steps p {
  color: var(--text-dim);
  font-size: 0.97rem;
  margin-bottom: 0;
}

/* ---------- privacy panel ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 52px);
}
.panel--split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 860px) {
  .panel--split { grid-template-columns: 0.95fr 1.05fr; }
}

.tick-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tick-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  color: var(--text-dim);
  font-size: 0.99rem;
}
.tick-list li:last-child { margin-bottom: 0; }
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 17px;
  height: 17px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- closing call to action ---------- */

.cta {
  text-align: center;
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(228, 172, 78, 0.12), transparent 68%),
    var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
}
.cta img.mark {
  width: 62px;
  height: 62px;
  border-radius: 15px;
  margin: 0 auto 22px;
}
.cta p {
  color: var(--text-dim);
  max-width: 48ch;
  margin-inline: auto;
}
.cta .btn-row { justify-content: center; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(40px, 5vw, 60px);
  font-size: 0.93rem;
  color: var(--text-dim);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { margin: 0; }
.footer-links a {
  display: inline-block;
  padding: 9px 0;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer-links a:hover { color: var(--amber); }

.footer-fine {
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 0.87rem;
}
.footer-fine p { margin: 0; }
.footer-fine a {
  display: inline-block;
  padding: 4px 0;
}

/* ---------- prose pages ---------- */

.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.36rem, 2.4vw, 1.68rem);
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.prose h2:first-of-type { margin-top: 1.4em; }
.prose p,
.prose li { color: var(--text-dim); }
.prose strong {
  color: var(--text);
  font-weight: 600;
}
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: 0.6em; }

.page-head {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(10px, 2vw, 20px);
}
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.updated {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0;
}

/* ---------- download page ---------- */

.dl-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  max-width: 760px;
}

.spec {
  margin: 30px 0 0;
  border-top: 1px solid var(--line-soft);
}
.spec > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec dt {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.spec dd {
  margin: 0;
  font-size: 0.97rem;
  text-align: right;
  overflow-wrap: anywhere;
}
.spec dd.hash {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--amber-light);
  text-align: left;
}
@media (max-width: 560px) {
  .spec > div {
    flex-direction: column;
    align-items: flex-start;
  }
  .spec dd { text-align: left; }
}

.note {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  color: var(--text-dim);
}

.verify {
  margin-top: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  overflow-x: auto;
}
.verify pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--text-dim);
  white-space: pre;
}
.verify .c { color: #7D7989; }

/* ---------- 404 ---------- */

.center-page {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-y);
}
.center-page .code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--amber);
  margin-bottom: 18px;
}
.center-page p {
  color: var(--text-dim);
  max-width: 44ch;
  margin-inline: auto;
}

/* ---------- small helpers ---------- */

.muted { color: var(--text-dim); }
.btn-row--tight { margin-top: 24px; }
.btn-row--center { justify-content: center; }
.spec--stack > div {
  flex-direction: column;
  align-items: flex-start;
}
.verify-h { margin-top: 40px; }
.footer-fine--bare {
  border-top: 0;
  padding-top: 0;
}

/* ---------- motion ---------- */

/* Everything here is a fade or a short rise. Two mechanisms:

   The hero runs on plain CSS animations, so it plays on load whether or not the rest of the
   script ran. Sections further down wait for an IntersectionObserver to add .is-visible, and
   those rules are guarded on `scripting: enabled` rather than a class set by an inline script,
   so the page needs no inline JavaScript and can ship a strict Content-Security-Policy. Where
   that media feature is unsupported the sections simply start visible, which is the right
   fallback. */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-shot {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes glow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-copy > * { animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-copy > *:nth-child(1) { animation-delay: 60ms; }
.hero-copy > *:nth-child(2) { animation-delay: 130ms; }
.hero-copy > *:nth-child(3) { animation-delay: 200ms; }
.hero-copy > *:nth-child(4) { animation-delay: 280ms; }
.hero-copy > *:nth-child(5) { animation-delay: 360ms; }

.hero-shot { animation: rise-shot 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 200ms both; }
.hero::before { animation: glow-in 1.4s ease 120ms both; }

@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Grid children arrive one after another rather than as a slab. */
  .stagger > * {
    opacity: 0;
    transform: translateY(22px);
  }
  .stagger.is-visible > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .stagger.is-visible > *:nth-child(2) { transition-delay: 55ms; }
  .stagger.is-visible > *:nth-child(3) { transition-delay: 110ms; }
  .stagger.is-visible > *:nth-child(4) { transition-delay: 165ms; }
  .stagger.is-visible > *:nth-child(5) { transition-delay: 220ms; }
  .stagger.is-visible > *:nth-child(6) { transition-delay: 260ms; }
  .stagger.is-visible > *:nth-child(7) { transition-delay: 295ms; }
  .stagger.is-visible > *:nth-child(8) { transition-delay: 325ms; }
  .stagger.is-visible > *:nth-child(9) { transition-delay: 350ms; }
  .stagger.is-visible > *:nth-child(10) { transition-delay: 370ms; }
  .stagger.is-visible > *:nth-child(n + 11) { transition-delay: 390ms; }
}

/* Pointer affordances. These selectors are deliberately one step more specific than the
   .stagger rules above, which also set `transform`, so hover wins whatever the source order. */
@media (hover: hover) and (pointer: fine) {
  .features .card {
    transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
  }
  .features .card:hover {
    transform: translateY(-3px);
    border-color: var(--line);
    background: var(--surface-2);
  }
  .fold-grid figure { transition: border-color 0.25s ease; }
  .fold-grid figure:hover { border-color: var(--line); }
  .rail figure img { transition: border-color 0.25s ease; }
  .rail figure:hover img { border-color: var(--amber); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal.is-visible,
  .stagger > *,
  .stagger.is-visible > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .features .card:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}