/* share_testimonial.html — moved out of the template so it is cached like any other
   static file (versioned by templates' url_for, see _version_static_urls). */
        @keyframes shFloatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes shPulse {
            0%   { box-shadow: 0 6px 18px -4px var(--w-accent), 0 0 0 0 color-mix(in srgb, var(--w-accent) 45%, transparent); }
            70%, 100% { box-shadow: 0 6px 18px -4px var(--w-accent), 0 0 0 16px transparent; }
        }

        html, body { margin: 0; min-height: 100%; }
        body { background: var(--stage); }

        /* The whole page is the widget's stage: soft backdrop, drifting blobs. */
        .sh-stage {
            min-height: 100vh;
            border-radius: 0;
            padding: 40px 20px 48px;
            display: flex; flex-direction: column; align-items: center; gap: 18px;
        }
        .sh-stage .au-stage__blobs i:nth-child(1) { width: 420px; height: 420px; left: -80px; top: -120px; }
        .sh-stage .au-stage__blobs i:nth-child(2) { width: 380px; height: 380px; right: -80px; bottom: -120px; }
        .sh-stage .au-stage__blobs i:nth-child(3) { width: 260px; height: 260px; left: 40%; top: 40%; }

        .sh-shell { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; animation: shFloatIn .4s ease both; }

        /* ── The card ───────────────────────────────────────────
           Voice first (with its "tap play" hint), then who said it, then
           the quote — the order of the card on All Testimonials. */
        .sh-card.au-glass { width: 100%; padding: 0; }
        .sh-card .au-voice { height: 150px; }
        .sh-card .au-glass__body { padding: 20px 28px 24px; }
        .sh-card .au-glass__who b { font-size: 20px; line-height: 26px; }
        .sh-card .au-voice .au-play { width: 58px; height: 58px; }
        .sh-card .au-voice .au-play svg { width: 22px; height: 22px; }
        .sh-card .au-time { font-size: 12px; }
        .sh-card .au-glass__quote { font-size: 15.5px; line-height: 25px; margin-top: 16px; }
        .sh-card .au-glass__quote.empty { color: var(--glass-ink-muted); font-style: italic; }
        .sh-card .au-glass__foot { justify-content: space-between; font-size: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--glass-border); }
        .sh-card .au-glass__foot span { display: inline-flex; align-items: center; gap: 6px; }

        /* Idle: the play button pulses, so the card reads as something to
           press rather than a picture. It stops once the voice has played. */
        .sh-card:not(.has-played) .au-voice .au-play { animation: shPulse 2s ease-out infinite; }
        .sh-card .au-play:disabled { opacity: .45; cursor: not-allowed; animation: none; }

        .sh-listen { font-size: 12.5px; color: var(--glass-ink-muted); margin: 0 0 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
        .sh-listen i { color: var(--w-accent); font-size: 14px; }
        .has-played .sh-listen { visibility: hidden; }

        /* ── Visitor share row ──────────────────────────────── */
        .sh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        .sh-act {
            display: inline-flex; align-items: center; gap: 7px;
            height: 38px; padding: 0 15px;
            border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
            background: var(--glass-fill-strong); color: var(--glass-ink);
            -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
            font: 500 13px/1 var(--font-sans);
            text-decoration: none; cursor: pointer;
            transition: border-color .12s, transform .12s;
        }
        .sh-act:hover { border-color: var(--w-accent); transform: translateY(-1px); }
        .sh-act i { font-size: 15px; }

        /* ── Footer CTA (free plans) ────────────────────────── */
        .sh-cta {
            display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
            padding: 18px 22px;
            background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
            -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
            color: var(--glass-ink);
        }
        .sh-cta-text { font-size: 14px; font-weight: 600; }
        .sh-cta-sub { font-size: 12.5px; color: var(--glass-ink-muted); margin-top: 3px; }
        .sh-cta-btn {
            display: inline-flex; align-items: center; gap: 8px;
            height: 38px; padding: 0 18px;
            background: var(--w-accent); color: var(--on-swatch);
            border-radius: var(--radius-pill); text-decoration: none;
            font-size: 13.5px; font-weight: 600; white-space: nowrap;
        }
        .sh-cta-btn:hover { filter: brightness(1.08); }

        .sh-legal { font-size: 11.5px; color: var(--glass-ink-muted); text-align: center; margin: 4px 0 0; }

        @media (max-width: 560px) {
            .sh-stage { padding: 24px 14px 36px; }
            .sh-card .au-voice { height: 136px; }
            .sh-card .au-glass__body { padding: 18px 20px 20px; }
            .sh-card .au-glass__quote { font-size: 14px; line-height: 22px; }
            .sh-act { flex: 1; justify-content: center; }
            .sh-cta { flex-direction: column; align-items: stretch; }
            .sh-cta-btn { justify-content: center; }
        }
        @media (prefers-reduced-motion: reduce) {
            .sh-shell { animation: none; }
            .sh-card .au-play { animation: none !important; }
        }