/* Layout for block-slide-section (no Tailwind) — pairs with block-slide-section.css + block-slide-section.js */

.cm-slide-wrap{
  background:#fff;padding:clamp(48px,8vw,96px) 0 clamp(72px,10vw,120px);
  position:relative;overflow:visible;
  /* sticky: vertical center of viewport (not glued to top) */
  --slide-media-half:clamp(160px, 21vw, 235px);
  --slide-pin-top:max(
    calc(var(--nav-h, 88px) + 12px),
    calc(50vh - var(--slide-media-half))
  );
}
.cm-slide-wrap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:min(240px,28vh);
  background:linear-gradient(180deg,rgba(233,245,226,0) 0%,var(--accent-soft,#e9f5e2) 72%);
  pointer-events:none;z-index:0;
}
.cm-slide-wrap .container{max-width:1298px;position:relative;z-index:1}
.cm-slide-section__content{display:block}

.cm-slide__main-title{margin:0 0 12px;max-width:100%}
.cm-slide__main-title h2,
.cm-slide__main-title-lines{
  margin:0;font-family:var(--sans,"Plus Jakarta Sans",sans-serif);font-weight:600;
  font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.03em;color:#1f1d2a;
}
.cm-slide__title-line{display:block}
.cm-slide__accent{color:var(--accent,#6ebe3b)}

.slide-panel__heading h3{
  margin:0;font-family:var(--sans,"Plus Jakarta Sans",sans-serif);font-weight:600;
  font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-.02em;color:#1f1d2a;
}
.slide-panel__lead p{
  margin:0;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:#52525b;max-width:42ch;
}
.sc_list.slide-panel__list{
  list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;
}
.sc_list.slide-panel__list li{
  display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.45;color:#3f3f46;
  max-width:38ch;
}
.sc_list__icon{
  flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:var(--accent,#6ebe3b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.2 3.4 8.4l1-1 1.8 1.8 4-4 1 1z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.slide-panel__actions{margin-top:28px}
.slide-panel__actions .link-more{margin-top:0}

.block-slide-section #tabs-bar.sticky,
.cm-slide-wrap #tabs-bar{
  position:sticky;top:calc(var(--nav-h, 88px) - 8px);z-index:30;
  padding:24px 0 20px;margin-bottom:8px;
  background:linear-gradient(180deg,#fff 75%,rgba(255,255,255,0));
}
.cm-slide-wrap #tabs-bar-inner{
  display:inline-flex;background:var(--accent-soft,#e9f5e2);
  padding:8px 12px;border-radius:999px;
}
.cm-slide-wrap #tabs-bar-inner .content{
  position:relative;display:flex;flex-wrap:nowrap;gap:4px;align-items:center;
}
.cm-slide-wrap .block-slide-section #tab-highlight,
.block-slide-section #tab-highlight{
  position:absolute;left:0;z-index:0;height:auto;top:auto;
  background:#000;border-radius:9999px;pointer-events:none;
  transition:left .6s cubic-bezier(.25,.46,.45,.94),width .6s cubic-bezier(.25,.46,.45,.94),height .2s ease,top .2s ease;
}
.cm-slide-wrap .tab-button{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;
  font-family:var(--sans, "Plus Jakarta Sans", sans-serif);
  font-size:15px;line-height:1.2;white-space:nowrap;
  padding:10px 18px;border-radius:999px;color:#1f1d2a;font-weight:600;
  transition:color .35s ease;
  -webkit-font-smoothing:antialiased;
}
.cm-slide-wrap .tab-button.is-active{color:#fff!important;font-weight:600}

.cm-slide-row{display:flex;flex-direction:column;gap:0}
.block-slide-section__leftColumn{display:flex;flex-direction:column;width:100%}
.block-slide-section__content{
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 0;scroll-margin-top:120px;min-height:min(70vh,640px);
}
.block-slide-section__content .section-content{max-width:520px}
.block-slide-section__content .section-content{display:flex;flex-direction:column;gap:16px}

.cm-slide__media-mobile{margin:28px 0 0;display:block}

/* Media card — outer mint pad + inner green mat + white screenshot frame (like clickmeeting.com) */
.cm-slide-wrap .contentContainer.cm-slide__media-pad{
  padding:clamp(14px,2vw,20px);
  box-sizing:border-box;
}
.cm-slide-wrap .cm-slide__media-inner{
  position:relative;
  padding:clamp(10px,1.4vw,14px);
  border-radius:20px;
  background:linear-gradient(165deg,#d9f0cc 0%,#d1e8c5 55%,#c9e3bb 100%);
  box-sizing:border-box;
}
.cm-slide-wrap .cm-slide__media-bg{
  display:none;
}
.cm-slide-wrap .cm-slide__img-frame{
  width:100%;
  line-height:0;
  border-radius:14px;
  overflow:hidden;
  background:transparent;
}
.cm-slide-wrap .cm-slide__picture{
  display:block;width:100%;margin:0;
}
.cm-slide-wrap .cm-slide__picture .image{
  display:block;width:100%;height:auto;margin:0;
  border-radius:14px;
  box-shadow:0 18px 42px -22px rgba(31,29,42,.22);
}

.cm-slide__right-col{display:none}
.cm-slide__box{
  background:var(--accent-soft,#e9f5e2);border-radius:24px;overflow:hidden;
  transition:opacity .5s ease,transform .5s ease;
}

.cm-slide-row.flex{gap:0}
@media (min-width:900px){
  .cm-slide-row,.cm-slide-row.flex{
    flex-direction:row;gap:clamp(20px,3vw,40px);align-items:stretch;
  }
  .block-slide-section__leftColumn{width:44%;flex:none;max-width:520px}
  .cm-slide__right-col{
    display:flex;width:56%;flex:1;padding:0;flex-direction:column;
    align-self:stretch;min-height:100%;justify-content:flex-start;
  }
  .cm-slide__box{
    position:sticky;top:var(--slide-pin-top);
    width:100%;align-self:flex-start;margin:0;
  }
  .block-slide-section__leftColumn .block-slide-section__content{
    min-height:min(82vh,760px);
    padding:0 0 88px;
    justify-content:center;
    scroll-margin-top:calc(50vh - 140px);
  }
  .cm-slide__media-mobile{display:none!important}
}

@media (max-width:899px){
  .cm-slide-wrap #tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* Mobile: tabs wrap to a 2×2 grid instead of horizontal scroll */
@media (max-width:560px){
  .cm-slide-wrap #tabs-bar{overflow:visible;-webkit-overflow-scrolling:auto}
  .cm-slide-wrap #tabs-bar-inner{display:block;width:100%;padding:6px;border-radius:20px}
  .cm-slide-wrap #tabs-bar-inner .content{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  .cm-slide-wrap .tab-button{width:100%;padding:12px 8px;font-size:14px}
}