/* Fluid page space; keep approved art, copy, and animation unchanged. */
.home-preview {
  --site-gutter: clamp(20px, 3vw, 72px);
  --site-max: 1920px;
  --reading-max: 68ch;
}

.home-preview .shell {
  width: min(calc(100% - 2 * var(--site-gutter)), var(--site-max));
  margin-inline: auto;
}

.home-preview .hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 88px);
}

.home-preview .hero-copy,
.home-preview .chat-demo-wrap,
.home-preview .shell > * {
  min-width: 0;
}

.home-preview .hero-lede {
  max-width: var(--reading-max);
}

.home-preview .hero-actions { flex-wrap: wrap; }

.home-preview .how-card h3 { white-space: normal; text-wrap: balance; }
.home-preview .closing-cta .green-button { flex-shrink: 0; white-space: nowrap; }
.home-preview .homepage-rules-explainer p { flex-wrap: wrap; }

/* Keep the existing comments visible. Use one reserved side lane when two
   would squeeze the page, and the original two sides on ultrawide displays. */
.home-preview .page-feedback-layer { display: block; }
.home-preview .floating-feedback { width: clamp(220px, 9vw, 300px); }

@media (min-width: 1280px) and (min-height: 700px) {
  /* Hide inactive cards immediately when a static grid becomes floating.
     The active card still fades in using the existing low-cost animation. */
  .home-preview .floating-feedback { visibility: hidden; }
  .home-preview .floating-feedback[data-homepage-feedback-active="true"] { visibility: visible; }
}

@media (min-width: 1280px) and (max-width: 2559px) and (min-height: 700px) {
  .home-preview { --feedback-lane: 252px; }

  .home-preview main > .shell,
  .home-preview .site-footer.shell {
    width: min(calc(100% - 2 * var(--site-gutter) - var(--feedback-lane)), var(--site-max));
    margin-left: var(--site-gutter);
    margin-right: auto;
  }

  .home-preview .floating-feedback {
    width: 220px;
    left: auto !important;
    right: var(--site-gutter) !important;
    top: 8% !important;
  }

  /* Adjacent cards can briefly crossfade. Alternate two separate positions
     so the existing handoff never layers one quotation over another. */
  .home-preview .floating-feedback:nth-child(even) { top: 56% !important; }
}

/* On small or short windows, show the same comments in the page flow. They
   remain readable without taking space away from the content or controls. */
@media (max-width: 1279px), (max-height: 699px) {
  .home-preview .page-feedback-layer {
    position: relative;
    inset: auto;
    width: min(calc(100% - 2 * var(--site-gutter)), var(--site-max));
    margin: 0 auto 48px;
    padding: 24px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
    contain: layout style;
  }

  .home-preview .page-feedback-layer .floating-feedback {
    position: relative;
    inset: auto !important;
    width: auto;
    min-width: 0;
    opacity: .85 !important;
    transition: none !important;
  }
}

@media (max-width: 1000px) {
  .home-preview .page-feedback-layer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .home-preview .page-feedback-layer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .home-preview .hero { grid-template-columns: minmax(0, 1fr); }
  .home-preview .hero-copy { max-width: 760px; }
  .home-preview .hero-wordmark { width: 100%; margin-inline: 0; }
}

@media (max-width: 420px) {
  .home-preview .site-header .brand-wordmark { width: 90px; }
}