/* Grafaris homepage. Tokens copied from grafaris-brain/design-system/design-system-v1/design-tokens.md.
   One stylesheet, no build. Sections follow the band order in index.html. */

@font-face {
  font-family: 'Alata';
  src: url('/fonts/alata-latin-ext.woff2') format('woff2');
  font-display: swap;
  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: 'Alata';
  src: url('/fonts/alata-latin.woff2') format('woff2');
  font-display: swap;
  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;
}

:root {
  --gr-gold: #E4B912;
  --gr-gold-light: #F1DC88;
  --gr-gold-lighter: #FBE8A0;
  --gr-gold-dark: #B8920D;
  --gr-gold-darker: #8A6D09;
  --gr-gold-alpha-10: rgba(228,185,18,.10);
  --gr-gold-alpha-15: rgba(228,185,18,.15);
  --gr-gold-alpha-30: rgba(228,185,18,.30);
  --gr-green: #0C6E3C;
  --gr-green-dark: #04391F;
  --gr-green-light: #14A05A;
  --gr-bg-base: #1D1D1D;
  --gr-bg-raised: #252525;
  --gr-bg-card: #2E2E2E;
  --gr-bg-card-hover: #363636;
  --gr-surface-low: #3A3A3A;
  --gr-surface-mid: #484848;
  --gr-surface-high: #595959;
  --gr-text-primary: #FFFFFF;
  --gr-text-secondary: #FFF6CF;
  --gr-text-muted: #C0B68A;
  --gr-text-on-gold: #1D1D1D;
  --gr-border: rgba(228,185,18,.15);
  --gr-border-strong: rgba(228,185,18,.35);
  --gr-border-subtle: rgba(255,255,255,.08);
  --gr-gradient-gold-soft: linear-gradient(135deg, #F1DC88 0%, #E4B912 55%, #B8920D 100%);
  --gr-gradient-green: linear-gradient(180deg, #0C6E3C 0%, #04391F 100%);
  --gr-gradient-text: linear-gradient(180deg, #FBE8A0 0%, #E4B912 60%, #B8920D 100%);
  --gr-font-primary: 'Alata', system-ui, -apple-system, sans-serif;
  --gr-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  --gr-text-xs: .75rem;
  --gr-text-sm: .875rem;
  --gr-text-base: 1rem;
  --gr-text-lg: 1.125rem;
  --gr-text-xl: 1.25rem;
  --gr-text-2xl: 1.5rem;
  --gr-text-3xl: 1.875rem;
  --gr-display-sm: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  --gr-display-md: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --gr-display-lg: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --gr-space-1: 4px; --gr-space-2: 8px; --gr-space-3: 12px; --gr-space-4: 16px;
  --gr-space-5: 20px; --gr-space-6: 24px; --gr-space-8: 32px; --gr-space-10: 40px;
  --gr-space-12: 48px; --gr-space-16: 64px; --gr-space-20: 80px; --gr-space-24: 96px;
  --gr-radius-sm: 6px; --gr-radius-md: 10px; --gr-radius-lg: 16px; --gr-radius-xl: 24px; --gr-radius-pill: 999px;
  --gr-container: 1180px;
  --gr-container-narrow: 760px;
  --gr-container-wide: 1320px;
  --gr-shadow-sm: 0 2px 8px rgba(0,0,0,.40);
  --gr-shadow-md: 0 4px 24px rgba(0,0,0,.50);
  --gr-shadow-lg: 0 8px 40px rgba(0,0,0,.65);
  --gr-shadow-gold: 0 0 0 2px rgba(228,185,18,.35);
  --gr-glow-gold: 0 0 48px rgba(228,185,18,.28);
  --gr-glow-green: 0 0 48px rgba(20,160,90,.22);
  --gr-transition: 180ms ease;
  --gr-motion-quick: 180ms;
  --gr-motion-base: 320ms;
  --gr-motion-slow: 640ms;
  --gr-motion-scene: 1200ms;
  --gr-ease-standard: cubic-bezier(.2,0,0,1);
  --gr-ease-entrance: cubic-bezier(.16,1,.3,1);
  --gr-ease-exit: cubic-bezier(.7,0,.84,0);
  --gr-ease-emphasis: cubic-bezier(.34,1.4,.64,1);
  --gr-touch-target-min: 44px;
  --nav-h: 68px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gr-bg-base);
  color: var(--gr-text-primary);
  font-family: var(--gr-font-primary);
  font-size: var(--gr-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--gr-gold); text-underline-offset: 3px; }
a:hover { color: var(--gr-gold-light); }
:focus-visible { outline: none; box-shadow: var(--gr-shadow-gold); border-radius: var(--gr-radius-sm); }
[id] { scroll-margin-top: calc(var(--nav-h) + max(3vh, 24px)); }
code, kbd, .mono { font-family: var(--gr-font-mono); }

.skip {
  position: absolute; left: var(--gr-space-4); top: -60px; z-index: 1100;
  background: var(--gr-gold); color: var(--gr-text-on-gold); padding: var(--gr-space-2) var(--gr-space-4);
  border-radius: var(--gr-radius-pill);
}
.skip:focus { top: var(--gr-space-3); }

.wrap { width: min(100% - 2 * var(--gr-space-4), var(--gr-container)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gr-space-4), var(--gr-container-wide)); }
.wrap--narrow { width: min(100% - 2 * var(--gr-space-4), var(--gr-container-narrow)); }

.gold-text {
  background: var(--gr-gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.eyebrow {
  font-size: var(--gr-text-sm); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gr-text-muted);
}

/* ---------- buttons (DESIGN.md §4) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gr-space-2);
  min-height: var(--gr-touch-target-min);
  padding: .75rem 1.4rem; border-radius: var(--gr-radius-pill); border: 1px solid transparent;
  font: inherit; font-size: var(--gr-text-base); line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform var(--gr-transition), box-shadow var(--gr-transition),
              background var(--gr-transition), border-color var(--gr-transition), color var(--gr-transition);
}
.btn--lg { padding: .95rem 1.8rem; font-size: var(--gr-text-lg); }
.btn--gold { background: var(--gr-gradient-gold-soft); color: var(--gr-text-on-gold); box-shadow: var(--gr-shadow-sm); }
.btn--gold:hover { color: var(--gr-text-on-gold); transform: translateY(-2px); box-shadow: var(--gr-shadow-md), var(--gr-glow-gold); }
.btn--ghost { background: rgba(255,255,255,.06); border-color: var(--gr-border-subtle); color: var(--gr-text-primary); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--gr-text-primary); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--gr-gold); border-color: var(--gr-border-strong); }
.btn--outline:hover { color: var(--gr-gold-light); border-color: var(--gr-gold); background: var(--gr-gold-alpha-10); }
.btn:active { transform: translateY(1px); transition-duration: 0s; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(29,29,29,.86);
  border-bottom: 1px solid transparent;
  transition: border-color var(--gr-transition), background var(--gr-transition);
}
@supports (backdrop-filter: blur(1px)) { .nav { background: rgba(29,29,29,.72); backdrop-filter: blur(14px) saturate(1.2); } }
.nav.is-scrolled { border-bottom-color: var(--gr-border-subtle); }
.nav__inner {
  height: var(--nav-h); display: flex; align-items: center; gap: var(--gr-space-6);
  width: min(100% - 2 * var(--gr-space-4), var(--gr-container-wide)); margin-inline: auto;
}
.nav__logo img { width: 132px; height: auto; }
.nav__links { display: flex; gap: var(--gr-space-6); margin-left: auto; }
.nav__links a { color: var(--gr-text-secondary); text-decoration: none; font-size: var(--gr-text-sm); padding-block: var(--gr-space-2); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--gr-gold); }
.nav__cta { padding: .6rem 1.2rem; font-size: var(--gr-text-sm); }
@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .nav__links { display: none; }
  .nav__logo { margin-right: auto; }
  .nav__logo img { width: 112px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(calc(100dvh - var(--nav-h)), 880px);
  display: grid; align-items: center;
  padding-block: var(--gr-space-12) var(--gr-space-16);
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gr-space-10); align-items: center;
}
.hero__copy { display: grid; gap: var(--gr-space-6); justify-items: start; position: relative; z-index: 2; }
.hero__title { font-size: var(--gr-display-lg); letter-spacing: -.01em; }
.hero__sub { font-size: var(--gr-text-lg); color: var(--gr-text-secondary); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gr-space-4); }
.hero__note { font-size: var(--gr-text-sm); color: var(--gr-text-muted); }
/* the floor: green environment under the board, gold stays on the focal card */
.hero::before {
  content: ""; position: absolute; inset: auto -10% -20% 30%; height: 70%; z-index: -1;
  background: radial-gradient(60% 60% at 60% 40%, rgba(12,110,60,.32), transparent 70%);
  pointer-events: none;
}
@media (max-width: 960px) {
  .hero { padding-block: var(--gr-space-8) var(--gr-space-12); min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--gr-space-8); }
}

/* ---------- the board scene (hero motion graphic) ---------- */
.scene {
  position: relative; aspect-ratio: 16 / 11;
  perspective: 1400px;
  --t0: 300ms;
}
@media (min-width: 961px) { .scene { width: 112%; } }
.scene__board {
  position: absolute; inset: 0;
  transform: rotateX(18deg) rotateY(-16deg) rotateZ(3deg) translateZ(0);
  transform-style: preserve-3d;
  animation: board-in var(--gr-motion-scene) var(--gr-ease-entrance) backwards;
}
@keyframes board-in { from { opacity: 0; translate: 0 24px; scale: .96; } }
.scene__grid {
  position: absolute; inset: 4% 2% 4% 4%;
  display: grid; grid-template-columns: repeat(5, 1fr); align-content: center;
  column-gap: 6%; row-gap: 3%;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--gr-bg-raised);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-xl);
  padding: 5% 5%;
  box-shadow: var(--gr-shadow-lg);
}
.scene__label {
  grid-column: 1 / -1; font-size: clamp(9px, 1vw, 12px); color: var(--gr-text-muted);
  display: flex; gap: var(--gr-space-2); align-items: baseline;
}
.scene__label b { color: var(--gr-gold); font-weight: 400; }
.scene__row { display: contents; }
/* connector line under each row */
.phone {
  position: relative; aspect-ratio: 9 / 18;
  border-radius: 12% / 6%;
  background: #121212;
  border: 2px solid #3a3a3a;
  padding: 7% 6%;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 6%;
  overflow: hidden;
}
.phone::after { /* the line to the next card */
  content: ""; position: absolute; top: 50%; left: 100%; width: 60%; height: 1px;
  background: linear-gradient(90deg, var(--gr-border-strong), transparent);
}
.phone:nth-child(4n + 1 + 4)::after, .scene__row .phone:last-child::after { display: none; }
.ph-bar { height: 5%; min-height: 3px; width: 40%; border-radius: 99px; background: #2c2c2c; justify-self: center; }
.ph-title { height: 6px; border-radius: 3px; background: #3a3a3a; width: 70%; }
.ph-block { border-radius: 8%; background: #232323; }
.ph-lines { display: grid; gap: 5px; align-content: start; }
.ph-lines i { display: block; height: 4px; border-radius: 2px; background: #2f2f2f; }
.ph-lines i:nth-child(2) { width: 80%; } .ph-lines i:nth-child(3) { width: 60%; }
.ph-btn { height: 10%; min-height: 8px; border-radius: 99px; background: #3a3a3a; }
/* the focal card: before and after stacked, the after wipes in */
.phone--focal { border-color: #4a4a4a; }
.phone__after {
  position: absolute; inset: 0; padding: 7% 6%;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 6%;
  background: linear-gradient(180deg, #1f1a08 0%, #151515 55%);
  clip-path: inset(0 0 100% 0);
  animation: wipe var(--gr-motion-slow) var(--gr-ease-standard) forwards;
  animation-delay: calc(var(--t0) + 3600ms);
}
.phone__after .ph-title { background: var(--gr-gold-light); width: 62%; }
.phone__after .ph-block { background: radial-gradient(80% 70% at 50% 40%, rgba(228,185,18,.35), rgba(228,185,18,.06)); }
.phone__after .ph-lines i { background: #4a4535; }
.phone__after .ph-btn { background: var(--gr-gradient-gold-soft); height: 12%; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
.phone--focal {
  animation: focal-glow var(--gr-motion-slow) var(--gr-ease-standard) forwards;
  animation-delay: calc(var(--t0) + 3900ms);
}
@keyframes focal-glow { to { border-color: var(--gr-gold); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 32px rgba(228,185,18,.35); } }
/* the brand sweep: after the focal card, every other card picks up the tokens */
.phone--sweep .ph-btn { animation: tok var(--gr-motion-base) var(--gr-ease-standard) forwards; animation-delay: calc(var(--t0) + 4700ms + var(--i, 0) * 80ms); }
.phone--sweep .ph-title { animation: tok-title var(--gr-motion-base) var(--gr-ease-standard) forwards; animation-delay: calc(var(--t0) + 4700ms + var(--i, 0) * 80ms); }
@keyframes tok { to { background: var(--gr-gold); } }
@keyframes tok-title { to { background: var(--gr-gold-light); opacity: .8; } }

/* comment pin */
.pin {
  position: absolute; z-index: 3; left: 49%; top: 44%;
  width: clamp(22px, 3.2vw, 34px); aspect-ratio: 1;
  border-radius: 50% 50% 50% 4px;
  background: var(--gr-gradient-gold-soft);
  color: var(--gr-text-on-gold); display: grid; place-items: center;
  font-size: clamp(10px, 1.2vw, 14px);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
  transform-origin: 0 100%;
  animation: pin-drop var(--gr-motion-base) var(--gr-ease-emphasis) backwards;
  animation-delay: calc(var(--t0) + 900ms);
}
.pin__check { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: var(--gr-green-light); color: #fff; opacity: 0;
  animation: fade-in var(--gr-motion-quick) ease forwards; animation-delay: calc(var(--t0) + 4300ms); }
@keyframes pin-drop { from { opacity: 0; translate: 0 -40px; scale: .9; } }
@keyframes fade-in { to { opacity: 1; } }
.bubble {
  position: absolute; z-index: 3; left: 60%; top: 1%;
  width: min(250px, 40%);
  background: var(--gr-bg-card); border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-md); padding: var(--gr-space-3);
  font-size: clamp(11px, 1.15vw, 14px); line-height: 1.4; box-shadow: var(--gr-shadow-md);
  display: grid; gap: var(--gr-space-1);
  animation: bubble-in var(--gr-motion-base) var(--gr-ease-entrance) backwards;
  animation-delay: calc(var(--t0) + 1200ms);
}
.bubble__who { display: flex; align-items: center; gap: var(--gr-space-2); color: var(--gr-text-muted); font-size: .85em; }
.bubble__who i { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--gr-green); display: inline-block; }
.bubble__state { justify-self: start; font-size: .8em; padding: 1px 8px; border-radius: 99px; background: var(--gr-gold-alpha-15); color: var(--gr-gold); position: relative; }
.bubble__state span:last-child { position: absolute; inset: 0; padding: inherit; border-radius: inherit; background: rgba(20,160,90,.2); color: #7fe0a8; opacity: 0;
  animation: fade-in var(--gr-motion-quick) ease forwards; animation-delay: calc(var(--t0) + 4300ms); }
@keyframes bubble-in { from { opacity: 0; translate: 0 8px; } }

/* the agent terminal */
.agent {
  position: absolute; z-index: 4; left: -4%; bottom: -2%;
  width: min(330px, 58%);
  background: #0f0f0f; border: 1px solid var(--gr-border-subtle); border-radius: var(--gr-radius-lg);
  box-shadow: var(--gr-shadow-lg);
  font-family: var(--gr-font-mono); font-size: clamp(10px, 1.05vw, 12.5px); line-height: 1.55;
  overflow: hidden;
  animation: agent-in var(--gr-motion-slow) var(--gr-ease-entrance) backwards;
  animation-delay: calc(var(--t0) + 1700ms);
}
@keyframes agent-in { from { opacity: 0; translate: -16px 16px; } }
.agent__top { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--gr-border-subtle); color: var(--gr-text-muted); font-family: var(--gr-font-primary); font-size: .9em; }
.agent__top i { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
.agent__top span { margin-left: 6px; }
.agent__body { padding: 10px 12px 12px; display: grid; gap: 2px; }
.agent__line { white-space: nowrap; overflow: hidden; color: #cfcfcf; opacity: 0;
  animation: line-in 1ms linear forwards; animation-delay: calc(var(--t0) + 2000ms + var(--n) * 420ms); }
.agent__line b { color: var(--gr-gold); font-weight: 400; }
.agent__line em { color: #7fe0a8; font-style: normal; }
.agent__line s { color: var(--gr-text-muted); text-decoration: none; }
@keyframes line-in { to { opacity: 1; } }
.agent__line > span { display: inline-block; clip-path: inset(0 100% 0 0);
  animation: type 360ms steps(24) forwards; animation-delay: calc(var(--t0) + 2000ms + var(--n) * 420ms); }
@keyframes type { to { clip-path: inset(0 0 0 0); } }

/* version chip on the focal card */
.vchip {
  position: absolute; z-index: 3; right: 10%; top: 12%;
  font-size: clamp(9px, 1vw, 12px); padding: 2px 8px; border-radius: 99px;
  background: var(--gr-gold); color: var(--gr-text-on-gold);
  opacity: 0; animation: chip-in var(--gr-motion-base) var(--gr-ease-entrance) forwards;
  animation-delay: calc(var(--t0) + 4000ms);
}
@keyframes chip-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.scene__replay {
  position: absolute; right: 0; bottom: -6%; z-index: 5;
  font-size: var(--gr-text-sm); color: var(--gr-text-muted);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  min-height: var(--gr-touch-target-min); padding-inline: var(--gr-space-3);
  display: inline-flex; align-items: center; gap: var(--gr-space-2);
}
.scene__replay:hover { color: var(--gr-gold); }
@media (max-width: 960px) {
  .scene { aspect-ratio: 4 / 3.3; margin-inline: calc(-1 * var(--gr-space-4)); margin-top: var(--gr-space-4); }
  .scene__board { transform: rotateX(20deg) rotateY(-10deg) rotateZ(2deg) scale(1.02); }
  .agent { left: 4%; bottom: -8%; width: 64%; }
  .bubble { left: 50%; top: 0; width: 48%; }
  .scene__replay { bottom: -16%; right: var(--gr-space-4); }
}

/* ---------- generic band ---------- */
.band { padding-block: clamp(var(--gr-space-16), 9vw, 128px); }
.band__head { display: grid; gap: var(--gr-space-4); max-width: 40ch; }
.band__title { font-size: var(--gr-display-md); }
.band__lead { color: var(--gr-text-secondary); font-size: var(--gr-text-lg); max-width: 52ch; }

/* reveal: scroll-driven when supported, IntersectionObserver fallback in site.js */
.reveal { opacity: 1; }
.js .reveal:not(.is-in) { opacity: 0; translate: 0 16px; }
.js .reveal { transition: opacity var(--gr-motion-slow) var(--gr-ease-entrance), translate var(--gr-motion-slow) var(--gr-ease-entrance); }

/* ---------- band: why (big statement) ---------- */
.why { position: relative; }
.why__statement { font-size: var(--gr-display-md); max-width: 22ch; }
.why__statement .dim { color: var(--gr-surface-high); transition: color var(--gr-motion-slow) var(--gr-ease-standard); }
.why__statement.is-in .dim { color: var(--gr-text-primary); }
.why__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gr-space-10); margin-top: var(--gr-space-16); }
.why__cols > div { display: grid; gap: var(--gr-space-3); align-content: start; }
.why__cols h3 { font-size: var(--gr-text-xl); color: var(--gr-gold); }
.why__cols p { color: var(--gr-text-secondary); }
@media (max-width: 860px) { .why__cols { grid-template-columns: 1fr; gap: var(--gr-space-8); margin-top: var(--gr-space-10); } }

/* ---------- band: product shot (grid break) ---------- */
.shot { padding-block: 0 clamp(var(--gr-space-16), 9vw, 128px); }
.shot__frame {
  width: min(100% - 2 * var(--gr-space-4), 1400px); margin-inline: auto;
  border-radius: var(--gr-radius-xl); overflow: hidden;
  border: 1px solid var(--gr-border); box-shadow: var(--gr-shadow-lg), 0 40px 120px rgba(12,110,60,.18);
  background: var(--gr-bg-raised);
}
.shot__bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--gr-border-subtle); align-items: center; }
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--gr-surface-low); }
.shot__bar span { margin-left: var(--gr-space-3); font-size: var(--gr-text-xs); color: var(--gr-text-muted); }
.shot__cap { width: min(100% - 2 * var(--gr-space-4), var(--gr-container)); margin: var(--gr-space-6) auto 0; color: var(--gr-text-muted); font-size: var(--gr-text-sm); }
@supports (animation-timeline: view()) {
  .shot__frame { animation: shot-scale linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes shot-scale { from { scale: .9; opacity: .4; } to { scale: 1; opacity: 1; } }
}
.shot picture img { width: 100%; }

/* ---------- band: the loop (sticky story) ---------- */
.loop__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gr-space-16); margin-top: var(--gr-space-12); }
.loop__steps { display: grid; gap: 0; }
.step { min-height: 62vh; display: grid; align-content: center; gap: var(--gr-space-3); padding-block: var(--gr-space-8); opacity: .35; transition: opacity var(--gr-motion-base) var(--gr-ease-standard); }
.step.is-active { opacity: 1; }
.step__k { font-size: var(--gr-text-sm); color: var(--gr-gold); font-family: var(--gr-font-mono); }
.step h3 { font-size: var(--gr-display-sm); }
.step p { color: var(--gr-text-secondary); max-width: 40ch; }
.loop__stage { position: sticky; top: calc(var(--nav-h) + 6vh); height: min(72vh, 620px); align-self: start; }
.stage {
  position: relative; height: 100%;
  background: var(--gr-bg-raised); border: 1px solid var(--gr-border-subtle); border-radius: var(--gr-radius-xl);
  overflow: hidden; box-shadow: var(--gr-shadow-md);
}
.stage__panel {
  position: absolute; inset: 0; padding: var(--gr-space-8);
  display: grid; place-items: center;
  opacity: 0; translate: 0 12px;
  transition: opacity var(--gr-motion-base) var(--gr-ease-standard), translate var(--gr-motion-base) var(--gr-ease-standard);
}
.stage__panel.is-active { opacity: 1; translate: 0 0; }
.stage__panel img { max-height: 100%; width: auto; border-radius: var(--gr-radius-md); box-shadow: var(--gr-shadow-md); }
.stage__cap { position: absolute; left: var(--gr-space-6); bottom: var(--gr-space-5); font-size: var(--gr-text-xs); color: var(--gr-text-muted); }
/* panel 2: design versions */
.versions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gr-space-4); width: 100%; max-width: 440px; }
.versions .phone { transition: translate var(--gr-motion-base) var(--gr-ease-standard); }
.versions figure { margin: 0; display: grid; gap: var(--gr-space-2); justify-items: center; font-size: var(--gr-text-xs); color: var(--gr-text-muted); }
.versions .is-approved .phone { border-color: var(--gr-gold); box-shadow: 0 0 32px rgba(228,185,18,.3); }
.versions .is-approved figcaption { color: var(--gr-gold); }
.stage__panel.is-active .versions .is-approved .phone { translate: 0 -10px; }
/* panel 4: faithfulness diff */
.diff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gr-space-4); width: 100%; max-width: 460px; }
.diff figure { margin: 0; display: grid; gap: var(--gr-space-2); justify-items: center; font-size: var(--gr-text-xs); color: var(--gr-text-muted); }
.diff__score { font-family: var(--gr-font-mono); color: var(--gr-gold); font-size: var(--gr-text-sm); text-align: center; line-height: 1.3; }
.diff .phone { width: 100%; }
@media (max-width: 860px) {
  .loop__grid { grid-template-columns: 1fr; gap: 0; }
  .loop__stage { top: calc(var(--nav-h) + var(--gr-space-3)); height: 46vh; z-index: 1; order: -1; }
  .step { min-height: 56vh; padding-block: var(--gr-space-6); }
  .stage__panel { padding: var(--gr-space-4); }
}

/* ---------- band: tokens (interactive) ---------- */
.ci__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gr-space-16); align-items: center; }
.ci__tokens { margin-top: var(--gr-space-8); display: grid; gap: var(--gr-space-2); font-family: var(--gr-font-mono); font-size: var(--gr-text-sm); }
.ci__tokens div { display: flex; align-items: center; gap: var(--gr-space-3); color: var(--gr-text-muted); }
.ci__tokens i { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--gr-border-subtle); }
.toggle {
  margin-top: var(--gr-space-8);
  display: inline-flex; align-items: center; gap: var(--gr-space-3); cursor: pointer;
  background: none; border: 0; color: var(--gr-text-primary); font: inherit; min-height: var(--gr-touch-target-min); padding: 0;
}
.toggle__track { width: 52px; height: 30px; border-radius: 99px; background: var(--gr-surface-low); position: relative; transition: background var(--gr-transition); }
.toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: translate var(--gr-transition); }
.toggle[aria-pressed="true"] .toggle__track { background: var(--gr-gold); }
.toggle[aria-pressed="true"] .toggle__track::after { translate: 22px 0; }
.ci__stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gr-space-4); padding: var(--gr-space-8); background: var(--gr-bg-raised); border-radius: var(--gr-radius-xl); border: 1px solid var(--gr-border-subtle); }
.ci__stage .phone { transition: border-color var(--gr-motion-base) var(--gr-ease-standard), border-radius var(--gr-motion-base) var(--gr-ease-standard); }
.ci__stage .phone > * { transition: background var(--gr-motion-base) var(--gr-ease-standard); transition-delay: calc(var(--i, 0) * 80ms); }
.ci__stage .phone::after { display: none; }
.ci__stage.is-on .ph-btn { background: var(--gr-gradient-gold-soft); }
.ci__stage.is-on .ph-title { background: var(--gr-gold-light); }
.ci__stage.is-on .ph-block { background: radial-gradient(80% 70% at 50% 40%, rgba(12,110,60,.7), rgba(4,57,31,.4)); }
.ci__stage.is-on .ph-lines i { background: #4a4535; }
.ci__stage.is-on .phone { border-color: #5a4e1f; background: #161410; }
@media (max-width: 860px) {
  .ci__grid { grid-template-columns: 1fr; gap: var(--gr-space-8); }
  .ci__stage { padding: var(--gr-space-4); gap: var(--gr-space-3); }
}

/* ---------- band: agent (code) ---------- */
.agentband { background: linear-gradient(180deg, transparent, rgba(4,57,31,.35) 50%, transparent); }
.agentband__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gr-space-16); align-items: center; }
.term {
  background: #0f0f0f; border: 1px solid var(--gr-border-subtle); border-radius: var(--gr-radius-lg);
  box-shadow: var(--gr-shadow-lg); overflow: hidden;
}
.term__top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--gr-border-subtle); }
.term__top i { width: 10px; height: 10px; border-radius: 50%; background: var(--gr-surface-low); }
.term__copy { margin-left: auto; background: none; border: 1px solid var(--gr-border-subtle); color: var(--gr-text-muted); border-radius: var(--gr-radius-pill); font: inherit; font-size: var(--gr-text-xs); padding: 6px 16px; cursor: pointer; min-height: var(--gr-touch-target-min); }
.term__copy:hover { color: var(--gr-gold); border-color: var(--gr-border-strong); }
.term pre { margin: 0; padding: var(--gr-space-5); font-size: var(--gr-text-sm); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: #d8d8d8; }
.term pre b { color: var(--gr-gold); font-weight: 400; }
.term pre s { color: var(--gr-text-muted); text-decoration: none; }
.term pre em { color: #7fe0a8; font-style: normal; }
.clients { display: flex; flex-wrap: wrap; gap: var(--gr-space-2); margin-top: var(--gr-space-6); }
.clients span { font-size: var(--gr-text-sm); padding: 6px 14px; border-radius: 99px; border: 1px solid var(--gr-border-subtle); color: var(--gr-text-secondary); }
@media (max-width: 860px) { .agentband__grid { grid-template-columns: 1fr; gap: var(--gr-space-8); } }

/* ---------- tiers (index teaser and pricing page) ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gr-space-4); margin-top: var(--gr-space-12); }
.tier {
  background: var(--gr-bg-card); border: 1px solid var(--gr-border-subtle); border-radius: var(--gr-radius-lg);
  padding: var(--gr-space-8) var(--gr-space-6); display: grid; gap: var(--gr-space-4); align-content: start;
}
.tier--accent { background: linear-gradient(180deg, var(--gr-gold-alpha-10), transparent 42%), var(--gr-bg-card); border-color: var(--gr-border); }
.tier h3 { font-size: var(--gr-text-2xl); }
.tier__for { color: var(--gr-text-muted); font-size: var(--gr-text-sm); min-height: 2.8em; }
.tier__price { font-size: var(--gr-display-sm); font-variant-numeric: tabular-nums; }
.tier__price small { font-size: var(--gr-text-sm); color: var(--gr-text-muted); }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gr-space-2); color: var(--gr-text-secondary); font-size: var(--gr-text-sm); }
.tier li { display: grid; grid-template-columns: 16px 1fr; gap: var(--gr-space-2); align-items: start; }
.tier li svg { margin-top: 4px; color: var(--gr-gold); }
.tier .btn { justify-self: start; margin-top: var(--gr-space-2); }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } .tier__for { min-height: 0; } }

/* ---------- final CTA ---------- */
.cta { text-align: center; }
.cta__inner { display: grid; justify-items: center; gap: var(--gr-space-6); padding: clamp(var(--gr-space-12), 7vw, var(--gr-space-24)) var(--gr-space-6);
  border-radius: var(--gr-radius-xl); border: 1px solid var(--gr-border);
  background: radial-gradient(90% 120% at 50% 110%, rgba(12,110,60,.45), transparent 60%), var(--gr-bg-raised); }
.cta__inner img { width: 64px; }
.cta p { color: var(--gr-text-secondary); max-width: 44ch; }

/* ---------- pricing page ---------- */
.page-head { padding-block: var(--gr-space-16) var(--gr-space-8); display: grid; gap: var(--gr-space-4); }
.page-head h1 { font-size: var(--gr-display-lg); }
.page-head p { color: var(--gr-text-secondary); font-size: var(--gr-text-lg); max-width: 56ch; }
.trial { display: flex; gap: var(--gr-space-4); align-items: center; padding: var(--gr-space-5) var(--gr-space-6); border-radius: var(--gr-radius-lg); background: var(--gr-bg-raised); border: 1px solid var(--gr-border); margin-top: var(--gr-space-8); }
.trial p { color: var(--gr-text-secondary); }
.trial strong { color: var(--gr-text-primary); font-weight: 400; }
.compare { margin-top: var(--gr-space-16); }
.compare h2 { font-size: var(--gr-display-sm); margin-bottom: var(--gr-space-6); }
.table-scroll { overflow-x: auto; border-radius: var(--gr-radius-lg); border: 1px solid var(--gr-border-subtle); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--gr-text-sm); }
.cmp th, .cmp td { padding: var(--gr-space-3) var(--gr-space-4); text-align: left; }
.cmp thead th { background: var(--gr-bg-raised); color: var(--gr-text-primary); font-weight: 400; position: sticky; top: 0; }
.cmp tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.cmp tbody th { color: var(--gr-text-secondary); font-weight: 400; }
.cmp td { color: var(--gr-text-muted); font-variant-numeric: tabular-nums; }
.cmp td.y { color: var(--gr-gold); }
.cmp .grp th { color: var(--gr-gold); font-size: var(--gr-text-xs); letter-spacing: .12em; text-transform: uppercase; padding-top: var(--gr-space-6); background: none; }
.faq { margin-top: var(--gr-space-16); display: grid; gap: var(--gr-space-3); }
.faq h2 { font-size: var(--gr-display-sm); margin-bottom: var(--gr-space-3); }
.faq details { background: var(--gr-bg-card); border: 1px solid var(--gr-border-subtle); border-radius: var(--gr-radius-lg); }
.faq summary { cursor: pointer; padding: var(--gr-space-5) var(--gr-space-6); list-style: none; display: flex; justify-content: space-between; gap: var(--gr-space-4); min-height: var(--gr-touch-target-min); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gr-gold); transition: rotate var(--gr-transition); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 var(--gr-space-6) var(--gr-space-5); color: var(--gr-text-secondary); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--gr-motion-base) var(--gr-ease-standard), content-visibility var(--gr-motion-base) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- stories ---------- */
.empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gr-space-12); align-items: center; padding: var(--gr-space-10); border-radius: var(--gr-radius-xl); border: 1px dashed var(--gr-border-strong); background: var(--gr-bg-raised); }
.empty h2 { font-size: var(--gr-display-sm); }
.empty p { color: var(--gr-text-secondary); margin-top: var(--gr-space-3); }
.ext { margin: var(--gr-space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--gr-space-2); }
.ext li { display: flex; justify-content: space-between; align-items: center; gap: var(--gr-space-4); min-height: 48px; padding: 0 var(--gr-space-4); border-radius: var(--gr-radius-md); background: var(--gr-bg-card); }
.ext b { font-weight: 400; color: var(--gr-gold-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) { .empty { grid-template-columns: 1fr; padding: var(--gr-space-6); gap: var(--gr-space-8); } }

/* ---------- stories (J03 r1c0, design j01-stories) ---------- */
@media (min-width: 861px) { .stories { padding-inline: var(--gr-space-16); } }
.page-head--stories { padding-block: var(--gr-space-16) var(--gr-space-10); }
.page-head--stories h1 { font-size: var(--gr-display-md); }
.empty--stories { align-items: start; border: 0; box-shadow: var(--gr-shadow-sm); margin-bottom: var(--gr-space-24); }
.empty--stories h2 { font-size: var(--gr-text-3xl); line-height: 1.2; text-wrap: wrap; max-width: 380px; margin-bottom: var(--gr-space-4); }
.empty--stories > div > p { margin: 0 0 var(--gr-space-6); font-size: var(--gr-text-sm); line-height: 1.6; max-width: 520px; }
.empty--stories .ext { margin: 0 0 var(--gr-space-8); }
.empty--stories.is-compact { grid-template-columns: minmax(0, 560px); }
.share-cta { display: flex; align-items: center; gap: var(--gr-space-4); flex-wrap: wrap; }
.share-cta__hint { max-width: 240px; font-size: var(--gr-text-xs); line-height: 1.5; color: var(--gr-text-muted); }
.story-ex { position: relative; }
.story-ex__tag { position: absolute; top: calc(-1 * var(--gr-space-3)); right: var(--gr-space-4); z-index: 1; padding: var(--gr-space-1) var(--gr-space-3); border-radius: var(--gr-radius-pill); background: var(--gr-surface-mid); color: var(--gr-text-secondary); font-size: var(--gr-text-xs); letter-spacing: .08em; text-transform: uppercase; }
.story { display: flex; flex-direction: column; padding: var(--gr-space-5); border-radius: var(--gr-radius-lg); background: var(--gr-bg-card); box-shadow: var(--gr-shadow-sm); }
.story--lift { box-shadow: var(--gr-shadow-md); }
.story__shot { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: left top; border-radius: var(--gr-radius-md); background: var(--gr-bg-base); }
.story__txt { flex: 1; margin: var(--gr-space-5) 0; color: var(--gr-text-secondary); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.story__by { display: flex; align-items: center; gap: var(--gr-space-3); padding-top: var(--gr-space-4); border-top: 1px solid var(--gr-border-subtle); }
.story__by > div { flex: 1; min-width: 0; }
.story__by b { display: block; font-weight: 400; font-size: var(--gr-text-sm); }
.story__by small { font-size: var(--gr-text-xs); color: var(--gr-text-muted); }
.story__av { flex: none; width: 40px; height: 40px; border-radius: var(--gr-radius-pill); background: var(--gr-surface-mid); color: var(--gr-text-secondary); display: grid; place-items: center; font-size: var(--gr-text-xs); object-fit: cover; }
.story__link { display: inline-flex; align-items: center; min-height: var(--gr-touch-target-min); font-size: var(--gr-text-sm); color: var(--gr-gold-light); }
.story-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gr-space-6); margin-bottom: var(--gr-space-12); }
.story-list[hidden] { display: none; }

/* ---------- legal ---------- */
.legal { padding-block: var(--gr-space-16); }
.legal__inner { width: min(100% - 2 * var(--gr-space-4), var(--gr-container-narrow)); margin-inline: auto; overflow-wrap: anywhere; }
.legal h1 { font-size: var(--gr-display-md); margin-bottom: var(--gr-space-2); }
.legal h2 { font-size: var(--gr-text-2xl); margin: var(--gr-space-12) 0 var(--gr-space-4); color: var(--gr-text-primary); }
.legal h3 { font-size: var(--gr-text-lg); margin: var(--gr-space-8) 0 var(--gr-space-3); color: var(--gr-text-secondary); }
.legal p, .legal li { color: var(--gr-text-secondary); }
.legal p + p { margin-top: var(--gr-space-3); }
.legal ul, .legal ol { padding-left: 1.3em; display: grid; gap: var(--gr-space-2); margin: var(--gr-space-3) 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--gr-text-sm); margin: var(--gr-space-4) 0; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; padding: var(--gr-space-2) var(--gr-space-3); border-bottom: 1px solid var(--gr-border-subtle); vertical-align: top; }
.legal th { font-weight: 400; color: var(--gr-text-primary); }
.legal__meta { color: var(--gr-text-muted); font-size: var(--gr-text-sm); }
.legal .legal__draft { font-size: var(--gr-text-sm); color: var(--gr-text-on-gold); background: var(--gr-gold-light); border-radius: var(--gr-radius-md); padding: var(--gr-space-3) var(--gr-space-4); margin-bottom: var(--gr-space-8); }
mark.todo { background: var(--gr-gold-alpha-30); color: var(--gr-text-primary); border-radius: 4px; padding: 0 4px; }

/* ---------- 404 ---------- */
.nf { min-height: calc(100dvh - var(--nav-h) - 200px); display: grid; place-items: center; text-align: center; padding-block: var(--gr-space-16); }
.nf__inner { display: grid; gap: var(--gr-space-5); justify-items: center; }
.nf h1 { font-size: var(--gr-display-lg); }
.nf p { color: var(--gr-text-secondary); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--gr-border-subtle); margin-top: var(--gr-space-16); }
.foot__inner { width: min(100% - 2 * var(--gr-space-4), var(--gr-container-wide)); margin-inline: auto; padding-block: var(--gr-space-12) var(--gr-space-10);
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--gr-space-12); }
.foot__col { display: grid; gap: var(--gr-space-2); align-content: start; }
.foot__col a { color: var(--gr-text-secondary); text-decoration: none; font-size: var(--gr-text-sm); padding-block: 2px; }
.foot__col a:hover { color: var(--gr-gold); }
.foot__head { font-size: var(--gr-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gr-text-muted); }
.foot__fine { grid-column: 1 / -1; font-size: var(--gr-text-xs); color: var(--gr-text-muted); }
@media (max-width: 640px) {
  .foot__inner { grid-template-columns: 1fr 1fr; gap: var(--gr-space-8); }
  .foot__logo { grid-column: 1 / -1; }
  .foot__col a { padding-block: 8px; }
}

/* ---------- reduced motion (craft/motion.md, verbatim) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  *, *::before, *::after { animation-delay: 0ms !important; transition-delay: 0ms !important; }
  .scene__replay { display: none; }
  .btn:hover { transform: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  table.cmp { min-width: 0; font-size: var(--gr-text-xs); }
  .cmp th, .cmp td { padding: var(--gr-space-2); }
  .cmp tbody th { width: 38%; }
}
.every { margin-top: var(--gr-space-16); }
.every h2 { font-size: var(--gr-display-sm); }
.every .why__cols { margin-top: var(--gr-space-8); row-gap: var(--gr-space-8); }