@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ── Variables ──────────────────────────────────────────────────────── */
:root {
  --parchment:   #f5f0e8;
  --panel:       #ede8df;
  --card:        #faf7f2;
  --cream-deep:  #e6dfcf;
  --cream-line:  #d8cfb8;
  --ink:         #2b2418;
  --ink-soft:    #5a5040;
  --ink-faint:   #a09070;
  --navy:        #1e3a5f;
  --teal:        #2a6b6b;
  --slate:       #3d4f7c;
  --amber:       #c97c2a;
  --mustard:     #d99a3f;

  --border-heavy: 3px solid var(--ink);
  --hard-shadow:  5px 5px 0 var(--ink);
  --hard-shadow-lg: 8px 8px 0 var(--ink);
  --hard-shadow-sm: 3px 3px 0 var(--ink);

  --font-display: 'Special Elite', 'Courier Prime', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Courier Prime', monospace;
  --font-serif:   'Courier Prime', Georgia, serif;
  --font-sans:    'Inter', system-ui, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-serif);
  background-color: var(--parchment);
  background-image: radial-gradient(circle, var(--cream-line) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--ink);
  overflow-x: hidden;
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--parchment);
  border: var(--border-heavy);
  box-shadow: var(--hard-shadow);
  border-radius: 6px;
  padding: 0;
  white-space: nowrap;
  transition: box-shadow .15s;
}
.navbar.scrolled {
  box-shadow: 6px 6px 0 var(--ink);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--navy);
  padding: 10px 20px;
  border-right: 2px solid var(--ink);
  letter-spacing: -0.5px;
}
.nav-logo span { color: var(--amber); }

.nav-links {
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 14px;
  letter-spacing: 0.5px;
  transition: color .12s;
}
.nav-links a:hover { color: var(--amber); }

.nav-cta {
  border-left: 2px solid var(--ink);
}
.nav-cta .btn-nav {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--ink);
  color: var(--parchment);
  border: none;
  padding: 12px 18px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background .12s;
  border-radius: 0 3px 3px 0;
}
.nav-cta .btn-nav:hover { background: var(--navy); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 80px;
  position: relative;
  overflow: hidden;
}

.hero-logo {
  width: 100%;
  max-width: 860px;
  margin-bottom: 16px;
}
.hero-logo svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 48px;
  text-align: center;
}

/* Tilted stamp badge in hero */
.hero-stamp {
  position: absolute;
  top: 140px;
  right: calc(50% - 490px);
  background: var(--amber);
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 26px;
  padding: 16px 32px;
  border: 4px solid var(--ink);
  box-shadow: var(--hard-shadow-sm);
  transform: rotate(8deg);
  letter-spacing: 1px;
}

.hero-tagline-block {
  text-align: center;
  margin-bottom: 52px;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 120px);
  line-height: 0.92;
  color: var(--navy);
  display: block;
}
.hero-tagline em {
  color: var(--amber);
  font-style: normal;
}

.hero-desc {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 20px;
  max-width: 500px;
  line-height: 1.7;
  text-align: center;
}

/* ── Pull Command Block ──────────────────────────────────────────────── */
.pull-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 620px;
}

.pull-row {
  display: flex;
  align-items: stretch;
  border: var(--border-heavy);
  box-shadow: var(--hard-shadow);
  background: var(--card);
  border-radius: 4px;
  overflow: hidden;
}

.pull-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--panel);
  border-right: 2px solid var(--ink);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pull-code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  padding: 12px 16px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.copy-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--ink);
  color: var(--parchment);
  border: none;
  border-left: 2px solid var(--ink);
  padding: 0 18px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .12s;
  flex-shrink: 0;
}
.copy-btn:hover { background: var(--navy); }
.copy-btn.copied { background: var(--teal); }

/* ── Section Divider ─────────────────────────────────────────────────── */
.section-divider {
  width: 100%;
  height: 4px;
  background: var(--ink);
  position: relative;
}
.section-divider::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--amber);
}

/* ── Features Section ───────────────────────────────────────────────── */
.features {
  padding: 80px 40px 100px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.features-header {
  margin-bottom: 60px;
  position: relative;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 8px;
  transform: rotate(-0.5deg);
  display: inline-block;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, 128px);
  line-height: 0.88;
  color: var(--ink);
  letter-spacing: -2px;
  transform: rotate(-1.5deg);
  display: inline-block;
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60%;
  height: 5px;
  background: var(--amber);
}

.features-intro {
  position: absolute;
  top: 20px;
  right: 0;
  max-width: 280px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.8;
  border-left: 3px solid var(--amber);
  padding-left: 16px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

/* ── Feature Cards ──────────────────────────────────────────────────── */
.feat-full   { grid-column: span 6; }
.feat-half   { grid-column: span 3; }
.feat-third  { grid-column: span 2; }
.feat-two3   { grid-column: span 4; }
.feat-quarter { grid-column: span 3; }

.feature-card {
  background: var(--card);
  border: var(--border-heavy);
  box-shadow: var(--hard-shadow);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .12s, transform .12s;
  position: relative;
  overflow: hidden;
}
.feature-card:hover {
  box-shadow: var(--hard-shadow-lg);
  transform: translate(-2px, -2px);
}

/* tilt variants */
.tilt-neg { transform: rotate(-0.6deg); }
.tilt-pos { transform: rotate(0.5deg); }
.tilt-neg:hover { transform: rotate(-0.6deg) translate(-2px, -2px); }
.tilt-pos:hover { transform: rotate(0.5deg) translate(-2px, -2px); }

.card-accent-bar {
  height: 5px;
  width: 100%;
  flex-shrink: 0;
}
.accent-navy   { background: var(--navy); }
.accent-teal   { background: var(--teal); }
.accent-slate  { background: var(--slate); }
.accent-amber  { background: var(--amber); }

.card-inner {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.card-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  margin-top: 5px;
}
.dot-navy  { background: var(--navy); }
.dot-teal  { background: var(--teal); }
.dot-slate { background: var(--slate); }
.dot-amber { background: var(--amber); }

.card-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.5px;
}

.card-desc {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 16px;
  flex: 1;
}

.card-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--cream-line);
}
.card-points li {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.3px;
  padding-left: 14px;
  position: relative;
}
.card-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--amber);
}

/* Big feature card (feat-full) inner layout */
.feat-full .card-inner {
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
}
.feat-full .card-body { flex: 1; }
.feat-full .card-aside {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stack-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow-sm);
  padding: 6px 12px;
  color: var(--ink);
  letter-spacing: 0.5px;
}

/* ── Video Placeholder ──────────────────────────────────────────────── */
.video-placeholder {
  background: var(--panel);
  border-top: 2px dashed var(--cream-line);
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}
.feat-screenshot {
  margin: 0;
  border-top: 2px dashed var(--cream-line);
  flex-shrink: 0;
  overflow: hidden;
}
.feat-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.feat-screenshot-framed {
  background: #e8e2d8;
  padding: 12px;
}
.browser-chrome {
  background: #d8d0c4;
  border-radius: 6px 6px 0 0;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #c8bfaa;
  flex-shrink: 0;
}
.bc-url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8a7a60;
  background: #ede8df;
  border-radius: 3px;
  padding: 2px 10px;
  flex: 1;
  text-align: center;
  letter-spacing: .03em;
}
.browser-body {
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  opacity: 0.88;
  border: 1px solid #c8bfaa;
  border-top: none;
}
.video-inner {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.video-icon {
  width: 36px;
  height: 36px;
  border: 2px solid var(--cream-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--cream-line);
}

/* ── Inline code block in cards ─────────────────────────────────────── */
.card-mono-block {
  background: var(--panel);
  border: 1px solid var(--cream-line);
  border-left: 3px solid var(--navy);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 14px;
  white-space: pre;
  overflow: auto;
}

/* ── CTA Section ────────────────────────────────────────────────────── */
.cta-section {
  background: var(--ink);
  padding: 100px 40px;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: 'RUN IT.';
  font-family: var(--font-display);
  font-size: 240px;
  color: rgba(255,255,255,0.04);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -8px;
}

.cta-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 96px);
  color: var(--parchment);
  line-height: 0.9;
  margin-bottom: 24px;
  letter-spacing: -2px;
}
.cta-title em {
  color: var(--amber);
  font-style: normal;
}
.cta-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #a09070;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 48px;
}
.cta-pull {
  display: flex;
  align-items: stretch;
  border: 3px solid var(--parchment);
  box-shadow: 5px 5px 0 var(--amber);
  max-width: 580px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
}
.cta-pull .pull-code {
  background: rgba(255,255,255,0.05);
  color: var(--parchment);
  font-size: 13px;
}
.cta-pull .copy-btn {
  background: var(--amber);
  border-left: 2px solid var(--parchment);
  color: var(--ink);
}
.cta-pull .copy-btn:hover { background: var(--mustard); }

.cta-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.cta-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 2px;
  transition: color .12s, border-color .12s;
}
.cta-link:hover { color: var(--amber); border-color: var(--amber); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  border-top: 3px solid var(--amber);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--parchment);
  opacity: 0.6;
}
.footer-brand span { color: var(--amber); opacity: 1; }
.footer-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 1px;
}
.footer-links {
  display: flex;
  gap: 20px;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 1px;
  transition: color .12s;
}
.footer-links a:hover { color: var(--amber); }

/* ── Logo Animations ────────────────────────────────────────────────── */
.node-ring { animation: pulse 3s ease-in-out infinite; transform-origin: center; }
.node-ring:nth-child(2) { animation-delay: 0.4s; }
.node-ring:nth-child(3) { animation-delay: 0.8s; }
.node-ring:nth-child(4) { animation-delay: 1.2s; }

@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

.edge-solid { stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawEdge 1.2s ease forwards; }
.edge-dashed { stroke-dasharray: 4 3; stroke-dashoffset: 40; animation: drawDash 1.5s ease forwards; }
.e1 { animation-delay: 0.3s; } .e2 { animation-delay: 0.5s; }
.e3 { animation-delay: 0.7s; } .e4 { animation-delay: 0.9s; }
.e5 { animation-delay: 1.1s; } .e6 { animation-delay: 1.3s; }
.e7 { animation-delay: 1.5s; } .e8 { animation-delay: 1.7s; }

@keyframes drawEdge { to { stroke-dashoffset: 0; } }
@keyframes drawDash {
  from { opacity: 0; stroke-dashoffset: 40; }
  to   { opacity: 0.7; stroke-dashoffset: 0; }
}

.hex-outer { animation: hexSpin 20s linear infinite; transform-origin: 0 0; }
.hex-inner { animation: hexSpin 12s linear infinite reverse; transform-origin: 0 0; }
@keyframes hexSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.text-swarm  { animation: fadeSlideIn 0.8s ease 0.2s both; }
.text-wright { animation: fadeSlideIn 0.8s ease 0.5s both; }
.text-tag    { animation: fadeSlideIn 0.8s ease 0.9s both; }
.text-url    { animation: fadeSlideIn 0.6s ease 1.1s both; }
.divider-line { animation: growLine 0.6s ease 0.85s both; transform-origin: left; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes growLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.satellite { animation: satellitePulse 2.5s ease-in-out infinite; }
.satellite:nth-child(2) { animation-delay: 0.8s; }
.satellite:nth-child(3) { animation-delay: 1.6s; }
@keyframes satellitePulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

.hex-glow { animation: glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { opacity: 0.08; }
  50%       { opacity: 0.18; }
}

/* Fade-in on scroll for feature cards */
.feat-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.feat-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.tilt-neg.feat-reveal.visible  { transform: rotate(-0.6deg) translateY(0); }
.tilt-pos.feat-reveal.visible  { transform: rotate(0.5deg) translateY(0); }

/* ── Docs Page ──────────────────────────────────────────────────────── */
.docs-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 80px;
}

.docs-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: var(--border-heavy);
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 32px 0;
}
.docs-sidebar-section {
  padding: 0 24px 24px;
  border-bottom: 1px dashed var(--cream-line);
  margin-bottom: 8px;
}
.docs-sidebar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
  display: block;
}
.docs-sidebar-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docs-sidebar-nav a {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  padding: 5px 8px;
  border-radius: 3px;
  transition: background .1s, color .1s;
}
.docs-sidebar-nav a:hover,
.docs-sidebar-nav a.active {
  background: var(--card);
  color: var(--navy);
  border-left: 3px solid var(--amber);
  padding-left: 5px;
}

.docs-content {
  flex: 1;
  padding: 48px 60px;
  max-width: 860px;
}
.docs-content h1 {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
}
.docs-content .docs-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 40px;
  display: block;
  border-bottom: 1px dashed var(--cream-line);
  padding-bottom: 24px;
}
.docs-content h2 {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--ink);
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ink);
}
.docs-content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--navy);
  margin: 28px 0 10px;
}
.docs-content p {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.85;
  margin-bottom: 16px;
}
.docs-content ul, .docs-content ol {
  padding-left: 20px;
  margin-bottom: 16px;
}
.docs-content li {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 4px;
}
.docs-content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--cream-line);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--navy);
}
.docs-content pre {
  background: var(--panel);
  border: var(--border-heavy);
  box-shadow: var(--hard-shadow-sm);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 4px;
}
.docs-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.7;
}
.docs-content strong { color: var(--ink); }

.docs-callout {
  background: var(--card);
  border: 2px solid var(--amber);
  box-shadow: var(--hard-shadow-sm);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 4px;
}
.docs-callout p { margin: 0; font-size: 13px; }

.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.docs-table th {
  background: var(--panel);
  border: 2px solid var(--ink);
  padding: 8px 14px;
  text-align: left;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.docs-table td {
  border: 1px solid var(--cream-line);
  padding: 8px 14px;
  color: var(--ink-soft);
  vertical-align: top;
  line-height: 1.6;
}
.docs-table tr:nth-child(even) td { background: var(--panel); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-full, .feat-half, .feat-two3, .feat-two3,
  .feat-third, .feat-quarter { grid-column: span 2; }
  .feat-full .card-inner { flex-direction: column; }
  .feat-full .card-aside { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .hero-stamp { display: none; }
  .features-intro { display: none; }
  .section-title { font-size: 56px; }
  .docs-sidebar { display: none; }
  .docs-content { padding: 32px 24px; }
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
  .feat-full, .feat-half, .feat-two3, .feat-third,
  .feat-quarter { grid-column: span 1; }
  .hero { padding: 100px 20px 60px; }
  .features { padding: 60px 20px 80px; }
  .cta-section { padding: 60px 20px; }
  .navbar { max-width: calc(100vw - 32px); }
  .nav-links a { padding: 10px 10px; }
}

/* ── Crayon office workers ───────────────────────────────────────────── */
.section-char {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Hero: bottom-right */
.char-hero {
  top: -20px;
  left: 2%;
  width: 608px;
  opacity: 0.42;
  transform: rotate(-5deg);
}

/* Why section: left side, bottom */
.char-why {
  left: 0%;
  bottom: 40px;
  width: 360px;
  opacity: 0.38;
  transform: rotate(-6deg) translateX(-40px);
}

/* Features section: top-right */
.char-features {
  right: 0%;
  top: 60px;
  width: 370px;
  opacity: 0.36;
  transform: rotate(8deg) translateX(50px);
}

@media (max-width: 1100px) {
  .char-hero     { width: 520px; }
  .char-why      { width: 260px; }
  .char-features { width: 270px; }
}
@media (max-width: 900px) {
  .char-hero     { width: 360px; right: 1%; }
  .char-why      { display: none; }
  .char-features { display: none; }
}
@media (max-width: 600px) {
  .char-hero { display: none; }
}

/* ── Why Section ─────────────────────────────────────────────────────── */
.why-section {
  padding: 88px 40px 96px;
  background: var(--parchment);
  position: relative;
  overflow: hidden;
}
.why-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.why-header { margin-bottom: 56px; }

.why-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: 0.92;
  color: var(--ink);
  letter-spacing: -2px;
  margin: 12px 0 22px;
  transform: rotate(-0.7deg);
  display: inline-block;
}
.why-headline em { color: var(--amber); font-style: normal; }

.why-intro {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.8;
  max-width: 500px;
  border-left: 3px solid var(--amber);
  padding-left: 16px;
}

/* Spectrum bar */
.why-spectrum {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 52px;
}
.spectrum-end-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.spectrum-track {
  flex: 1;
  height: 4px;
  background: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.spectrum-node {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--parchment);
  flex-shrink: 0;
  position: relative;
}
.sn-mid {
  width: 24px; height: 24px;
  background: var(--amber);
  border-color: var(--ink);
  position: relative;
}
.sn-mid-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--amber);
  white-space: nowrap;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sn-mid-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 10px;
  background: var(--amber);
}

/* Three columns */
.why-cols {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 20px;
  align-items: start;
}
.why-col {
  border-radius: 4px;
  padding: 24px 26px 28px;
}
.why-ghost {
  border: 1.5px dashed #a84040;
  background: rgba(250,247,242,.4);
  opacity: 0.65;
  filter: grayscale(20%);
}
.why-not-banner {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #a84040;
  border: 1.5px solid #a84040;
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: 12px;
  opacity: 0.75;
}
.why-us {
  border: 1.5px solid #3a7a4a;
  box-shadow: var(--hard-shadow-lg);
  background: var(--card);
  border-top: 5px solid #3a7a4a;
  margin-top: -14px;
}

.why-col-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.why-col-tag-us {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  border: 1.5px solid var(--amber);
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: 12px;
}
.why-col-h {
  font-family: var(--font-display);
  font-size: 23px;
  color: var(--ink-soft);
  line-height: 1.1;
  margin-bottom: 6px;
}
.why-col-h-us {
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 6px;
}
.why-col-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .5px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--cream-line);
  margin-bottom: 14px;
}
.why-col-sub-us {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 1px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--cream-line);
  margin-bottom: 14px;
}
.why-col-p {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 16px;
}
.why-col-p-us {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.82;
  margin-bottom: 16px;
}
.why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--cream-line);
  padding: 14px 0 0;
}
.why-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}
.why-list-bad li { color: var(--ink-faint); }
.why-list-bad li::before {
  content: '✗';
  position: absolute; left: 0;
  color: #a84040;
  font-size: 10px;
}
.why-list-good li { color: var(--ink-soft); }
.why-list-good li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--teal);
  font-weight: 700;
  font-size: 11px;
}

/* Callout */
.why-callout {
  margin-top: 60px;
  padding: 32px 40px 32px 56px;
  background: var(--ink);
  border-radius: 4px;
  position: relative;
}
.why-quote-mark {
  position: absolute;
  top: -4px; left: 18px;
  font-family: var(--font-display);
  font-size: 96px;
  color: var(--amber);
  line-height: 1;
  opacity: 0.75;
}
.why-callout p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--parchment);
  line-height: 1.42;
  letter-spacing: -.2px;
  margin: 0;
  position: relative;
}

@media (max-width: 900px) {
  .why-cols { grid-template-columns: 1fr; }
  .why-ghost { opacity: 1; }
  .why-us { margin-top: 0; }
  .why-spectrum { display: none; }
  .why-section { padding: 60px 24px 72px; }
}
@media (max-width: 600px) {
  .why-callout { padding: 24px 24px 24px 44px; }
}