/* ============================================================
   Ask HappySignals – Hero
   Scoped to .hsah. Uses the site's brand tokens when present
   (--pink, --deep-blue, --purple, --grey-*) with fallbacks.
   ============================================================ */

.hsah{
  --c-ink:    var(--deep-blue, #1d253c);
  --c-pink:   var(--pink, #ff7ea5);
  --c-pink-h: var(--link-hover, #f85989);
  --c-purple: var(--purple, #7627dc);
  --c-lilac:  #eadffa;
  --c-lilac-2:#d9c2f7;
  --c-g100:   var(--grey-100, #f8f8f9);
  --c-g200:   var(--grey-200, #f3f4f5);
  --c-g300:   var(--grey-300, #e2e4e7);
  --c-g500:   var(--grey-500, #a8adb7);
  --c-g600:   var(--grey-600, #838996);
  --hsah-radius: 20px;

  font-family: Circular, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--c-ink);
  background: var(--hsah-bg, #fff);
  padding: var(--hsah-pad, 64px) 24px;
  -webkit-font-smoothing: antialiased;
}
.hsah *, .hsah *::before, .hsah *::after { box-sizing: border-box; }

.hsah__inner{
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: center;
}
@media (min-width: 992px){
  .hsah__inner{ grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 96px); }
  .hsah--media-left .hsah__content{ order: 2; }
  .hsah--media-left .hsah__media{ order: 1; }
}

/* ---------- Text column ---------- */
.hsah__content{ text-align: center; padding: 0 clamp(0px, 3vw, 48px); }
.hsah--align-left .hsah__content{ text-align: left; }
.hsah--align-left .hsah__btns{ justify-content: flex-start; }

.hsah__heading{
  margin: 0 0 20px;
  font-size: clamp(38px, 4.3vw, 66px);
  font-weight: 400;            /* the live hero uses regular-weight Circular */
  line-height: 1.08; letter-spacing: -0.01em;
}
.hsah__sub{
  margin: 0 auto 28px; max-width: 46ch;
  font-size: clamp(16px, 1.2vw, 20px); line-height: 1.5;
}
.hsah--align-left .hsah__sub{ margin-left: 0; }

.hsah__btns{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hsah__btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border-radius: 999px;
  font-size: 17px; font-weight: 500; line-height: 1; text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.hsah__btn:hover{ transform: translateY(-1px); }
/* The theme's global `a:hover{color:…}` has specificity 0-1-1, which beats a bare
   class (0-1-0) — so the text colour must be restated for every link state or the
   label turns pink and vanishes on the pink button. */
.hsah__btn,
.hsah__btn:link, .hsah__btn:visited,
.hsah__btn:hover, .hsah__btn:focus, .hsah__btn:active{ color: #fff; }
.hsah__btn--primary{ background: var(--c-pink); }
.hsah__btn--primary:hover, .hsah__btn--primary:focus{ background: var(--c-pink-h); }
.hsah__btn--secondary{ background: var(--c-ink); }
.hsah__btn--secondary:hover, .hsah__btn--secondary:focus{ background: #2c3654; }

/* ---------- Media column ---------- */
.hsah__media{ width: 100%; }
.hsah__frame{
  position: relative; width: 100%;
  aspect-ratio: var(--hsah-ratio, 4/5);
  border-radius: var(--hsah-radius);
  overflow: hidden; isolation: isolate;
  background: var(--c-g200);
  /* `size` (not inline-size) so cqh resolves against the frame's own height,
     which aspect-ratio makes explicit. Lets the overlay cap itself to the frame. */
  container-type: size;
}
.hsah__video, .hsah__img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;   /* keep faces in frame */
  display: block;
}
.hsah__placeholder{
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--c-g600); font-size: 16px;
}

/* ============================================================
   Ask overlay (markup built by module.js)
   Sizes use container-query units so the card scales with the
   frame; px fallbacks are declared first.
   ============================================================ */
.hsah__ask{
  position: absolute; left: 8%; right: 8%; bottom: 8%;
  z-index: 2;
  /* Size option C. Everything inside the card is in em, so this one value scales
     the whole overlay. At the 560px hero width this resolves to 13px, giving a
     card that covers ~50% of the frame and leaves the subject's face present.
     (The previous 17px overflowed its own height cap and clipped the last
     follow-up prompt.) */
  font-size: 13px; font-size: clamp(10px, 2.6cqw, 13px);
}

.hsah-ask__card{
  background: var(--c-purple);
  border-radius: 1.2em; padding: 0.5em;
  box-shadow: 0 1.2em 3em -1em rgba(29,37,60,.55);
  transform-origin: bottom center;
  animation: hsah-pop .55s cubic-bezier(.2,.8,.25,1) both;
}
.hsah-ask__frame{                              /* lilac inner frame */
  background: var(--c-lilac-2);
  border-radius: 0.9em; padding: 0.55em;
}
.hsah-ask__panel{                              /* white/lilac panel */
  background: #f5f0fc;
  border-radius: 0.7em; padding: 0.8em 0.85em 0.85em;
  display: flex; flex-direction: column; gap: 0.55em;
  max-height: 58cqh; overflow: hidden; scroll-behavior: smooth;
}
/* Once the answer flow starts the whole overlay must stay inside the frame:
   the panel is capped and module.js keeps it scrolled to the newest content.
   Children must not flex-shrink — otherwise the answer card (overflow:hidden)
   is the one element flexbox squashes to make room, and its text disappears. */
.hsah-ask__panel > *,
.hsah-ask__cat, .hsah-ask__box, .hsah-ask__thinking,
.hsah-ask__answer, .hsah-ask__followups, .hsah-ask__reply, .hsah-ask__user{ flex: 0 0 auto; }
/* (module.js appends into a display:contents slot, so list the items explicitly) */

.hsah-ask__cat{ font-size: .93em; color: var(--c-ink); padding: 0 .2em; }

/* question row */
.hsah-ask__box{
  display: flex; align-items: center; gap: .7em;
  background: #fff; border-radius: .6em; padding: .8em .9em;
  min-height: 3.1em;
  box-shadow: 0 0 0 0 rgba(118,39,220,0);
  transition: box-shadow .25s ease;
}
.hsah-ask__box.is-typing{ box-shadow: 0 0 0 3px rgba(118,39,220,.28); }
.hsah-ask__bubble{ flex: none; width: 1.8em; height: 1.9em; color: var(--c-purple); }
.hsah-ask__q{ flex: 1; position: relative; font-size: 1.08em; line-height: 1.3; min-width: 0; }
.hsah-ask__placeholder{ color: var(--c-g500); }
.hsah-ask__typed{ color: var(--c-ink); }
.hsah-ask__caret{
  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
  background: var(--c-purple); vertical-align: -0.15em;
  animation: hsah-blink .9s steps(1) infinite;
}
.hsah-ask__box.is-done .hsah-ask__caret{ display: none; }
.hsah-ask__send{
  flex: none; width: 2.1em; height: 2.1em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-g300); color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.hsah-ask__send.is-ready{ background: var(--c-ink); }
.hsah-ask__send.is-pressed{ transform: scale(.82); background: var(--c-purple); }
.hsah-ask__send svg{ width: 1.1em; height: 1.1em; }

/* The question row must not change size when typing finishes — same font size,
   padding, bubble and send button throughout. Only the caret, focus ring and
   send-button colour change state. (The panel is height-capped and scroll-pinned,
   so the answer does not need the row to shrink to make room.) */
.hsah-ask__box{ transition: box-shadow .25s ease, opacity .2s ease, transform .2s ease; }
/* Collapsing into the sent message — fades out, then is replaced by .hsah-ask__user */
.hsah-ask__box.is-sending{ opacity: 0; transform: translateY(-4px) scale(.985); }
.hsah-ask__send{ transition: background .2s ease, transform .2s ease; }

/* thinking */
.hsah-ask__thinking{
  display: flex; align-items: center; gap: .55em;
  padding: .2em .3em; color: var(--c-g600); font-size: .9em;
}
.hsah-ask__dots{ display: inline-flex; gap: .3em; }
.hsah-ask__dots i{
  width: .45em; height: .45em; border-radius: 50%; background: var(--c-purple);
  animation: hsah-dot 1.1s ease-in-out infinite;
}
.hsah-ask__dots i:nth-child(2){ animation-delay: .18s; }
.hsah-ask__dots i:nth-child(3){ animation-delay: .36s; }

/* answer */
.hsah-ask__answer{
  background: #fff; border-radius: .6em; overflow: hidden;
  animation: hsah-rise .45s cubic-bezier(.2,.8,.25,1) both;
}
.hsah-ask__answer-head{
  display: flex; align-items: center; gap: .5em;
  padding: .55em .9em; background: var(--c-g100); border-bottom: 1px solid var(--c-g300);
  font-size: .8em; font-weight: 600; color: var(--c-g600);
}
.hsah-ask__answer-head::before{
  content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--c-purple);
}
.hsah-ask__answer-body{
  padding: .8em .9em .9em; font-size: .98em; line-height: 1.45; color: var(--c-ink);
}
.hsah-ask__answer-body p{ margin: 0 0 .6em; }
.hsah-ask__answer-body p:last-child{ margin-bottom: 0; }
.hsah-ask__answer-body ul{ margin: 0 0 .6em; padding-left: 1.2em; }
.hsah-ask__answer-body strong{ font-weight: 700; }
.hsah-ask__answer-body a{ color: var(--c-purple); }
/* word-by-word reveal */
.hsah-ask__w{ opacity: 0; animation: hsah-word .32s ease forwards; }

/* follow-ups */
.hsah-ask__followups{ display: flex; flex-direction: column; gap: .45em; }
.hsah-ask__followups-label{
  font-size: .72em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-ink); opacity: .75; padding: .1em .2em 0;
}
.hsah-ask__chip{
  display: flex; align-items: center; justify-content: space-between; gap: .8em; width: 100%;
  background: #fff; border: 0; border-radius: .55em; padding: .62em .85em;
  font: inherit; font-size: .95em; color: var(--c-ink); text-align: left; cursor: pointer;
  animation: hsah-rise .4s cubic-bezier(.2,.8,.25,1) both;
  transition: background .18s ease, box-shadow .18s ease, opacity .25s ease;
}
.hsah-ask__chip:hover, .hsah-ask__chip.is-nudge{ background: #fbf8ff; box-shadow: 0 0 0 2px rgba(118,39,220,.35); }
.hsah-ask__chip:focus-visible{ outline: 2px solid var(--c-purple); outline-offset: 2px; }
.hsah-ask__chip svg{ flex: none; width: 1em; height: 1em; color: var(--c-g600); transition: transform .18s ease; }
.hsah-ask__chip:hover svg, .hsah-ask__chip.is-nudge svg{ transform: translateX(3px); color: var(--c-purple); }
/* after a click the other prompts step back */
.hsah-ask__followups.is-answered .hsah-ask__chip{ opacity: .45; pointer-events: none; }
.hsah-ask__followups.is-answered .hsah-ask__chip.is-picked{ opacity: 1; box-shadow: 0 0 0 2px var(--c-purple); }

/* The visitor's echoed choice — right-aligned bubble (option B).
   #d9c2f7 rather than the lighter lilac: the panel itself is #f5f0fc, so a paler
   fill would not read as a distinct message. */
.hsah-ask__user{
  align-self: flex-end;
  max-width: 85%;
  background: var(--c-lilac-2);
  color: var(--c-ink);
  padding: .7em 1em;
  border-radius: 1.1em 1.1em .35em 1.1em;
  font-size: 1.02em; line-height: 1.4;
  animation: hsah-rise .35s cubic-bezier(.2,.8,.25,1) both;
}

/* reply card: text + CTA buttons */
.hsah-ask__reply{
  background: #fff; border-radius: .6em; padding: .9em .9em .95em;
  display: flex; flex-direction: column; gap: .7em;
  animation: hsah-rise .45s cubic-bezier(.2,.8,.25,1) both;
}
.hsah-ask__reply-text{ margin: 0; font-size: .98em; line-height: 1.45; font-weight: 500; color: var(--c-ink); }
.hsah-ask__ctas{ display: flex; flex-wrap: wrap; gap: .5em; }

/* CTA buttons inside the reply */
.hsah-ask__cta{
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.3em; border-radius: 999px;
  background: var(--c-pink); text-decoration: none;
  font-size: .95em; font-weight: 600;
  transition: background .18s ease, transform .18s ease;
}
/* Same specificity problem as .hsah__btn — restate the colour on every state
   so the label (and the arrow, which uses currentColor) stays white. */
.hsah-ask__cta,
.hsah-ask__cta:link, .hsah-ask__cta:visited,
.hsah-ask__cta:hover, .hsah-ask__cta:focus, .hsah-ask__cta:active{ color: #fff; }
.hsah-ask__cta:hover{ background: var(--c-pink-h); transform: translateY(-1px); }
.hsah-ask__cta:focus-visible{ outline: 2px solid var(--c-ink); outline-offset: 2px; }
.hsah-ask__cta--secondary{ background: var(--c-ink); }
.hsah-ask__cta--secondary:hover, .hsah-ask__cta--secondary:focus{ background: #2c3654; }
.hsah-ask__cta svg{ width: 1em; height: 1em; }

/* loop fade */
.hsah-ask__card.is-leaving{ animation: hsah-out .35s ease forwards; }

@keyframes hsah-pop { from{ opacity:0; transform: translateY(14px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes hsah-rise{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes hsah-word{ to{ opacity:1; } }
@keyframes hsah-out { to{ opacity:0; transform: translateY(10px) scale(.98);} }
@keyframes hsah-blink{ 50%{ opacity:0; } }
@keyframes hsah-dot { 0%,100%{ opacity:.25; transform: scale(.8);} 50%{ opacity:1; transform: scale(1);} }

/* container-query height unit fallback */
@supports not (height: 1cqh){ .hsah-ask__panel{ max-height: 46vh; } }

@media (prefers-reduced-motion: reduce){
  .hsah *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hsah-ask__w{ opacity: 1; }
}

/* small screens: stack, comfortable padding */
@media (max-width: 991px){
  .hsah{ padding-left: 16px; padding-right: 16px; }
  .hsah__content{ order: 1; }
  .hsah__media{ order: 2; }
  .hsah__frame{ max-width: 560px; margin: 0 auto; }
}