/* Vertical Scroll v6.1 – hidden scrollbar, no white bg */
.vs6{ --h: clamp(560px, 78vh, 860px); --gap: 56px; --r: 24px; --dot:#cbd5e1; --dotA:#111827; }
.vs6 *{ box-sizing: border-box; }
.vs6 .vs6-inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap); align-items: start; padding: 0; background: transparent; box-shadow: none; }
.vs6 .vs6-left{ height: var(--h); overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: y proximity; scroll-padding-top: 1px; border-radius: var(--r); scrollbar-width: none; -ms-overflow-style: none; }
.vs6 .vs6-left::-webkit-scrollbar{ width:0; height:0; }
.vs6 .vs6-step{ min-height: var(--h); scroll-snap-align: start; display:flex; align-items:center; justify-content:center; }
.vs6 .vs6-frame{ width:100%; aspect-ratio: 1 / 1; border-radius: var(--r); overflow:hidden; }
.vs6 .vs6-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.vs6 .vs6-right{ height: var(--h); display:grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.vs6 .vs6-stage{ position: relative; width:100%; height:100%; }
.vs6 .vs6-panel{ position:absolute; inset:0; display:grid; place-content:center; gap:16px; text-align:left; opacity:0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; will-change: opacity, transform; pointer-events: none; }
.vs6 .vs6-panel.is-active{ opacity:1; transform:none; pointer-events: auto; }
.vs6 .vs6-icon{ width:48px;height:48px;border-radius:50%;display:inline-grid;place-items:center;background:#e9f5d4; }
.vs6 .vs6-icon img,.vs6 .vs6-icon svg{ width:24px;height:24px; }
.vs6 .vs6-h{ margin:0; font-size: clamp(1.4rem,1.05rem + 1.2vw,2rem); line-height:1.2; text-wrap:balance; }
.vs6 .vs6-p{ color:#4b5563; max-width:52ch; }
.vs6 .vs6-btn{ display:inline-flex; gap:.5rem; align-items:center; padding:.7rem 1rem; border-radius:999px; border:1px solid #e5e7eb; text-decoration:none; }
.vs6 .vs6-btn span{ transition: transform .2s ease; } .vs6 .vs6-btn:hover span{ transform: translateX(3px); }
.vs6 .vs6-dots{ align-self:center; display:flex; flex-direction:column; gap:10px; padding:6px; }
.vs6 .vs6-dot{ width:10px;height:10px;border:0;border-radius:999px;background:var(--dot);cursor:pointer; transition:transform .15s, background .2s; }
.vs6 .vs6-dot.is-active{ background:var(--dotA); transform: scale(1.25); }
.vs6 .vs6-dot:focus-visible{ outline: 2px solid #94a3b8; outline-offset: 3px; }
@media (max-width: 900px){ .vs6 .vs6-inner{ grid-template-columns: 1fr; gap: 24px; } .vs6 .vs6-right{ grid-template-columns: 1fr; height: auto; } .vs6 .vs6-stage{ position: relative; height: auto; } .vs6 .vs6-panel{ position: relative; opacity: 1 !important; transform: none !important; transition: none !important; padding-bottom: 24px; } .vs6 .vs6-dots{ align-self:center; display:flex; flex-direction:column; gap:10px; padding:6px; } }
@media (prefers-reduced-motion: reduce){ .vs6 .vs6-panel{ transition: none !important; } }

/* Mobile overrides: disable inner scroll, hide dots, interleave img/text */
@media (max-width: 900px){
  .vs6 .vs6-left{ height:auto; overflow:visible; scroll-snap-type: none; }
  .vs6 .vs6-dots{ display:none; }
}