/* Shared microsite tokens + primitives.
   Prepended to every IA block stylesheet so blocks render correctly
   in the Gutenberg editor too (where the page-level base CSS never
   loads). Safe duplicate of the base layer on the front end. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap');

.ps-micro {
    --psm-ink: #1B0B3A;
    --psm-ink-2: #2B2049;
    --psm-purple: #7953FF;
    --psm-purple-soft: #EFEAFF;
    --psm-teal: #80DFD9;
    --psm-mint: #E0FAF9;
    --psm-mint-card: #ECF5F4;
    --psm-gold: #F8BC38;
    --psm-gold-hover: #EFAD1E;
    --psm-body: #4B4560;
    --psm-white: #FFFFFF;
    --psm-serif: 'Libre Baskerville', Georgia, serif;
    --psm-sans: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --psm-max: 1240px;
    --psm-pad: clamp(20px, 4vw, 48px);
    --psm-radius: 16px;
    font-family: var(--psm-sans);
    color: var(--psm-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.ps-micro *, .ps-micro *::before, .ps-micro *::after { box-sizing: border-box; }
.ps-micro h1, .ps-micro h2, .ps-micro h3, .ps-micro h4 {
    font-family: var(--psm-serif);
    color: var(--psm-ink);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
    font-weight: 700;
    text-wrap: balance;
}
.ps-micro p { margin: 0 0 1em; }
.ps-micro img { max-width: 100%; height: auto; display: block; }
.ps-micro a { color: var(--psm-purple); text-decoration: none; }
.ps-micro a:hover { text-decoration: none; }
.ps-micro button { font-family: inherit; }
.ps-micro ul, .ps-micro ol { margin: 0; padding: 0; list-style: none; }
.ps-micro .psm-wrap {
    max-width: var(--psm-max);
    margin: 0 auto;
    padding-left: var(--psm-pad);
    padding-right: var(--psm-pad);
}
.ps-micro .psm-h2 { font-size: clamp(26px, 3.2vw, 38px); text-align: center; }
.ps-micro .psm-lede { max-width: 720px; margin: 0 auto 1.5em; text-align: center; font-size: 16px; text-wrap: balance; }
.ps-micro .psm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--psm-sans); font-size: 15px; font-weight: 600; line-height: 1;
    padding: 16px 28px; border-radius: 999px; border: 0; cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.ps-micro .psm-btn--gold { background: var(--psm-gold); color: var(--psm-ink); }
.ps-micro .psm-btn--gold:hover { background: var(--psm-gold-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(27,11,58,.28); }
.ps-micro .psm-btn--ghost { background: var(--psm-white); color: var(--psm-ink); box-shadow: 0 2px 10px rgba(27,11,58,.18); }
.ps-micro .psm-play {
    display: inline-flex; align-items: center; gap: 12px; font-weight: 600;
    color: var(--psm-white); cursor: pointer; background: none; border: 0;
    font-family: var(--psm-sans); font-size: 15px;
}
.ps-micro .psm-play__disc {
    width: 44px; height: 44px; border-radius: 50%; background: var(--psm-white);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ps-micro .psm-play__disc svg { margin-left: 3px; }

/* ================= block styles ================= */
/* IA – Hero: layout + animation scene
   Scene styles below the divider come from the approved hero prototype.
   The stage background is transparent here so the section gradient
   reads as one continuous surface behind waveform and headline. */

.ps-micro .psm-hero {
    padding-top: 78px; /* clears the transparent overlay sub-nav */
    background:
        radial-gradient(120% 90% at 50% 30%, #3a2a5e 0%, #2b2049 34%, #1d1638 62%, #120e26 100%);
    color: #fff;
    padding-bottom: clamp(56px, 7vw, 96px);
    overflow: hidden;
}
.ps-micro .psm-hero .ps-voice-stage {
    background: transparent;
}
.ps-micro .psm-hero .ps-voice-stage::after { display: none; }

.ps-micro .psm-hero__content {
    text-align: center;
    margin-top: -20px;
    position: relative;
    z-index: 3;
}
.ps-micro .psm-hero__headline {
    color: #fff;
    font-size: clamp(31px, 4.6vw, 52px);
    font-weight: 700;
    margin-bottom: 24px;
}
.ps-micro .psm-hero__headline span { display: block; }
.ps-micro .psm-hero__line2 { color: var(--psm-teal); }

.ps-micro .psm-hero__body {
    max-width: 640px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
}
.ps-micro .psm-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

/* Mobile stage height is handled by the animation's own 860px rules
   below (elements stack vertically and the stage grows to fit). */

/* ---- animation scene (from hero prototype) ---- */

  /* ============================================================
     STAGE: waveform background
     ============================================================ */
  .ps-voice-stage {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background:
      radial-gradient(120% 90% at 50% 78%, #3a2a5e 0%, #2b2049 34%, #1d1638 62%, #120e26 100%);
  }
  .ps-voice-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(140% 110% at 50% 50%, rgba(0,0,0,0) 55%, rgba(8,6,20,0.55) 100%);
  }
  .ps-voice-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ============================================================
     ELEMENT 1 — CALLER (headshot + speech bubble), left of center
     ============================================================ */
  .ps-caller-slot {
    position: absolute;
    right: calc(50% + 28px);
    bottom: 50%;                  /* anchored by its BOTTOM edge: the bubble grows upward */
    z-index: 2;
    display: flex;
    align-items: flex-end;        /* headshot pinned to the bottom, next to the tail */
    gap: 12px;
    max-width: min(560px, 46vw);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.33, 1, 0.5, 1);
  }
  .ps-caller-slot.show { opacity: 1; transform: translateY(0); }

  .caller-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.28);
    box-shadow: 0 10px 30px rgba(15, 8, 40, 0.5);
    background: rgba(216, 208, 240, 0.12);
    overflow: hidden;
  }
  .caller-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

  /* bubble: the actual Sketch SVG path, regenerated at any size (see script).
     Mirrored to match the asset: tail curls bottom-right toward the headshot. */
  .caller-bubble {
    position: relative;
    min-width: 180px;
    max-width: 100%;
    /* NOTE: no filter here. A filter on this ancestor creates a backdrop
       root and breaks the backdrop-filter blur layer inside. The shadow
       lives on the svg sibling below instead. */
  }
  .caller-bubble svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
    filter: drop-shadow(0 18px 24px rgba(27, 11, 58, 0.55));
    transform: scaleX(-1);
  }
  .caller-bubble svg path {
    fill: rgba(140, 126, 194, 0.30);
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1.4369;
  }
  .bubble-content {
    position: relative;
    z-index: 1;
    padding: 13px 24px 13px 18px;   /* extra right: bubble body ends 7px early, before the tail */
    font-size: 14.5px;
    line-height: 1.55;
    color: #F4F1FD;
  }

  .cw-caret {
    display: inline-block;
    width: 2px; height: 14px;
    background: #8FE3D9;
    vertical-align: -2px;
    margin-left: 2px;
    animation: cw-blink 0.9s steps(1) infinite;
  }
  @keyframes cw-blink { 50% { opacity: 0; } }

  /* ============================================================
     ELEMENT 2 — INTELLIGENT ANSWERING CARD, right of center
     ============================================================ */
  .ps-listen-slot {
    position: absolute;
    left: calc(50% + 28px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 400px;
    max-width: 44vw;
  }
  .call-widget {
    width: 100%;
    border-radius: 20px;
    background: rgba(216, 208, 240, 0.10);
    border: 1px solid rgba(216, 208, 240, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #EDE9FB;
    box-shadow: 0 24px 60px rgba(15, 8, 40, 0.45);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition:
      height 0.55s cubic-bezier(0.33, 1, 0.5, 1),
      opacity 0.4s ease,
      transform 0.4s cubic-bezier(0.33, 1, 0.5, 1);
  }
  .call-widget.show { opacity: 1; transform: translateY(0); }
  .cw-inner { padding: 20px 22px 22px; }

  .cw-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.33, 1, 0.5, 1);
  }
  .cw-collapse.open { grid-template-rows: 1fr; }
  .cw-collapse > div { overflow: hidden; min-height: 0; }

  /* ---- header: status + mini waveform ---- */
  .cw-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cw-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #8FE3D9;
    animation: cw-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes cw-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(143, 227, 217, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(143, 227, 217, 0); }
  }
  .cw-status {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #C9C2E8;
  }
  .cw-wave {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    height: 20px;
  }
  .cw-wave span {
    width: 6px; height: 6px; border-radius: 50%;
    opacity: 0.55;
    transition: opacity 0.3s ease;
  }
  .cw-wave span:nth-child(1) { background: #8FE3D9; width: 5px; height: 5px; }
  .cw-wave span:nth-child(2) { background: #F0BE5A; }
  .cw-wave span:nth-child(3) { background: #A99BF0; width: 7px; height: 7px; }
  .cw-wave span:nth-child(4) { background: #F08C6A; }
  .cw-wave span:nth-child(5) { background: #8FE3D9; width: 5px; height: 5px; }
  .cw-wave.speaking span { opacity: 1; animation: cw-ripple 1.1s ease-in-out infinite; }
  .cw-wave.speaking span:nth-child(1) { animation-delay: 0s; }
  .cw-wave.speaking span:nth-child(2) { animation-delay: 0.12s; }
  .cw-wave.speaking span:nth-child(3) { animation-delay: 0.24s; }
  .cw-wave.speaking span:nth-child(4) { animation-delay: 0.36s; }
  .cw-wave.speaking span:nth-child(5) { animation-delay: 0.48s; }
  @keyframes cw-ripple {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-5px) scale(1.5); }
    60% { transform: translateY(2px) scale(0.9); }
  }

  /* ---- chips: fill in live while the caller talks ---- */
  .cw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
  }
  .cw-chips:empty { margin-top: 0; }
  .cw-chip {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 5px 11px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .cw-chip.show { opacity: 1; transform: translateY(0); }
  .cw-chip--intent { background: rgba(169, 155, 240, 0.22); color: #CFC5F7; border: 1px solid rgba(169, 155, 240, 0.4); }
  .cw-chip--routine { background: rgba(143, 227, 217, 0.16); color: #8FE3D9; border: 1px solid rgba(143, 227, 217, 0.4); }
  .cw-chip--urgent { background: rgba(240, 140, 106, 0.18); color: #F5A98F; border: 1px solid rgba(240, 140, 106, 0.45); }
  .cw-chip--data { background: rgba(240, 190, 90, 0.14); color: #F0CE85; border: 1px solid rgba(240, 190, 90, 0.4); }

  .cw-outcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(143, 227, 217, 0.09);
    border: 1px solid rgba(143, 227, 217, 0.25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
  .cw-outcome.show { opacity: 1; transform: translateY(0); }
  .cw-outcome.urgent {
    background: rgba(240, 190, 90, 0.09);
    border-color: rgba(240, 190, 90, 0.32);
  }
  .cw-outcome-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8FE3D9;
    color: #1d1440;
    font-size: 12px;
    font-weight: 700;
  }
  .cw-outcome.urgent .cw-outcome-icon { background: #F0BE5A; }
  .cw-outcome-text { font-size: 13px; line-height: 1.45; color: #EDE9FB; }
  .cw-outcome-text strong { font-weight: 600; color: #fff; }

  /* ============================================================
     RESPONSIVE: stack the two elements on narrow screens
     ============================================================ */
  @media (max-width: 860px) {
    .ps-voice-stage { height: 600px; }
    .ps-caller-slot {
      right: auto; left: 50%; bottom: 70%;
      transform: translate(-50%, 10px);
      max-width: calc(100% - 48px);
    }
    .ps-caller-slot.show { transform: translate(-50%, 0); }
    .ps-listen-slot {
      left: 50%; top: 60%;
      transform: translate(-50%, -50%);
      width: 380px;
      max-width: calc(100% - 40px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cw-wave.speaking span, .cw-dot, .cw-caret { animation: none; }
    .cw-chip, .cw-outcome, .call-widget, .cw-collapse,
    .ps-caller-slot { transition: none; }
  }


/* ---- Layout tweak: stacked scene at all widths (bubble above card),
   per the alignment reference. Overrides the prototype's side-by-side
   desktop positions; the prototype's own <860px rules still apply. ---- */
@media (min-width: 861px) {
  .ps-micro .psm-hero .ps-voice-stage { height: 480px; }
  .ps-micro .psm-hero .ps-caller-slot {
    left: auto;
    right: 33%;                    /* right-anchored: bubble grows leftward */
    bottom: 60%;
    transform: translateY(10px);
    max-width: min(560px, 60%);
  }
  .ps-micro .psm-hero .ps-caller-slot.show { transform: translateY(0); }
  .ps-micro .psm-hero .caller-bubble { max-width: 460px; }
  .ps-micro .psm-hero .ps-listen-slot {
    left: 50%;
    top: 46%;                      /* top-anchored: the card grows downward,
                                      keeping a constant gap under the bubble */
    transform: translate(-58%, 0);
  }
  /* Wave passes through the avatar line, like the reference */
  .ps-micro .psm-hero #psVoiceCanvas { transform: translateY(-20%); }
}

/* Glassy backdrop blur behind the bubble fill, clipped to the live
   bubble path (clip-path kept in sync by view.js) */
.ps-micro .psm-hero .caller-bubble__blur {
    position: absolute;
    inset: 0;
    z-index: 0;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    pointer-events: none;
}
.ps-micro .psm-hero .caller-bubble svg { z-index: 0; }
.ps-micro .psm-hero .bubble-content { z-index: 1; }

/* ---- Mobile hero: compact stage so the H1 clears the fold.
   Overrides the prototype's roomy 600px stacked layout. ---- */
@media (max-width: 860px) {
  /* Content leads on mobile: H1, intro, and CTAs first, the
     animation scene (waveform dots + conversation) below them */
  .ps-micro .psm-hero {
    display: flex;
    flex-direction: column-reverse;
  }
  .ps-micro .psm-hero .ps-voice-stage { height: 440px; }
  .ps-micro .psm-hero .ps-caller-slot {
    bottom: 61%;
    max-width: calc(100% - 40px);
  }
  .ps-micro .psm-hero .ps-listen-slot {
    top: 49%;
    transform: translate(-50%, 0);   /* top-anchored: grows downward */
    width: min(400px, calc(100% - 40px));
  }
  .ps-micro .psm-hero { padding-bottom: 0; }
  .ps-micro .psm-hero__content {
    margin-top: 0;
    padding-top: 28px;
  }
  .ps-micro .psm-hero__body { font-size: 15px; }
}