/* ============================================================
   1.2 Demo-Start — focus/conversion layout (minimal chrome)
   Tokens only; shared pieces come from main.css.
   ============================================================ */

.demo-split__grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) {
    .demo-split__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}

.demo-panel__title { margin-bottom: var(--space-2xs); font-size: var(--text-2xl); }
.demo-panel__subtitle { color: var(--ink-600); margin-bottom: var(--space-md); }

/* Reassurance chips: stacked form variant on an accent tint band (spec) */
#demo-form-reassure {
    flex-direction: column; gap: var(--space-xs);
    background: var(--accent-100);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
}

.demo-form { display: grid; gap: var(--space-lg); }
.demo-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo-form__consent { margin-top: calc(-1 * var(--space-2xs)); }
.demo-form__submit { width: 100%; }
.demo-form .form-banner { margin-bottom: var(--space-md); }

/* Soft free-mail nudge (JS, non-blocking — spec OQ #1) */
.form-field__note--nudge { display: block; color: var(--warning); font-weight: 500; }

/* ── Value panel ───────────────────────────────────────────── */
.demo-value {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}
.demo-value__heading { font-family: var(--font-body); font-size: var(--text-xl); margin-bottom: var(--space-md); }
.demo-value__list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.demo-value__list li { display: flex; gap: var(--space-xs); align-items: baseline; color: var(--ink-600); }
.demo-value__check { color: var(--accent-500); flex-shrink: 0; transform: translateY(2px); }
.demo-value__visual { width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: var(--space-lg); }
.demo-value__trust {
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-sm);
}
.demo-value__trust li {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    font-size: var(--text-sm); color: var(--ink-600);
    border: 1px solid var(--line-200); border-radius: var(--radius-full);
    padding: var(--space-2xs) var(--space-sm);
}
.demo-value__trust-icon { color: var(--blue-500); display: inline-flex; }

/* ── Coming soon (trial switched off): badge + meeting CTA instead of the form ── */
.demo-soon__badge {
    display: inline-flex; align-items: center;
    margin-bottom: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--accent-100); color: var(--accent-600);
    font-size: var(--text-sm); font-weight: 600;
}
.demo-soon__actions { display: grid; gap: var(--space-sm); justify-items: center; margin-top: var(--space-lg); }
.demo-soon__cta { width: 100%; }
@media (min-width: 768px) {
    .demo-soon__actions { display: flex; flex-wrap: wrap; align-items: center; justify-items: start; }
    .demo-soon__cta { width: auto; }
}