.hero { padding-top: var(--s-4); }
.hero h1 { font-size: clamp(24px, 6.4vw, 28px); }
.hero .lede { font-size: clamp(16px, 4.2vw, 17px); line-height: 1.5; margin-top: var(--s-3); }
.hero .hero-visual { margin-top: var(--s-4); }
.hero-chat-card .hdemo { height: clamp(340px, calc(100vh - 330px), 425px); height: clamp(340px, calc(100svh - 330px), 425px); }
.hero-chat-card .hdemo-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hero .trust-mini { grid-template-columns: minmax(0, max-content); }
.hero .trust-mini li { font-size: 15px; padding-left: 26px; white-space: nowrap; }
.hero .trust-mini li::before { width: 18px; height: 18px; top: 1px; }

@media (max-width: 459px) {
  .hero h1 { max-width: 7.5em; }
}

@media (min-width: 480px) {
  .hero .trust-mini { grid-template-columns: repeat(2, minmax(0, max-content)); }
  .hero .trust-mini li { font-size: clamp(14px, 2.9vw, 15px); }
}

@media (min-width: 768px) {
  .hero { padding-top: clamp(32px, 5vw, 30px); }
  .hero h1 { font-size: clamp(28px, 4.0vw, 51px); }
  .hero .lede { font-size: clamp(17px, 2.2vw, 20px); line-height: inherit; margin-top: var(--s-5); }
  .hero .hero-visual { margin-top: 0; }
  .hero-chat-card .hdemo { height: clamp(470px, 58vh, 475px); }
  .hero-chat-card .hdemo-body { overflow-y: hidden; }
  .hero .trust-mini li { font-size: clamp(12px, 3vw, 15px); padding-left: clamp(17px, 4.2vw, 27px); white-space: normal; }
  .hero .trust-mini li::before { width: clamp(10px, 2.8vw, 20px); height: clamp(10px, 2.8vw, 20px); }
}

@media (min-width: 860px) {
  .hero h1 { max-width: 7.5em; }
}

@media (min-width: 768px) and (max-height: 540px) and (pointer: coarse) {
  .hero { padding-top: var(--s-4); }
  .hero-grid { gap: var(--s-4); }
  .hero h1 { font-size: clamp(24px, 3.2vw, 30px); max-width: none; }
  .hero .lede { font-size: 16px; line-height: 1.5; margin-top: var(--s-3); }
  .hero-chat-card .hdemo { height: clamp(300px, calc(100vh - 86px), 425px); height: clamp(300px, calc(100svh - 86px), 425px); }
  .hero-chat-card .hdemo-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (min-width: 1280px) {
  .hero h1 { font-size: 51px; }
}

@media (min-width: 1920px) {
  .hero h1 { font-size: 54px; }
}