/* SparkFlow's page: a centered band from white to a soft blue, a sound wave that moves only while a sample
   plays, and the before/after demo (demo.js). The blue is SparkFlow's own, darkened for text. */

:root { --product-accent: #0066D6; --product-dark: #0B2545; --product-glow: rgba(0, 122, 255, 0.45); }

.sf-band {
    background:
        radial-gradient(60% 70% at 50% 110%, rgba(0, 122, 255, 0.16), transparent 70%),
        linear-gradient(180deg, var(--bg) 0%, #EAF2FC 100%);
    border-bottom: 1px solid var(--rule);
}
.sf-name { margin-bottom: 0.4rem; font-size: 0.85rem !important; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #0066D6 !important; }
.sf-band h1 { max-width: 14ch; margin-left: auto; margin-right: auto; }
.sf-band .btn-solid, .product-cta .btn-solid { background: #0066D6; border-color: #0066D6; color: var(--white); }
.sf-band .btn-solid:hover, .product-cta .btn-solid:hover { background: #0052AD; border-color: #0052AD; }

/* The wave: thin rounded bars; their heights are set by demo.js and scale while a sample plays */
.sf-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
.sf-wave i { display: block; width: 4px; height: var(--h, 20%); background: #0066D6; border-radius: 2px; opacity: 0.35; transition: height 0.12s ease-out, opacity 0.2s; }
.sf-hero-wave { margin-top: 2.5rem; }
.sf-live .sf-wave i, .sf-wave.sf-live i { opacity: 0.85; }

.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.sf-chips button {
    min-height: 40px; padding: 0.45rem 1rem; font: inherit; font-size: 0.9rem; color: var(--navy);
    background: transparent; border: 1px solid var(--field); border-radius: 980px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sf-chips button:hover { border-color: var(--navy); }
.sf-chips button[aria-pressed="true"] { color: var(--bg); background: var(--navy); border-color: var(--navy); }

.sf-demo {
    margin-top: 1.25rem; padding: clamp(1rem, 3vw, 1.75rem); background: var(--white);
    border: 1px solid rgba(23, 42, 58, 0.12); border-radius: 18px;
    box-shadow: 0 2px 4px rgba(23, 42, 58, 0.05), 0 30px 60px -34px rgba(23, 42, 58, 0.4);
}
.sf-mic-row { display: flex; align-items: center; gap: 1rem; }
.sf-mic {
    position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; color: #0066D6;
    background: var(--white); border: 1px solid #D5E3F5; border-radius: 50%; box-shadow: 0 6px 18px -6px rgba(0, 102, 214, 0.45);
    cursor: pointer; transition: transform 0.15s, background 0.15s, color 0.15s;
}
.sf-mic:hover { transform: scale(1.05); }
.sf-mic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sf-mic svg rect { fill: currentColor; stroke: none; }
.sf-live .sf-mic { color: var(--white); background: #E5281C; border-color: #E5281C; box-shadow: 0 0 0 6px rgba(229, 40, 28, 0.15); }
.sf-demo-wave { flex: 1; justify-content: flex-start; min-width: 0; overflow: hidden; height: 48px; }
.sf-status { flex: none; font-size: 0.85rem; color: var(--gray); }

.sf-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.sf-pane { display: flex; flex-direction: column; min-height: 11rem; padding: 1rem 1.15rem; background: #F4F6F8; border-radius: 12px; }
.sf-pane-clean { background: #EEF5FE; }
.sf-pane-label { margin-bottom: 0.5rem; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.sf-raw, .sf-clean { flex: 1; font-size: 1.05rem; line-height: 1.6; }
.sf-raw { color: var(--gray); }
.sf-raw .sf-filler { padding: 0 3px; color: #8A4A12; background: #FCEBD9; border-radius: 4px; }
.sf-clean { color: var(--navy); }
.sf-clean .sf-new { animation: sf-in 0.4s var(--ease) both; }
@keyframes sf-in { from { opacity: 0; transform: translateY(4px); } }
.sf-pane-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; }
.sf-saved { font-size: 0.85rem; color: var(--gray); }
.sf-copy {
    flex: none; min-height: 36px; padding: 0.3rem 0.9rem; font: inherit; font-size: 0.85rem; white-space: nowrap; color: #0066D6; background: var(--white);
    border: 1px solid #B9D3F3; border-radius: 980px; cursor: pointer;
}
.sf-copy:disabled { color: var(--gray); border-color: var(--rule); cursor: default; }

.sf-open .actions { margin-top: 1.5rem; }

@media (max-width: 700px) {
    .sf-panes { grid-template-columns: minmax(0, 1fr); }
    .sf-pane { min-height: 0; }
    .sf-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-wave i, .sf-mic, .sf-chips button { transition: none; }
    .sf-clean .sf-new { animation: none; }
}