/**
 * Единая интерактивная презентация восьми возможностей SteppeMind.
 * Стеклянные сцены, навигация, состояния примеров и адаптация обеих тем.
 */
:root body .solution-brochure .brochure-story-pair:has(> .steppemind-showcase) { width: min(1480px, calc(100% - 80px)); }
:root body .solution-brochure .brochure-story-pair .brochure-story-block.steppemind-showcase { width:100%; max-width:none; margin:0; min-width:0; }
.sm-view { --sm-glass:rgba(255,255,255,.7); --sm-glass-line:rgba(255,255,255,.9); --sm-shadow:rgba(28,72,105,.2); }
:root[data-theme="dark"] .sm-view { --sm-glass:rgba(16,31,53,.74); --sm-glass-line:rgba(190,227,255,.3); --sm-shadow:rgba(0,0,0,.35); }
:root body .solution-brochure .sm-heading { display:grid; grid-template-columns:1fr; gap:18px 40px; align-items:end; margin-bottom:32px; }
:root body .solution-brochure .sm-brand { grid-column:1/-1; }
:root[data-theme] body .solution-brochure .sm-brand h3 { padding:0; margin:0; font-size:clamp(32px,3.5vw,54px); line-height:1.08; text-transform:none; letter-spacing:-.045em; color:var(--solution-heading); }
:root body .solution-brochure .sm-brand h3::before { display:none; }
.sm-heading .sm-tagline { margin:0; font-size:18px; line-height:1.4; letter-spacing:.04em; text-transform:uppercase; color:var(--solution-blue); }
.sm-tabs { display:flex; gap:5px; padding:7px; margin-bottom:18px; border:1px solid var(--solution-line); border-radius:23px; overflow-x:auto; scrollbar-width:thin; scroll-snap-type:x proximity; }
.sm-tabs button { flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:9px; min-height:54px; padding:10px 14px; border:0; border-radius:16px; background:transparent; color:var(--solution-copy); font:inherit; font-size:13px; cursor:pointer; scroll-snap-align:start; white-space:nowrap; }
.sm-tabs button[aria-selected="true"] { background:var(--solution-surface); color:var(--solution-heading); box-shadow:0 4px 14px -8px var(--sm-shadow); }
.sm-tabs button[aria-selected="true"]::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--solution-blue); }
.sm-tabs img { width:21px; height:21px; opacity:.75; }
:root[data-theme="dark"] .sm-view img[src*="/icons/"] { filter:brightness(0) invert(1); }
.sm-theater { overflow:hidden; border-radius:30px; background:var(--solution-tint) url('/assets/images/steppemind-stage-light.png?v=1') center/cover; position:relative; touch-action:pan-y; }
:root[data-theme="dark"] .sm-theater { background-image:url('/assets/images/steppemind-stage-dark.png?v=1'); }
.sm-slide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:50px; min-height:515px; padding:46px 54px 30px; }
.sm-slide[hidden] { display:none; }
.sm-story { min-width:0; }
.sm-kicker { display:block; color:var(--solution-blue); font-size:11px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; margin-bottom:28px; }
.sm-story h5 { margin:0 0 26px; font-size:clamp(36px,4.05vw,66px); line-height:1.02; font-weight:700; letter-spacing:-.055em; color:var(--solution-heading); }
.sm-description { max-width:500px; min-height:92px; font-size:16px; line-height:1.7; color:var(--solution-copy); }
.sm-description strong { font-weight:500; color:var(--solution-heading); }
.sm-choices { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.sm-choices button { min-height:42px; padding:10px 16px; border:1px solid var(--solution-line); border-radius:999px; background:var(--sm-glass); color:var(--solution-heading); font:inherit; font-size:13px; cursor:pointer; }
.sm-choices button[aria-pressed="true"] { border-color:var(--solution-blue); background:var(--solution-heading); color:var(--solution-paper); }
.sm-demo { min-width:0; position:relative; padding:14px 42px 14px 0; }
.sm-conversation { position:relative; min-height:365px; padding:25px; border:1px solid var(--sm-glass-line); border-radius:25px; background:var(--sm-glass); box-shadow:inset 0 1px 0 var(--sm-glass-line),0 24px 60px -24px var(--sm-shadow); -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2); }
.sm-demo-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; color:var(--solution-heading); }
.sm-demo-header strong { font-size:18px; letter-spacing:-.025em; }
.sm-demo-header span { color:var(--solution-copy); font-size:10px; }
.sm-question { margin:18px 0; padding:13px 16px; border-radius:14px; color:var(--solution-heading); background:color-mix(in srgb,var(--solution-blue) 13%,transparent); font-size:15px; line-height:1.5; }
.sm-answer { min-height:105px; color:var(--solution-heading); font-size:15px; line-height:1.6; }
.sm-answer p { margin:0; padding:7px 0; }
.sm-answer p + p { border-top:1px solid color-mix(in srgb,var(--solution-line) 55%,transparent); }
.sm-controls { display:flex; align-items:center; gap:19px; padding:0 54px 32px; }
.sm-controls button { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:1px solid var(--solution-line); border-radius:50%; background:var(--sm-glass); color:var(--solution-heading); cursor:pointer; padding:0; line-height:0; }
.sm-controls button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
.sm-controls button img { display:block; width:22px; height:22px; margin:0; object-fit:contain; }
/* Небольшая оптическая поправка компенсирует визуальный вес треугольника слева. */
.sm-play[aria-pressed="false"] img { transform:translateX(1px); }
.sm-count { white-space:nowrap; color:var(--solution-copy); font-size:12px; font-variant-numeric:tabular-nums; }
.sm-timeline { display:flex; flex:1; gap:6px; }
.sm-timeline span { flex:1; height:3px; background:var(--solution-line); border-radius:4px; overflow:hidden; position:relative; }
.sm-timeline span.is-complete { background:var(--solution-blue); }
.sm-timeline span.is-current::before { content:''; display:block; height:100%; background:var(--solution-blue); }
@media (hover:hover) {
    .sm-tabs button:hover,.sm-choices button:hover { transform:translateY(-2px); border-color:var(--solution-blue); }
    .sm-controls button:hover { transform:scale(1.08); border-color:var(--solution-blue); }
}
@media (prefers-reduced-motion:no-preference) {
    .sm-tabs button,.sm-choices button,.sm-controls button { transition:transform .22s ease,background-color .22s ease,border-color .22s ease; }
    .is-playing .sm-timeline span.is-current::before { transform-origin:left; animation:sm-progress 7.5s linear; }
    @keyframes sm-progress { from {transform:scaleX(0);} to {transform:scaleX(1);} }
}
@media (max-width:1100px) {
    .sm-slide { gap:28px; padding:34px; }
    .sm-story h5 { font-size:46px; }
    .sm-demo { padding-right:0; }
    .sm-controls { padding:0 34px 28px; }
    .sm-heading { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    :root body .solution-brochure .brochure-story-pair:has(> .steppemind-showcase) { width:calc(100% - 32px); }
    :root body .solution-brochure .sm-heading { grid-template-columns:1fr; gap:16px; margin-bottom:24px; }
    :root[data-theme] body .solution-brochure .sm-brand h3 { font-size:34px; }
    .sm-tabs { border-radius:18px; margin-bottom:14px; padding:5px; }
    .sm-tabs button { min-height:48px; padding:10px 13px; font-size:12px; }
    .sm-theater { border-radius:24px; background-size:auto 700px; background-repeat:no-repeat; background-position:center bottom; }
    .sm-slide { grid-template-columns:1fr; min-height:0; padding:26px 22px 20px; gap:26px; }
    .sm-kicker { margin-bottom:20px; font-size:10px; }
    .sm-story h5 { font-size:42px; margin-bottom:22px; }
    .sm-description { min-height:0; font-size:15px; }
    .sm-choices { gap:8px; margin-top:20px; }
    .sm-choices button { font-size:12px; padding:10px 13px; }
    .sm-demo { padding:0; }
    .sm-conversation { min-height:370px; padding:20px; }
    .sm-demo-header strong { font-size:16px; }
    .sm-question,.sm-answer { font-size:14px; }
    .sm-controls { padding:0 22px 24px; gap:10px; }
    .sm-controls button { width:42px; height:42px; flex-basis:42px; }
    .sm-count { font-size:10px; }
    .sm-timeline { gap:3px; }
}
@supports not (backdrop-filter:blur(22px)) {
    .sm-conversation { background:var(--solution-surface); }
}

/* Сюжетная иллюстрация — часть стеклянной сцены, текст остаётся доступным HTML. */
.sm-scene-art { margin: 14px 0 8px; height: 210px; }
.sm-scene-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sm-conversation { min-height: 450px; }
.sm-demo { padding-right: 0; }
.sm-tabs.is-compact { gap: 2px; padding: 5px; overflow-x: hidden; }
.sm-tabs.is-compact button { flex: 1 1 0; min-width: 0; padding: 10px 0; }
.sm-tabs.is-compact button span { display: none; }
.sm-tabs.is-compact button::after { display: none; }
.sm-tabs.is-compact img { width: 24px; height: 24px; opacity: .85; }
@media (max-width: 1100px) { .sm-scene-art { height: 190px; } }
@media (max-width: 760px) {
    .sm-scene-art { height: 175px; margin-top: 16px; }
    .sm-conversation { min-height: 420px; }
    .sm-tabs.is-compact button { min-height: 44px; }
    .sm-tabs.is-compact img { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
    .sm-scene-art img { animation: sm-scene-float 8s ease-in-out infinite; }
    @keyframes sm-scene-float { 50% { transform: translateY(-5px); } }
}