/* H08 · «Рейка з пересадкою» — вертикальна рейка шляху учня, один кадр на крок, друга деталь на 03–05.
   Без JS: усі кроки відкриті списком. З JS (.is-live): один відкритий крок, кадр праворуч (від 900 px).
   Рух — лише з .is-motion (JS ставить, якщо нема «зменшити рух»). Шрифт крейди: Shantell Sans (Google Fonts, див. NOTES). */
.scn-sales{--scn-orange:#e77927;--scn-green:#006e46;--scn-ink:#17231e;--scn-muted:#5e665f;--scn-line:#cfcdbf;--scn-paper:#f5f2e9;--scn-chalk:#2d3a33;--scn-hand:'Shantell Sans','Segoe Print','Comic Sans MS',cursive;--scn-mono:JetMono,Consolas,monospace}
.scn-sales .scn-sales__defs{position:absolute;width:0;height:0;overflow:hidden}
.scn-sales .scn-sales__rail{list-style:none;margin:44px 0 0;padding:0}
.scn-sales .scn-sales__stop{--zc:var(--scn-orange)}
.scn-sales .scn-sales__stop[data-zone="study"],.scn-sales .scn-sales__stop[data-zone="books"]{--zc:var(--scn-green)}
.scn-sales .scn-sales__h{margin:0;font:inherit}

/* кнопка-зупинка */
.scn-sales .scn-sales__btn{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:16px 8px 14px 60px;color:inherit;font:inherit;cursor:pointer;border-radius:10px}
.scn-sales .scn-sales__btn:focus-visible{outline:2px solid var(--scn-green);outline-offset:2px}
.scn-sales .scn-sales__dot{position:absolute;left:0;top:14px;width:38px;height:38px;border-radius:50%;background:var(--scn-paper);border:1.5px solid var(--scn-line);font:600 12px/35px var(--scn-mono);text-align:center;color:var(--scn-muted);z-index:1}
.scn-sales .scn-sales__stop[data-optional] .scn-sales__dot{border-style:dashed;border-color:var(--zc)}
.scn-sales .scn-sales__role{display:block;font:600 12px/16px var(--scn-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--scn-muted);margin-bottom:5px}
.scn-sales .scn-sales__role em{font-style:normal;color:var(--zc);margin-left:8px;letter-spacing:.06em}
.scn-sales .scn-sales__t{display:block;font:400 21px/1.3 Georgia,'Times New Roman',serif;color:#4c554e}
.scn-sales .scn-sales__btn:hover .scn-sales__t{color:var(--scn-ink)}

/* рейка: лінія йде через заголовок і опис кожної зупинки */
.scn-sales .scn-sales__h,.scn-sales .scn-sales__desc{position:relative}
.scn-sales .scn-sales__h::before,.scn-sales .scn-sales__desc::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:var(--zc);opacity:.35}
.scn-sales .scn-sales__stop:first-child .scn-sales__h::before{top:33px}
.scn-sales .scn-sales__stop:last-child .scn-sales__desc::before{display:none}
.scn-sales .scn-sales__stop:last-child .scn-sales__h::before{bottom:auto;height:33px}
/* пробне — бічна петля пунктиром */
.scn-sales .scn-sales__stop[data-optional] .scn-sales__h::before,.scn-sales .scn-sales__stop[data-optional] .scn-sales__desc::before{background:repeating-linear-gradient(180deg,var(--zc) 0 6px,transparent 6px 11px);opacity:.6}
/* пересадка: на 03 лінія змінює колір з продажу на навчання */
.scn-sales .scn-sales__stop[data-zone="handoff"] .scn-sales__h::before,.scn-sales .scn-sales__stop[data-zone="handoff"] .scn-sales__desc::before{background:linear-gradient(180deg,var(--scn-orange),var(--scn-green))}
.scn-sales .scn-sales__stop[data-zone="handoff"] .scn-sales__dot{box-shadow:0 0 0 4px var(--scn-paper),0 0 0 5.5px var(--scn-line)}

.scn-sales .scn-sales__desc>div{padding:0 8px 18px 60px}
.scn-sales .scn-sales__desc p{margin:0;font-size:15.5px;line-height:1.6;color:var(--scn-muted)}
.scn-sales .scn-sales__desc p+p{margin-top:8px}
.scn-sales .scn-sales__desc .scn-sales__note{font-size:13.5px;line-height:1.55;color:var(--scn-ink);border-left:2px solid var(--zc);padding-left:10px}

/* відкрита зупинка (без JS — усі) */
.scn-sales:not(.is-live) .scn-sales__dot,.scn-sales .scn-sales__stop[data-open] .scn-sales__dot{background:var(--zc);border-color:var(--zc);color:#fff;border-style:solid}
.scn-sales:not(.is-live) .scn-sales__t,.scn-sales .scn-sales__stop[data-open] .scn-sales__t{color:var(--scn-green)}
.scn-sales .scn-sales__stop[data-open] .scn-sales__h::before,.scn-sales .scn-sales__stop[data-open] .scn-sales__desc::before{opacity:1}
.scn-sales.is-live .scn-sales__stop[data-optional][data-open] .scn-sales__h::before{opacity:.9}

/* кадри */
.scn-sales .scn-sales__shot{position:relative}
.scn-sales .scn-sales__frame{margin:0;background:#fff;border:1px solid #dddcd1;border-radius:12px;padding:6px;box-shadow:0 22px 44px -22px rgba(64,52,28,.32),0 2px 6px rgba(64,52,28,.05)}
.scn-sales .scn-sales__zoom{position:relative;display:block;cursor:zoom-in;border-radius:8px;color:inherit;text-decoration:none}
.scn-sales .scn-sales__zoom:focus-visible{outline:2px solid var(--scn-green);outline-offset:3px}
.scn-sales .scn-sales__cam{position:relative;display:block;overflow:hidden;border-radius:7px;background:#fff}
.scn-sales .scn-sales__cam img{display:block;width:100%;height:auto;max-width:none}
.scn-sales .scn-sales__spot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:8px;pointer-events:none;box-shadow:0 0 0 2px var(--scn-orange),0 0 0 7px rgba(231,121,39,.2)}
.scn-sales .scn-sales__zm{position:absolute;right:10px;bottom:10px;font:600 12px/1 var(--scn-mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(23,35,30,.78);padding:7px 10px;border-radius:999px;opacity:0;pointer-events:none}
.scn-sales .scn-sales__zoom:hover .scn-sales__zm,.scn-sales .scn-sales__zoom:focus-visible .scn-sales__zm{opacity:1}
.scn-sales .scn-sales__cap{font:500 12px/1.4 var(--scn-mono);color:var(--scn-muted);padding:8px 4px 2px}

/* крейда */
.scn-sales .scn-sales__chalk{margin:0;display:flex;flex-direction:column;align-items:flex-start;color:var(--scn-chalk);pointer-events:none}
.scn-sales .scn-sales__chalk span{font:600 22px/28px var(--scn-hand);filter:url(#scn-sales-chalk-t);white-space:nowrap}
.scn-sales .scn-sales__chalk svg{margin-left:18px;overflow:visible;filter:url(#scn-sales-chalk)}
.scn-sales .scn-sales__chalk path{fill:none;stroke:var(--scn-chalk);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

.scn-sales .scn-sales__story{margin-top:4px}

/* ---------- широкий екран: рейка ліворуч, сцена праворуч ---------- */
@media (min-width:900px){
  .scn-sales:not(.is-live) .scn-sales__stop{display:grid;grid-template-columns:minmax(300px,34%) 1fr;grid-template-rows:auto 1fr;column-gap:56px;padding:8px 0 40px}
  .scn-sales:not(.is-live) .scn-sales__h,.scn-sales:not(.is-live) .scn-sales__desc{grid-column:1}
  .scn-sales:not(.is-live) .scn-sales__shot{grid-column:2;grid-row:1/3;padding:70px 0 0}
  .scn-sales:not(.is-live) .scn-sales__desc{align-self:stretch}
  .scn-sales:not(.is-live) .scn-sales__frame--detail{width:56%;margin:14px 0 0 auto}
  .scn-sales:not(.is-live) .scn-sales__frame--tall{width:38%}
  .scn-sales .scn-sales__chalk{position:absolute;top:0;left:var(--cx,8%);z-index:3}

  .scn-sales.is-live .scn-sales__rail{display:grid;grid-template-columns:minmax(300px,34%) 1fr;grid-template-rows:repeat(10,auto);column-gap:56px;align-content:start}
  .scn-sales.is-live .scn-sales__stop{display:contents}
  .scn-sales.is-live .scn-sales__h,.scn-sales.is-live .scn-sales__desc{grid-column:1}
  .scn-sales.is-live .scn-sales__shot{grid-column:2;grid-row:1/-1;align-self:start;padding:70px 0 132px}
  .scn-sales.is-live .scn-sales__frame--main{width:92%}
  .scn-sales.is-live .scn-sales__frame--detail{position:absolute;right:0;bottom:0;width:52%;z-index:2;box-shadow:0 30px 60px -24px rgba(23,35,30,.42),0 2px 8px rgba(64,52,28,.08)}
  .scn-sales.is-live .scn-sales__frame--tall{width:36%}
}

/* ---------- живий режим: один відкритий крок ---------- */
.scn-sales.is-live .scn-sales__desc{display:grid;grid-template-rows:0fr;visibility:hidden}
.scn-sales.is-live .scn-sales__desc>div{min-height:0;overflow:hidden}
.scn-sales.is-live .scn-sales__stop[data-open] .scn-sales__desc{grid-template-rows:1fr;visibility:visible}
.scn-sales.is-live .scn-sales__shot{opacity:0;visibility:hidden}
.scn-sales.is-live .scn-sales__stop[data-open] .scn-sales__shot{opacity:1;visibility:visible}

/* рух */
.scn-sales.is-motion .scn-sales__desc{transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
.scn-sales.is-motion .scn-sales__stop[data-open] .scn-sales__desc{transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),visibility 0s}
.scn-sales.is-motion .scn-sales__dot{transition:background .3s,border-color .3s,color .3s}
.scn-sales.is-motion .scn-sales__t{transition:color .3s}
.scn-sales.is-motion .scn-sales__shot{transition:opacity .4s ease,visibility 0s linear .4s}
.scn-sales.is-motion .scn-sales__stop[data-open] .scn-sales__shot{transition:opacity .4s ease,visibility 0s}
.scn-sales.is-motion .scn-sales__frame--detail{transition:transform .55s cubic-bezier(.2,.7,.2,1) .12s}
.scn-sales.is-motion .scn-sales__stop:not([data-open]) .scn-sales__frame--detail{transform:translateY(14px)}
.scn-sales.is-motion .scn-sales__zm{transition:opacity .25s}
.scn-sales.is-motion .scn-sales__stop[data-open] .scn-sales__chalk path{stroke-dasharray:140;stroke-dashoffset:140;animation:scn-sales-draw .7s ease-out .3s forwards}
.scn-sales.is-motion .scn-sales__stop[data-open] .scn-sales__chalk path+path{animation-delay:.8s;animation-duration:.3s}
@keyframes scn-sales-draw{to{stroke-dashoffset:0}}

/* ---------- вузький екран ---------- */
@media (max-width:899.98px){
  .scn-sales .scn-sales__rail{margin-top:32px}
  .scn-sales .scn-sales__t{font-size:19px}
  .scn-sales .scn-sales__btn{padding-left:54px}
  .scn-sales .scn-sales__desc>div{padding-left:54px;padding-right:0}
  .scn-sales .scn-sales__shot{padding:0 0 26px 54px;position:relative}
  .scn-sales .scn-sales__shot::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:var(--zc)}
  .scn-sales .scn-sales__stop[data-optional] .scn-sales__shot::before{background:repeating-linear-gradient(180deg,var(--zc) 0 6px,transparent 6px 11px)}
  .scn-sales .scn-sales__stop[data-zone="handoff"] .scn-sales__shot::before{background:var(--scn-green)}
  .scn-sales .scn-sales__stop:last-child .scn-sales__shot::before{display:none}
  .scn-sales .scn-sales__chalk{padding-left:calc(var(--cx,8%) * .5)}
  .scn-sales .scn-sales__chalk span{font-size:18px;line-height:22px;white-space:normal}
  .scn-sales .scn-sales__chalk svg{width:28px;height:40px;margin-left:12px}
  .scn-sales .scn-sales__frame--detail{margin-top:12px}
  .scn-sales .scn-sales__frame--tall{max-width:300px;margin-left:auto}
  .scn-sales .scn-sales__zm{opacity:1;font-size:12px;padding:6px 8px}
  .scn-sales.is-live .scn-sales__stop:not([data-open]) .scn-sales__shot{display:none}
  .scn-sales.is-live .scn-sales__stop:not([data-open]) .scn-sales__desc{display:none}
}
@media (max-width:420px){
  .scn-sales .scn-sales__btn{padding-left:48px}
  .scn-sales .scn-sales__dot{width:34px;height:34px;line-height:31px;font-size:12px}
  .scn-sales .scn-sales__h::before,.scn-sales .scn-sales__desc::before,.scn-sales .scn-sales__shot::before{left:16px}
  .scn-sales .scn-sales__desc>div,.scn-sales .scn-sales__shot{padding-left:48px}
}

/* збільшення кадру */
.scn-sales .scn-sales__lb{width:min(1320px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:14px;background:#fff;color:var(--scn-ink);box-shadow:0 60px 120px -30px rgba(0,0,0,.5);overflow:hidden}
.scn-sales .scn-sales__lb[open]{display:flex;flex-direction:column}
.scn-sales .scn-sales__lb::backdrop{background:rgba(23,35,30,.72)}
.scn-sales .scn-sales__lb-h{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e6e3d8}
.scn-sales .scn-sales__lb-h p{margin:0;font-size:14px;line-height:1.5;color:var(--scn-muted)}
.scn-sales .scn-sales__lb-x{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--scn-paper);font-size:24px;line-height:40px;color:var(--scn-ink);cursor:pointer}
.scn-sales .scn-sales__lb-x:focus-visible{outline:2px solid var(--scn-green);outline-offset:2px}
.scn-sales .scn-sales__lb-sc{overflow:auto;background:#f0eee6}
.scn-sales .scn-sales__lb-sc img{display:block;width:100%;height:auto;margin:0 auto}
.scn-sales .scn-sales__lb-sc img.is-narrow{width:auto;max-width:100%}

/* integration: chalk notes must not widen the page at 901-1200 px */
.scn-sales{overflow-x:clip}