/* ═══════════════════════════════════════════════════
   GEIST DESIGN SYSTEM — THEME VARIABLES
   ═══════════════════════════════════════════════════ */
:root {
  --accent: #0070f3;
  --accent-glow: rgba(0, 112, 243, 0.10);
  --accent-soft: rgba(0, 112, 243, 0.06);
  --control-hover: color-mix(in srgb, var(--text) 4%, transparent);
  --control-pressed: color-mix(in srgb, var(--text) 8%, transparent);
  --font-sans: 'Libre Baskerville', 'Baskerville', 'Georgia', serif;
  --header-height: 64px;
  --max-width: 1100px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  /* Golden ratio system */
  --phi: 1.618;
  --phi-inv: 0.618;     /* 1/φ */
  --phi-inv-sq: 0.382;  /* 1/φ² */
  /* Type scale, geometric base φ — 16 → 26 → 42 → 68 → 110 */
  --type-1: 16px;
  --type-2: 26px;
  --type-3: 42px;
  --type-4: 68px;
  --type-5: 110px;
  /* Fibonacci spacing */
  --fib-1: 8px;
  --fib-2: 13px;
  --fib-3: 21px;
  --fib-4: 34px;
  --fib-5: 55px;
  --fib-6: 89px;
  --fib-7: 144px;
}

.legal-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px 20px;
  color: var(--text-secondary);
  font-size: 13px;
}
.legal-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --text: #000000;
  --text-secondary: #666666;
  --text-faint: #888888;
  --border: hsla(240, 4%, 60.784%, 0.2);
  --border-hover: #999999;
  --surface: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.96);
  --card-hover: #fafafa;
  --highlight-color: #0070f3;
  --highlight-bg: rgba(0, 112, 243, 0.10);
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #0a0a0a;
  --text: #ededed;
  --text-secondary: #a1a1a1;
  --text-faint: #666666;
  --border: hsla(240, 4%, 60.784%, 0.2);
  --border-hover: #444444;
  --surface: #111111;
  --nav-bg: rgba(0, 0, 0, 0.95);
  --card-hover: #111111;
  --highlight-color: #3291ff;
  --highlight-bg: rgba(50, 145, 255, 0.15);
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--accent); color: #fff; }

html {
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  transition: background 0.3s, color 0.3s;
}

/* ═══════════════════════════════════════════════════
   SCROLL CONTAINER
   ═══════════════════════════════════════════════════ */
.scroll-container {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  padding-top: var(--header-height);
  /* hide the scrollbar in both engines while keeping scroll behavior */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / legacy Edge */
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.scroll-container::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chrome, Safari, modern Edge */
}

.section { position: relative; }

.section.hero {
  /* hero takes 80vh-header. the remaining 20vh becomes the peek strip
     for the next section. cup height is tied to this so it always
     fits inside without being clipped by the benchmark's z-index:2. */
  min-height: calc(80vh - var(--header-height));
}

/* ═══════════════════════════════════════════════════
   HEADER (Vercel-style sticky bar)
   ═══════════════════════════════════════════════════ */
header#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}

header#navbar.scrolled {
  border-bottom-color: var(--border);
}

.header-content {
  width: 100%;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  width: 22px;
  height: 22px;
  flex: none;
  background: currentColor;
  mask: url('assets/favicon.svg') center / contain no-repeat;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text); }

.nav-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.nav-icon:hover {
  color: var(--text);
  background: var(--control-hover);
}

.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 8px;
  flex-shrink: 0;
}

.theme-toggle {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--text);
  background: var(--control-hover);
}

.locale-menu { position: relative; flex-shrink: 0; }
.locale-menu__trigger {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.locale-menu__trigger:hover,
.locale-menu__trigger[aria-expanded="true"] { color: var(--text); background: var(--control-hover); }
.locale-menu__trigger svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.locale-menu__label { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale-menu__popover {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  box-shadow: 0 14px 40px rgb(0 0 0 / .14);
}
.locale-menu__popover[hidden] { display: none; }
.locale-menu__option {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.locale-menu__option:hover,
.locale-menu__option:focus-visible { color: var(--text); background: var(--control-hover); outline: none; }
.locale-menu__check { visibility: hidden; color: var(--text); }
.locale-menu__option[aria-checked="true"] .locale-menu__check { visibility: visible; }
.locale-menu__error { margin: 6px 8px 4px; color: #b42318; font-size: 11px; line-height: 1.35; }

.nav-icon:active, .theme-toggle:active, .locale-menu__trigger:active, .locale-menu__option:active { background: var(--control-pressed); }

/* Sun/moon icon morph animation */
#themeIcon {
  transition: transform 0.6s cubic-bezier(0.6, 0, 1, 0.4);
  overflow: visible;
}

body.theme-transitioning,
body.theme-transitioning #navbar,
body.theme-transitioning .section,
body.theme-transitioning .feature-card,
body.theme-transitioning .pricing-card {
  transition-property: background-color, color, border-color;
  transition-duration: 0.3s;
}

.nav-cta {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--bg);
  background: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.15s;
  margin-left: 8px;
  white-space: nowrap;
}
.nav-cta:hover {
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: var(--bg);
  transition: background 0.3s;
}

.hero-svg-wrap {
  position: absolute;
  left: -10%;
  /* center the cup inside the 80vh-header hero. height is bounded to
     the hero box so the saucer is never clipped by the benchmark
     section that sits beneath. SVG preserveAspectRatio scales the
     drawing inside this box on every screen size. */
  top: calc((80vh - var(--header-height)) / 2);
  transform: translateY(-50%);
  width: 71.8%;
  height: calc(78vh - var(--header-height));
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.hero-art,
.hero-smoke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-art {
  object-fit: contain;
  z-index: 0;
}

.hero-art-outgoing {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hero-art-outgoing.is-fading {
  opacity: 0;
}

.hero-smoke {
  z-index: 1;
}

/* The fallback contract relies on the native hidden attribute even though the
   canvas otherwise has an explicit display mode. */
.hero-smoke[hidden] {
  display: none;
}

.hero[data-hero-resource="error"] .hero-svg-wrap::before {
  content: 'Nativify\A 01001010 01000001 01010110 01000001';
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  white-space: pre;
  color: var(--accent);
  font: 700 clamp(14px, 2vw, 24px)/1.8 'Cascadia Code', monospace;
  text-align: center;
  opacity: 0.35;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
  max-width: 100%;
  width: 100%;
  /* original top padding (89px) — title sits at the same height as before
     the buttons were removed; no bottom padding needed since there's no
     second flex child to push apart */
  padding: var(--fib-6) var(--fib-5) 0;
}

.hero-title {
  font-family: var(--font-sans);
  /* φ³ ≈ 4.236; 4.236vw at 1920 = 81.3px → clamp 40–110 */
  font-size: clamp(40px, 4.236vw, 110px);
  font-weight: 700;
  line-height: 1.08;
  /* −1/φ⁵ ≈ −0.09em compressed → use −0.038em (1/φ²·−0.1) for display tracking */
  letter-spacing: -0.038em;
  margin-bottom: var(--fib-4);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s var(--ease-out-expo) 0.3s forwards;
}

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 400;
  font-style: normal;
  /* airier rhythm — looser leading + a touch of word-spacing softens
     the muted copy so it reads as a quiet companion to the headline */
  line-height: 1.85;
  word-spacing: 0.08em;
  letter-spacing: 0.005em;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0;
  text-align: right;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUpMuted 1s var(--ease-out-expo) 0.55s forwards;
}

@keyframes fadeUpMuted {
  to { opacity: 1; transform: translateY(0); }
}

.hero-title .rainbow {
  white-space: nowrap;
  background: linear-gradient(
    135deg,
    #ff6b6b 0%, #ffa36b 14%, #ffd93d 28%,
    #6bffa3 42%, #6bd4ff 56%, #a36bff 70%,
    #ff6bca 85%, #ff6b6b 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 6s ease infinite;
}

body.is-scrolling .rainbow {
  animation-play-state: paused;
}

@keyframes rainbowShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.reveal.from-left { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.from-bottom { transform: translateY(40px); }
.reveal.from-scale { transform: scale(0.95); }
.reveal.visible {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

body.is-scrolling .reveal {
  transition-duration: 0s;
}

.stagger-children .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children .reveal:nth-child(2) { transition-delay: 0.06s; }
.stagger-children .reveal:nth-child(3) { transition-delay: 0.12s; }
.stagger-children .reveal:nth-child(4) { transition-delay: 0.18s; }
.stagger-children .reveal:nth-child(5) { transition-delay: 0.24s; }
.stagger-children .reveal:nth-child(6) { transition-delay: 0.30s; }

.section-title {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 48px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════ */
.features-section {
  background: var(--bg);
  padding: 100px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.3s;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--max-width);
  width: 100%;
}

.feature-card {
  padding: 32px 24px;
  border: 1px solid var(--border);
  margin-top: -1px;
  margin-left: -1px;
  transition: background 0.2s;
}
.feature-card:nth-child(-n+3) { margin-top: 0; }
.feature-card:nth-child(3n+1) { margin-left: 0; }
.feature-card:hover { background: var(--card-hover); }

.feature-card h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
}

.feature-card p strong {
  color: var(--text);
  font-weight: 600;
}

.pricing-desc strong {
  color: var(--text);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   BENCHMARKS
   ═══════════════════════════════════════════════════ */
.benchmark-section {
  /* relative + z-index lifts this above the absolutely-positioned hero
     cup (z:1) so its top edge cleanly peeks at the bottom of the
     initial viewport instead of being painted over by the SVG */
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 72px 48px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.3s;
}

/* Anthropic-style pill tabs */
.benchmark-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.benchmark-pills button {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--border);
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.benchmark-pills button.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.benchmark-pills button:hover:not(.active) {
  border-color: var(--border-hover);
}

.benchmark-pills button:focus-visible { outline-offset: 2px; }

.benchmark-chart-wrap {
  width: 100%;
  max-width: var(--max-width);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 32px 36px;
  margin-bottom: 24px;
}

.benchmark-panel {
  display: none;
}
.benchmark-panel.active {
  display: block;
}

/* Chart title & subtitle (inside container) */
.bench-chart-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 4px;
  color: var(--text);
}

.bench-chart-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-faint);
  text-align: center;
  margin-bottom: 40px;
}

.bench-chart-subtitle a {
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.bench-chart-subtitle a:hover {
  color: var(--text-secondary);
}

.bench-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  height: 260px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}

.bench-names {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 16px 0;
}

.bench-names span {
  flex: 1;
  max-width: 130px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bench-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 130px;
  height: 100%;
  justify-content: flex-end;
}

.bench-value {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.bench-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  height: calc(var(--h) * 1%);
  min-height: 8px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.2s var(--ease-out-expo);
}

.bench-bar.grown {
  transform: scaleY(1);
}

body.is-scrolling .bench-bar {
  transition-duration: 0s;
}

.bench-height-12 { --h: 12; }
.bench-height-13 { --h: 13; }
.bench-height-33 { --h: 33; }
.bench-height-54 { --h: 54; }
.bench-height-55 { --h: 55; }
.bench-height-100 { --h: 100; }

/* Anthropic-style per-bar colors — light mode */
.bench-col:nth-child(1) .bench-bar { background: #CF6B52; }
.bench-col:nth-child(2) .bench-bar { background: #5D9E88; }
.bench-col:nth-child(3) .bench-bar { background: #3B6FA0; }
.bench-col:nth-child(4) .bench-bar { background: #4E5560; }
.bench-col:nth-child(5) .bench-bar { background: #BFB19C; }
.bench-col:nth-child(6) .bench-bar { background: #A3764F; }

/* Dark mode — lifted lightness, boosted saturation */
[data-theme="dark"] .bench-col:nth-child(1) .bench-bar { background: #B06B58; }
[data-theme="dark"] .bench-col:nth-child(2) .bench-bar { background: #5A9184; }
[data-theme="dark"] .bench-col:nth-child(3) .bench-bar { background: #3F6D9A; }
[data-theme="dark"] .bench-col:nth-child(4) .bench-bar { background: #5B626E; }
[data-theme="dark"] .bench-col:nth-child(5) .bench-bar { background: #ADA393; }
[data-theme="dark"] .bench-col:nth-child(6) .bench-bar { background: #9A7254; }

/* ── Benchmark Table (Anthropic-style) ── */
.benchmark-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.benchmark-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: 14px;
}

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

.benchmark-table th,
.benchmark-table td {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.benchmark-table thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding-bottom: 12px;
}

.benchmark-table .row-label {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}

.benchmark-table .bench-meta {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  margin-top: 2px;
}

.benchmark-table tbody td,
.benchmark-table tbody th {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.benchmark-table tbody td strong {
  font-weight: 700;
  color: var(--text);
}

/* Anthropic-style SOTA column highlight — subtle warm tint, thin outline */
.benchmark-table .col-featured {
  background: rgba(212, 115, 90, 0.06);
}

.benchmark-table thead .col-featured {
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  border-top: 1.5px solid rgba(212, 115, 90, 0.35);
  border-left: 1.5px solid rgba(212, 115, 90, 0.35);
  border-right: 1.5px solid rgba(212, 115, 90, 0.35);
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
}

.benchmark-table tbody td.col-featured {
  border-left: 1.5px solid rgba(212, 115, 90, 0.35);
  border-right: 1.5px solid rgba(212, 115, 90, 0.35);
}

.benchmark-table tbody tr:last-child td.col-featured {
  border-bottom: 1.5px solid rgba(212, 115, 90, 0.35);
  border-radius: 0 0 10px 10px;
}

[data-theme="dark"] .benchmark-table .col-featured {
  background: rgba(224, 138, 116, 0.12);
}
[data-theme="dark"] .benchmark-table thead .col-featured,
[data-theme="dark"] .benchmark-table tbody td.col-featured,
[data-theme="dark"] .benchmark-table tbody tr:last-child td.col-featured {
  border-color: rgba(224, 138, 116, 0.35);
}

/* SOTA cell highlight — best value per row gets warm tint */
.benchmark-table td.sota {
  background: rgba(212, 115, 90, 0.10);
  font-weight: 700;
  color: var(--text);
}
[data-theme="dark"] .benchmark-table td.sota {
  background: rgba(224, 138, 116, 0.18);
}

/* Compat table uses plain Yes/No text */
.compat-table tbody td,
.compat-table tbody th {
  font-size: 14px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════ */
.pricing-section {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 48px;
  transition: background 0.3s;
}

.pricing-section .section-subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 640px;
  text-align: center;
  margin: -16px 0 48px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--max-width);
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible;
}

.pricing-card {
  border: none;
  border-right: 1px solid var(--border);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}
.pricing-card:last-child { border-right: none; }
.pricing-card:hover { background: var(--card-hover); }

.pricing-card.featured { position: relative; }

.pricing-card.featured::before {
  content: 'Popular';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 4px 14px;
  border-radius: 4px;
}

.pricing-tier {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.pricing-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.pricing-amount {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 2px;
}

.pricing-period {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-faint);
  margin-bottom: 28px;
}

.pricing-features {
  list-style: none;
  flex: 1;
  margin-bottom: 28px;
}

.pricing-features li {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-features li::before {
  content: '\2014';
  color: var(--text-faint);
  font-size: 12px;
}
.pricing-features li.included::before {
  content: '\2713';
  color: var(--accent);
  font-weight: 600;
}

.pricing-btn {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
  text-align: center;
  display: block;
}
.pricing-btn:hover {
  border-color: var(--border-hover);
  background: var(--accent-soft);
}

.pricing-card.featured .pricing-btn {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.pricing-card.featured .pricing-btn:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-content { max-width: 61.8%; padding: var(--fib-5) var(--fib-4) var(--fib-6); }
  .hero-title { font-size: clamp(34px, 5.2vw, 64px); white-space: normal; }
  .features-grid { max-width: 720px; grid-template-columns: repeat(2, 1fr); }
  .feature-card:nth-child(3n+1) { margin-left: -1px; }
  .feature-card:nth-child(-n+3) { margin-top: -1px; }
  .feature-card:nth-child(-n+2) { margin-top: 0; }
  .feature-card:nth-child(2n+1) { margin-left: 0; }
  .pricing-cards { max-width: 720px; }
}

@media (max-width: 820px) {
  .benchmark-section { padding: 80px 24px; }
  .features-section, .pricing-section { padding: 80px 24px; }
  .pricing-cards { grid-template-columns: 1fr; border-radius: 12px; }
  .pricing-card {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .pricing-card:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
  :root { --header-height: 56px; }
  .header-content { padding: 0 16px; }
  .header-left { gap: 24px; }
  .nav-links { gap: 20px; }
  .locale-menu__label { display: none; }
  /* Stack hero on mobile: text top-right, cup pinned to bottom-left so
     they don't overlap. min-height ensures both have room to breathe. */
  .hero {
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
    display: grid;
    grid-template-rows: auto minmax(300px, 55vh);
  }
  .hero-svg-wrap {
    position: relative;
    grid-row: 2;
    width: 100%;
    left: 0;
    top: 0;
    bottom: auto;
    transform: none;
    height: min(55vh, 520px);
    min-height: 300px;
    overflow: hidden;
  }
  /* Right-aligned text on a narrow viewport reads as "centered" when each
     wrapped line spans nearly the full width. Constrain the text block so
     short lines visibly hug the right edge with empty space on the LEFT,
     making the right-alignment unambiguous. */
  .hero-content {
    grid-row: 1;
    padding: var(--fib-4) 20px var(--fib-2);
    max-width: 100%;
    align-items: flex-end;
    text-align: right;
    justify-content: flex-start;
  }
  .hero-title,
  .hero-subtitle {
    width: auto;
    max-width: 22ch;
    text-align: right;
  }
  .hero-title { font-size: clamp(28px, 7vw, 44px); white-space: normal; letter-spacing: -0.03em; max-width: 12ch; }
  .reveal.from-left,
  .reveal.from-right { transform: translateY(24px); }
  .features-grid { grid-template-columns: 1fr; max-width: 100%; }
  .feature-card { margin-left: 0 !important; margin-top: -1px !important; }
  .feature-card:first-child { margin-top: 0 !important; }
  .benchmark-section { padding: 72px 20px; }
  .benchmark-chart-wrap { padding: 28px 16px; }
  .bench-bars { gap: 8px; height: 200px; padding: 0; }
  .bench-names { gap: 8px; padding: 12px 0 0; }
  .bench-names span {
    font-size: 10px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    max-width: none;
  }
  .bench-col { max-width: none; }
  .bench-value { font-size: 11px; }
  .benchmark-table th, .benchmark-table td { padding: 12px 10px; font-size: 13px; }
  .benchmark-table tbody td { font-size: 14px; }
  .features-section, .pricing-section { padding: 72px 20px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .header-left { gap: 0; }
}

@media (max-width: 480px) {
  :root { --header-height: 52px; }
  .header-content { padding: 0 14px; }
  .nav-icon { width: 30px; height: 30px; }
  .nav-icon svg { width: 16px; height: 16px; }
  .theme-toggle { width: 30px; height: 30px; }
  .locale-menu__trigger { width: 30px; min-height: 30px; justify-content: center; padding: 0; }
  .nav-cta { font-size: 13px; padding: 7px 14px; }
  .hero-title { font-size: clamp(26px, 8vw, 36px); }
  .benchmark-section { padding: 56px 16px; }
  .benchmark-chart-wrap { padding: 20px 10px; }
  .bench-bars { gap: 6px; height: 180px; }
  .bench-names { gap: 6px; }
  .bench-names span { font-size: 9px; }
  .bench-value { font-size: 10px; }
  .features-section, .pricing-section { padding: 56px 16px; }
  .feature-card { padding: 24px 18px; }
  .pricing-card { padding: 28px 20px; }
  .section-title { font-size: clamp(22px, 6vw, 28px); margin-bottom: 32px; }
}

@media (max-height: 650px) and (max-width: 768px) {
  .hero { grid-template-rows: auto minmax(240px, 48vh); }
  .hero-svg-wrap { min-height: 240px; height: 48vh; }
}

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