/* Neev Marketing Site — Premium Editorial Design */

/* === Design Tokens === */
:root {
  /* Warm monochrome palette */
  --color-bg: #faf8f5;
  --color-bg-warm: #f5f2ed;
  --color-bg-card: #ffffff;
  --color-text: #2d2a26;
  --color-text-muted: #6b6560;
  --color-text-soft: #8a857e;
  --color-border: #e8e4de;
  --color-border-light: #f0ece6;

  /* Accent colors — restrained plum and terracotta */
  --color-plum: #5c4a5e;
  --color-plum-dark: #4a3b4c;
  --color-plum-light: #7a6a7c;
  --color-terracotta: #c4715b;
  --color-terracotta-light: #d4917d;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --max-width: 1120px;
  --nav-height: 72px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Skip Link === */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-plum);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  font-weight: 500;
}

.skip-link:focus {
  top: var(--space-md);
}

/* === Header & Navigation === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
}

.logo-mark {
  color: var(--color-plum);
}

.logo-wordmark {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a:focus {
  color: var(--color-text);
}

.nav-link-login {
  color: var(--color-text-muted);
}

.nav-cta {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-plum);
  color: white !important;
  border-radius: 6px;
  font-weight: 500;
  transition: background var(--transition-fast);
}

.nav-cta:hover,
.nav-cta:focus {
  background: var(--color-plum-dark);
  color: white !important;
}

/* Mobile nav toggle */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* === Buttons === */
.btn {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-plum);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-plum);
  color: white;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-plum-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--color-plum);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus {
  border-color: var(--color-plum-light);
  background: var(--color-bg-warm);
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* === Hero Section === */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
}

.hero-content {
  max-width: 720px;
  margin: 0 auto var(--space-4xl);
}

.hero-kicker {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-terracotta);
  margin: 0 0 var(--space-md);
  letter-spacing: 0.02em;
}

.hero-headline {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
}

.hero-subtext {
  font-size: 1.1875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* === Preview Window === */
.hero-preview {
  max-width: 960px;
  margin: 0 auto;
}

.preview-window {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(45, 42, 38, 0.08), 0 1px 2px rgba(45, 42, 38, 0.04);
}

.preview-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-md);
  background: var(--color-bg-warm);
}

.preview-tab {
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}

.preview-tab:hover {
  color: var(--color-text);
}

.preview-tab.active {
  color: var(--color-plum);
  border-bottom-color: var(--color-plum);
  background: var(--color-bg-card);
}

.preview-tab:focus-visible {
  outline: 2px solid var(--color-plum);
  outline-offset: -2px;
}

.preview-body {
  display: flex;
  min-height: 380px;
}

.preview-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border-light);
  padding: var(--space-lg);
  background: var(--color-bg);
}

.sidebar-project {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.project-icon {
  color: var(--color-terracotta);
}

.sidebar-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-item {
  padding: var(--space-sm) var(--space-sm);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  border-radius: 4px;
  margin-bottom: 2px;
}

.sidebar-item.active {
  background: var(--color-bg-card);
  color: var(--color-text);
  font-weight: 500;
}

.preview-main {
  flex: 1;
  padding: var(--space-lg);
  overflow: hidden;
}

.preview-panel {
  display: none;
}

.preview-panel.active {
  display: block;
}

.preview-panel[hidden] {
  display: none;
}

/* Chat styles */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.chat-message {
  display: flex;
  gap: var(--space-md);
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--color-terracotta-light);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.message-avatar.agent {
  background: var(--color-plum);
  font-size: 1rem;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-meta {
  font-size: 0.75rem;
  color: var(--color-text-soft);
  margin-bottom: var(--space-xs);
}

.message-content p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tool-trace {
  margin-bottom: var(--space-sm);
}

.tool-trace summary {
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-warm);
  border-radius: 4px;
  display: inline-block;
}

.tool-trace summary:hover {
  background: var(--color-bg);
}

.trace-detail {
  font-size: 0.75rem;
  color: var(--color-text-soft);
  padding: var(--space-sm);
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
}

.artifact-preview {
  margin-top: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.artifact-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.8125rem;
  font-weight: 500;
}

.artifact-content {
  padding: var(--space-md);
  font-size: 0.875rem;
}

.artifact-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.artifact-text {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Document preview */
.doc-preview {
  max-width: 560px;
}

.doc-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}

.doc-meta {
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-lg);
}

.doc-content h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-sm);
  color: var(--color-text);
}

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

.doc-content p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.doc-list,
.doc-checklist {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.doc-list li,
.doc-checklist li {
  margin-bottom: var(--space-xs);
}

.doc-checklist {
  list-style: none;
  padding-left: 0;
}

.doc-checklist li {
  position: relative;
  padding-left: var(--space-lg);
}

.doc-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.doc-checklist li.checked::before {
  background: var(--color-plum);
  border-color: var(--color-plum);
}

.doc-checklist li.checked::after {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0.2em;
  font-size: 0.75rem;
  color: white;
}

/* Skills preview */
.skills-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}

.skills-meta {
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-lg);
}

.skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.skill-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  margin-bottom: var(--space-sm);
}

.skill-icon {
  font-size: 1.25rem;
}

.skill-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.skill-name {
  font-weight: 500;
  font-size: 0.9375rem;
}

.skill-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.preview-caption {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  margin: var(--space-md) 0 0;
}

/* === Capabilities Strip === */
.capabilities {
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-xl) 0;
  background: var(--color-bg-warm);
}

.capabilities-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  justify-content: center;
  gap: var(--space-3xl);
  list-style: none;
  flex-wrap: wrap;
}

.capabilities-list li {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* === Features Section === */
.features {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5xl) var(--space-xl);
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
  margin-bottom: var(--space-5xl);
}

.feature:last-child {
  margin-bottom: 0;
}

.feature-right {
  direction: ltr;
}

.feature-right > * {
  direction: ltr;
}

.feature-content {
  max-width: 480px;
}

.feature-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}

.feature-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

.feature-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mini UI illustrations */
.mini-ui {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-xl);
  width: 100%;
  max-width: 360px;
  box-shadow: 0 2px 12px rgba(45, 42, 38, 0.06);
}

.mini-avatars {
  display: flex;
  margin-bottom: var(--space-lg);
}

.mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-terracotta-light);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  margin-right: -8px;
  border: 2px solid var(--color-bg-card);
}

.mini-avatar:nth-child(2) {
  background: var(--color-plum-light);
}

.mini-avatar:nth-child(3) {
  background: var(--color-text-muted);
}

.mini-project-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-terracotta);
}

.mini-chat-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mini-line {
  height: 8px;
  background: var(--color-bg-warm);
  border-radius: 4px;
}

.mini-line.short {
  width: 40%;
}

.mini-line.medium {
  width: 70%;
}

/* Artifacts mini */
.mini-artifacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mini-chat-bubble {
  width: 80%;
  height: 48px;
  background: var(--color-bg-warm);
  border-radius: 8px;
}

.mini-artifact-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-left: var(--space-xl);
}

.mini-artifact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.mini-artifact-icon {
  color: var(--color-plum);
  font-size: 0.875rem;
}

/* Skills mini */
.mini-skills {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mini-skill-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.mini-skill-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-plum);
  opacity: 0.8;
}

.mini-skill-row:nth-child(2) .mini-skill-icon {
  background: var(--color-terracotta);
}

.mini-skill-row:nth-child(3) .mini-skill-icon {
  background: var(--color-plum-light);
}

/* === Getting Started === */
.getting-started {
  background: var(--color-bg-warm);
  padding: var(--space-5xl) var(--space-xl);
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 var(--space-3xl);
  color: var(--color-text);
}

.steps {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.step {
  text-align: center;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-plum);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.step-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

.step-content p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* === FAQ Section === */
.faq {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5xl) var(--space-xl);
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  padding: var(--space-lg) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text);
}

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

.faq-item summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

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

.faq-item summary:hover {
  color: var(--color-plum);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-plum);
  outline-offset: 2px;
}

.faq-item p {
  margin: 0;
  padding: 0 0 var(--space-lg);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* === Final CTA === */
.final-cta {
  text-align: center;
  padding: var(--space-5xl) var(--space-xl);
  background: var(--color-bg-warm);
}

.final-cta h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

.final-cta p {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
}

/* === Footer === */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3xl) var(--space-xl);
}

.footer-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text);
  font-weight: 600;
}

.footer-logo .logo-mark {
  color: var(--color-plum);
}

.footer-nav {
  display: flex;
  gap: var(--space-xl);
}

.footer-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--color-text);
}

.footer-copyright {
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  margin: 0;
}

/* === Responsive === */
@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .feature-right {
    direction: ltr;
  }

  .feature-content {
    max-width: 100%;
    text-align: center;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    max-width: 400px;
  }

  .preview-body {
    flex-direction: column;
  }

  .preview-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-md);
  }

  .sidebar-items {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
  }

  .sidebar-item {
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .nav-container {
    padding: 0 var(--space-md);
  }

  .mobile-nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 99;
  }

  .nav-menu.open {
    transform: translateX(0);
  }

  .nav-menu li {
    border-bottom: 1px solid var(--color-border-light);
  }

  .nav-menu a {
    display: block;
    padding: var(--space-md) 0;
    font-size: 1rem;
  }

  .nav-cta {
    text-align: center;
    margin-top: var(--space-md);
  }

  .hero {
    padding: var(--space-2xl) var(--space-md);
  }

  .hero-headline {
    font-size: 2.25rem;
  }

  .hero-subtext {
    font-size: 1.0625rem;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .preview-tabs {
    overflow-x: auto;
    gap: 0;
    padding: 0;
  }

  .preview-tab {
    padding: var(--space-md);
    white-space: nowrap;
  }

  .capabilities-list {
    gap: var(--space-lg);
    padding: 0 var(--space-md);
    justify-content: space-around;
  }

  .capabilities-list li {
    font-size: 0.8125rem;
  }

  .features {
    padding: var(--space-3xl) var(--space-md);
  }

  .feature-title {
    font-size: 1.5rem;
  }

  .getting-started,
  .faq,
  .final-cta {
    padding: var(--space-3xl) var(--space-md);
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md) var(--space-lg);
  }
}

@media (max-width: 480px) {
  .preview-main {
    padding: var(--space-md);
  }

  .chat-message {
    gap: var(--space-sm);
  }

  .message-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.6875rem;
  }

  .artifact-preview {
    margin-top: var(--space-sm);
  }

  .mini-ui {
    padding: var(--space-md);
    max-width: 100%;
  }
}

/* Focus styles */
*:focus-visible {
  outline: 2px solid var(--color-plum);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* Product storytelling refinements */
.hero { padding-top: 64px; }
.hero-content { max-width: 800px; margin-bottom: 56px; }
.hero-headline { font-size: clamp(2.5rem, 4.7vw, 4.25rem); font-weight: 600; letter-spacing: -.045em; }
.hero-subtext { max-width: 570px; font-size: 1.1rem; }
.hero-kicker { color: #8e5545; }
.feature-visual { padding: 36px 20px; background: #f0ece7; border-radius: 20px; min-width:0; }
.feature-right .feature-visual { background:#eeeaf0; }
.feature:last-child .feature-visual { background:#edf0eb; }
.mini-ui { max-width: 390px; padding: 26px; box-shadow: 0 8px 30px #2d2a2608; }
.sample-label { font-size: 10px; letter-spacing:.09em; color:#6b6560; display:flex; justify-content:space-between; gap:8px; margin-bottom:24px; }
.sample-label span { letter-spacing:0; }
.sample-note { font-size:12px; border:1px solid #eee9e3; border-radius:8px; padding:12px; margin:12px 0; }
.sample-note p { margin:4px 0 0; line-height:1.6; }
.sample-note.reply { margin-left:20px; background:#faf8f5; }
.mention { color:#694d73; }
.sample-footer { border-top:1px solid #eee9e3; padding-top:14px; margin-top:16px; font-size:10px; color:#756d66; }
.sample-result { font-size:17px; line-height:1.5; margin:0 0 16px; }
.sample-file,.sample-skill { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #f0ece6; text-align:left; }
.sample-file strong,.sample-skill strong { font-size:12px; font-weight:600; display:block; }
.sample-file small,.sample-skill small { display:block; font-size:10px; color:#756d66; margin-top:3px; }
.sample-file>span:last-child { margin-left:auto; color:#766f78; }
.file-badge,.skill-letter { display:grid; place-items:center; width:36px; height:40px; background:#ede7ef; color:#694d73; border-radius:6px; font-size:9px; flex-shrink:0; }
.file-badge.paper { background:#f0ede4; color:#77663f; }
.skill-letter { width:32px; height:32px; font-size:11px; }
.enabled { margin-left:auto; font-size:9px; color:#49664d; background:#edf3eb; border-radius:12px; padding:3px 7px; }
.mini-skills { gap:0; }
.mini-artifacts { gap:0; }
.skill-icon { font-family:var(--font-mono); font-size:12px; color:var(--color-plum); }
@media(max-width:600px) { .hero { padding-top:44px; } .hero-headline { font-size:2.65rem; } .hero-subtext { font-size:1rem; } .feature-visual { padding:24px 14px; } .mini-ui { padding:20px; } }
.preview-body { text-align:left; }
.user-message .message-content { background:#f5eee7; border-radius:10px; padding:12px 16px; }
.user-message .message-content p { margin-bottom:0; }

/* Larger supporting copy and concise feature overview. */
.hero-subtext { font-size:1.4rem; max-width:650px; line-height:1.55; color:#655e58; }
.everyday-features { max-width:1120px; margin:auto; padding:88px 32px 24px; }
.section-intro { text-align:center; margin-bottom:52px; }
.eyebrow { color:#795747; font-size:11px; letter-spacing:.12em; font-weight:600; }
.section-intro h2 { font-size:clamp(2rem,3vw,2.8rem); line-height:1.15; letter-spacing:-.04em; margin:18px 0; font-weight:600; }
.section-intro>p:last-child { color:#6b6560; font-size:18px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; }
.feature-grid article { padding:28px 0 32px; border-top:1px solid #e5dfd7; }
.feature-symbol { color:#8c715d; font-size:12px; font-family:var(--font-mono); }
.feature-grid h3 { font-size:17px; font-weight:600; letter-spacing:-.02em; margin:12px 0 8px; }
.feature-grid p { color:#6b6560; font-size:15px; line-height:1.6; margin:0; }
.demo-run-status { display:flex; align-items:center; gap:8px; min-height:28px; font-size:12px; color:#756777; margin:6px 0; }
.demo-timer { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:#8a8178; }
.activity-dot { width:7px; height:7px; border-radius:50%; background:#92789a; box-shadow:0 0 0 4px #92789a12; }
.demo-playing .activity-dot { animation:activity-pulse 1.5s ease-in-out infinite; }
.demo-complete .activity-dot { background:#71896b; }
#demo-response { min-height:52px; }
.artifact-preview { transition:opacity .6s ease,transform .6s ease,box-shadow .6s ease; }
.demo-playing:not(.demo-complete) .artifact-preview { opacity:.35; transform:translateY(5px); }
.demo-complete .artifact-preview { box-shadow:0 4px 18px #5c4a5e0b; }
.demo-control { margin:12px auto 0; color:#625567; font-size:12px; background:transparent; border:1px solid #ded6df; border-radius:20px; padding:6px 14px; cursor:pointer; }
.demo-control:hover { background:#eee9ee; }
@keyframes activity-pulse { 0%,100% { opacity:.5; box-shadow:0 0 0 3px #92789a0d; } 50% { opacity:1; box-shadow:0 0 0 6px #92789a19; } }
@media(max-width:800px) { .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; } }
@media(max-width:600px) { .hero-subtext { font-size:1.18rem; line-height:1.55; } .everyday-features { padding:56px 24px 12px; } .feature-grid { grid-template-columns:1fr; } .feature-grid article { padding:20px 0; } .section-intro { margin-bottom:24px; } #demo-response { min-height:84px; } }
@media(prefers-reduced-motion:reduce) { .activity-dot { animation:none!important; } .artifact-preview { transition:none; } }
@media(max-width:768px) {
 .nav-menu { height:calc(100dvh - var(--nav-height)); overflow-y:auto; visibility:hidden; pointer-events:none; }
 .nav-menu.open { visibility:visible; pointer-events:auto; }
 .preview-main { padding:20px 16px; }
 .sidebar-items { display:none; }
 .preview-panel { min-width:0; }
 .chat-message { gap:8px; }
 .hero-headline { font-size:clamp(2rem,10vw,2.65rem); }
}
/* Multiplayer product story: original vector artwork and shared work. */
.preview-main:has(#panel-docs.active) { padding:0; }
.collab-top { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;border-bottom:1px solid #eee9e3; }
.doc-breadcrumb { font-size:10px;color:#7e756e; }
.presence-group { display:flex;align-items:center; }
.person { width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;border:2px solid white;flex-shrink:0; }
.presence-group .person { margin-left:-6px; }
.person.maya { background:#e6dbe9;color:#644969; }.person.sam { background:#deeadb;color:#4f6847; }.person.jamie { background:#eedacf;color:#895a41; }
.presence-label { font-size:9px;color:#70685f;margin-left:8px; }
.collab-layout { display:grid;grid-template-columns:minmax(0,1fr) 200px; }
.collab-paper { position:relative;padding:28px 30px 32px;overflow:hidden;min-width:0; }
.doc-eyebrow { font-size:9px;letter-spacing:.13em;color:#8c7465;margin-bottom:12px; }
.collab-paper h2 { font-size:30px;line-height:1.13;letter-spacing:-.04em;margin:0 0 10px;font-weight:600; }
.doc-deck { font-size:11px;line-height:1.6;color:#756c64;margin:0 0 20px;max-width:290px; }
.collab-image { position:relative;height:174px;background:#eee8df;overflow:hidden;border-radius:5px;margin-bottom:22px; }
.shape { position:absolute;display:block; }.shape-one { width:170px;height:170px;background:#b7a6bd;border-radius:50%;right:-12px;top:-45px; }.shape-two { width:120px;height:160px;right:55px;bottom:-85px;background:#b8775f;transform:rotate(-25deg);border-radius:70px 70px 0 0; }.shape-three { width:65px;height:135px;right:8px;bottom:-75px;transform:rotate(28deg);background:#879681;border-radius:40px; }
.artwork-label { position:absolute;top:34px;left:22px;font-size:24px;font-weight:500;line-height:1.12;letter-spacing:-.04em;max-width:190px;color:#403d35; }
.artwork-caption { position:absolute;left:22px;bottom:16px;font-size:7px;letter-spacing:.1em;color:#665b4d; }
.collab-paper h3 { font-size:12px;margin:0 0 8px;font-weight:600; }.editable-line { font-size:11px;line-height:1.8;margin:0 0 14px;color:#6b625a; }.editable-line mark { background:#ece2ef;padding:2px 0;color:inherit; }
.document-check { font-size:10px;color:#6b625a;margin:7px 0; }.document-check span { color:#7c8c74;margin-right:7px; }
.collab-cursor { position:absolute;z-index:2;display:flex;align-items:flex-start;pointer-events:none; }.collab-cursor svg { width:15px;height:20px;fill:currentColor;stroke:white;stroke-width:1; }.collab-cursor span { font-size:8px;line-height:1.4;color:white;padding:3px 7px;border-radius:3px;margin-top:17px;margin-left:-3px; }
.cursor-maya { left:50%;top:75%;color:#957a9f; }.cursor-maya span { background:#957a9f; }.cursor-sam { left:73%;top:45%;color:#7b906e; }.cursor-sam span { background:#7b906e; }
.demo-playing .cursor-maya { animation:maya-edit 16s ease-in-out infinite; }.demo-playing .cursor-sam { animation:sam-review 16s ease-in-out infinite; }
@keyframes maya-edit { 0%,100% { transform:translate(0,0); } 25%,45% { transform:translate(-60px,-8px); } 65%,85% { transform:translate(-15px,35px); } }
@keyframes sam-review { 0%,100% { transform:translate(0,0); } 25%,45% { transform:translate(12px,80px); } 65%,85% { transform:translate(-18px,110px); } }
.collab-discussion { background:#faf8f5;border-left:1px solid #eee9e3;padding:24px 14px;min-width:0; }
.discussion-label { font-size:8px;letter-spacing:.09em;color:#8b8178;margin-bottom:20px; }.discussion-message { display:flex;gap:7px;margin-bottom:22px;transition:opacity .6s,transform .6s; }.discussion-message strong { font-size:10px; }.discussion-message p { font-size:10px;line-height:1.65;color:#756b63;margin:5px 0 0; }.discussion-message .person { width:23px;height:23px;font-size:7px; }
.reaction { display:inline-block;border:1px solid #e1e6da;background:#f5f8f1;border-radius:10px;color:#6b7b5d;font-size:8px;padding:2px 6px;margin-top:8px; }
.collab-status { display:flex;align-items:center;gap:7px;font-size:8px;color:#827386;border-top:1px solid #e9e2da;padding-top:16px;line-height:1.6; }.collab-status .activity-dot { width:5px;height:5px;flex-shrink:0; }.discussion-note { margin-top:18px;font-size:9px;line-height:1.7;color:#91877e; }
.demo-playing[data-stage="0"] .sam-message,.demo-playing[data-stage="0"] .jamie-message,.demo-playing[data-stage="1"] .jamie-message { opacity:.38;transform:translateY(3px); }
.available-tag,.soon-tag { font-size:9px;margin-left:6px;border-radius:12px;padding:4px 7px;background:#e9ede6;color:#607254;vertical-align:middle; }.soon-tag { background:#eee7f0;color:#79627e; }
.knowledge-preview { padding:8px 2px;text-align:left; }.knowledge-preview h2 { font-size:25px;letter-spacing:-.04em;line-height:1.2;margin:0 0 10px; }.knowledge-preview>p { font-size:12px;color:#82766c; }.knowledge-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0; }.knowledge-file { display:flex;flex-direction:column;align-items:flex-start;padding:20px 13px;border:1px solid #e8e2da;border-radius:8px;background:#fcfbf9; }.knowledge-icon { width:30px;height:34px;display:inline-grid;place-items:center;border-radius:5px;font-size:11px;flex-shrink:0; }.plum { background:#e9e0ee;color:#7b5e85; }.clay { background:#eedfd4;color:#9a6c51; }.sage { background:#e1e9dc;color:#6a805b; }.knowledge-file strong { font-size:11px;margin:18px 0 6px; }.knowledge-file small { color:#83766b;font-size:9px;line-height:1.5; }.knowledge-kind { color:#97897d;letter-spacing:.04em;font-size:7px;margin-top:22px; }.knowledge-flow { display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;border-top:1px solid #eee6df;padding:20px 0 8px; }.knowledge-footnote { text-align:center;line-height:1.6; }
.knowledge-stack { height:238px;position:relative;padding:10px 36px; }.stack-sheet { position:relative;z-index:1;box-shadow:9px 9px 0 #f1ebe1,18px 18px 0 #e8e2d8;background:#faf8f3;border:1px solid #e6dfd4;transform:rotate(-6deg);border-radius:6px;padding:22px 18px;height:188px; }.sheet-label { font-size:7px;letter-spacing:.1em;color:#937f6e; }.stack-sheet strong { display:block;font-size:29px;line-height:1.06;letter-spacing:-.04em;margin:17px 0; }.sheet-rule { width:42px;height:2px;background:#c1a6c6;margin:14px 0; }.sheet-caption { font-size:7px;color:#958779; }.floating-file,.floating-skill { position:absolute;z-index:2;display:flex;align-items:center;gap:8px;background:white;border:1px solid #ece5df;border-radius:7px;box-shadow:0 4px 16px #51413108;font-size:10px;padding:8px 12px; }.floating-file { top:34px;right:-8px;transform:rotate(5deg); }.floating-skill { bottom:20px;left:-8px;transform:rotate(3deg); }.floating-file .knowledge-icon,.floating-skill .knowledge-icon { width:22px;height:26px;font-size:9px; }
.output-art { height:160px;position:relative;border-radius:5px;background:#e8dfd4;padding:18px;margin-bottom:18px;overflow:hidden; }.output-art-kicker { display:block;font-size:7px;letter-spacing:.1em;color:#8a7663; }.output-art strong { position:relative;z-index:1;display:block;font-size:28px;line-height:1.05;letter-spacing:-.04em;font-weight:500;margin-top:16px; }.output-art-orbit { position:absolute;width:145px;height:145px;border:27px solid #a38da9;border-radius:50%;right:-12px;top:32px;transform:rotate(-25deg); }.output-art-orbit:after { content:'';position:absolute;width:75px;height:75px;background:#bb8469;left:-52px;top:47px;border-radius:50%; }.output-art-bottom { position:absolute;bottom:13px;left:18px;font-size:7px;color:#86705f; }
@media(max-width:900px) { .collab-layout { grid-template-columns:minmax(0,1fr) 180px; }.collab-paper { padding:24px; } }
@media(max-width:600px) { .collab-layout { grid-template-columns:1fr; }.collab-paper { padding:24px 20px; }.collab-top { padding:12px;flex-wrap:wrap; }.presence-label { font-size:8px; }.collab-discussion { border-left:0;border-top:1px solid #eee9e3;padding:20px; }.discussion-message { margin-bottom:14px; }.discussion-message p { font-size:11px; }.discussion-note { display:none; }.knowledge-grid { gap:8px;grid-template-columns:1fr; }.knowledge-file { display:grid;grid-template-columns:34px 1fr;gap:3px 12px;padding:14px; }.knowledge-file .knowledge-icon { grid-row:1/4; }.knowledge-file strong { margin:0; }.knowledge-kind { margin-top:4px; }.capabilities-list { flex-direction:column;gap:14px; }.knowledge-preview h2 { font-size:22px; }.knowledge-flow { font-size:10px;gap:8px; } }
@media(prefers-reduced-motion:reduce) { .collab-cursor { animation:none!important; }.discussion-message { transition:none; } }
#workspace,#team,#questions { scroll-margin-top:96px; }