/*
 * Hero "ask" card (assets/hero-ask.js): a small chat window that cycles a few
 * real-sounding requests and answers in the hero's right column.
 * Without JavaScript (or with reduced motion) every exchange shows, stacked.
 */
.hero-ask { background: #fff; border: 1px solid rgba(212,208,207,0.7); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(27,27,28,0.10); overflow: hidden; width: 100%; }
.hero-ask-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: #f6f3f2; border-bottom: 1px solid rgba(212,208,207,0.6); }
.hero-ask-col { min-width: 0; }
.hero-ask-tabs { display: flex; gap: 0.35rem; }
.hero-ask-tab { padding: 0.3rem 0.7rem; border-radius: 9999px; border: 0; background: transparent; font-size: 0.75rem; font-weight: 700; color: #5f5e5e; cursor: pointer; }
.hero-ask-tab[aria-pressed="true"] { background: #1b1b1c; color: #fff; }
.hero-ask-tab:focus-visible { outline: 2px solid #974800; outline-offset: 2px; }
.hero-ask-note { font-size: 0.75rem; font-style: italic; color: #5f5e5e; }
.hero-ask-body { padding: 1.25rem; display: grid; gap: 1.5rem; }
.hero-ask-item { display: grid; gap: 0.875rem; }
.hero-ask-msg { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.625rem; align-items: start; }
.hero-ask-avatar { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 800; }
.hero-ask-avatar-you { background: #eae7e6; color: #1b1b1c; }
.hero-ask-avatar-us { background: #e8833a; color: #1b1b1c; }
.hero-ask-q { background: #f6f3f2; border-radius: 0 0.75rem 0.75rem 0.75rem; padding: 0.7rem 0.875rem; font-size: 0.9375rem; line-height: 1.5; font-weight: 600; color: #1b1b1c; }
.hero-ask-a { position: relative; font-size: 0.9375rem; line-height: 1.55; color: #2b2b2b; padding-top: 0.35rem; }
.hero-ask-dots { position: absolute; top: 0.85rem; left: 0; display: flex; gap: 0.3rem; opacity: 0; transition: opacity 0.2s; }
.hero-ask-dots span { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: #e8833a; }
.hero-ask-dots.is-on span { animation: hero-ask-pulse 0.9s infinite ease-in-out; }
.hero-ask-dots span:nth-child(2) { animation-delay: 0.15s; }
.hero-ask-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes hero-ask-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.hero-ask-tabs[hidden] { display: none; }

/* Animated mode: all exchanges share one grid cell, so the card never resizes. */
.hero-ask-js .hero-ask-body { grid-template-areas: "stack"; gap: 0; }
.hero-ask-js .hero-ask-item { grid-area: stack; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.hero-ask-js .hero-ask-item.is-current { opacity: 1; visibility: visible; }
.hero-ask-js .hero-ask-ch, .hero-ask-js .hero-ask-a-text { opacity: 0; }
.hero-ask-js .hero-ask-ch.is-on { opacity: 1; }
.hero-ask-js .hero-ask-a-text { transition: opacity 0.4s; }
.hero-ask-js .hero-ask-a-text.is-on { opacity: 1; }
.hero-ask-js .hero-ask-dots.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-ask-dots.is-on span { animation: none; }
  .hero-ask-js .hero-ask-item, .hero-ask-js .hero-ask-a-text { transition: none; }
}