/* The Lama apps: family landing page. Plain CSS, no build step beyond
   scripts/build_website.py, which only renames this file by its digest. */

:root {
  --graphite: #17171E;
  --ivory: #FFF8EB;
  --page: #FFF8EB;
  --page-alt: #F4EBDA;
  --card: #FFFFFF;
  --ink: #17171E;
  --ink-muted: #55535E;
  --line: rgba(23, 23, 30, 0.12);
  --focus: #056CB3;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Cantarell, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius: 28px;
  --wrap: 1180px;
  color-scheme: light;
}

[data-theme="dark"] {
  --page: #121218;
  --page-alt: #17171E;
  --card: #1D1D26;
  --ink: #FFF8EB;
  --ink-muted: #B9B4AA;
  --line: rgba(255, 248, 235, 0.12);
  --focus: #5BB1FE;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--graphite); color: var(--ivory);
}
.skip:focus { top: 12px; }

/* Buttons ---------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: transform 200ms var(--spring), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.button:hover { transform: translateY(-2px) rotate(-1deg); }
.button:active { transform: translateY(1px) scale(0.98); }
.button.primary { background: var(--graphite); color: var(--ivory); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25); }
.button.ghost { border-color: currentColor; background: transparent; }
[data-theme="dark"] .button.primary { background: var(--ivory); color: var(--graphite); }

.eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 14px;
}

/* Header ----------------------------------------------------------------- */
.site-header {
  position: fixed; top: 12px; left: 50%; z-index: 50;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), var(--wrap));
  display: flex; align-items: center; gap: 18px;
  padding: 8px 10px 8px 12px; border-radius: 999px;
  background: rgba(23, 23, 30, 0.72); color: var(--ivory);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark img { width: 32px; height: 32px; border-radius: 9px; transition: transform 400ms var(--spring); }
.wordmark:hover img { transform: rotate(-12deg) scale(1.1); }
.wordmark span { display: grid; line-height: 1.1; }
.wordmark b { font-size: 16px; }
.wordmark small { font-size: 11px; opacity: 0.7; }
.site-header nav { display: flex; gap: 4px; margin-left: auto; }
.site-header nav a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px;
  transition: background-color 200ms var(--ease);
}
.site-header nav a:hover { background: rgba(255, 248, 235, 0.12); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 999px;
  background: rgba(255, 248, 235, 0.1); color: var(--ivory); cursor: pointer;
}
.tt-track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #0E7C59; transition: background-color 400ms var(--ease); }
.tt-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ivory); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 400ms var(--spring), background-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.tt-label { font-size: 13px; font-weight: 700; }

.lang-switch {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 248, 235, 0.1);
}
.lang-switch[hidden] { display: none; }
.lang-switch a, .lang-switch button {
  display: inline-grid; place-items: center; min-width: 36px; min-height: 34px; padding: 0 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ivory);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.lang-switch a:hover, .lang-switch button:hover { background: rgba(255, 248, 235, 0.14); }
.lang-switch [aria-pressed="true"], .lang-switch [aria-current="page"] { background: var(--ivory); color: var(--graphite); }
[data-theme="dark"] .tt-track { background: #3A3A46; }
[data-theme="dark"] .tt-thumb { transform: translateX(20px); }

/* Hero: a Lama on a terminal ------------------------------------------------ */
.hero {
  --hl: #24C27D;
  --hw: clamp(56px, 7.4vw, 92px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(700px, 100svh, 940px);
  display: flex; flex-direction: column;
  background: #0E0E14; color: var(--ivory);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(rgba(255, 248, 235, 0.13) 1px, transparent 1.2px),
    linear-gradient(rgba(255, 248, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 235, 0.045) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px, 120px 120px;
  background-position: 12px 12px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 30%, #000 40%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 60% 30%, #000 40%, transparent 100%);
}
.hero-glow {
  position: absolute; right: 6%; top: 18%; width: 46vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%;
  background: #24C27D; opacity: 0.16; filter: blur(90px);
  animation: accent-glow 20s ease-in-out infinite;
}
@keyframes accent-glow {
  0%, 100% { background: #24C27D; }
  20% { background: #9B83FF; }
  40% { background: #5BB1FE; }
  60% { background: #E977BB; }
  80% { background: #5CC0CF; }
}

.hero-inner {
  position: relative; z-index: 3; flex: 1;
  width: min(calc(100% - 40px), var(--wrap)); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 4vw, 64px);
  padding: 112px 0 36px;
}
.hero-copy { min-width: 0; align-self: center; }
.hero .eyebrow { color: rgba(255, 248, 235, 0.62); text-transform: none; letter-spacing: 0.02em; font-size: 14px; }
.prompt { color: var(--hl); }
.hero h1 { font-size: clamp(40px, 4.7vw, 68px); font-weight: 900; letter-spacing: -0.035em; text-wrap: balance; }
.hero h1 code {
  display: inline-block; margin-top: 0.12em; padding: 0.04em 0.28em 0.08em; border-radius: 0.18em;
  font-family: var(--mono); font-size: 0.62em; font-weight: 700; letter-spacing: -0.02em;
  color: var(--hl); background: rgba(36, 194, 125, 0.1); box-shadow: inset 0 0 0 1px rgba(36, 194, 125, 0.35);
}
.lead { font-size: clamp(18px, 1.5vw, 20px); max-width: 34em; margin-top: 22px; color: rgba(255, 248, 235, 0.82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .button.primary { background: var(--ivory); color: var(--graphite); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5); }
.hero .button.ghost { color: var(--ivory); border-color: rgba(255, 248, 235, 0.4); }

.hero-stage { --lw: clamp(150px, 16vw, 220px); position: relative; min-width: 0; padding-top: calc(var(--lw) * 0.92); }
.hero-lama { position: absolute; top: 0; right: 9%; z-index: 2; width: var(--lw); aspect-ratio: 1; transform-origin: 55% 92%; }
.hero-lama .pose,
.scene-lama .pose { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; transition: opacity 260ms var(--ease); }
.hero-lama .hello, .hero-lama.is-hello .proud,
.scene-lama .hello, .scene-lama.is-hello .proud { opacity: 0; }
.hero-lama.is-hello .hello, .scene-lama.is-hello .hello { opacity: 1; }

.terminal {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #08080C; border: 1px solid rgba(255, 248, 235, 0.14);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(255, 248, 235, 0.03);
}
.t-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: #15151C; border-bottom: 1px solid rgba(255, 248, 235, 0.08); }
.t-dots { display: flex; gap: 6px; }
.t-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 248, 235, 0.18); }
.t-dots i:first-child { background: #E5484D; }
.t-dots i:nth-child(2) { background: #F0B429; }
.t-dots i:nth-child(3) { background: #24C27D; }
.t-title { flex: 1; text-align: center; margin-right: 46px; font-family: var(--mono); font-size: 12px; color: rgba(255, 248, 235, 0.5); }
.t-body {
  margin: 0; padding: 14px 16px 16px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.75; color: rgba(255, 248, 235, 0.88);
}
.t-line { display: block; white-space: pre; border-radius: 4px; }
.t-head { color: rgba(255, 248, 235, 0.42); }
.t-prompt { color: var(--hl); font-weight: 700; }
.t-row { text-decoration: none; margin: 0 -6px; padding: 0 6px; transition: background-color 150ms var(--ease); }
.t-row:hover, .t-row:focus-visible { background: color-mix(in srgb, var(--accent-dark) 16%, transparent); outline-offset: 0; }
.t-name { color: var(--accent-dark); font-weight: 700; }
.t-plat { color: rgba(255, 248, 235, 0.55); }
.t-head > span { color: inherit; font-weight: inherit; }
.t-sum { color: rgba(255, 248, 235, 0.5); margin-top: 6px; }
.t-status { font-style: normal; }
.t-status.is-beta { color: #24C27D; }
.t-status.is-preview { color: #9B83FF; }
.t-status.is-in-development { color: #F0B429; }
.t-caret { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.2em; background: var(--ivory); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
html.js .terminal.is-typing .t-line:not(.is-typed) { visibility: hidden; }

.baseline { position: relative; z-index: 3; width: min(calc(100% - 40px), var(--wrap)); margin: 0 auto; padding: 8px 0 26px; }
.ruler {
  position: absolute; left: 0; right: 0; top: calc(8px + var(--hw) * 0.92); height: 9px;
  border-top: 1px solid rgba(255, 248, 235, 0.35);
  background: repeating-linear-gradient(90deg, rgba(255, 248, 235, 0.35) 0 1px, transparent 1px 24px),
              repeating-linear-gradient(90deg, rgba(255, 248, 235, 0.35) 0 1px, transparent 1px 120px);
  background-size: auto 4px, auto 9px; background-repeat: repeat-x;
}
.herd { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 0 clamp(0px, 4vw, 60px); }
.herd-lama { position: relative; display: grid; justify-items: center; gap: 12px; width: var(--hw); text-decoration: none; }
.herd-body { position: relative; display: block; width: 100%; aspect-ratio: 1; transform-origin: 55% 92%; }
.herd-body img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 180ms var(--ease); }
.herd-hello { opacity: 0; }
.herd-lama:hover .herd-hello, .herd-lama:focus-visible .herd-hello, .herd-lama.is-grazing .herd-hello { opacity: 1; }
.herd-lama:hover .herd-proud, .herd-lama:focus-visible .herd-proud, .herd-lama.is-grazing .herd-proud { opacity: 0; }
.herd-lama:hover .herd-body { animation: hop 520ms var(--ease); }
.herd-name {
  font-family: var(--mono); font-size: 12px; white-space: nowrap; color: rgba(255, 248, 235, 0.55);
  transition: color 160ms var(--ease);
}
.herd-name::before { content: "./"; opacity: 0.5; }
.herd-lama:hover .herd-name, .herd-lama:focus-visible .herd-name { color: var(--accent-dark); }
@keyframes hop {
  0%, 100% { transform: none; }
  20% { transform: scale(1.04, 0.94); }
  50% { transform: translateY(-22%) scale(0.97, 1.04); }
  80% { transform: scale(1.03, 0.97); }
}

/* Status ticker ------------------------------------------------------------ */
.parade { overflow: hidden; background: #08080C; color: var(--ivory); padding: 10px 0; border-top: 1px solid rgba(255, 248, 235, 0.1); border-bottom: 1px solid rgba(255, 248, 235, 0.1); }
.parade-track { display: flex; width: max-content; animation: parade 60s linear infinite; }
.parade:hover .parade-track { animation-play-state: paused; }
.parade-run { display: flex; }
.parade-item { display: flex; align-items: center; gap: 10px; padding: 0 28px; font-family: var(--mono); font-size: 14px; border-right: 1px solid rgba(255, 248, 235, 0.08); }
.parade-item img { width: 34px; height: 34px; transform-origin: 55% 92%; animation: hop 900ms var(--ease) infinite; animation-delay: calc(var(--i) * -180ms); }
.parade-item b { color: var(--accent-dark); }
.parade-item i { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 248, 235, 0.06); }
@keyframes parade { to { transform: translateX(-50%); } }

/* Sections --------------------------------------------------------------- */
.section { width: min(calc(100% - 40px), var(--wrap)); margin: 0 auto; padding: 120px 0 40px; }
.section-head { max-width: 760px; margin-bottom: 64px; }
.section-head h2 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 900; letter-spacing: -0.035em; margin-bottom: 20px; }
.section-head h2 span { color: var(--ink-muted); }
.section-head p { font-size: 19px; color: var(--ink-muted); }

html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* Apps ------------------------------------------------------------------- */
.app {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
  align-items: center; margin-bottom: 120px;
}
.app.is-flipped .app-figure { order: 2; }
.app-figure { margin: 0; min-width: 0; }
.app-figure figcaption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; font-size: 15px; color: var(--ink-muted);
}

.stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3; container-type: inline-size;
  border-radius: var(--radius); background: var(--ground);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -24px var(--ground);
  --floor: 16cqw; --lw: 28cqw; --lx: 36cqw;
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4;
  background: radial-gradient(60% 60% at 50% 40%, var(--accent) 0%, transparent 70%);
}
.scene-lama {
  position: absolute; z-index: 3; width: var(--lw); aspect-ratio: 1;
  left: var(--lx); bottom: calc(var(--floor) - var(--lw) * 0.08);
  transform-origin: 55% 92%;
}

.app-copy { min-width: 0; }
.app-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.app-tile { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 24px -10px var(--accent); transition: transform 400ms var(--spring); }
.app:hover .app-tile { transform: rotate(-8deg) scale(1.06); }
.app-job { margin: 0; font-size: 14px; font-weight: 700; color: var(--accent); }
[data-theme="dark"] .app-job { color: var(--accent-dark); }
.app-head h3 { font-size: clamp(32px, 3.4vw, 44px); font-weight: 900; letter-spacing: -0.03em; }
.status {
  margin-left: auto; align-self: flex-start; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--page-alt); border: 1.5px solid var(--line);
}
.status.is-beta::before, .status.is-dev::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: #16A34A; vertical-align: 1px; animation: breathe 2s ease-in-out infinite;
}
.status.is-dev::before { background: #D97706; }
@keyframes breathe { 50% { opacity: 0.35; transform: scale(0.75); } }
.app-tagline { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; }
.app-summary { color: var(--ink-muted); }
.app-features { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.app-features li { position: relative; padding-left: 30px; }
.app-features li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 6px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23FFF8EB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.app-platforms { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px; }
.app-platforms li { padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1.5px dashed var(--line); color: var(--ink-muted); }
.app-link { background: var(--ground); color: var(--ivory); box-shadow: 0 6px 0 color-mix(in srgb, var(--ground) 60%, #000); }
[data-theme="dark"] .app-link { box-shadow: 0 0 0 2px var(--accent-dark), 0 6px 0 #000; }

.scene-action {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px;
  border: 0; border-radius: 999px; cursor: pointer; font-weight: 700;
  background: var(--ground); color: var(--ivory);
}
.shutter { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ivory); background: var(--accent-dark); transition: transform 160ms var(--spring); }
.scene-action:active .shutter { transform: scale(0.8); }

/* ProcessLama scene --------------------------------------------------------- */
.scene-mimameidr::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.18;
  background-image: linear-gradient(var(--accent-dark) 1px, transparent 1px), linear-gradient(90deg, var(--accent-dark) 1px, transparent 1px);
  background-size: 8cqw 8cqw;
}
.pl-line { position: absolute; left: 0; right: 0; bottom: calc(var(--floor) - 0.3cqw); height: 0.6cqw; border-radius: 1cqw; background: var(--accent-dark); opacity: 0.85; }
.pl-beats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pl-beat { position: absolute; left: 0; bottom: calc(var(--floor) - 4cqw); width: 12cqw; height: 8cqw; }
.pl-beat svg { width: 100%; height: 100%; overflow: visible; }
.pl-beat path { fill: none; stroke: var(--prop); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--accent-dark)); }
.pl-monitor {
  position: absolute; top: 4cqw; right: 4cqw; width: 40cqw; padding: 2cqw 2.4cqw;
  border-radius: 2.4cqw; background: rgba(0, 0, 0, 0.28); color: var(--ivory);
  font-family: var(--mono); font-size: 2.3cqw; line-height: 1.5;
}
.pl-live { display: flex; align-items: center; gap: 1cqw; font-weight: 700; color: var(--accent-dark); margin-bottom: 0.6cqw; }
.pl-live i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--accent-dark); animation: breathe 1.6s ease-in-out infinite; }
.pl-top { list-style: none; margin: 0; padding: 0; }
.pl-top li { display: flex; justify-content: space-between; gap: 2cqw; padding: 0 1cqw; border-radius: 0.8cqw; background: color-mix(in srgb, var(--accent-dark) calc(var(--heat, 0) * 1%), transparent); transition: background-color 400ms var(--ease); }

/* MailLama scene ------------------------------------------------------------ */
.scene-crossproton { --floor: 14cqw; --lw: 26cqw; --lx: 60cqw; }
.scene-crossproton::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor); background: rgba(0, 0, 0, 0.16); z-index: -1; }
.ml-envelope { position: absolute; left: 6cqw; bottom: var(--floor); width: 32cqw; overflow: visible; z-index: 4; transform-origin: 50% 100%; }
.ml-back { fill: color-mix(in srgb, var(--prop) 70%, var(--ground)); }
.ml-front { fill: var(--prop); }
.ml-flap { fill: none; stroke: var(--prop); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.ml-letters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ml-letter { position: absolute; left: 0; top: 0; width: 8cqw; height: 5.6cqw; }
.ml-letter svg { width: 100%; height: 100%; overflow: visible; }
.ml-count { position: absolute; top: 4cqw; left: 4cqw; display: flex; gap: 1.6cqw; font-size: 2.4cqw; font-weight: 700; color: var(--ivory); }
.ml-count > span { padding: 0.8cqw 2cqw; border-radius: 99px; background: rgba(0, 0, 0, 0.22); }
.ml-count b { font-family: var(--mono); color: #F0EF52; }
.ml-gulp { animation: gulp 380ms var(--spring); }
@keyframes gulp { 40% { transform: scale(1.08, 0.9); } }

/* GitLama scene ------------------------------------------------------------- */
.scene-northspline { --floor: 22cqw; }
.gl-trunk { position: absolute; left: 0; right: 0; bottom: calc(var(--floor) - 0.6cqw); height: 1.2cqw; border-radius: 1cqw; background: var(--accent-dark); }
.gl-branch {
  position: absolute; left: 0; right: 0; bottom: calc(var(--floor) - 12cqw); height: 0.8cqw; border-radius: 1cqw;
  background: repeating-linear-gradient(90deg, #E977BB 0 3cqw, transparent 3cqw 4.5cqw); opacity: 0.8;
}
.gl-commits { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gl-commit {
  position: absolute; left: 0; bottom: calc(var(--floor) - 2.5cqw); width: 5cqw; height: 5cqw; border-radius: 50%;
  background: var(--ground); border: 1.1cqw solid var(--accent-dark);
}
.gl-commit.is-merge { background: var(--prop); box-shadow: 0 0 0 0.8cqw var(--ground), 0 0 0 1.6cqw #E977BB; }
.gl-commit.is-branch { bottom: calc(var(--floor) - 14cqw); border-color: #E977BB; }
.gl-log {
  position: absolute; top: 4cqw; left: 4cqw; right: 4cqw; display: flex; flex-direction: column; gap: 0.6cqw;
  font-family: var(--mono); font-size: 2.4cqw; color: var(--ivory);
}
.gl-head { align-self: flex-start; padding: 0.4cqw 1.6cqw; border-radius: 99px; background: var(--accent-dark); color: var(--ground); font-weight: 700; }
.gl-msg { opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-sha { color: #E977BB; }
.gl-msg.is-new { animation: pop-in 360ms var(--spring); }
@keyframes pop-in { from { transform: translateY(40%); opacity: 0; } }

/* ShotLama scene ------------------------------------------------------------ */
.scene-shotlama { --floor: 12cqw; --lw: 34cqw; --lx: 31cqw; }
.sl-corners { position: absolute; left: 22cqw; top: 6cqw; width: 52cqw; height: 62cqw; z-index: 4; overflow: visible; }
.sl-corners path { fill: none; stroke: var(--prop); stroke-width: 1.4cqw; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sl-dim { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0.34); opacity: 0; transition: opacity 160ms var(--ease); pointer-events: none;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 23.4% 10.4%, 23.4% 88.3%, 72.6% 88.3%, 72.6% 10.4%, 23.4% 10.4%);
}
.stage.is-capturing .sl-dim { opacity: 1; }
.stage.is-capturing .sl-corners { animation: corners-in 300ms var(--spring); }
@keyframes corners-in { from { transform: scale(1.08); } }
.sl-flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.sl-cards { position: absolute; right: 2.5cqw; bottom: 2.5cqw; z-index: 7; display: flex; flex-direction: column; gap: 1.6cqw; align-items: flex-end; }
.sl-card {
  position: relative; width: 22cqw; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
  border-radius: 1.6cqw; border: 0.5cqw solid var(--ivory);
  box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.45); background: var(--ground);
}
.sl-shot { position: absolute; left: 0; top: 0; width: 100cqw; height: 75cqw; transform-origin: 0 0; background: var(--ground); pointer-events: none; }

/* NoteLama scene ------------------------------------------------------------ */
.scene-nibluma { --floor: 25cqw; --lw: 24cqw; --lx: 36.8cqw; }
.nl-book { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.nl-cover { fill: var(--accent-dark); opacity: 0.9; }
.nl-page { fill: #FBF7EE; }
.nl-left { fill: #F6F0E2; }
.nl-turn { fill: #FFFDF6; opacity: 0; transform-box: view-box; transform-origin: 0 0; filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.18)); }
.nl-rules path { fill: none; stroke: #9CC7D1; stroke-width: 0.8; opacity: 0.8; }
.nl-ink path { fill: none; stroke: #22314F; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.nl-pen { fill: var(--graphite); transition: opacity 300ms var(--ease); }
.nl-pen rect { fill: var(--accent); }
.scene-nibluma .scene-lama { z-index: 3; }

/* Anatomy ------------------------------------------------------------------- */
.build-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.build-copy h2 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 900; letter-spacing: -0.035em; margin-bottom: 20px; }
.build-copy > p { font-size: 19px; color: var(--ink-muted); }
.build-steps { list-style: none; counter-reset: step; padding: 0; margin: 28px 0; display: grid; gap: 12px; }
.build-steps li {
  counter-increment: step; position: relative; padding: 14px 16px 14px 60px; border-radius: 18px;
  border: 2px solid var(--line); color: var(--ink-muted); transition: border-color 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease), transform 400ms var(--spring);
}
.build-steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 13px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; background: var(--page-alt);
}
.build-steps li b { color: var(--ink); }
.build-steps li.is-on { border-color: #E977BB; background: color-mix(in srgb, #E977BB 10%, transparent); color: var(--ink); transform: translateX(6px); }
.build-steps li.is-on::before { background: #E977BB; color: var(--graphite); }

.build-stage { min-width: 0; }
.build-paper {
  position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: #4D253F;
  background-image: linear-gradient(rgba(233, 119, 187, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 119, 187, 0.12) 1px, transparent 1px);
  background-size: 10% 10%;
}
.build-svg { width: 100%; height: 100%; }
.b-ring { fill: none; stroke: #E977BB; stroke-width: 0.6; stroke-dasharray: 100; stroke-dashoffset: 100; }
.b-dot { fill: #E977BB; opacity: 0; }
.b-part { fill: var(--ivory); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0.4); }
.b-shades { opacity: 0; transform: translateY(-40px); }
.build-stage.is-step-1 .b-ring { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease) calc(var(--i) * 70ms); }
.build-stage.is-step-1 .b-dot { opacity: 1; transition: opacity 300ms var(--ease) calc(var(--i) * 70ms); }
.build-stage.is-step-2 .b-part { opacity: 1; transform: none; transition: opacity 400ms var(--ease) calc(var(--i) * 120ms), transform 600ms var(--spring) calc(var(--i) * 120ms); }
.build-stage.is-step-2 .b-ring, .build-stage.is-step-2 .b-dot { opacity: 0.35; }
.build-stage.is-step-3 .b-shades { opacity: 1; transform: none; transition: opacity 200ms var(--ease), transform 700ms cubic-bezier(0.5, 1.8, 0.6, 1); }
.build-stage.is-step-3 .b-ring, .build-stage.is-step-3 .b-dot { opacity: 0; transition: opacity 600ms var(--ease) 500ms; }
.build-stage.is-done .build-svg { animation: hop 700ms var(--ease) 2; }

.poses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.poses figure { margin: 0; padding: 10px 6px 8px; border-radius: 18px; background: var(--graphite); color: var(--ivory); text-align: center; font-size: 12px; font-weight: 700; }
.poses img { width: 100%; height: auto; transition: transform 400ms var(--spring); }
.poses figure:hover img { transform: translateY(-8px) rotate(-6deg); }

/* Meridian ---------------------------------------------------------------- */
.studio { border-radius: 36px; padding: clamp(16px, 3vw, 32px); background: var(--page-alt); border: 2px solid var(--line); }
.studio-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px;
  border-radius: 999px; border: 2px solid var(--line); background: var(--card); cursor: pointer; font-weight: 700; font-size: 15px;
  transition: transform 220ms var(--spring), border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.chip img { width: 22px; height: 22px; border-radius: 6px; }
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--ground); color: var(--ivory); }
.segmented { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); }
.segmented button { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 700; }
.segmented button[aria-pressed="true"] { background: var(--graphite); color: var(--ivory); }
[data-theme="dark"] .segmented button[aria-pressed="true"] { background: var(--ivory); color: var(--graphite); }

.studio-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.studio-note { grid-column: 1 / -1; font-size: 14px; color: var(--ink-muted); margin: 0; }

.mock {
  --m-row: 28px; --m-r: 7px; --m-rl: 10px;
  overflow: hidden; border-radius: 16px; background: var(--m-ground); color: var(--m-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Cantarell, "Noto Sans", sans-serif;
  font-size: 13px; line-height: 1.3; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--m-line-strong);
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
.mock * { transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease), height 400ms var(--ease), border-radius 400ms var(--ease); }
.m-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; }
.m-dots { display: flex; gap: 6px; }
.m-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--m-line-strong); }
.m-title { font-weight: 600; }
.m-search { margin-left: auto; width: 34%; padding: 4px 10px; border-radius: var(--m-r); background: var(--m-pane); color: var(--m-ink-faint); border: 1px solid var(--m-line); }
.m-body { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 8px; padding: 0 8px 8px 0; min-height: 330px; }
.m-side { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 34px 10px; }
.m-heading { font-size: 11px; font-weight: 600; color: var(--m-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 0 2px 8px; }
.m-nav { display: flex; align-items: center; gap: 8px; height: var(--m-row); padding: 0 8px; border-radius: calc(var(--m-r) - 2px); color: var(--m-ink-muted); }
.m-nav i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.8; }
.m-nav.is-active { background: var(--m-accent-soft); color: var(--m-accent-ink); font-weight: 600; }
.m-sig { position: absolute; left: 18px; bottom: 10px; width: 17px; height: 16px; color: var(--m-ink-faint); cursor: help; }
.m-sig svg { width: 17px; height: 16px; }
.mock:hover .m-sig { color: var(--m-ink-muted); }
.m-sig::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--m-accent);
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 1; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.m-island { padding: 14px; border-radius: var(--m-rl); background: var(--m-pane); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.m-island-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.m-island-head small { display: block; font-size: 11px; color: var(--m-ink-faint); }
.m-island-head strong { font-size: 15px; font-weight: 600; }
.m-button { flex: none; padding: 6px 12px; border-radius: var(--m-r); background: var(--m-accent); color: var(--m-on-accent); font-weight: 600; }
.m-rows { display: grid; }
.m-row { display: flex; align-items: center; gap: 10px; height: var(--m-row); padding: 0 8px; border-radius: calc(var(--m-r) - 2px); border-bottom: 1px solid var(--m-line); }
.m-row:last-child { border-bottom: 0; }
.m-row b { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row span { color: var(--m-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-success); flex: none; }
.m-row.is-selected { background: var(--m-accent); color: var(--m-on-accent); border-color: transparent; }
.m-row.is-selected span { color: var(--m-on-accent); opacity: 0.85; }
.m-row.is-selected i { background: var(--m-on-accent); }
.m-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--m-line); }
.m-switch { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--m-accent); }
.m-switch i { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--m-on-accent); }
.m-label { color: var(--m-ink-muted); }
.m-seg { margin-left: auto; display: inline-flex; padding: 2px; border-radius: var(--m-r); background: var(--m-ground); border: 1px solid var(--m-line); }
.m-seg b, .m-seg span { padding: 2px 10px; border-radius: calc(var(--m-r) - 2px); font-weight: 500; }
.m-seg b { background: var(--m-pane); color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-line-strong); }
.m-seg span { color: var(--m-ink-muted); }

.studio-facts { margin: 0; display: grid; gap: 10px; }
.studio-facts div { padding: 12px 16px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); }
.studio-facts dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.studio-facts dd { margin: 2px 0 0; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }
.swatch { width: 22px; height: 22px; border-radius: 7px; background: var(--m-accent, #056CB3); box-shadow: 0 0 0 2px var(--line); }
.studio-facts dd.is-new { animation: pop-in 320ms var(--spring); }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 64px 0 40px; }
.principles article { padding: 24px; border-radius: 26px; background: var(--card); border: 2px solid var(--line); transition: transform 300ms var(--spring); }
.principles article:hover { transform: translateY(-6px) rotate(-0.6deg); }
.principles h3 { font-size: 21px; margin: 18px 0 8px; }
.principles p { color: var(--ink-muted); margin: 0; font-size: 16px; }
.p-art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--page-alt); overflow: hidden; }
.p-islands i { position: absolute; width: 22px; height: 30px; border-radius: 6px; background: var(--card); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); }
.p-islands i:first-child { left: 10px; }
.p-islands i:last-child { right: 10px; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.p-accent i { width: 30px; height: 14px; border-radius: 99px; background: #056CB3; animation: accent-cycle 7.5s steps(1) infinite; }
@keyframes accent-cycle { 0% { background: #0E7C59; } 20% { background: #6D4AFF; } 40% { background: #056CB3; } 60% { background: #B8338F; } 80% { background: #0B6477; } }
.p-density { gap: 3px; align-content: center; }
.p-density i { display: block; width: 36px; height: 6px; border-radius: 3px; background: var(--ink-muted); opacity: 0.6; animation: density 3s ease-in-out infinite; }
@keyframes density { 50% { height: 11px; } }
.p-contrast { font-weight: 900; font-size: 26px; background: var(--graphite); color: var(--ivory); }
.p-motion i { width: 14px; height: 14px; border-radius: 50%; background: #E977BB; animation: bounce-x 1.6s var(--spring) infinite alternate; }
@keyframes bounce-x { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
.p-lama { background: var(--graphite); }
.p-lama img { width: 34px; height: auto; filter: invert(1); opacity: 0.8; }

.facts { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.facts li { padding: 18px; border-radius: 22px; background: var(--graphite); color: var(--ivory); }
.facts b { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 900; letter-spacing: -0.03em; }
.facts span { font-size: 14px; opacity: 0.75; }
.meridian-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Footer ------------------------------------------------------------------ */
.site-footer { margin-top: 100px; background: var(--graphite); color: var(--ivory); padding: 0 0 32px; }
.footer-pasture { position: relative; height: 170px; display: flex; justify-content: center; }
.footer-lama { position: absolute; bottom: -18px; width: 160px; }
.zz { position: absolute; bottom: 70px; left: calc(50% - 64px); display: flex; gap: 2px; font-weight: 900; color: var(--ivory); }
.zz i { font-style: normal; animation: zz 2.4s ease-in-out infinite; opacity: 0; }
.zz i:nth-child(2) { animation-delay: 0.4s; font-size: 1.2em; }
.zz i:nth-child(3) { animation-delay: 0.8s; font-size: 1.45em; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-14px, -22px); } }
.footer-grid {
  width: min(calc(100% - 40px), var(--wrap)); margin: 0 auto; padding-top: 56px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px;
  border-top: 1px solid rgba(255, 248, 235, 0.14);
}
.footer-grid h2 { font-size: 14px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.6; margin-bottom: 14px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; }
.footer-brand img { filter: invert(1); width: 21px; }
.footer-brand span { font-size: 14px; font-weight: 600; opacity: 0.6; }
.footer-brand .footer-name { font-size: inherit; font-weight: inherit; opacity: 1; }
.footer-grid p { opacity: 0.8; font-size: 15px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.footer-apps span { opacity: 0.6; font-size: 14px; }
.stampede-button { color: var(--ivory); margin-top: 6px; }
.footer-privacy { margin-top: 18px; }
.footer-fine { width: min(calc(100% - 40px), var(--wrap)); margin: 40px auto 0; font-size: 13px; opacity: 0.55; }

/* Legal pages -------------------------------------------------------------- */
.legal { width: min(calc(100% - 40px), 70ch); margin: 0 auto; padding: 132px 0 0; }
.legal h1 { font-size: clamp(30px, 7.4vw, 56px); font-weight: 900; margin-bottom: 18px; overflow-wrap: break-word; hyphens: auto; }
.legal h2 { font-size: 22px; font-weight: 800; margin: 2em 0 0.6em; }
.legal address { font-style: normal; margin: 0 0 1em; }
.legal a { text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal code { font-family: var(--mono); font-size: 0.9em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 0.3em; }
.legal-apps span { color: var(--ink-muted); }
.legal-updated { font-family: var(--mono); font-size: 14px; color: var(--ink-muted); }
.legal-page .site-footer { margin-top: 120px; }

/* Stampede ---------------------------------------------------------------- */
.stampede { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.stampede-track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px; overflow: hidden;
  background: var(--graphite); border-top: 1px solid rgba(255, 248, 235, 0.14);
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.25);
}
.stampede-track::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 28px; height: 9px;
  border-top: 1px solid rgba(255, 248, 235, 0.35);
  background: repeating-linear-gradient(90deg, rgba(255, 248, 235, 0.35) 0 1px, transparent 1px 24px);
  background-size: auto 4px; background-repeat: repeat-x;
}
.stampede img { position: absolute; left: 100%; transform-origin: 55% 92%; z-index: 1; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-body { grid-template-columns: minmax(0, 1fr); }
  .studio-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 860px) {
  .site-header nav { display: none; }
  .wordmark { margin-right: auto; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); padding: 104px 0 28px; gap: 36px; }
  .hero-stage { --lw: 150px; }
  .app, .build-grid { grid-template-columns: minmax(0, 1fr); }
  .app.is-flipped .app-figure { order: 0; }
  .app { margin-bottom: 88px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .section { padding-top: 88px; }
  .hero h1 { font-size: 44px; }
  .hero { --hw: 54px; }
  .herd { padding: 0; }
  .herd-name { font-size: 10px; }
  .herd-name::before { content: none; }
  .t-body { font-size: 11px; padding: 12px; }
  .t-plat { display: none; }
  .facts, .principles { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-body { grid-template-columns: minmax(0, 1fr); padding: 0 8px 8px; }
  .m-side { display: none; }
  .m-search { display: none; }
  .app-head { flex-wrap: wrap; }
  .status { margin-left: 0; }
  .wordmark small { display: none; }
  .site-header { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .parade-track { animation: none; }
  html.js .reveal { transform: none; }
}