/**
 * Blekline marketing site — shared redesign styles
 * Load in Webflow Site Head: /marketing/marketing-redesign-webflow.css?v=7
 */

:root {
  --bl-bg: #0a0a0b;
  --bl-surface: #141416;
  --bl-border: #2a2a2e;
  --bl-text: #f4f4f5;
  --bl-muted: #a1a1aa;
  --bl-dim: #71717a;
  --bl-accent: #e75827;
  --bl-success: #22c55e;
  --bl-section-pad: 120px;
  --bl-section-pad-mobile: 64px;
}

/* Comparison table (homepage §6 stack-compare) */
.bl-stack-compare {
  width: 100%;
  border-collapse: collapse;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  color: var(--bl-text);
}
.bl-stack-compare th,
.bl-stack-compare td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--bl-border);
  vertical-align: top;
}
.bl-stack-compare th {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bl-dim);
  background: var(--bl-bg);
}
.bl-stack-compare th[scope="row"] {
  color: var(--bl-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
}
.bl-stack-compare tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.bl-stack-compare.is-revealed tbody tr {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .bl-stack-compare tbody tr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Three boundaries cards (homepage §4) */
.bl-boundary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .bl-boundary-cards {
    grid-template-columns: 1fr;
  }
}
.bl-boundary-card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: 12px;
  padding: 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s;
}
.bl-boundary-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.bl-boundary-card:hover {
  border-color: rgba(231, 88, 39, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .bl-boundary-card {
    opacity: 1;
    transform: none;
    transition: border-color 0.3s;
  }
}

/* Nav overlays — collapsed until JS sets data-nav-open (inline display wins when open) */
[megamenu]:not([data-nav-open="true"]),
[data-megamenu]:not([data-nav-open="true"]),
[cta-box]:not([data-nav-open="true"]),
[data-cta-box]:not([data-nav-open="true"]) {
  display: none;
  pointer-events: none;
}

[megamenu][data-nav-open="true"],
[data-megamenu][data-nav-open="true"],
[cta-box][data-nav-open="true"],
[data-cta-box][data-nav-open="true"] {
  pointer-events: auto;
}

/* Draggable marquee — hide scrollbar, keep drag on all breakpoints */
[data-marquee] {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
[data-marquee]::-webkit-scrollbar {
  display: none;
}

.bl-embed-lazy {
  min-height: 200px;
  background: var(--bl-bg);
}
.bl-embed-lazy[data-loaded="true"] {
  min-height: auto;
}

/* CTA data attribute styling hook (optional) */
[data-blekline-cta] {
  cursor: pointer;
}

/* Hero gradient mesh (CSS-only, no WebGL) */
.bl-hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(231, 88, 39, 0.08), transparent),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(99, 102, 241, 0.06), transparent);
  z-index: 0;
}

/* Proof rail badges */
.bl-proof-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.bl-proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--bl-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--bl-muted);
  background: var(--bl-surface);
}

/* Section spacing utility for Webflow custom classes */
.bl-section {
  padding-top: var(--bl-section-pad);
  padding-bottom: var(--bl-section-pad);
}
@media (max-width: 768px) {
  .bl-section {
    padding-top: var(--bl-section-pad-mobile);
    padding-bottom: var(--bl-section-pad-mobile);
  }
}

/* Focus rings (WCAG) */
.bl-focus-ring:focus-visible {
  outline: 2px solid var(--bl-accent);
  outline-offset: 2px;
}

/* Benchmark page: sibling embed spacing fallback (v8) */
.bl-bench-root + .w-embed,
.w-embed + .w-embed .bl-bench-root {
  margin-top: 48px;
}

/* Hide duplicate footer diagram symbol */
.bl-footer-minimal .bl-diagram-symbol {
  display: none !important;
}