/* Scoped additions for integrated navigation and the public product guide. */
.site-header nav{gap:clamp(10px,1.4vw,24px)}
.site-footer nav{flex-wrap:wrap}
.site-footer .socials[hidden]{display:none}
.public-guide-note,.public-guide-result{grid-column:1/-1;color:#223b55}
.public-guide-note{font-size:12px}
.public-guide-result p{margin-bottom:12px}
.public-guide-result a{display:inline-block;min-height:32px;color:#0648a8;text-decoration:underline;font-weight:600}

/* Public pages share one reading measure and a quieter treatment for actions. */
.hero-copy h1, .demo-intro h1, .section-heading h2 { text-wrap: balance; }
.hero-copy .lead, .demo-intro .lead { max-width: 52ch; line-height: 1.65; }
.site-header .primary-button, .hero-actions .primary-button, .pricing-card .primary-button {
  border-radius: 8px;
  box-shadow: none;
}
.pricing-card { border-radius: 12px; }
.site-footer nav :is(a, button) { line-height: 1.5; }
@media (max-width: 760px) {
  .home-hero .home-hero-grid, .page-hero .page-hero-inner, .demo-section .demo-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }
  .home-hero .hero-copy { order: 0; padding: 36px 0 0; }
  .home-hero .krys-stage { order: 1; margin-top: 20px; }
  .home-hero .krys-stage > img { height: clamp(255px, 75vw, 400px); top: 12px; }
  .home-hero .avatar-card { margin-top: -24px; padding: 20px; }
  .page-hero .hero-copy, .demo-section .demo-intro { padding-block: 36px 12px; }
  .home-hero h1, .page-hero h1, .demo-intro h1 {
    font-size: clamp(2.55rem, 10vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
  }
  .page-hero .page-hero-visual { min-height: clamp(170px, 52vw, 275px); }
  .hero-actions { gap: 12px 20px; margin-top: 22px; }
  .site-header nav { max-height: calc(100dvh - 80px); overflow-y: auto; }
  .site-header nav :is(button,a), .site-footer nav :is(button,a) { min-height: 44px; }
  .pricing-card, .chat-panel { padding: clamp(18px, 5vw, 28px); }
  .shell :is(input,textarea,select) { min-width: 0; font-size: 16px; }
  .site-footer .footer-inner { gap: 20px; }
  .footer-inner nav { gap: 2px 18px; }
}