/*
 * EOXMIND landing, built on the EOXScriptum design system (a1eoxscriptum-design-system.md).
 * §1 below is the spec's §14 token sheet, values unchanged. Everything after it uses only those tokens,
 * plus the spec's documented off-token values for landing surfaces (radius 18/20/22/24/28, deep shadows).
 *
 * Applied from the spec's own §16 recommendations, without changing any token value:
 *  - Fonts are actually delivered (Outfit + IBM Plex Mono via Google Fonts, display=swap).
 *  - Tertiary (#52525b, 2.56:1) is used only for decoration (marquee, separators, diagram strokes),
 *    never for text people need to read; eyebrows and captions use secondary (#a1a1aa, 7.72:1).
 *  - Skip link + main landmark, :focus-visible rings kept, motion off under prefers-reduced-motion.
 *  - z-index from the token scale (sticky 100, toast 600) instead of the 10/20 literals.
 */

/* ───────────────────────── 1. Tokens (spec §14) ───────────────────────── */
:root {
  --gray-0: #ffffff; --gray-25: #fcfcfc; --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-150: #eeeeee;
  --gray-200: #e5e5e5; --gray-300: #d4d4d4; --gray-400: #a3a3a3; --gray-500: #737373; --gray-600: #525252;
  --gray-700: #404040; --gray-800: #262626; --gray-900: #171717; --gray-950: #111111; --gray-1000: #0a0a0a;

  --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #6366f1;

  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", "Consolas", monospace;
  --font-size-2xs: 9px; --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px;
  --font-size-lg: 14px; --font-size-xl: 15px; --font-size-2xl: 18px; --font-size-3xl: 22px; --font-size-hero: 42px;
  --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500;
  --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800;
  --line-height-tight: 1.15; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --line-height-loose: 1.7;

  --space-0: 0px; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px;
  --space-7: 14px; --space-8: 16px; --space-9: 20px; --space-10: 24px; --space-11: 32px; --space-12: 40px;
  --space-13: 48px; --space-14: 64px; --space-15: 80px;
  /* Inset and gap aliases (spec §4.1) */
  --space-inset-xs: 4px; --space-inset-sm: 6px; --space-inset-md: 12px; --space-inset-lg: 16px; --space-inset-xl: 20px;
  --space-gap-xs: 4px; --space-gap-sm: 6px; --space-gap-md: 8px; --space-gap-lg: 12px; --space-gap-xl: 16px; --space-gap-2xl: 24px;

  --radius-none: 0px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-full: 9999px;

  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .04);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
  --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-command: 500; --z-toast: 600;

  --duration-instant: 0ms; --duration-fast: .1s; --duration-normal: .15s; --duration-moderate: .2s; --duration-slow: .3s; --duration-glacial: .5s;
  --ease-default: cubic-bezier(.25, .1, .25, 1);
  --ease-in: cubic-bezier(.55, .055, .675, .19);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-in-out: cubic-bezier(.645, .045, .355, 1);

  --landing-bg: #0a0a0a;
  --landing-surface: #111111;
  --landing-surface-strong: #171717;
  --landing-border: rgba(255, 255, 255, .08);
  --landing-border-strong: rgba(255, 255, 255, .16);
  --landing-text-primary: #ffffff;
  --landing-text-secondary: #a1a1aa;
  --landing-text-tertiary: #52525b;
  --landing-accent: #f59e0b;
  --landing-accent-soft: rgba(245, 158, 11, .16);
  --landing-accent-border: rgba(245, 158, 11, .32);
  --landing-display-sm: 48px; --landing-display-md: 64px; --landing-display-lg: 88px; --landing-display-xl: 112px;
  --landing-container: 1152px; --landing-container-wide: 1280px;
  --landing-section-breathing: 128px; --landing-section-dense: 104px; --landing-mobile-section: 80px;
  --landing-ease: cubic-bezier(.16, 1, .3, 1);
  --landing-duration: .6s;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-moderate: 0ms; --duration-slow: 0ms; --duration-glacial: 0ms; --landing-duration: .01ms; }
}

/* ───────────────────────── 2. Base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--landing-bg); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--landing-bg); color: var(--landing-text-primary);
  font-family: var(--font-sans); font-size: var(--font-size-lg); line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--landing-text-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow, .kicker {
  font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--landing-text-secondary);
}

/* Skip link (spec §10.1) */
.skip-link {
  position: fixed; top: var(--space-6); left: var(--space-6); z-index: var(--z-toast); transform: translateY(-160%);
  border-radius: var(--radius-full); padding: var(--space-5) var(--space-8);
  background: var(--landing-text-primary); color: var(--landing-bg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  text-decoration: none; transition: transform var(--landing-duration) var(--landing-ease);
}
.skip-link:focus { transform: translateY(0); }

/* Buttons (spec §10.3 landing CTA: 44px pill, 14px semibold, hover lifts 1px) */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 44px; padding: 0 var(--space-10); border-radius: var(--radius-full);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap;
  transition: transform var(--landing-duration) var(--landing-ease), border-color var(--landing-duration) var(--landing-ease), background var(--landing-duration) var(--landing-ease);
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--landing-text-primary); color: var(--landing-bg); }
.button.secondary { border: 1px solid var(--landing-border-strong); color: var(--landing-text-primary); background: transparent; }
.button.secondary:hover { border-color: rgba(255, 255, 255, .28); }

/* Small pill buttons used inside product mocks */
.chip-btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-8); border-radius: var(--radius-full);
  border: 1px solid var(--landing-border); background: rgba(255, 255, 255, .03);
  color: var(--landing-text-secondary); font: inherit; font-size: var(--font-size-sm); cursor: default;
}
.chip-btn.merge { border-color: var(--landing-accent-border); background: var(--landing-accent-soft); color: var(--landing-text-primary); }

/* ───────────────────────── 3. Nav (glass, sticky) ───────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  border-bottom: 1px solid var(--landing-border);
  background: color-mix(in srgb, var(--landing-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-gap-lg); max-width: var(--landing-container); margin: 0 auto; padding: var(--space-8) var(--space-inset-xl); }
.logo { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--landing-text-primary); font-size: var(--font-size-xl); font-weight: var(--font-weight-light); letter-spacing: -.02em; text-decoration: none; }
.logo b { font-weight: var(--font-weight-black); }
.logo svg { width: 22px; height: 22px; }
.nav-links { display: flex; align-items: center; gap: var(--space-gap-xl); }
.nav-links a { color: var(--landing-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; transition: color var(--landing-duration) var(--landing-ease); }
.nav-links a:hover { color: var(--landing-text-primary); }
.nav-links .nav-cta { color: var(--landing-text-primary); border: 1px solid var(--landing-border-strong); border-radius: var(--radius-full); padding: var(--space-3) var(--space-7); }

/* ───────────────────────── 4. Hero (pixel field + signal radar) ───────────────────────── */
@property --pixel-pulse { syntax: "<number>"; inherits: true; initial-value: 1; }
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--landing-section-breathing) + 24px) var(--space-inset-xl) var(--landing-section-breathing);
  background: var(--landing-bg);
}
.pixel-field {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; contain: paint;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .85) 55%, #000 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .85) 55%, #000 100%);
}
.pixel-grid {
  position: absolute; inset: -24px;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .26) 1px, transparent 1.5px), radial-gradient(circle at 1px 1px, rgba(212, 212, 212, .14) 1px, transparent 1.5px);
  background-size: 14px 14px, 28px 28px; mix-blend-mode: screen;
}
.pixel-glow {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 82% 38%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .12) 120px, transparent 360px),
              radial-gradient(circle at 88% 30%, rgba(212, 212, 212, .16), transparent 280px),
              radial-gradient(circle at 82% 38%, var(--landing-accent-soft), transparent 220px);
}
/* EOXMIND variation: the glow is a radar. Rings sweep from it and "signals" ping on the grid. */
.radar { position: absolute; left: 82%; top: 38%; width: 0; height: 0; mix-blend-mode: screen; opacity: .5; }
.radar i { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; transform: translate(-50%, -50%); }
.radar i:nth-child(1) { width: 220px; height: 220px; }
.radar i:nth-child(2) { width: 440px; height: 440px; border-color: rgba(255, 255, 255, .09); }
.radar i:nth-child(3) { width: 700px; height: 700px; border-color: rgba(255, 255, 255, .06); }
.radar .sweep { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; border-radius: 50%; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(245, 158, 11, .14) 18deg, transparent 60deg); -webkit-mask-image: radial-gradient(circle, #000 0, #000 69%, transparent 70%); mask-image: radial-gradient(circle, #000 0, #000 69%, transparent 70%); }
.ping { position: absolute; width: 6px; height: 6px; border-radius: 2px; background: var(--landing-accent); box-shadow: 0 0 0 3px var(--landing-accent-soft); opacity: 0; }
.ping:nth-of-type(1) { left: 71%; top: 22%; } .ping:nth-of-type(2) { left: 90%; top: 55%; }
.ping:nth-of-type(3) { left: 64%; top: 62%; } .ping:nth-of-type(4) { left: 86%; top: 18%; }
.ping:nth-of-type(5) { left: 12%; top: 70%; } .ping:nth-of-type(6) { left: 22%; top: 24%; }
.grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .04; pointer-events: none; }

.hero-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; text-align: center; }
.prehead { max-width: 760px; margin: 0 auto var(--space-11); font-family: var(--font-mono); font-size: var(--font-size-md); letter-spacing: .02em; line-height: var(--line-height-relaxed); color: var(--landing-text-secondary); }
.prehead s { color: var(--landing-text-secondary); text-decoration-color: var(--landing-text-tertiary); text-decoration-thickness: 1px; }
.title {
  display: grid; gap: var(--space-3); margin: 0;
  font-size: clamp(var(--landing-display-sm), 9vw, var(--landing-display-xl)); font-weight: var(--font-weight-black);
  letter-spacing: -.055em; line-height: .92; color: var(--landing-text-primary);
}
.title .muted { color: var(--landing-text-secondary); }
.sub { max-width: 680px; margin: var(--space-11) auto 0; color: var(--landing-text-secondary); font-size: clamp(var(--font-size-2xl), 2vw, 24px); line-height: var(--line-height-snug); }
.actions { display: flex; justify-content: center; gap: var(--space-gap-lg); margin-top: var(--space-11); flex-wrap: wrap; }
.hero-note { display: inline-block; max-width: 92vw; margin-top: var(--space-9); font-family: var(--font-mono); font-size: var(--font-size-sm); letter-spacing: .02em; color: var(--landing-text-secondary); }
.hero-note b { color: var(--landing-text-primary); font-weight: var(--font-weight-medium); }

.reveal-item { opacity: 0; transform: translateY(8px); animation: hero-reveal .6s var(--landing-ease) forwards; }
.item-1 { animation-delay: 0ms; } .item-2 { animation-delay: 80ms; } .item-3 { animation-delay: .16s; } .item-4 { animation-delay: .24s; } .item-5 { animation-delay: .32s; }
@keyframes hero-reveal { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  .pixel-grid { will-change: transform; animation: grid-drift 18s linear infinite; }
  .pixel-glow { will-change: opacity; animation: glow-pulse 10s ease-in-out infinite; }
  .radar .sweep { animation: sweep 9s linear infinite; }
  .ping { animation: ping 9s var(--landing-ease) infinite; }
  .ping:nth-of-type(2) { animation-delay: 1.4s; } .ping:nth-of-type(3) { animation-delay: 2.6s; } .ping:nth-of-type(4) { animation-delay: 4.1s; }
  .ping:nth-of-type(5) { animation-delay: 5.5s; } .ping:nth-of-type(6) { animation-delay: 7s; }
  .grain { will-change: transform, opacity; animation: grain-drift 12s linear infinite; }
}
@keyframes grid-drift { from { transform: translateZ(0); } to { transform: translate3d(14px, 14px, 0); } }
@keyframes glow-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes sweep { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ping { 0%, 100% { opacity: 0; transform: scale(.6); } 6% { opacity: 1; transform: scale(1.25); } 22% { opacity: .9; transform: scale(1); } 40% { opacity: 0; } }
@keyframes grain-drift { 0% { opacity: .03; transform: translateZ(0); } 50% { opacity: .055; transform: translate3d(0, -2px, 0); } 100% { opacity: .03; transform: translateZ(0); } }
@media (prefers-reduced-motion: reduce) { .reveal-item { opacity: 1; transform: none; animation: none; } .ping { opacity: .7; } }

/* ───────────────────────── 5. Scroll reveal (progressive: only hidden when JS runs) ───────────────────────── */
.reveal { opacity: 1; transform: none; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--landing-duration) var(--landing-ease), transform var(--landing-duration) var(--landing-ease); }
  .js .reveal[data-in-view="true"] { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────── 6. Live pipeline (browser mock) ───────────────────────── */
.demo { padding: var(--landing-section-dense) var(--space-inset-xl); background: var(--landing-bg); }
.demo .reveal { max-width: var(--landing-container-wide); margin: 0 auto; }
.caption-top { text-align: center; margin-bottom: var(--space-8); }
.caption-bottom { margin-top: var(--space-8); text-align: center; color: var(--landing-text-secondary); font-size: var(--font-size-lg); font-style: italic; }
.browser { overflow: hidden; border: 1px solid var(--landing-border); border-radius: 20px; background: var(--landing-surface); box-shadow: 0 40px 120px rgba(0, 0, 0, .42); }
.chrome { display: grid; grid-template-columns: 10px 10px 10px 1fr; align-items: center; gap: var(--space-gap-sm); padding: var(--space-8); border-bottom: 1px solid var(--landing-border); background: var(--landing-surface-strong); }
.chrome > span { width: 10px; height: 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .18); }
.url { justify-self: center; width: min(100%, 440px); border: 1px solid var(--landing-border); border-radius: var(--radius-full); padding: var(--space-4) var(--space-8); color: var(--landing-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-xs); text-align: center; background: rgba(0, 0, 0, .22); }
.workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; min-height: 520px; }
.rail, .document, .proposal-rail { padding: var(--space-10); }
.rail { border-right: 1px solid var(--landing-border); background: rgba(255, 255, 255, .015); }
.rail-label { margin-bottom: var(--space-8); }
.scraper { border: 1px solid var(--landing-border); border-radius: var(--radius-2xl); padding: var(--space-6); background: var(--landing-bg); }
.scraper + .scraper { margin-top: var(--space-6); }
.scraper-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.ver { font-family: var(--font-mono); font-size: var(--font-size-xs); padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--landing-surface-strong); color: var(--landing-text-secondary); }
.sites { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.sites li { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--landing-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--color-success); }
.dot.warn { background: var(--color-warning); } .dot.off { background: transparent; box-shadow: inset 0 0 0 1px var(--landing-text-tertiary); }
.document { background: var(--landing-bg); }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.sev { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-5); border-radius: var(--radius-full); border: 1px solid var(--landing-accent-border); background: var(--landing-accent-soft); color: var(--landing-text-primary); font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; }
.sev::before { content: ''; width: 6px; height: 6px; border-radius: 1.5px; background: var(--landing-accent); }
.document h2 { max-width: 720px; margin-top: var(--space-8); font-size: clamp(30px, 3.6vw, 50px); line-height: 1; letter-spacing: -.04em; font-weight: var(--font-weight-bold); }
.document p:not(.kicker) { max-width: 660px; margin-top: var(--space-9); color: var(--landing-text-secondary); font-size: var(--font-size-2xl); line-height: var(--line-height-relaxed); }
.document blockquote { max-width: 660px; margin: var(--space-9) 0 0; border-left: 1px solid var(--landing-accent-border); padding-left: var(--space-9); color: var(--landing-text-primary); font-size: var(--font-size-2xl); line-height: var(--line-height-relaxed); }
.document blockquote .kicker { display: block; margin-bottom: var(--space-3); }
.sources-line { display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); margin-top: var(--space-9); }
.sources-line span { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--landing-text-secondary); border: 1px solid var(--landing-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-6); }
.proposal-rail { display: flex; align-items: center; border-left: 1px solid var(--landing-border); background: rgba(255, 255, 255, .015); }
.proposal { width: 100%; border: 1px solid var(--landing-accent-border); border-radius: var(--radius-2xl); padding: var(--space-9); background: linear-gradient(180deg, var(--landing-accent-soft), transparent 46%), var(--landing-surface); box-shadow: 0 24px 80px rgba(0, 0, 0, .28); }
.proposal .action { margin-top: var(--space-7); font-size: var(--font-size-xl); line-height: var(--line-height-snug); }
.proposal dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-8); margin: var(--space-8) 0 0; font-size: var(--font-size-md); }
.proposal dt { color: var(--landing-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; align-self: center; }
.proposal dd { margin: 0; color: var(--landing-text-primary); }
.proposal .buttons { display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); margin-top: var(--space-9); }
@media (prefers-reduced-motion: no-preference) { .js .demo [data-in-view="true"] .proposal { animation: proposal-in var(--landing-duration) var(--landing-ease) .25s both; } }
@keyframes proposal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────────────────────── 7. Section headings + feature rows ───────────────────────── */
.section-heading { max-width: var(--landing-container); margin: 0 auto; padding: var(--landing-section-dense) var(--space-inset-xl) 0; text-align: center; }
.section-heading h2 { margin-top: var(--space-8); font-size: clamp(40px, 6vw, var(--landing-display-lg)); line-height: .96; letter-spacing: -.05em; font-weight: var(--font-weight-black); }
.stages { background: var(--landing-bg); }
.row { display: grid; grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr); gap: clamp(var(--space-11), 6vw, var(--space-14)); align-items: center; max-width: var(--landing-container); margin: 0 auto; padding: var(--landing-section-dense) var(--space-inset-xl); }
.row.visual-left .copy { order: 2; } .row.visual-left .visual { order: 1; }
.row h3 { margin-top: var(--space-8); font-size: clamp(36px, 5vw, var(--landing-display-md)); line-height: .98; letter-spacing: -.045em; font-weight: var(--font-weight-black); }
.row .body { max-width: 560px; margin-top: var(--space-9); color: var(--landing-text-secondary); font-size: var(--font-size-2xl); line-height: var(--line-height-relaxed); }
.points { list-style: none; margin: var(--space-9) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.points li { display: flex; gap: var(--space-6); align-items: baseline; color: var(--landing-text-secondary); font-size: var(--font-size-lg); }
.points li::before { content: ''; width: 6px; height: 6px; border-radius: 1.5px; background: var(--landing-accent); flex: none; transform: translateY(-1px); }
.visual { min-height: 360px; border: 1px solid var(--landing-border); border-radius: 24px; background: var(--landing-surface); overflow: hidden; }

/* 01 · Feed finder */
.finder { display: grid; gap: var(--space-8); padding: var(--space-10); height: 100%; align-content: center; }
.finder-input { display: flex; align-items: center; gap: var(--space-6); border: 1px solid var(--landing-border-strong); border-radius: var(--radius-full); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-9); background: var(--landing-bg); }
.finder-input .q { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--font-size-md); color: var(--landing-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-input .go { border-radius: var(--radius-full); padding: var(--space-4) var(--space-8); background: var(--landing-text-primary); color: var(--landing-bg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.found { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-gap-sm); }
.found li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-8); border: 1px solid var(--landing-border); border-radius: var(--radius-2xl); background: rgba(255, 255, 255, .02); }
.found .type { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--landing-text-secondary); }
.found .path { font-family: var(--font-mono); font-size: var(--font-size-md); color: var(--landing-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found .meta { font-size: var(--font-size-sm); color: var(--landing-text-secondary); white-space: nowrap; }
.found li.best { border-color: var(--landing-accent-border); background: var(--landing-accent-soft); }
.found li.best .meta { color: var(--landing-text-primary); }
@media (prefers-reduced-motion: no-preference) {
  .js .found li { opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--landing-ease), transform .5s var(--landing-ease); }
  .js .is-active .found li { opacity: 1; transform: none; }
  .js .is-active .found li:nth-child(2) { transition-delay: .12s; } .js .is-active .found li:nth-child(3) { transition-delay: .24s; }
  .js .is-active .found li:nth-child(4) { transition-delay: .36s; } .js .is-active .found li:nth-child(5) { transition-delay: .48s; }
}

/* 02 · Scraping tiers */
.tiers { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr; align-items: center; gap: var(--space-gap-sm); height: 100%; min-height: 360px; padding: var(--space-11) var(--space-9); }
.node { min-height: 150px; display: grid; align-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); border: 1px solid var(--landing-border); border-radius: 18px; background: rgba(255, 255, 255, .025); text-align: center; }
.node .eyebrow { letter-spacing: .1em; }
.node strong { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
.node small { font-size: var(--font-size-sm); color: var(--landing-text-secondary); }
.node.hot { border-color: var(--landing-accent-border); background: linear-gradient(180deg, var(--landing-accent-soft), transparent 70%); }
.arrow { width: 100%; fill: none; stroke: var(--landing-border-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .arrow { stroke-dashoffset: 120; }
  .js .is-active .arrow-one { animation: draw .7s var(--landing-ease) .18s forwards; }
  .js .is-active .arrow-two { animation: draw .7s var(--landing-ease) .52s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.tier-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-gap-sm); margin-top: var(--space-6); }
.tier-foot span { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--landing-text-secondary); border: 1px solid var(--landing-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-6); }

/* 03 · Delivery funnel */
.funnel { display: grid; gap: var(--space-6); padding: var(--space-11) var(--space-10); height: 100%; align-content: center; }
.funnel-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 56px; gap: var(--space-8); align-items: center; }
.funnel-row .eyebrow { letter-spacing: .08em; }
.bar { height: 26px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .05); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08)); }
.funnel-row.out .bar i { background: linear-gradient(90deg, var(--landing-accent), rgba(245, 158, 11, .55)); }
.funnel-row b { font-family: var(--font-mono); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); text-align: right; }
.funnel-row.out b { color: var(--landing-accent); }
.funnel-note { margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--landing-text-secondary); font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .js .bar i { width: 0; transition: width 1.1s var(--landing-ease); }
  .js .is-active .bar i { width: var(--w); }
  .js .is-active .funnel-row:nth-child(2) .bar i { transition-delay: .1s; } .js .is-active .funnel-row:nth-child(3) .bar i { transition-delay: .2s; }
  .js .is-active .funnel-row:nth-child(4) .bar i { transition-delay: .3s; } .js .is-active .funnel-row:nth-child(5) .bar i { transition-delay: .4s; }
}

/* ───────────────────────── 8. Philosophy ───────────────────────── */
.philosophy { padding: var(--landing-section-breathing) var(--space-inset-xl); background: var(--landing-surface); text-align: center; }
.philosophy .reveal { max-width: var(--landing-container); margin: 0 auto; }
.philosophy h2 { display: grid; gap: var(--space-4); font-size: clamp(56px, 9vw, var(--landing-display-xl)); line-height: .92; letter-spacing: -.055em; font-weight: var(--font-weight-black); }
.philosophy h2 span:last-child { color: var(--landing-text-secondary); }
.philosophy p { max-width: 640px; margin: var(--space-11) auto 0; color: var(--landing-text-secondary); font-size: var(--font-size-2xl); line-height: var(--line-height-relaxed); }
.states { display: inline-flex; align-items: center; gap: var(--space-gap-sm); margin-top: var(--space-11); border: 1px solid var(--landing-accent-border); border-radius: var(--radius-full); padding: var(--space-4); background: var(--landing-accent-soft); }
.states span { border-radius: var(--radius-full); padding: var(--space-4) var(--space-8); font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; background: rgba(0, 0, 0, .22); }
.states span:last-child { background: var(--landing-accent); color: var(--landing-bg); font-weight: var(--font-weight-semibold); }

/* ───────────────────────── 9. Audience (two front doors) ───────────────────────── */
.audience { padding: var(--landing-section-dense) var(--space-inset-xl); background: var(--landing-bg); }
.audience .reveal { max-width: var(--landing-container); margin: 0 auto; }
.intro { text-align: center; }
.intro h2 { font-size: clamp(40px, 6vw, var(--landing-display-md)); line-height: .98; letter-spacing: -.045em; font-weight: var(--font-weight-black); }
.intro p { margin-top: var(--space-8); color: var(--landing-text-secondary); font-size: var(--font-size-2xl); }
.tabs { display: none; margin: var(--space-11) auto 0; border: 1px solid var(--landing-border); border-radius: var(--radius-full); padding: var(--space-3); }
.tabs button { flex: 1; min-height: 38px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--landing-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-xs); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--landing-surface-strong); color: var(--landing-text-primary); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-gap-xl); margin-top: var(--space-11); }
.panel { border: 1px solid var(--landing-border); border-radius: 22px; background: var(--landing-surface); padding: var(--space-10); overflow: hidden; }
.panel .label { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--landing-text-secondary); text-transform: uppercase; letter-spacing: .1em; }
.panel pre { margin: var(--space-8) 0 0; overflow-x: auto; border: 1px solid var(--landing-border); border-radius: var(--radius-2xl); padding: var(--space-9); background: var(--landing-bg); }
.panel code { font-family: var(--font-mono); font-size: var(--font-size-sm); line-height: 1.8; color: var(--landing-text-secondary); }
.t-comment { color: #71717a; } /* spec's own docs fallback tertiary: 4.10:1, used only for code comments */
.t-keyword, .t-fn { color: var(--landing-text-primary); }
.t-string { color: var(--landing-accent); }
.panel .caption { margin-top: var(--space-8); color: var(--landing-text-secondary); font-size: var(--font-size-lg); }
.review-card { position: relative; min-height: 340px; margin-top: var(--space-8); border: 1px solid var(--landing-border); border-radius: var(--radius-2xl); padding: var(--space-10); background: var(--landing-bg); }
.review-card .pill { position: absolute; top: var(--space-8); right: var(--space-8); border: 1px solid var(--landing-accent-border); border-radius: var(--radius-full); padding: var(--space-3) var(--space-6); color: var(--landing-accent); font-family: var(--font-mono); font-size: var(--font-size-xs); background: var(--landing-accent-soft); }
.review-card .meta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-right: 150px; }
.review-card .meta span { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--landing-text-secondary); border: 1px solid var(--landing-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-5); }
.review-card h3 { margin-top: var(--space-11); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; letter-spacing: -.035em; font-weight: var(--font-weight-bold); }
.typing { width: min(100%, 54ch); margin-top: var(--space-9); color: var(--landing-text-secondary); font-size: var(--font-size-2xl); line-height: var(--line-height-relaxed); }
.typing::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 3px; background: var(--landing-text-secondary); vertical-align: -.12em; }
@media (prefers-reduced-motion: no-preference) { .typing::after { animation: caret 1s steps(2, end) infinite; } }
@keyframes caret { 50% { opacity: 0; } }
.review-card .buttons { display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); margin-top: var(--space-10); }

/* ───────────────────────── 10. Stats ───────────────────────── */
.stats { padding: var(--landing-section-breathing) var(--space-inset-xl); background: var(--landing-bg); }
.stats .reveal, .comparison .reveal { max-width: var(--landing-container); margin: 0 auto; }
.heading { text-align: center; }
.heading h2 { margin-top: var(--space-8); font-size: clamp(36px, 5vw, var(--landing-display-md)); line-height: .98; letter-spacing: -.045em; font-weight: var(--font-weight-black); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-gap-lg); margin-top: var(--space-11); }
.grid article { min-height: 180px; display: grid; align-content: end; border: 1px solid var(--landing-border); border-radius: 20px; padding: var(--space-9); background: var(--landing-surface); }
.grid strong { font-size: clamp(38px, 5vw, 58px); line-height: 1; letter-spacing: -.045em; font-weight: var(--font-weight-black); font-variant-numeric: tabular-nums; }
.grid span { margin-top: var(--space-6); color: var(--landing-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; }
.caveat { max-width: 640px; margin: var(--space-9) auto 0; color: var(--landing-text-secondary); font-size: var(--font-size-lg); font-style: italic; text-align: center; }

/* ───────────────────────── 11. Comparison ───────────────────────── */
.comparison { padding: var(--landing-section-dense) var(--space-inset-xl); background: var(--landing-surface); }
.table-wrap { margin-top: var(--space-11); overflow-x: auto; border: 1px solid var(--landing-border); border-radius: 22px; background: var(--landing-bg); }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: var(--space-8) var(--space-9); border-bottom: 1px solid var(--landing-border); color: var(--landing-text-secondary); text-align: left; font-size: var(--font-size-lg); }
thead th { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--font-weight-medium); }
tbody th { color: var(--landing-text-primary); font-weight: var(--font-weight-medium); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.eox { border-left: 1px solid rgba(255, 255, 255, .1); border-right: 1px solid rgba(255, 255, 255, .1); color: var(--landing-text-primary); background: rgba(255, 255, 255, .025); }
thead .eox { color: var(--landing-accent); }
.yes::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 1.5px; background: var(--landing-accent); margin-right: var(--space-4); vertical-align: 2px; }
.note { margin-top: var(--space-8); color: var(--landing-text-secondary); font-size: var(--font-size-lg); font-style: italic; text-align: center; }
.note a { color: var(--landing-text-primary); text-underline-offset: 3px; }

/* ───────────────────────── 12. Marquee ───────────────────────── */
.marquee {
  overflow: hidden; padding: var(--space-11) 0; border-top: 1px solid var(--landing-border); border-bottom: 1px solid var(--landing-border); background: var(--landing-bg);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee .line { overflow: hidden; }
.marquee .line + .line { margin-top: var(--space-7); }
.track { display: flex; width: max-content; }
.group { display: flex; align-items: center; flex-shrink: 0; }
.group span { white-space: nowrap; padding: 0 var(--space-8); color: var(--landing-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .08em; opacity: .5; }
.group span::before { content: '·'; margin-right: var(--space-8); color: var(--landing-text-tertiary); }
.soft .group span { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .track.left { will-change: transform; animation: scroll-left 30s linear infinite; }
  .track.right { will-change: transform; transform: translate(-50%); animation: scroll-right 42s linear infinite; }
}
@keyframes scroll-left { to { transform: translate(-50%); } }
@keyframes scroll-right { to { transform: translate(0); } }

/* ───────────────────────── 13. Final CTA + footer ───────────────────────── */
.final { padding: var(--landing-section-breathing) var(--space-inset-xl) var(--space-10); background: var(--landing-bg); }
.final .reveal { max-width: var(--landing-container); margin: 0 auto; }
.cta { position: relative; overflow: hidden; border: 1px solid var(--landing-border); border-radius: 28px; padding: clamp(var(--space-12), 8vw, var(--landing-section-dense)) var(--space-10); background: var(--landing-surface); text-align: center; }
.cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 50% 0%, var(--landing-accent-soft), transparent 70%); }
.cta > * { position: relative; }
.cta h2 { font-size: clamp(48px, 8vw, var(--landing-display-lg)); line-height: .95; letter-spacing: -.055em; font-weight: var(--font-weight-black); }
.cta p { max-width: 560px; margin: var(--space-8) auto 0; color: var(--landing-text-secondary); font-size: var(--font-size-2xl); line-height: var(--line-height-snug); }
.final footer { display: flex; justify-content: space-between; gap: var(--space-gap-lg); margin-top: var(--space-11); color: var(--landing-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-sm); }
.landing-footer { border-top: 1px solid var(--landing-border); padding: var(--space-10) var(--space-inset-xl); }
.footer-inner { max-width: var(--landing-container); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.footer-copy { font-size: var(--font-size-xs); color: var(--landing-text-secondary); }
.footer-links { display: flex; align-items: center; gap: var(--space-3); }
.footer-links a { font-size: var(--font-size-xs); color: var(--landing-text-secondary); text-decoration: none; transition: color var(--landing-duration) var(--landing-ease); }
.footer-links a:hover { color: var(--landing-text-primary); }
.footer-links .sep { color: var(--landing-text-tertiary); font-size: var(--font-size-2xs); }

/* ───────────────────────── 14. Breakpoints (collapsed to 1024 / 880 / 768 / 640 / 560, spec §16.5) ───────────────────────── */
@media (max-width: 1024px) {
  .workspace { grid-template-columns: 1fr; }
  .rail { display: none; }
  .proposal-rail { border-left: 0; border-top: 1px solid var(--landing-border); }
}
@media (max-width: 880px) {
  .row { grid-template-columns: 1fr; padding: var(--landing-mobile-section) var(--space-inset-xl); }
  .row.visual-left .copy, .row.visual-left .visual { order: initial; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero { padding: var(--landing-mobile-section) var(--space-inset-xl); }
  .prehead { margin-bottom: var(--space-10); }
  .demo, .audience, .comparison { padding: var(--landing-mobile-section) var(--space-inset-xl); }
  .philosophy, .stats { padding: var(--landing-mobile-section) var(--space-inset-xl); }
  .final { padding: var(--landing-mobile-section) var(--space-inset-xl) var(--space-10); }
  .chrome { grid-template-columns: 10px 10px 10px; }
  .url { grid-column: 1 / -1; justify-self: stretch; margin-top: var(--space-4); }
  .rail, .document, .proposal-rail { padding: var(--space-8); }
  .tabs { display: flex; max-width: 420px; }
  .split { grid-template-columns: 1fr; }
  .split .panel[hidden] { display: none; }
  .review-card .meta { margin-right: 0; padding-top: var(--space-11); }
  .tiers { grid-template-columns: 1fr; }
  .tiers .arrow { justify-self: center; width: 56px; transform: rotate(90deg); }
  .pixel-grid { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .2) 1px, transparent 1.5px); background-size: 20px 20px; }
  .radar { opacity: .3; } .radar i:nth-child(3), .radar .sweep { display: none; }
}
@media (max-width: 640px) {
  .nav-inner { flex-direction: column; align-items: flex-start; }
  .nav-links { width: 100%; justify-content: space-between; gap: var(--space-gap-md); }
  .actions, .final footer { flex-direction: column; align-items: stretch; text-align: center; }
  .states { flex-direction: column; align-items: stretch; border-radius: 18px; }
  .funnel-row { grid-template-columns: 92px minmax(0, 1fr) 44px; gap: var(--space-6); }
  .found li { grid-template-columns: 64px minmax(0, 1fr); } .found .meta { display: none; }
}
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .skip-link, .nav-links a, .footer-links a, .button { transition: none; } }