/* Small, readable views of the Spark workspace, shared by all feature demos. */
.feature-preview { --fp-line:var(--demo-border); position:relative; width:100%; min-width:0; overflow:hidden; border:1px solid var(--demo-border); border-radius:var(--demo-radius); background:var(--demo-surface); box-shadow:var(--demo-shadow); color:var(--demo-text); font:400 14px/1.55 'Geist','Inter',sans-serif; text-align:left; }
.feature-preview *, .feature-preview *::before, .feature-preview *::after { box-sizing:border-box; }
.feature-preview [hidden] { display:none!important; }
.feature-preview button { font:inherit; cursor:pointer; }
.feature-preview p,.feature-preview h3,.feature-preview dl { margin:0; }
.feature-preview svg { width:16px;height:16px;flex-shrink:0;stroke-width:1.5; }
.fp-chrome { display:flex; align-items:center; gap:10px; padding:15px 24px; border-bottom:1px solid var(--fp-line); background:#ffffff03; font-size:13px; }
.fp-chrome>img { object-fit:contain;width:20px;height:20px; }
.fp-slash { margin:0 6px; color:#738398; }
.fp-example { margin-left:auto; color:var(--demo-muted); font-size:12px; }
.fp-main { flex:1;min-width:0; }
.fp-tabs { display:flex;gap:21px;padding:0 24px;border-bottom:1px solid var(--fp-line); }
.fp-tabs button { background:none;border:0;border-bottom:1px solid transparent;padding:14px 0 12px;color:var(--demo-muted);font-size:13px;white-space:nowrap; }
.fp-tabs button[aria-selected=true] { border-bottom-color:#c5d4e4;color:#f4f7fa; }
.fp-view { padding:24px; }
.fp-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px; }
.feature-preview h3 { font-size:18px;line-height:1.35;font-weight:500;letter-spacing:-.035em; }
.fp-heading p { color:var(--demo-muted);font-size:13px;line-height:1.6;margin-top:5px; }
.fp-badge { flex-shrink:0;color:#b9cfca;background:#abcfc40b;border:1px solid #b6d0c820;border-radius:4px;padding:3px 6px;font-size:11px;line-height:1.5; }
.fp-fields { display:grid;gap:0; }
.fp-fields>div { display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--fp-line);font-size:13px; }
.fp-fields dt { color:var(--demo-muted); }
.fp-fields dd { margin:0;text-align:right;max-width:62%; }
.fp-note { padding:14px 15px;margin-top:20px;border:1px solid var(--fp-line);border-radius:var(--demo-control-radius);background:#d9e6f005; }
.fp-note strong { font-size:13px;font-weight:500; }
.fp-note p { margin-top:5px;color:#b3bfcc;font-size:13px;line-height:1.7; }
.fp-list { display:flex;flex-direction:column; }
.fp-row { display:flex;align-items:flex-start;gap:11px;padding:16px 12px;border-bottom:1px solid var(--fp-line);transition:background .35s; }
.fp-row:last-child { border-bottom:0; }
.fp-row-icon { color:#a2b5c7;padding-top:3px; }
.fp-row>div { flex:1;min-width:0; }
.fp-row strong { font-size:13px;font-weight:500; }
.fp-row p { color:var(--demo-muted);font-size:13px;margin-top:4px;line-height:1.6; }
.fp-row small { color:var(--demo-muted);font-size:12px;white-space:nowrap;padding-top:3px; }
.fp-metrics { display:flex;gap:20px;padding-bottom:21px;margin-bottom:5px;border-bottom:1px solid var(--fp-line); }
.fp-metrics>div { flex:1;min-width:0; }
.fp-metrics span { display:block;color:var(--demo-muted);font-size:12px; }
.fp-metrics strong { display:block;font-size:25px;font-weight:400;letter-spacing:-.045em;margin-top:5px;font-variant-numeric:tabular-nums; }
.fp-person { display:flex;align-items:center;gap:10px; }
.fp-person img { width:29px;height:29px;border-radius:50%;object-fit:cover; }
.fp-person strong { font-size:13px;font-weight:500;white-space:nowrap; }
.fp-person p { font-size:12px;color:var(--demo-muted); }
.fp-message { margin:17px 0; }
.fp-message>span { display:block;font-size:12px;color:var(--demo-muted);margin-bottom:6px; }
.fp-message p { font-size:13px;line-height:1.75; }
.fp-user { margin-left:25px; }
.fp-user>span { text-align:right; }
.fp-user p { padding:12px 14px;border:1px solid var(--fp-line);border-radius:var(--demo-control-radius);background:var(--demo-selected); }
.fp-steps { list-style:none;margin:16px 0 0;padding:0; }
.fp-steps li { display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--fp-line);transition:background .35s; }
.fp-steps li:last-child { border:0; }
.fp-steps li>span { font-size:12px;color:#8f9faf;line-height:21px; }
.fp-steps li>div { flex:1; }
.fp-steps strong { font-size:13px;font-weight:500; }
.fp-steps p { font-size:13px;color:var(--demo-muted);margin-top:3px;line-height:1.6; }
.fp-steps svg { color:#8bbaa9;width:13px;margin-top:4px; }
.fp-table-wrap { width:100%;overflow-x:auto; }
.feature-preview table { width:100%;border-collapse:collapse;font-size:13px;text-align:left; }
.feature-preview th { padding:12px;font-weight:400;font-size:12px;color:var(--demo-muted);border-bottom:1px solid var(--fp-line); }
.feature-preview td { padding:14px 12px;border-bottom:1px solid var(--fp-line);font-variant-numeric:tabular-nums; }
.feature-preview td:not(:first-child),.feature-preview th:not(:first-child) { padding-left:12px; }
.feature-preview td:last-child,.feature-preview th:last-child { text-align:right; }
.feature-preview tr:last-child td { border-bottom:0; }
.fp-recording { display:flex;align-items:center;gap:10px;border:1px solid var(--fp-line);border-radius:var(--demo-control-radius);padding:14px;font-size:13px; }
.fp-recording small { margin-left:auto;color:var(--demo-muted); }
.fp-options { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; }
.fp-options span { border:1px solid var(--fp-line);padding:6px 9px;border-radius:4px;font-size:12px;color:#b8c5d2; }
.fp-scores { margin-top:28px; }
.fp-scores>div { display:grid;grid-template-columns:1.3fr 1fr 26px;gap:14px;align-items:center;margin-bottom:25px;font-size:13px; }
.fp-scores meter { width:100%;height:6px;appearance:none;background:#293440;border:0;border-radius:2px; }
.fp-scores meter::-webkit-meter-bar { background:#293440;border:0;height:6px; }
.fp-scores meter::-webkit-meter-optimum-value { background:#9baebe; }
.fp-scores meter::-moz-meter-bar { background:#9baebe; }
.fp-footer { display:flex;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid var(--fp-line);font-size:12px;color:var(--demo-muted); }
.feature-preview :is(button,[tabindex]):focus-visible { outline:2px solid #38bdf8;outline-offset:3px; }
@media (max-width:1100px) and (min-width:769px) { body.life-page .life-feature-row { gap:28px; } .fp-heading { flex-wrap:wrap;gap:8px; } }
@media (max-width:480px) { .fp-view { padding:18px 16px; } .fp-heading { flex-wrap:wrap;gap:8px; } .fp-tabs { padding-inline:16px; } .fp-chrome { padding-inline:14px; } .fp-metrics { gap:12px; } .fp-metrics strong { font-size:23px; } .fp-row small { font-size:11px; } .fp-scores>div { grid-template-columns:1.5fr 1fr 24px;gap:8px; } }
@media (prefers-reduced-motion:reduce) { .feature-preview * { transition:none!important; } }
/* Content insets follow the app's panel padding; no faux workspace rail. */
.fp-before { padding:24px; }
.fp-before:has(+ .fp-tabs) { padding-bottom:8px; }
.fp-before>.fp-heading:last-child { margin-bottom:0; }
.fp-after { padding:0 24px 24px; }
.fp-view> :first-child { margin-top:0; }
.fp-view> :last-child { margin-bottom:0; }
.fp-actions,.fp-toolbar { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
.fp-actions { margin-top:16px; }
.fp-action { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 12px;border:1px solid var(--fp-line);border-radius:var(--demo-control-radius);background:var(--demo-panel);color:#dfe7f0;font-size:12px;line-height:1.5; }
button.fp-action:hover { background:#d3e0ec15; }
.fp-form-field { display:flex;flex-direction:column;gap:7px;margin-bottom:18px;font-size:13px; }
.fp-form-field>span { color:var(--demo-muted);font-size:12px; }
.fp-form-field>div { padding:10px 12px;border:1px solid var(--fp-line);border-radius:var(--demo-control-radius);min-height:40px; }
.fp-heading { flex-wrap:wrap; }
.fp-badge { white-space:normal; }
.fp-row { border-radius:4px; }
.fp-table-wrap { border:1px solid var(--fp-line);border-radius:var(--demo-control-radius); }
.feature-preview table { min-width:310px; }
.feature-preview td,.feature-preview th { vertical-align:top; }
.feature-preview th { background:#d3e0ec05; }
.fp-fields>div:last-child { border-bottom:0; }
.fp-pane { border:1px solid var(--fp-line);border-radius:var(--demo-control-radius);padding:16px;min-width:0; }
.fp-pane+.fp-pane { margin-top:16px; }
.fp-pane-label { font-size:12px;color:var(--demo-muted);margin-bottom:12px; }
.fp-split { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.fp-split>* { min-width:0; }
.fp-split>.fp-pane { margin-top:0; }
.fp-contact-line { display:flex;align-items:center;gap:12px;margin-block:18px; }
.fp-transcript-line { padding-block:10px;font-size:13px; }
.fp-transcript-line strong { font-weight:500; }
.fp-transcript-line p { color:#b3bfcc;margin-top:4px;line-height:1.7; }
@media(max-width:480px) {
 .fp-before { padding:20px 18px; }
 .fp-after { padding:0 18px 20px; }
 .fp-view { padding:20px 18px; }
 .fp-tabs { padding-inline:18px;gap:14px;flex-wrap:wrap; }
 .fp-tabs button { font-size:12px; }
 .fp-chrome,.fp-footer { padding-inline:18px; }
 .fp-chrome { font-size:12px; }
 .fp-split { grid-template-columns:1fr; }
 .fp-row { gap:9px;padding:14px 8px;flex-wrap:wrap; }
 .fp-row small { margin-left:auto; }
}
.feature-preview { container-type:inline-size; }
.fp-heading>.fp-actions { margin-top:0; }
.fp-toolbar { justify-content:space-between;margin-bottom:20px;font-size:12px; }
.fp-toolbar .fp-actions { margin-top:0; }
.fp-pane-label { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
.fp-contact-line { justify-content:space-between;flex-wrap:wrap; }
.fp-contact-line>div { min-width:0;flex:1; }
.fp-contact-line strong { font-size:15px;font-weight:500; }
.fp-contact-line p { margin-top:5px;font-size:12px;color:var(--demo-muted); }
.fp-contact-line>span { font-size:12px;color:#b8d1c9; }
.fp-pane>.fp-note { margin-top:12px; }
.fp-pane .fp-contact-line:first-child { margin-top:0; }
.fp-pane .fp-contact-line:last-child { margin-bottom:0; }
/* Refined preview composition: content first, compact simulation controls. */
.fp-chrome { padding-block:13px;color:#b7c4d2; }
.fp-chrome>img { width:18px;height:18px; }
.fp-before,.fp-view { padding:24px; }
.fp-heading { gap:10px;margin-bottom:20px; }
.fp-heading p { max-width:36ch; }
.fp-playback { display:flex;align-items:center;gap:13px;margin-left:auto; }
.fp-playback button { padding:4px 8px;background:var(--demo-panel);border:1px solid var(--fp-line);border-radius:var(--demo-control-radius);color:var(--demo-muted);font-size:12px;line-height:1.5; }
.fp-playback button:hover { color:#fff; }
.fp-playback-state { color:#8ab7a6;font-size:11px; }
.fp-is-paused .fp-playback-state { color:#94a1b1; }
.fp-footer { gap:12px;padding-block:10px;font-size:11px; }
.fp-sim-hidden { visibility:hidden;opacity:0; }
[data-sim] { transition:opacity .25s ease; }
.fp-pane { padding:18px; }
.fp-pane .fp-note { border:0;padding:0;background:none; }
.fp-pane .fp-note strong { font-size:14px; }
.fp-pane .fp-note p { margin-top:8px; }
@media(max-width:480px) {
 .fp-before,.fp-view { padding:20px 18px; }
 .fp-playback { gap:10px; }
 .fp-playback-state { display:none; }
}