/* 강점 코치 입문 소개(/workshops/basic). 바탕 토큰·히어로·일정·FAQ는 workshop_strength_level.css의 .sl을 쓰고,
   입문에만 있는 구역만 여기 둔다. 카드가 바뀌는 움직임은 /workshops 과정 카드(wl-path)와 같다. */

.sb { --sb-violet: #7250bf; }

/* 히어로: 그림은 /workshops 처럼 살짝 커졌다 자리를 잡고, 글은 한 줄씩 올라온다 */
.sb .sl-hero__art { animation: sb-art-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
.sb-hero__copy > * { animation: sb-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.sb-hero__copy > :nth-child(2) { animation-delay: .08s; }
.sb-hero__copy > :nth-child(3) { animation-delay: .16s; }
.sb-hero__copy > :nth-child(4) { animation-delay: .26s; }
.sb-hero__copy > :nth-child(5) { animation-delay: .34s; }
.sb-offer { animation: sb-rise .9s .3s cubic-bezier(.2,.7,.2,1) both; }
.sb .sl-hero h1 { font-size: clamp(42px, 4.9vw, 64px); }

.sb-offer .sl-offer__label { display: flex; align-items: center; gap: 8px; }
.sb-offer__live { width: 7px; height: 7px; border-radius: 50%; background: #5ee39a; box-shadow: 0 0 0 0 rgba(94,227,154,.6); animation: sb-pulse 2s ease-out infinite; }
.sb-offer__date { margin: 22px 0 0; font: 720 34px/1 Inter, Pretendard, sans-serif; letter-spacing: -.04em; }
.sb-offer__date small { margin-left: 6px; color: rgba(255,255,255,.5); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.sb-offer .sl-offer__meta { margin-top: 16px; }
.sb-offer .sl-offer__meta li { grid-template-columns: 44px 1fr; padding: 7px 0; }
.sb-offer__place small { display: block; margin-top: 3px; color: rgba(255,255,255,.4); font-size: 11px; line-height: 1.45; }
.sb-offer__urgent { margin-left: 6px; color: #ffb3a9; font-size: 11px; }
.sb-offer__price { margin-top: 18px; padding-top: 18px; padding-bottom: 0; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 0; }
.sb-offer__includes { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.sb-offer__includes li { padding: 6px 10px; border: 1px solid rgba(var(--sl-accent-rgb), .35); border-radius: 999px; color: #e4d9ff; background: rgba(var(--sl-accent-rgb), .1); font-size: 11px; font-weight: 600; }
.sb-offer__cta { width: 100%; margin-top: 22px; }

/* 공통 머리 */
.sb-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.sb-head .sl-copy { max-width: 430px; margin: 0 0 4px; font-size: 15px; }

/* 이런 분들이 듣습니다: /workshops 과정 카드(wl-path)의 움직임을 쓰되, 설명 글은 숨기지 않는다.
   그 카드는 상세 페이지로 가는 링크라 글을 가려도 되지만, 여기서는 "가져가는 것"이 본문이다.
   카드 아래쪽 자리에서 그림이 올라오고 말풍선이 뜬다(데스크톱은 마우스, 폰은 스크롤). */
.sb-who { padding: 112px 0 120px; background: var(--sl-paper); }
.sb-personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 54px; }
.sb-persona {
  --path-accent: var(--sb-violet);
  --path-glow: rgba(114,80,191,.2);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 236px;
  overflow: hidden;
  border: 1px solid rgba(21,17,25,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.6);
  outline: none;
  transition: transform .5s cubic-bezier(.2,.75,.2,1), border-color .35s ease, box-shadow .5s ease;
}
.sb-persona:nth-child(2) { --path-accent: #3f6ff4; --path-glow: rgba(63,111,244,.18); }
.sb-persona:nth-child(3) { --path-accent: #db7b12; --path-glow: rgba(219,123,18,.2); }
.sb-persona:nth-child(4) { --path-accent: #0f9a83; --path-glow: rgba(15,154,131,.18); }
.sb-persona::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 78% 86%, var(--path-glow), transparent 58%); opacity: 0; transition: opacity .55s ease; }
.sb-persona::after { content: ""; position: absolute; z-index: 4; inset: 0 22px auto; height: 3px; border-radius: 0 0 999px 999px; background: var(--path-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.75,.2,1); }
.sb-persona__num { position: relative; z-index: 3; color: var(--path-accent); font: 700 12px/1 Inter, sans-serif; letter-spacing: .08em; }
.sb-persona__base { position: relative; z-index: 2; }
.sb-persona__tag { display: block; margin-top: 34px; color: var(--path-accent); font-size: 12px; font-weight: 750; }
.sb-persona__title { margin: 12px 0 0; font-size: clamp(20px, 1.9vw, 24px); font-weight: 720; line-height: 1.32; letter-spacing: -.04em; white-space: pre-line; word-break: keep-all; }
.sb-persona__copy { margin: 16px 0 0; color: #6f6972; font-size: 14px; line-height: 1.72; word-break: keep-all; }
.sb-persona__reveal { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 152px; pointer-events: none; }
.sb-persona__bubble {
  position: relative;
  display: block;
  padding: 13px 15px 14px;
  border: 1px solid rgba(21,17,25,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.96);
  color: #211b25;
  box-shadow: 0 16px 38px -24px rgba(21,17,25,.35);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.025em;
  word-break: keep-all;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transform-origin: 75% 100%;
  transition: opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.sb-persona__bubble::after { content: ""; position: absolute; right: 26%; bottom: -8px; width: 14px; height: 14px; border-right: 1px solid rgba(21,17,25,.1); border-bottom: 1px solid rgba(21,17,25,.1); background: rgba(255,255,255,.96); transform: rotate(45deg); }
.sb-persona__art { position: absolute; right: -18px; bottom: -26px; width: 196px; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.05) saturate(.95); -webkit-mask-image: linear-gradient(to right, transparent, #000 24%), linear-gradient(to bottom, transparent, #000 24%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 24%), linear-gradient(to bottom, transparent, #000 24%); mask-composite: intersect; opacity: .4; transform: translateY(40px) scale(.94); transform-origin: 60% 100%; pointer-events: none; transition: opacity .45s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.sb-persona[data-scroll-active="true"], .sb-persona:focus-visible { border-color: color-mix(in srgb, var(--path-accent) 38%, transparent); box-shadow: 0 28px 65px -42px var(--path-accent); }
.sb-persona[data-scroll-active="true"]::before, .sb-persona:focus-visible::before { opacity: 1; }
.sb-persona[data-scroll-active="true"]::after, .sb-persona:focus-visible::after { transform: scaleX(1); }
.sb-persona[data-scroll-active="true"] .sb-persona__bubble, .sb-persona:focus-visible .sb-persona__bubble { opacity: 1; transform: translateY(0) scale(1); }
.sb-persona[data-scroll-active="true"] .sb-persona__art, .sb-persona:focus-visible .sb-persona__art { opacity: .96; transform: translateY(0) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .sb-persona:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--path-accent) 38%, transparent); box-shadow: 0 30px 70px -42px var(--path-accent); }
  .sb-persona:hover::before { opacity: 1; }
  .sb-persona:hover::after { transform: scaleX(1); }
  .sb-persona:hover .sb-persona__bubble { opacity: 1; transform: translateY(0) scale(1); }
  .sb-persona:hover .sb-persona__art { opacity: .96; transform: translateY(0) scale(1); }
}

/* 하루가 끝나면 남는 것 */
.sb-takeaways { padding: 118px 0 126px; background: #fff; }
.sb-takeaways__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.sb-takeaways__visual { position: sticky; top: 130px; }
.sb-takeaways__visual .sl-copy { max-width: 420px; }
.sb-report { min-height: 360px; margin-top: 36px; border-radius: 18px; }
.sb-takeaway-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sl-ink); }
.sb-takeaway { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 28px 4px 30px; border-bottom: 1px solid var(--sl-line); }
.sb-takeaway__num { color: var(--sl-accent); font: 700 12px/1.9 Inter, sans-serif; }
.sb-takeaway h3 { margin: 0; font-size: 21px; font-weight: 720; letter-spacing: -.035em; }
.sb-takeaway p { margin: 8px 0 0; color: #6f6972; font-size: 14px; line-height: 1.7; word-break: keep-all; }

/* 하루 순서 */
.sb-day { padding: 112px 0 120px; background: #dcd0f8; }
.sb-day .sl-kicker { color: #6741b6; }
.sb-day .sl-copy { color: #5d5566; }
.sb-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 54px 0 0; padding: 0; list-style: none; counter-reset: step; }
/* scroll-reveal이 transform·transition을 인라인으로 넣어서, 올라오는 효과는 !important로 덮는다 */
.sb-step { position: relative; min-height: 214px; display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: 18px; background: #fff; transition: opacity .5s ease, transform .3s ease, box-shadow .3s ease !important; }
.sb-step:hover { transform: translateY(-4px) !important; box-shadow: 0 22px 46px -32px rgba(64,36,128,.55); }
.sb-step__num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #6741b6; font: 700 13px/1 Inter, sans-serif; }
.sb-step h3 { margin: 22px 0 0; font-size: 19px; font-weight: 720; letter-spacing: -.035em; }
.sb-step p { margin: 8px 0 0; color: #6c6670; font-size: 13px; line-height: 1.65; word-break: keep-all; }
.sb-step__tag { align-self: flex-start; margin-top: auto; padding: 5px 9px; border-radius: 999px; color: #5b3aa6; background: #f1ebff; font-size: 11px; font-weight: 700; }
.sb-step p + .sb-step__tag { margin-top: 16px; }
.sb-step--end { color: #fff; background: #4b2a96; }
.sb-step--end .sb-step__num { color: #4b2a96; background: #fff; }
.sb-step--end p { color: rgba(255,255,255,.75); }
.sb-step__link { align-self: flex-start; margin-top: auto; padding-top: 14px; color: #fff; font-size: 13px; font-weight: 700; }
.sb-step__link:hover { text-decoration: underline; }

/* 역할과 DNA: 3영역 × 9역할 × 27DNA 지도, 그리고 같은 역할·다른 DNA 예시 */
.sb-why { padding: 112px 0 120px; background: #fff; }
.sb-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.sb-map__domain { display: grid; gap: 10px; align-content: start; }
.sb-map__ways { display: grid; gap: 10px; }
.sb-map__label { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--sl-ink); color: #6f6972; font-size: 13px; }
.sb-map__label b { margin-right: 6px; color: var(--sl-ink); font-size: 17px; font-weight: 750; }
.sb-way { padding: 16px 16px 14px; border: 1px solid var(--sl-line); border-radius: 16px; background: #fff; transition: opacity .5s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease !important; }
.sb-way:hover { transform: translateY(-3px) !important; border-color: rgba(var(--sl-accent-rgb), .55); box-shadow: 0 18px 40px -30px rgba(80,50,150,.55); }
.sb-way__head { display: flex; align-items: center; gap: 12px; }
.sb-way__img { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: center 26%; background: #f3effa; transition: transform .35s cubic-bezier(.2,.75,.2,1); }
.sb-way__img--finish { object-position: center 47%; }
.sb-way:hover .sb-way__img { transform: scale(1.12) rotate(-4deg); }
.sb-way h3 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.03em; }
.sb-way small { color: #9a939c; font-size: 11px; }
.sb-way__dnas { margin: 12px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px dashed rgba(18,16,22,.14); display: grid; gap: 6px; }
.sb-dna { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.5; }
.sb-dna b { justify-self: start; padding: 2px 8px; border-radius: 999px; color: #5b3aa6; background: #f1ebff; font-size: 11px; font-weight: 700; white-space: nowrap; transition: color .25s ease, background .25s ease; }
.sb-dna span { color: #6f6972; word-break: keep-all; }
.sb-way:hover .sb-dna b { color: #fff; background: #7250bf; }
.sb-map__domain:nth-child(1) .sb-dna b { color: #2f5bd1; background: #eaf0ff; }
.sb-map__domain:nth-child(1) .sb-way:hover .sb-dna b { color: #fff; background: #3f6ff4; }
.sb-map__domain:nth-child(3) .sb-dna b { color: #b0620d; background: #fff1e0; }
.sb-map__domain:nth-child(3) .sb-way:hover .sb-dna b { color: #fff; background: #db7b12; }

.sb-same { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; margin-top: 72px; padding: 40px; border-radius: 26px; background: var(--sl-paper); }
.sb-same__eyebrow { margin: 0; color: var(--sb-violet); font-size: 12px; font-weight: 700; }
.sb-same__intro h3 { margin: 12px 0 0; font-size: 26px; font-weight: 750; line-height: 1.3; letter-spacing: -.045em; word-break: keep-all; }
.sb-same__intro p { margin: 14px 0 0; color: #6f6972; font-size: 14px; line-height: 1.75; word-break: keep-all; }
.sb-same__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sb-person { position: relative; padding: 20px 20px 22px; border: 1px solid var(--sl-line); border-radius: 20px; background: #fff; transition: opacity .5s ease, transform .5s ease !important; }
.sb-person__label { position: absolute; top: 16px; left: 18px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--sl-ink); font: 700 12px/1 Inter, sans-serif; }
.sb-person__stage { position: relative; height: 170px; }
.sb-person__img { position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; border-radius: 50%; object-fit: cover; object-position: center 26%; background: #fdf3df; transform: translate(-50%, -50%); }
.sb-person__item { position: absolute; padding: 6px 11px; border: 1px solid rgba(var(--sl-accent-rgb), .35); border-radius: 999px; color: #4c2f94; background: #f6f1ff; box-shadow: 0 10px 24px -18px rgba(76,47,148,.7); font-size: 12px; font-weight: 750; white-space: nowrap; animation: sb-float 4.2s ease-in-out infinite; }
.sb-person__item--1 { left: 4%; top: 18%; }
.sb-person__item--2 { right: 2%; top: 30%; animation-delay: -1.4s; }
.sb-person__item--3 { left: 14%; bottom: 6%; animation-delay: -2.8s; }
.sb-person:nth-child(2) .sb-person__item { color: #8a4b05; border-color: rgba(219,123,18,.35); background: #fff4e6; }
.sb-person__reads { margin: 6px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed rgba(18,16,22,.14); display: grid; gap: 5px; color: #5f5963; font-size: 13px; line-height: 1.55; }
.sb-person__reads li::before { content: "· "; color: var(--sl-accent); font-weight: 700; }
.sb-person__reading { margin: 12px 0 0; font-size: 15px; font-weight: 750; letter-spacing: -.03em; }

/* 현장·강사 */
.sb-room { padding: 112px 0 120px; background: var(--sl-paper); }
.sb-room__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.sb-room__photo { position: relative; margin: 0; overflow: hidden; border-radius: 22px; }
.sb-room__photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sb-room__photo:hover img { transform: scale(1.03); }
.sb-room__photo figcaption { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(8,6,13,.55); font-size: 11px; }
.sb-instructor { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; margin-top: 34px; padding: 18px; border: 1px solid var(--sl-line); border-radius: 18px; background: #fff; }
.sb-instructor img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.sb-instructor small { color: var(--sb-violet); font-size: 11px; font-weight: 700; }
.sb-instructor h3 { margin: 4px 0 0; font-size: 17px; font-weight: 720; letter-spacing: -.03em; }
.sb-instructor p { margin: 6px 0 0; color: #736d75; font-size: 13px; line-height: 1.6; word-break: keep-all; }

/* 다음 길 */
.sb-next { padding: 112px 0 120px; background: var(--sl-ink); color: #fff; }
.sb-next .sl-copy { color: rgba(255,255,255,.55); }
.sb-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 54px 0 0; padding: 0; list-style: none; }
.sb-path__step { position: relative; min-height: 250px; display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.04); }
.sb-path__step:not(:last-child)::after { content: "→"; position: absolute; top: 26px; right: 24px; color: rgba(255,255,255,.3); font-size: 22px; }
.sb-path__step--now { border-color: rgba(var(--sl-accent-rgb), .6); background: rgba(var(--sl-accent-rgb), .12); }
.sb-path__label { color: var(--sl-accent); font: 700 11px/1 Inter, Pretendard, sans-serif; letter-spacing: .06em; }
.sb-path__step h3 { margin: 30px 0 0; font-size: 26px; font-weight: 730; letter-spacing: -.04em; }
.sb-path__step p { margin: 10px 0 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.7; word-break: keep-all; }
.sb-path__meta { margin-top: auto; padding-top: 22px; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; }
.sb-path__meta b { display: inline-block; margin-left: 6px; padding: 4px 8px; border-radius: 999px; color: #14101a; background: #c9b5ff; font-size: 11px; }
.sb-path__link { align-self: flex-start; margin-top: 12px; color: #fff; font-size: 13px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.4); }
.sb-path__link:hover { border-bottom-color: #fff; }

@keyframes sb-art-in { from { opacity: 0; transform: scale(1.05); } to { opacity: .48; transform: scale(1); } }
@keyframes sb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(94,227,154,.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(94,227,154,0); } }

@media (max-width: 1100px) {
  .sb-personas { grid-template-columns: repeat(2, 1fr); }
  .sb-same { grid-template-columns: 1fr; gap: 30px; }
  .sb-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  .sb-takeaways__grid, .sb-room__grid { grid-template-columns: 1fr; gap: 44px; }
  .sb-takeaways__visual { position: static; }
  .sb-path { grid-template-columns: 1fr; }
  .sb-path__step { min-height: 0; }
  .sb-map { grid-template-columns: 1fr; gap: 30px; }
  .sb-path__step:not(:last-child)::after { content: "↓"; }
}

@media (max-width: 700px) {
  .sb .sl-hero h1 { font-size: 36px; }
  .sb .sl-hero__art { animation-name: sb-art-in-mobile; }
  .sb-head { display: block; }
  .sb-head .sl-copy { margin-top: 20px; font-size: 14px; }
  .sb-who, .sb-takeaways, .sb-day, .sb-room, .sb-next { padding-block: 80px; }
  .sb-personas { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .sb-persona { padding: 23px 23px 226px; }
  .sb-persona__tag { margin-top: 28px; }
  .sb-persona__title { font-size: 23px; }
  .sb-persona__copy { font-size: 14px; }
  .sb-persona__art { width: 200px; right: -6px; }
  .sb-report { min-height: 320px; }
  .sb-takeaway { grid-template-columns: 40px 1fr; padding: 23px 0 25px; }
  .sb-takeaway h3 { font-size: 18px; }
  .sb-steps { grid-template-columns: 1fr; gap: 8px; margin-top: 36px; }
  .sb-step { min-height: 0; display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding: 16px 18px; border-radius: 14px; }
  .sb-step__num { grid-row: 1 / span 3; width: 28px; height: 28px; font-size: 12px; }
  .sb-step h3 { grid-column: 2; margin: 3px 0 0; font-size: 17px; }
  .sb-step p { grid-column: 2; margin-top: 4px; }
  .sb-step__tag, .sb-step p + .sb-step__tag { grid-column: 2; justify-self: start; margin-top: 10px; }
  .sb-step__link { grid-column: 2; justify-self: start; padding-top: 8px; }
  .sb-offer__date { font-size: 30px; }
  .sb-instructor { grid-template-columns: 64px 1fr; gap: 14px; padding: 15px; }
  .sb-instructor img { width: 64px; height: 64px; }
  .sb-path { margin-top: 40px; }
  .sb-why { padding-block: 80px; }
  .sb-map { margin-top: 40px; }
  /* 폰에서는 영역마다 역할 카드 3장을 옆으로 넘겨 본다(세로로 9장을 쌓으면 화면 네 개 높이가 된다) */
  .sb-map__ways { display: flex; gap: 10px; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sb-map__ways::-webkit-scrollbar { display: none; }
  .sb-map__ways .sb-way { flex: 0 0 84%; scroll-snap-align: start; scroll-margin-left: 16px; }
  .sb-same { margin-top: 48px; padding: 24px 18px; border-radius: 20px; }
  .sb-same__intro h3 { font-size: 22px; }
  .sb-same__pair { grid-template-columns: 1fr; }
  .sb-path__step { padding: 24px; }
}

@keyframes sb-art-in-mobile { from { opacity: 0; transform: scale(1.05); } to { opacity: .53; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .sb .sl-hero__art, .sb-hero__copy > *, .sb-offer, .sb-offer__live { animation: none; }
  .sb-persona, .sb-persona::before, .sb-persona::after, .sb-persona__base, .sb-persona__reveal, .sb-persona__bubble, .sb-persona__art,
  .sb-step, .sb-way, .sb-way__img, .sb-person, .sb-room__photo img { transition: none !important; }
  .sb-person__item { animation: none; }
}