@charset "UTF-8";

:root {
  --landing-shell-pad: clamp(14px, 4vw, 28px);
  --landing-section-gap: clamp(18px, 4vw, 40px);
  --landing-max-width: 1440px;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.container {
  width: min(calc(100% - (var(--landing-shell-pad) * 2)), var(--landing-max-width));
}

.section {
  padding: 64px 0;
}

.nav-inner {
  min-height: 68px;
  gap: 12px;
}

.nav-links,
.nav-cta-desktop {
  display: none;
}

.nav-mobile-toggle {
  display: inline-flex;
}

.nav-mobile-panel:not([hidden]),
.nav-mobile-backdrop:not([hidden]) {
  display: block;
}

.hero-grid,
.grid-2,
.grid-3,
.grid-4,
.stats-row,
.demo-inline-fields,
.preview-main,
.footer-grid,
.final-cta-card {
  grid-template-columns: 1fr;
}

.hero {
  padding: 72px 0 40px;
}

.hero-actions,
.preview-top-badges,
.pricing-value-legend,
.footer-badges,
.hero-metrics {
  gap: 10px;
}

.hero-flow,
.hero-scene-metrics,
.workflow-band-grid {
  grid-template-columns: 1fr;
}

.hero-title {
  font-size: clamp(38px, 12vw, 54px);
  line-height: 1.16;
}

.hero-network-overlay {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 96px 14px 14px;
}

.hero-network-scan {
  min-width: 0;
  max-width: min(100%, 300px);
}

.hero-scene-tab,
.hero-scene-status,
.demo-cache-pill {
  white-space: normal;
}

.preview-pin,
.preview-sticky,
.preview-main,
.preview-side,
.demo-controls,
.demo-output,
.pricing-card,
.pricing-compare,
.pricing-value,
.footer-cta {
  min-width: 0;
}

.preview-sticky {
  min-height: auto;
}

.preview-side {
  grid-template-columns: 1fr;
}

.pricing-compare-table-wrap {
  overflow-x: auto;
}

.pricing-value-board-head,
.pricing-value-board-plans,
.pricing-value-row {
  grid-template-columns: 1fr;
}

.pricing-value-board-kicker--score,
.pricing-value-row-score {
  text-align: left;
}

.pricing-value-board-pill-row {
  grid-column: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-analysis-grid,
.pricing-compare-meta,
.pricing-value-stack {
  grid-template-columns: 1fr;
}

.pricing-panel-head {
  gap: 12px;
}

.pricing-plan-pills {
  gap: 8px;
}

.pricing-plan-pill,
.pricing-value-stat,
.pricing-compare-stat {
  min-width: 0;
}

.footer-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.nav-links a,
.hero-title,
.hero-sub,
.preview-top h2,
.preview-side-card h3,
.pricing-card h3,
.footer-col h4,
.pricing-tag,
.preview-top-badge,
.preview-metric-pill {
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 320px) {
  body {
    font-size: 14px;
  }

  .hero-title {
    font-size: clamp(32px, 12vw, 42px);
  }
}

@media (min-width: 768px) {
  .section {
    padding: 78px 0;
  }

  .hero-grid,
  .preview-main,
  .final-cta-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-flow,
  .workflow-band-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-compare-meta,
  .pricing-value-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }

  .nav-cta-desktop {
    display: inline-flex;
  }

  .nav-mobile-toggle,
  .nav-mobile-panel,
  .nav-mobile-backdrop {
    display: none !important;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  }

  .grid-2,
  .preview-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3,
  .stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pricing-compare {
    min-height: 100%;
  }

  .pricing-value {
    position: relative;
    top: auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-grid,
  .preview-main,
  .final-cta-card,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .hero-flow,
  .workflow-band-grid {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-title {
    font-size: clamp(34px, 6vw, 46px);
  }

  .preview-top h2,
  .pricing-card h3,
  .footer-col h4 {
    font-size: clamp(22px, 3.2vw, 28px);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-block: 12px;
  }

  .nav-links {
    flex-wrap: wrap;
    gap: 6px;
  }

  .nav-links a {
    padding: 7px 10px;
    font-size: 13px;
  }

  .hero-grid,
  .preview-main {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  }

  .grid-4,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-title {
    font-size: clamp(40px, 4.6vw, 56px);
  }
}

@media (min-width: 1280px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .preview-main {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  }
}

@media (min-width: 1536px) {
  .container {
    width: min(calc(100% - 80px), var(--landing-max-width));
  }
}