/*
  RAVID Landing Final - CSS Consolidation & Safe Canvas Lock
  Purpose:
  - Replace stacked landing flagship CSS v1-v9 with one stable stylesheet.
  - Keep the outer white shell wide and premium.
  - Keep the blue hero card fully visible inside the safe canvas.
  Scope: CSS-only. No JS runtime, no app.js, no backend, no database changes.
*/

body.ravid-premium-theme {
  --ravid-page-gutter: clamp(18px, 2.2vw, 38px);
  --ravid-stage-max: 1880px;
  --ravid-shell-max: 1660px;
  --ravid-content-max: 1510px;
  --ravid-shell-pad: clamp(18px, 1.8vw, 30px);
  --ravid-card-border: rgba(105, 155, 235, 0.25);
  --ravid-soft-shadow: 0 30px 90px rgba(37, 99, 235, 0.13);
}

body.ravid-premium-theme .app-bar {
  width: min(var(--ravid-stage-max), calc(100vw - var(--ravid-page-gutter))) !important;
  max-width: min(var(--ravid-stage-max), calc(100vw - var(--ravid-page-gutter))) !important;
  margin-inline: auto !important;
}

body.ravid-premium-theme .main-container {
  width: min(var(--ravid-stage-max), calc(100vw - var(--ravid-page-gutter))) !important;
  max-width: min(var(--ravid-stage-max), calc(100vw - var(--ravid-page-gutter))) !important;
  margin-inline: auto !important;
  padding-inline: clamp(8px, 1vw, 16px) !important;
  box-sizing: border-box !important;
}

#section-landing.landing-page {
  width: min(var(--ravid-shell-max), 100%) !important;
  max-width: min(var(--ravid-shell-max), 100%) !important;
  margin-inline: auto !important;
  padding: var(--ravid-shell-pad) !important;
  box-sizing: border-box !important;
  border-radius: clamp(30px, 2.4vw, 44px) !important;
  overflow: hidden !important;
}

#section-landing .hero-grid,
#section-landing .feature-section,
#section-landing .ravid-ecosystem-section,
#section-landing .ravid-cta-section,
.ravid-footer-section {
  width: min(var(--ravid-content-max), 100%) !important;
  max-width: min(var(--ravid-content-max), 100%) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* The key fix: a wide canvas, but safe grid columns that cannot push the blue panel outside. */
#section-landing .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.66fr) !important;
  gap: clamp(28px, 2.8vw, 48px) !important;
  align-items: center !important;
  padding: clamp(46px, 3.6vw, 62px) clamp(48px, 3.6vw, 70px) !important;
  min-height: clamp(520px, 52vh, 650px) !important;
  border-radius: clamp(26px, 2vw, 36px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#section-landing .hero-copy {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 820px !important;
}

#section-landing .hero-copy h1 {
  max-width: 820px !important;
  font-size: clamp(50px, 3.75vw, 70px) !important;
  line-height: 1.035 !important;
  letter-spacing: -0.058em !important;
  margin: 16px 0 18px !important;
  text-wrap: balance !important;
}

#section-landing .hero-subtitle {
  max-width: 770px !important;
  font-size: clamp(14px, 0.9vw, 15.5px) !important;
  line-height: 1.65 !important;
}

#section-landing .hero-highlights {
  width: 100% !important;
  max-width: 780px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 22px 0 16px !important;
}

#section-landing .hero-mini-stat {
  min-height: 78px !important;
  padding: 14px 17px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

#section-landing .hero-mini-stat strong {
  font-size: 13.2px !important;
  line-height: 1.18 !important;
}

#section-landing .hero-mini-stat span {
  font-size: 11.7px !important;
  line-height: 1.4 !important;
}

#section-landing .hero-actions {
  gap: 14px !important;
  flex-wrap: wrap !important;
}

#section-landing .hero-actions .btn {
  min-height: 46px !important;
  min-width: 182px !important;
  padding-inline: 24px !important;
}

#section-landing .hero-chips {
  max-width: 820px !important;
  gap: 9px !important;
}

/* Blue visual panel: never larger than its grid track; never clipped off screen. */
#section-landing .hero-panel {
  width: clamp(360px, 28vw, 485px) !important;
  max-width: 100% !important;
  min-height: clamp(380px, 36vw, 455px) !important;
  padding: clamp(20px, 1.45vw, 24px) !important;
  justify-self: center !important;
  align-self: center !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#section-landing .hero-logo-stage {
  min-height: clamp(205px, 15.5vw, 250px) !important;
  margin: 15px 0 !important;
}

#section-landing .hero-logo-figure {
  width: min(350px, 88%) !important;
  height: clamp(168px, 12vw, 194px) !important;
}

#section-landing .hero-logo-image {
  width: min(188px, 70%) !important;
}

#section-landing .hero-logo-caption {
  padding: 17px 20px !important;
}

/* Role cards keep their healthy horizontal text. */
#section-landing .feature-section {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 22px !important;
}

#section-landing .feature-card {
  min-height: 126px !important;
  padding: 22px 26px !important;
  border-radius: 23px !important;
  box-sizing: border-box !important;
}

#section-landing .feature-card p {
  max-width: 390px !important;
  line-height: 1.55 !important;
}

/* Ecosystem section: less skinny right cards, but still balanced. */
#section-landing .ravid-ecosystem-section {
  grid-template-columns: minmax(0, 1.08fr) minmax(560px, 0.92fr) !important;
  gap: 34px !important;
  padding: 36px 40px !important;
  box-sizing: border-box !important;
}

#section-landing .ecosystem-heading h2 {
  max-width: 790px !important;
  font-size: clamp(32px, 2.28vw, 40px) !important;
  line-height: 1.12 !important;
}

#section-landing .ecosystem-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  gap: 18px !important;
}

#section-landing .ecosystem-card {
  min-height: 150px !important;
  padding: 19px 20px !important;
  border-radius: 21px !important;
}

#section-landing .ecosystem-card p {
  font-size: 12px !important;
  line-height: 1.48 !important;
}

#section-landing .ravid-cta-section {
  min-height: 154px !important;
  padding: 30px 42px !important;
  box-sizing: border-box !important;
}

#section-landing .ravid-cta-section h2 {
  max-width: 900px !important;
  font-size: clamp(29px, 2.12vw, 36px) !important;
  line-height: 1.13 !important;
}

/* Current laptop/browser size guard: keep panel visible. */
@media (max-width: 1680px) {
  body.ravid-premium-theme {
    --ravid-stage-max: 1660px;
    --ravid-shell-max: 1480px;
    --ravid-content-max: 1320px;
    --ravid-page-gutter: clamp(16px, 2vw, 32px);
  }

  #section-landing .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.56fr) !important;
    gap: clamp(26px, 2.4vw, 38px) !important;
    padding-inline: clamp(34px, 3vw, 50px) !important;
  }

  #section-landing .hero-copy,
  #section-landing .hero-copy h1 {
    max-width: 760px !important;
  }

  #section-landing .hero-copy h1 {
    font-size: clamp(48px, 3.9vw, 62px) !important;
  }

  #section-landing .hero-highlights {
    max-width: 760px !important;
  }

  #section-landing .hero-panel {
    width: clamp(340px, 28vw, 430px) !important;
    min-height: clamp(365px, 34vw, 410px) !important;
  }

  #section-landing .ravid-ecosystem-section {
    grid-template-columns: minmax(0, 1fr) minmax(500px, 0.9fr) !important;
  }
}

@media (max-width: 1280px) {
  body.ravid-premium-theme {
    --ravid-page-gutter: 22px;
  }

  #section-landing .hero-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 28px !important;
  }

  #section-landing .hero-copy,
  #section-landing .hero-copy h1,
  #section-landing .hero-subtitle,
  #section-landing .hero-highlights,
  #section-landing .hero-chips {
    max-width: none !important;
  }

  #section-landing .hero-copy h1 {
    font-size: clamp(40px, 6vw, 56px) !important;
  }

  #section-landing .hero-panel {
    justify-self: start !important;
  }

  #section-landing .feature-section,
  #section-landing .ravid-ecosystem-section,
  #section-landing .ecosystem-grid,
  #section-landing .hero-highlights {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.ravid-premium-theme {
    --ravid-page-gutter: 12px;
    --ravid-shell-pad: 14px;
  }

  #section-landing .hero-grid {
    padding: 22px 16px !important;
  }

  #section-landing .hero-copy h1 {
    font-size: clamp(34px, 10vw, 42px) !important;
  }

  #section-landing .hero-panel {
    width: 100% !important;
  }
}