/* Знакомство: одна карточка-акцент, короткий текст, одна главная кнопка */
.sp-ob { position: fixed; left: 0; right: 0; top: 0; height: var(--app-h, 100dvh); z-index: 80; display: flex; flex-direction: column; padding: calc(var(--sa-t) + 12px) 24px calc(var(--sa-b) + 16px); background: var(--sp-void); overflow-y: auto; overscroll-behavior: contain; }
.sp-ob-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; min-height: 0; animation: sp-ob-in var(--sp-t) var(--sp-ease) both; }
.sp-ob-art { display: grid; place-items: center; width: min(62vw, 240px); aspect-ratio: 1; margin-bottom: 14px; border-radius: 40px; background: var(--sp-panel); box-shadow: var(--sp-shadow); }
.sp-ob-title { font: 650 clamp(28px, 8vw, 34px)/1.1 var(--sp-display); letter-spacing: -0.04em; max-width: 14ch; }
.sp-ob-lead { max-width: 32ch; font-size: 16px; line-height: 1.5; color: var(--sp-dust); }
.sp-ob-bottom { display: grid; gap: 12px; width: min(420px, 100%); margin: 0 auto; padding-top: 12px; }
.sp-ob-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 4px; }
.sp-ob-dots button { width: 7px; height: 7px; padding: 0; border-radius: 999px; background: var(--sp-line2); transition: width var(--sp-t) var(--sp-ease), background var(--sp-t-fast); }
.sp-ob-dots button.on { width: 22px; background: var(--sp-ion); }
.sp-ob-skip { min-height: 40px; font-size: 14.5px; font-weight: 500; color: var(--sp-dust); }
@keyframes sp-ob-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-height: 640px) { .sp-ob-art { width: 120px; border-radius: 28px; margin-bottom: 4px; } .sp-ob-art svg { width: 84px; height: 84px; } }