/* How it works — page-only styles. Loaded right after /styles.css.
   Covers: the example-call card (facts.json-grounded, staggered reveal via
   the shared [data-reveal] system already in styles.css), and the three
   "People take it from there" step art swaps need no new CSS. */

/* ---------------------------------------------------------------- Call card
   A large dark card with a soft violet glow, a small live-style header
   (mini waveform reusing .wave), and a chat thread that reveals bubble by
   bubble as it scrolls into view. Sits in the detail__grid's right column,
   same slot the old .ex-call held. */
.how-callcard {
  grid-column: 2;
  position: relative;
  margin: 0;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #141414 0%, #0b0b0b 100%);
  border: 1px solid var(--hair-2);
  box-shadow: 0 50px 120px -48px rgba(127, 114, 255, .5), 0 1px 0 rgba(246, 243, 233, .04) inset;
  overflow: clip;
  isolation: isolate;
}
.how-callcard__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 65%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(127, 114, 255, .38), transparent 72%);
  filter: blur(46px);
  opacity: .9;
  pointer-events: none;
  z-index: -1;
  animation: how-glow 7s ease-in-out infinite;
}
@keyframes how-glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .how-callcard__glow { animation: none; opacity: .85; } }

.how-callcard__bar { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.how-callcard__live { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--rd-font-ui); color: var(--t2); }
.how-callcard__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(127, 114, 255, .18); }
.how-callcard__wave.wave { flex: none; height: 26px; gap: 3px; margin: 0 auto 0 0; }
.how-callcard__wave.wave span { width: 2.5px; }
.how-callcard__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--rd-beige); color: var(--rd-ink); font: 600 12px/1 var(--rd-font-ui); text-transform: uppercase; letter-spacing: 0; }

.how-callcard__thread { display: grid; gap: 12px; }
.how-callcard__msg { max-width: 82%; margin: 0; padding: 14px 18px; border-radius: 18px; line-height: 1.45; font: 400 clamp(16px, 1.35vw, 18px)/1.45 var(--rd-font-display); color: var(--t1); }
.how-callcard__who { display: block; font: 500 11px/1.6 var(--rd-font-ui); text-transform: uppercase; letter-spacing: 0; color: var(--t3); margin-bottom: 3px; }
.how-callcard__msg--agent { justify-self: start; background: rgba(246, 243, 233, .06); border: 1px solid var(--hair); border-bottom-left-radius: 6px; }
.how-callcard__msg--you { justify-self: end; text-align: right; background: rgba(127, 114, 255, .16); border: 1px solid rgba(127, 114, 255, .3); border-bottom-right-radius: 6px; }
.how-callcard__msg--you .how-callcard__who { color: var(--violet); }

.how-callcard__next { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.5; color: var(--t3); }

@media (max-width: 899px) {
  .how-callcard { grid-column: auto; }
  .how-callcard__msg { max-width: 92%; }
}