/* Hero for the demo, mirrors the scene-partner / prompts dark hero */
        .demo-hero {
            background: var(--ink);
            color: var(--paper);
            padding: 48px 20px 40px;
            text-align: center;
        }
        .demo-hero h1 { color: var(--accent-gold); font-size: 2.6rem; margin-bottom: 10px; }
        .demo-hero .subtitle {
            font-family: var(--font-hand);
            font-size: 1.25rem;
            color: #bbb;
            max-width: 680px;
            margin: 0 auto;
        }
        .demo-wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }

        .demo-section { margin-bottom: 52px; }
        .demo-section h2 {
            font-size: 1.6rem;
            margin-bottom: 8px;
        }
        .demo-section .section-sub {
            font-family: var(--font-hand);
            font-size: 1.1rem;
            color: var(--ink-light);
            margin-bottom: 20px;
        }

        /* Scripted chat exchange styled like the real scene partner. */
        .scene-window {
            background: var(--paper-warm);
            border: var(--border-sketch);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow-paper);
        }
        .scene-setup {
            font-family: var(--font-hand);
            font-size: 1rem;
            color: var(--ink-faint);
            text-align: center;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px dashed #ddd;
        }
        .scene-setup strong { color: var(--ink); }
        .msg { display: flex; margin-bottom: 14px; }
        .msg.you { justify-content: flex-end; }
        .msg-bubble {
            max-width: 78%;
            padding: 10px 16px;
            border-radius: 14px;
            font-family: var(--font-body);
            font-size: 1rem;
            line-height: 1.45;
        }
        .msg.you .msg-bubble {
            background: var(--ink);
            color: var(--paper);
            border-bottom-right-radius: 4px;
        }
        .msg.ai .msg-bubble {
            background: var(--paper);
            color: var(--ink);
            border: 1px solid #e6e3d7;
            border-bottom-left-radius: 4px;
        }
        .msg-label {
            font-family: var(--font-hand);
            font-size: 0.85rem;
            color: var(--ink-faint);
            margin-bottom: 4px;
        }
        .msg.you .msg-label { text-align: right; }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            margin-top: 24px;
        }
        .feat-card {
            background: var(--paper);
            border: var(--border-sketch);
            border-radius: var(--radius);
            padding: 16px 18px;
            box-shadow: var(--shadow-paper);
        }
        .feat-card h3 {
            font-size: 1.1rem;
            margin-bottom: 4px;
        }
        .feat-card p {
            font-family: var(--font-hand);
            font-size: 1rem;
            color: var(--ink-light);
            margin: 0;
        }

        .cta-strip {
            margin-top: 40px;
            text-align: center;
        }
        .cta-strip h3 { margin-bottom: 10px; }
        .cta-strip p {
            font-family: var(--font-hand);
            font-size: 1.15rem;
            color: var(--ink-light);
            margin-bottom: 18px;
        }
        .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

        .voice-callout {
            background: var(--paper-warm);
            border: 2px solid var(--accent-gold);
            border-radius: var(--radius);
            padding: 20px 24px;
            margin-top: 20px;
        }
        .voice-callout h3 { color: var(--accent-gold); margin-bottom: 6px; }
        .voice-callout p {
            font-family: var(--font-hand);
            font-size: 1.05rem;
            color: var(--ink);
            margin: 0;
        }