/* Oreja de Van Gogh — brand stylesheet.
   Tokens here mirror apps/macos/Theme.swift and docs/brand.md. No build step, no third-party
   requests: the only font is a self-hosted Manrope, so the site renders from disk, offline. */

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-variable.ttf") format("truetype-variations"),
    url("assets/fonts/manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fbf7f0;
  --paper-deep: #f4ebdf;
  --card: #fffdfa;
  --card-muted: #f8f0e4;
  --ink: #24211d;
  --ink-soft: #6f675c;
  --line: #e8dfd2;
  --line-strong: #d8cbb8;
  --apricot: #f8c39b;
  --apricot-soft: #fde7d5;
  --coral: #e77952;
  --coral-deep: #c95f3c;
  /* The one coral safe for small text and focus rings: 5.5:1 on paper, 4.91:1 on the wash.
     --coral is decorative only (2.71:1) and --coral-deep is for large text (3.79:1).
     Same value as OrejaTheme.Palette.accent, so site and app cannot drift. */
  --coral-ink: #a7472a;
  --accent: #24211d;
  --accent-ink: #fbf7f0;
  --on-accent: #fbf7f0;
  --sage: #4c6a51;
  --wheat: #8a6318;
  --wheat-bright: #e7b44c;
  --band: #221f1b;
  --band-ink: #f7f1e6;
  --band-line: rgba(247, 241, 230, 0.14);

  /* Motion tokens. Curves from the animate skill: built-in ease-out is too weak for deliberate UI. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 140ms;
  --dur-ui: 200ms;

  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", ui-sans-serif,
    system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --wrap: 1080px;
  --gutter: clamp(18px, 4vw, 40px);
  --radius: 22px;
  --radius-lg: 30px;
  --shadow-soft: 0 26px 60px -40px rgba(63, 43, 26, 0.55);
  --shadow-lift: 0 30px 70px -42px rgba(63, 43, 26, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16130f;
    --paper-deep: #1e1a16;
    --card: #221e19;
    --card-muted: #1b1713;
    --ink: #f7f1e6;
    --ink-soft: #b0a696;
    --line: #322c25;
    --line-strong: #443c33;
    --apricot: #e8a97f;
    --apricot-soft: #33241c;
    --coral: #ef8a5f;
    --coral-deep: #f0a084;
    --coral-ink: #f3a88e;
    --accent: #f7f1e6;
    --accent-ink: #1a1612;
    --on-accent: #1a1612;
    --sage: #9cc2a3;
    --wheat: #e7b44c;
    --wheat-bright: #e7b44c;
    --band: #0f0d0b;
    --band-ink: #f7f1e6;
    --band-line: rgba(247, 241, 230, 0.12);
    --shadow-soft: 0 26px 60px -40px rgba(0, 0, 0, 0.9);
    --shadow-lift: 0 30px 70px -42px rgba(0, 0, 0, 0.95);
  }
}

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

html {
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  margin: 0;
  /* The scene glow deliberately bleeds past the gutters; clip it instead of scrolling sideways. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* rem, so a reader's own font-size still applies. */
  font-size: 1.03rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

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

code {
  font-family: var(--mono);
  font-size: 0.88em;
}

:focus-visible {
  /* 5.35:1 on paper: a focus ring has to reach 3:1 against everything it crosses (1.4.11). */
  outline: 2px solid var(--coral-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  text-decoration: none;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 14px;
}

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

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 16px var(--gutter) 0;
  background: transparent;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 62px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 10px 0 16px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow: var(--shadow-soft);
}

@supports (backdrop-filter: blur(14px)) {
  .nav {
    background: color-mix(in srgb, var(--paper) 66%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
  }
}

.nav.container {
  padding-left: 16px;
  padding-right: 10px;
}

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

.brand-lockup {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.brand-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.brand-suffix {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  font-weight: 600;
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current] {
  color: var(--ink);
}

.mark-tile {
  border-radius: 26%;
  flex: 0 0 auto;
}

.mark-26 {
  width: 26px;
  height: 26px;
}

.mark-20 {
  width: 20px;
  height: 20px;
}

.mark-12 {
  width: 12px;
  height: 12px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Motion on hover only where a real pointer exists; touch taps fire false hovers. */
@media (hover: hover) and (pointer: fine) {
  .btn {
    transition: background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

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

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}

/* Hover colour, like hover motion, only for a real pointer: a tap would otherwise latch it. */
@media (hover: hover) and (pointer: fine) {
  /* White on --coral-ink is 5.8:1; white on --coral-deep was 4.05:1 and failed for 15px text. */
  .btn-primary:hover {
    background: var(--coral-ink);
    color: #fff;
  }

  .btn-ghost:hover {
    border-color: var(--ink-soft);
    background: var(--card);
  }
}

.btn-small {
  padding: 10px 18px;
  font-size: 13.5px;
}

.btn-band {
  border-color: var(--band-line);
  background: transparent;
  color: var(--band-ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn-band:hover {
    border-color: var(--apricot);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
  }
}

.btn-large {
  padding: 17px 30px;
  font-size: 16px;
}

/* ---------- Hero ---------- */

.hero {
  /* Vertical only, for the same reason as .section: .container owns the gutter. */
  padding-block: clamp(52px, 8vw, 92px) 0;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 76%, transparent);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero h1 {
  margin: 22px auto 0;
  max-width: 16ch;
  font-size: clamp(42px, 7.6vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.hero h1 em {
  font-style: normal;
  color: var(--coral-deep);
}

.hero-sub {
  max-width: 52ch;
  margin: 22px auto 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.hero-meta {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Character scene ---------- */

.scene {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 860px;
  margin: clamp(18px, 3vw, 34px) auto 0;
  padding: clamp(26px, 4vw, 48px) 0 clamp(10px, 2vw, 22px);
}

.scene-glow {
  position: absolute;
  /* No negative horizontal inset: at 320px it pushed the document 32px wider than the viewport. */
  inset: -6% 0 0;
  background: radial-gradient(
    58% 52% at 50% 46%,
    color-mix(in srgb, var(--apricot) 62%, transparent) 0%,
    transparent 72%
  );
  filter: blur(6px);
  pointer-events: none;
}

/* On dark paper a 62% apricot glow reads as a brown bruise around the character. */
@media (prefers-color-scheme: dark) {
  .scene-glow {
    background: radial-gradient(
      54% 48% at 50% 46%,
      color-mix(in srgb, var(--apricot) 22%, transparent) 0%,
      transparent 70%
    );
  }
}

/* Vincent is a five-frame pixel sprite: idle, idle blink, listening, listening blink, ouch.
   The sheet is 5 frames wide, so background-position percentages address a frame by
   frame / 4 * 100%. Sizes stay multiples of the 40px grid, which keeps every pixel square.
   This page holds him on the first frame and never moves it. */
.vincent {
  position: relative;
  width: 320px;
  height: 320px;
  background-image: url("assets/oreja-vincent.png");
  background-repeat: no-repeat;
  background-size: 500% 100%;
  background-position: 0% 0;
  image-rendering: pixelated;
  -webkit-user-select: none;
  user-select: none;
}

.vincent-stage {
  width: 200px;
  height: 200px;
}

.vincent-still {
  width: 200px;
  height: 200px;
}

.float {
  position: absolute;
  display: grid;
  gap: 4px;
  min-width: 176px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-lift);
  text-align: left;
}

.float-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.float-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Readouts that change while you watch: one digit width, so nothing shifts. */
.float-value,
.stage-state,
.art-duck strong,
.art-return span,
.evidence-foot,
.get-card pre {
  font-variant-numeric: tabular-nums;
}

.float-value small {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.float-ai {
  top: 12%;
  left: 0;
}

.float-music {
  bottom: 16%;
  right: 0;
}

.float-return {
  right: 8%;
  top: 9%;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 999px;
}

.float-return .float-value {
  font-size: 13px;
}

.wave {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  height: 14px;
}

.wave i {
  width: 2.5px;
  border-radius: 2px;
  background: var(--coral);
  animation: wave 1.1s ease-in-out infinite;
}

.wave i:nth-child(1) { height: 5px; animation-delay: 0ms; }
.wave i:nth-child(2) { height: 11px; animation-delay: 90ms; }
.wave i:nth-child(3) { height: 7px; animation-delay: 180ms; }
.wave i:nth-child(4) { height: 13px; animation-delay: 270ms; }
.wave i:nth-child(5) { height: 6px; animation-delay: 360ms; }

@keyframes wave {
  0%,
  100% {
    transform: scaleY(0.55);
  }
  50% {
    transform: scaleY(1.15);
  }
}

.meter {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--card-muted);
  overflow: hidden;
}

.meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 14%;
  border-radius: 999px;
  background: var(--coral);
}

.scene-caption {
  max-width: 46ch;
  margin: 18px auto 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

/* ---------- Sections ---------- */

section {
  scroll-margin-top: 96px;
}

.section {
  /* Vertical only: this rule shares an element with .container, and a shorthand `0` inline
     padding silently removed the gutter, so section copy ran edge to edge on a phone. */
  padding-block: clamp(64px, 9vw, 108px) 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}

.section-head h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4.2vw, 44px);
}

.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Small caps at 11.5px need 4.5:1, not the 3:1 large text gets. */
  color: var(--coral-ink);
}

.lead {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.section-head .lead {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Interactive handoff ---------- */

.players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.player {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .player:hover {
    border-color: var(--line-strong);
    color: var(--ink);
  }
}

.player[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}


/* ---------- Feature cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.card-art {
  display: grid;
  place-items: center;
  height: 132px;
  margin-bottom: 8px;
  border-radius: 20px;
  background: var(--card-muted);
  overflow: hidden;
}

.card h3 {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.card p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.art-wave {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
}

.art-wave span {
  width: 10px;
  border-radius: 999px;
  background: var(--coral);
  opacity: 0.85;
}

.art-wave span:nth-child(1) { height: 36px; }
.art-wave span:nth-child(2) { height: 68px; }
.art-wave span:nth-child(3) { height: 48px; }
.art-wave span:nth-child(4) { height: 84px; }
.art-wave span:nth-child(5) { height: 30px; }

.art-duck {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 28px;
}

.art-duck strong {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.art-duck small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.art-return {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.art-return span {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}

.art-return i {
  font-style: normal;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---------- Band ---------- */

.band-wrap {
  padding-block: clamp(64px, 9vw, 108px) 0;
}

.band {
  padding: clamp(30px, 5vw, 56px);
  border-radius: 36px;
  background: var(--band);
  color: var(--band-ink);
}

.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.band .eyebrow {
  color: var(--apricot);
}

.band h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.6vw, 40px);
}

.band .lead {
  color: color-mix(in srgb, var(--band-ink) 72%, transparent);
}

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

.checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--band-ink) 82%, transparent);
}

.checks svg {
  margin-top: 4px;
  color: var(--apricot);
}

/* ---------- Evidence ---------- */

.evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.evidence-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.evidence-card h3 {
  font-size: 18px;
  margin-bottom: 16px;
}

.evidence-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-card li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.status-dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
}

.status-ok {
  background: var(--sage);
}

.status-open {
  background: var(--wheat-bright);
}

.evidence-foot {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
}

.evidence-foot code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--card-muted);
}

/* ---------- Get ---------- */

.get-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4.5vw, 52px);
  border: 1px solid var(--line);
  border-radius: 36px;
  background:
    radial-gradient(
      60% 80% at 88% 10%,
      color-mix(in srgb, var(--apricot) 42%, transparent),
      transparent 72%
    ),
    var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.get-card h2 {
  font-size: clamp(28px, 3.8vw, 42px);
}

.get-card .lead {
  margin-bottom: 22px;
}

.get-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.note {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

pre {
  margin: 18px 0 0;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card-muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
}

.requirements {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-soft);
}

.requirements li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
}

.requirements strong {
  color: var(--ink);
}

.requirements span[aria-hidden] {
  color: var(--coral);
}

.get-art {
  display: grid;
  place-items: center;
}

.get-art .vincent {
  width: 200px;
  height: 200px;
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
}

details {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 0 20px;
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 0;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  list-style: none;
}

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

summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 600;
  color: var(--coral-ink);
  transition: transform var(--dur-fast) var(--ease-out);
}

details[open] summary::after {
  content: "−";
}

details p {
  padding-bottom: 18px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: clamp(64px, 9vw, 108px);
  padding: 44px 0 54px;
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-note {
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13.5px;
}

.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
}

/* Text links rendered 22–23px tall; 24×24 is the AA target floor (2.5.8). */
.nav-links a,
.footer-links a,
.docs-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover {
    color: var(--ink);
  }
}

.footer-fine {
  margin-top: 30px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- Docs page ---------- */

.docs-hero {
  padding-block: clamp(40px, 6vw, 72px) 8px;
}

.docs-hero h1 {
  margin-top: 14px;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.045em;
  max-width: 20ch;
}

.docs-layout {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 32px 0 96px;
}

.docs-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 2px;
  font-size: 13.5px;
}

.docs-nav a {
  padding: 6px 0 6px 12px;
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .docs-nav a:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }
}

.docs-body section {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.docs-body section:first-child {
  padding-top: 0;
}

.docs-body section:last-child {
  border-bottom: 0;
}

.docs-body h2 {
  margin: 0 0 14px;
  font-size: 27px;
  letter-spacing: -0.035em;
  scroll-margin-top: 96px;
}

.docs-body h3 {
  margin: 26px 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.docs-body p,
.docs-body li {
  max-width: 74ch;
  font-size: 15px;
  color: var(--ink-soft);
}

.docs-body p {
  margin: 0 0 14px;
}

.docs-body ul,
.docs-body ol {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding-left: 20px;
}

.docs-body strong {
  color: var(--ink);
}

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

.doc-index {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-index li {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.doc-index li:last-child {
  border-bottom: 0;
}

.doc-index a {
  font-weight: 700;
  text-decoration: none;
}

.doc-index span {
  color: var(--ink-soft);
}

.table-wrap {
  margin: 18px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 11px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th {
  background: var(--card-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

tr:last-child td {
  border-bottom: 0;
}

td {
  color: var(--ink-soft);
}

td code {
  color: var(--ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .stage,
  .cards,
  .evidence,
  .band-grid,
  .get-card {
    grid-template-columns: 1fr;
  }

  .stage-art .vincent {
    width: 160px;
    height: 160px;
  }

  .vincent {
    width: 280px;
    height: 280px;
  }

  .float {
    min-width: 0;
    padding: 10px 13px;
  }

  .float-ai {
    top: 4%;
    left: 0;
  }

  .float-music {
    bottom: 8%;
    right: 0;
  }

  .float-return {
    display: none;
  }

  .docs-layout {
    /* minmax(0, …): a bare 1fr track sizes to the widest <pre> and pushed the page 130px wide. */
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .docs-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .docs-nav a {
    padding: 4px 0;
    border-left: 0;
  }
}

@media (max-width: 700px) {
  .nav-links a:not([href$="docs.html"]) {
    display: none;
  }

  .nav {
    height: 58px;
  }

  .nav .btn {
    padding: 9px 15px;
    font-size: 13px;
  }

  .float-ai,
  .float-music {
    position: static;
    justify-self: center;
  }

  .scene {
    gap: 12px;
    padding-bottom: 8px;
  }

  .float {
    display: none;
  }

  .scene-caption {
    margin-top: 6px;
  }

  .doc-index li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .band {
    border-radius: 28px;
  }

  .get-card {
    border-radius: 28px;
  }
}

/* Below this, the brand suffix and the CTA cannot share one row: the button was clipped at 320px. */
@media (max-width: 430px) {
  .brand-suffix {
    display: none;
  }

  .nav {
    gap: 10px;
    padding-right: 8px;
  }

  .nav .btn {
    padding: 9px 14px;
  }

  /* Two stacked buttons of different widths read as an accident; equal widths read as a choice. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Three moments on one row beats two plus an orphan. */
  .players {
    gap: 8px;
  }

  .player {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* Fewer and gentler, not zero: movement stops, colour and opacity feedback stay. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wave i {
    animation: none;
  }

  .scene-glow {
    filter: none;
  }
}

/* First-visit entrance. Marketing-tier motion, 30-80ms stagger, no layout work. */
@media (prefers-reduced-motion: no-preference) {
  @starting-style {
    .hero .pill,
    .hero h1,
    .hero-sub,
    .hero-actions,
    .hero-meta,
    .scene {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .hero .pill,
  .hero h1,
  .hero-sub,
  .hero-actions,
  .hero-meta,
  .scene {
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }

  .hero h1 {
    transition-delay: 60ms;
  }

  .hero-sub {
    transition-delay: 120ms;
  }

  .hero-actions {
    transition-delay: 180ms;
  }

  .hero-meta {
    transition-delay: 220ms;
  }

  .scene {
    transition-delay: 280ms;
  }
}

/* Vincent never drifts: the hero scene fades in, but the character does not slide with it. */
@starting-style {
  .scene {
    transform: none;
  }
}

/* ---------- Scroll acts ----------
   The page runs on its own scroll runtime (site/motion.js).
   The engine ships its own token floor; this block maps those tokens onto the brand palette and
   composes the two acts. The character is never part of an act that moves: Vincent holds a single
   frame, and scroll only ever moves light, readouts and copy around him. */

:root {
  --sc-canvas: var(--paper);
  --sc-surface: var(--card);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--coral-deep);
  --sc-accent-ink: var(--paper);
  --sc-font-display: var(--sans);
  --sc-font-text: var(--sans);
  --sc-font-mono: var(--mono);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

/* --- Act 1: the conversation pins, the moments cross over inside it --- */

.how {
  position: relative;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(
      62% 58% at 16% 4%,
      color-mix(in srgb, var(--apricot) 30%, transparent),
      transparent 72%
    ),
    var(--paper);
}

/* The site header is sticky and transparent, so the pinned stage has to start below it. Left at
top: 0 the stage centres its content under the header and the heading is clipped. */
.how-stage {
  --header-h: 78px;
  display: grid;
  align-content: center;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
}

.how-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
}

.how-head {
  max-width: 640px;
}

/* The pinned stage needs a visible object to hold, not copy floating on paper. */
.how-frame {
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(
      70% 90% at 6% 4%,
      color-mix(in srgb, var(--apricot) 30%, transparent),
      transparent 70%
    ),
    var(--card);
  box-shadow: var(--shadow-soft);
}

.how-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.how-head .lead {
  margin-top: 12px;
  font-size: 15.5px;
}

.how-body {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(20px, 3.6vw, 48px);
  align-items: center;
}

.how-copy .players {
  justify-content: flex-start;
  margin-bottom: 16px;
}

/* The three panels share one box, so the stage never changes height as they cross over. */
.how-panels {
  position: relative;
  min-height: 232px;
}

.how-panel {
  position: absolute;
  inset: 0;
  max-width: 44ch;
}

.how-panel h3 {
  font-size: clamp(23px, 2.8vw, 31px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.how-panel p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
}

.how-panel .stage-state {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}

.how-art {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.how-art .vincent {
  width: 200px;
  height: 200px;
}

/* The rail is the act's own readout: the same two states the app reports. */
.conv {
  width: 100%;
  display: grid;
  gap: 9px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.conv-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.conv-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}

.conv-level {
  height: 6px;
  border-radius: 999px;
  background: var(--card-muted);
  overflow: hidden;
}

.conv-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 120ms linear;
}

.conv-bar-ai {
  background: var(--coral);
}

.conv-bar-music {
  background: var(--ink);
}

.conv-row strong {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.conv-track {
  position: relative;
  height: 2px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--line);
}

.conv-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  margin-top: -4.5px;
  background: var(--line-strong);
}

.conv-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--coral-deep);
  box-shadow: 0 0 0 3px var(--card);
}

.conv-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Act 2: the three behaviors travel sideways, where breadth reads --- */

.feature-act {
  position: relative;
  background: var(--paper);
}

.feature-stage {
  display: flex;
  align-items: center;
}

.feature-track {
  align-items: stretch;
  gap: clamp(14px, 2vw, 22px);
  padding-inline: var(--gutter);
}

.feature-track > * {
  flex: 0 0 auto;
}

.rail-lead {
  width: clamp(250px, 30vw, 420px);
  align-self: center;
  padding-right: clamp(6px, 1.4vw, 18px);
}

.rail-lead h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.rail-lead .lead {
  margin-top: 12px;
  font-size: 15.5px;
}

.rail-card {
  width: clamp(240px, 25vw, 360px);
}

.rail-close {
  width: clamp(228px, 24vw, 340px);
  align-self: center;
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-muted);
}

.rail-close h3 {
  font-size: 21px;
  letter-spacing: -0.03em;
}

.rail-close p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* --- Flow sections after a pinned act: less air, the stage already gave one viewport away --- */

.how + .feature-act {
  padding-block: 0;
}

.feature-act + .band-wrap {
  margin-top: clamp(28px, 5vw, 64px);
}

.close {
  padding-bottom: clamp(48px, 7vw, 96px);
}

@media (max-width: 900px) {
  .how-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .how-head h2 {
    font-size: clamp(22px, 5.6vw, 30px);
  }

  .how-head .lead {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.5;
  }

  .how-art {
    order: -1;
    gap: 10px;
  }

  .how-art .vincent {
    width: 96px;
    height: 96px;
  }

  .how-frame {
    padding: 18px 16px;
  }

  .how-panels {
    min-height: 198px;
  }

  .how-panel h3 {
    font-size: 23px;
  }

  .how-panel p {
    font-size: 14px;
  }

  .conv {
    padding: 11px 12px 10px;
    gap: 7px;
  }

  .conv-row {
    grid-template-columns: 74px minmax(0, 1fr) 74px;
    font-size: 11.5px;
    gap: 8px;
  }

  .rail-lead,
  .rail-close {
    width: min(74vw, 300px);
  }

  .rail-card {
    width: min(76vw, 320px);
  }

  /* On a phone the pan act is a swipe strip, not a scroll act. Once the cards are 76vw wide the
     heading leaves the screen after one flick, and the act's four viewports of scroll would be
     dead space, so it stops pinning and becomes an ordinary section with a native horizontal
     scroller: every card reachable, the heading always at the start. */
  #features {
    height: auto !important;
  }

  .feature-stage {
    position: static !important;
    height: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Without this the first snap consumes the track's own padding and the heading lands flush
       against the screen edge. */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    -webkit-overflow-scrolling: touch;
    padding-block: clamp(18px, 5vw, 32px);
  }

  .feature-track {
    transform: none !important;
    flex-wrap: nowrap;
  }

  .feature-track > * {
    scroll-snap-align: start;
  }
}

@media (max-height: 720px) {
  .how-head .lead {
    display: none;
  }

  .how-art .vincent {
    width: 96px;
    height: 96px;
  }

  .how-panels {
    min-height: 190px;
  }

  .conv-scale {
    display: none;
  }
}

/* Reduced motion keeps the story: the engine still switches the panels and the rail still tracks
   the scroll, it just gets there without a transition. The character is unaffected either way. */
@media (prefers-reduced-motion: reduce) {
  .conv-bar {
    transition: none;
  }

  [data-sc-magnet] {
    transform: none !important;
  }
}