/* MergenKit page-specific layout */

/* Animation strip */
.hero-strip {
  position: relative;
  height: clamp(220px, 28vh, 300px);
  background: var(--app-bg);
  border-bottom: 0.5px solid var(--border);
  overflow: hidden;
}

.hero-strip svg {
  width: 100%;
  height: 100%;
  display: block;
}

.strip-caption {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-6);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 2;
}

.strip-caption-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--brand-red);
  vertical-align: middle;
  margin-right: 6px;
}

/* Hero block */
.hero {
  padding: var(--space-12) 0 var(--space-10);
}

.hero h1 {
  max-width: 900px;
  margin-bottom: var(--space-5);
}

.hero-lede {
  font-size: var(--fs-body-lg);
  color: var(--secondary);
  max-width: 620px;
  margin-bottom: var(--space-8);
  line-height: var(--lh-normal);
}

.hero-cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Section wrapper */
.section { padding: var(--space-12) 0; }
.section-tight { padding: var(--space-10) 0; }
.section-bordered { border-top: 0.5px solid var(--border); }
.section-alt { background: var(--surface-alt); border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); }

.section-heading {
  margin-bottom: var(--space-8);
  max-width: 720px;
}

.section-heading h2 { margin-bottom: var(--space-3); }
.section-heading p { color: var(--secondary); font-size: var(--fs-body); }

/* Three-column pillar grid */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 880px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* Built-for tiles */
.builtfor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.builtfor-tile {
  background: var(--surface);
  border: 0.5px solid var(--border);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--fs-small);
  color: var(--ink);
  font-weight: 500;
}

.builtfor-tile small {
  display: block;
  font-size: var(--fs-small);
  color: var(--secondary);
  font-weight: 400;
  margin-top: 4px;
  line-height: var(--lh-normal);
}

@media (max-width: 880px) {
  .builtfor-grid { grid-template-columns: 1fr; }
}

/* Standards strip */
.standards-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-10);
  align-items: start;
}

.standards-grid h2 { margin-bottom: var(--space-2); }
.standards-grid .lead { font-size: var(--fs-small); color: var(--secondary); }

.standards-body p {
  font-size: var(--fs-small);
  color: var(--secondary);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-4);
}

@media (max-width: 880px) {
  .standards-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Final CTA */
.final-cta {
  text-align: center;
  padding: var(--space-16) 0;
  border-top: 0.5px solid var(--border);
}

.final-cta h2 { margin-bottom: var(--space-3); }
.final-cta p {
  font-size: var(--fs-body);
  color: var(--secondary);
  margin: 0 auto var(--space-6);
  max-width: 480px;
}

/* Page header (non-home) */
.page-header {
  padding: var(--space-16) 0 var(--space-10);
  border-bottom: 0.5px solid var(--border);
}

.page-header .eyebrow { margin-bottom: var(--space-4); }
.page-header h1 { max-width: 820px; margin-bottom: var(--space-5); }

.page-header-lede {
  font-size: var(--fs-body-lg);
  color: var(--secondary);
  max-width: 640px;
  line-height: var(--lh-normal);
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span[aria-current="page"] { color: var(--ink); }

/* Product workflow diagram */
.workflow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  position: relative;
  margin-bottom: var(--space-10);
}

.workflow-node {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.workflow-step {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.5px;
}

.workflow-node h3 { font-size: 15px; letter-spacing: -0.1px; }
.workflow-node p { font-size: var(--fs-xs); color: var(--secondary); line-height: var(--lh-normal); margin: 0; }

.workflow-icon {
  width: 28px;
  height: 28px;
  color: var(--wine);
}

.workflow-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }

@media (max-width: 980px) {
  .workflow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .workflow { grid-template-columns: 1fr; }
}

/* Module cards (product page) */
.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.module-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.module-card .module-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--wine);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}

.module-card h3 { font-size: 22px; letter-spacing: -0.3px; margin-bottom: var(--space-2); }
.module-card p { font-size: var(--fs-small); color: var(--secondary); line-height: var(--lh-relaxed); }
.module-card ul { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.module-card ul li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-small);
  color: var(--ink);
}
.module-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1.5px;
  background: var(--wine);
}

@media (max-width: 980px) {
  .modules { grid-template-columns: 1fr; }
}

/* Two-column prose layout for Science / About */
.prose-two-col {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-10);
  align-items: start;
}

.prose-two-col h2 {
  font-size: 22px;
  letter-spacing: -0.4px;
  position: sticky;
  top: 88px;
}

.prose-two-col .prose-body p {
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.prose-two-col .prose-body p.secondary { color: var(--secondary); }

@media (max-width: 980px) {
  .prose-two-col { grid-template-columns: 1fr; gap: var(--space-5); }
  .prose-two-col h2 { position: static; }
}

/* Reference list */
.refs { margin-top: var(--space-5); display: grid; gap: var(--space-3); }

.ref-item {
  padding: var(--space-4);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.ref-item h4 { font-size: var(--fs-body); margin-bottom: var(--space-1); }
.ref-item p { font-size: var(--fs-small); color: var(--secondary); margin-bottom: var(--space-2); }
.ref-item a { font-size: var(--fs-small); }

/* Founder block (About) */
.founder {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-top: var(--space-5);
}

.founder .role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--wine);
  letter-spacing: 0.5px;
}

.founder h3 {
  font-size: 24px;
  letter-spacing: -0.3px;
  margin: var(--space-2) 0;
}

.founder .specialism { color: var(--secondary); font-size: var(--fs-small); margin-bottom: var(--space-4); }
.founder p { font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-relaxed); margin-bottom: var(--space-3); }

.founder .contact-line { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--secondary); margin-top: var(--space-4); }
.founder .contact-line a { color: var(--wine); }

/* Demo request page specifics */
.demo-explainer {
  padding-block: var(--space-10);
  border-bottom: 0.5px solid var(--border);
}

.demo-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-10);
  padding-block: var(--space-12);
}

.demo-grid h2 { margin-bottom: var(--space-3); }

.next-steps { list-style: none; padding: 0; margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.next-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
}

.next-steps .step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--wine);
  font-weight: 500;
  min-width: 24px;
}

.next-steps strong { display: block; font-size: var(--fs-small); color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.next-steps span { font-size: var(--fs-small); color: var(--secondary); line-height: var(--lh-normal); }

.form-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.form-card h2 { font-size: 22px; margin-bottom: var(--space-2); }
.form-card .form-intro { font-size: var(--fs-small); color: var(--secondary); margin-bottom: var(--space-6); }

@media (max-width: 980px) {
  .demo-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Legal pages */
.legal-content { padding-block: var(--space-10); }
.legal-content h2 { font-size: 20px; margin: var(--space-6) 0 var(--space-3); letter-spacing: -0.2px; }
.legal-content p { font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.legal-content ul { list-style: disc; padding-left: var(--space-5); margin-bottom: var(--space-4); }
.legal-content ul li { font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-relaxed); margin-bottom: var(--space-2); }
.legal-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-8); }

/* Latent space animation styles (referenced from JS-injected nodes) */
@property --ox { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --oy { syntax: '<number>'; inherits: false; initial-value: 0; }

.lk-dot { fill: var(--ink); animation: lk-settle 8s ease-in-out infinite both; }
.lk-knn { stroke: var(--wine); stroke-width: 0.5; stroke-opacity: 0; fill: none; animation: lk-knn-pulse 8s ease-in-out infinite both; }
.lk-highlight-wrap { animation: lk-settle 8s ease-in-out infinite both; }
.lk-highlight-dot { fill: var(--brand-red); opacity: 0; transform-box: fill-box; transform-origin: center; animation: lk-pulse-fill 8s ease-in-out infinite both; }
.lk-highlight-ring { fill: none; stroke: var(--brand-red); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: lk-pulse-ring 8s ease-in-out infinite both; }

@keyframes lk-settle {
  0%, 100% { transform: translate(calc(var(--ox) * 1px), calc(var(--oy) * 1px)); }
  50%, 75% { transform: translate(0, 0); }
}
@keyframes lk-knn-pulse {
  0%, 35% { stroke-opacity: 0; }
  50%, 70% { stroke-opacity: var(--peak, 0.3); }
  85%, 100% { stroke-opacity: 0; }
}
@keyframes lk-pulse-fill {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  2% { opacity: 1; transform: scale(1.3); }
  6% { opacity: 0.85; transform: scale(1.0); }
  14% { opacity: 0; transform: scale(0.9); }
}
@keyframes lk-pulse-ring {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  3% { opacity: 0.7; transform: scale(1.4); }
  10% { opacity: 0; transform: scale(2.4); }
}

@media (prefers-reduced-motion: reduce) {
  .lk-dot, .lk-knn, .lk-highlight-wrap, .lk-highlight-dot, .lk-highlight-ring { animation: none !important; }
  .lk-highlight-dot { opacity: 1; transform: scale(1); }
  .lk-knn { stroke-opacity: 0.25; }
}