/* SUUPI — clarity and professional how-it-works */
.showcase-slide .slide-doodle mark,.showcase-slide .card-arrow{display:none!important}
.showcase-slide.dark{background:#0b0b0d!important;color:#fff}
.showcase-slide.dark .slide-copy b,.showcase-slide.dark .slide-copy em{color:#fff!important}
.showcase-slide.dark .motif{stroke:#fff}
.showcase-slide.dark .blue-person{fill:var(--ref-blue);stroke:#fff}
.showcase-slide.dark>i{background:#fff;color:#0b0b0d}
.showcase-slide.dark>i span{background:var(--ref-blue);color:#0b0b0d}
.motif-connect{transform:scale(.86)}

.how-professional{max-width:1420px;margin:0 auto}
.how-pro-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.75fr);gap:50px;align-items:end;padding:54px 0 42px;border-bottom:2px solid #111}
.how-pro-hero h1{margin:18px 0 0;font-size:clamp(64px,7.4vw,112px);line-height:.84;text-transform:none}
.how-pro-hero>p{margin:0 0 8px;font-size:20px;font-weight:650;line-height:1.5}
.how-flow{display:grid;grid-template-columns:1fr 1fr;margin:0 0 48px;border-left:2px solid #111}
.how-flow article{display:grid;grid-template-columns:74px 1fr;gap:18px;min-height:220px;padding:32px;border-right:2px solid #111;border-bottom:2px solid #111;background:#d2d2cf}
.how-flow article:nth-child(2){background:#eae9e5}
.how-flow article:nth-child(3){background:var(--ref-blue)}
.how-flow article:nth-child(4){background:#eae9e5}
.how-flow article:nth-child(5){grid-column:1/-1;min-height:190px;background:var(--ref-pink)}
.how-flow article>span{font-family:var(--text);font-size:14px;font-weight:800;letter-spacing:.14em}
.how-flow h2{margin:0 0 12px;font-family:var(--suupi-hero);font-size:clamp(27px,2.5vw,39px);line-height:1}
.how-flow p{max-width:610px;margin:0;font-size:16px;line-height:1.5}
.how-control{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin:38px 0;padding:44px;border-radius:28px;background:#111;color:#fff}
.how-control h2{margin:15px 0 0;font-size:clamp(44px,5vw,76px);line-height:.87;text-transform:none}
.how-control ul{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid #555}
.how-control li{padding:16px 2px;border-bottom:1px solid #555;font-size:16px;font-weight:700}
.how-control li:before{content:"✓";margin-right:12px;color:var(--ref-blue)}
.how-company{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:38px 0 10px;padding:38px 42px;border:2px solid #111;border-radius:28px;background:var(--ref-pink)}
.how-company>div>span{font-size:12px;font-weight:900;letter-spacing:.12em}
.how-company h2{max-width:850px;margin:12px 0 9px;font-size:clamp(38px,4.6vw,68px);line-height:.9;text-transform:none}
.how-company p{margin:0;font-size:18px;font-weight:750}
.how-company .light-btn{flex:0 0 auto;background:#111;color:#fff;white-space:nowrap}

@media(min-width:1000px){
  .showcase-slide.slot-0 .slide-doodle{right:1%!important;bottom:47px!important;width:40%!important;height:54%!important}
  .showcase-slide:not(.slot-0) .slide-copy em{display:none!important}
  .showcase-slide:not(.slot-0) .slide-doodle{right:1%!important;bottom:28px!important;width:72%!important;height:35%!important}
  .showcase-slide:not(.slot-0) .slide-copy{top:74px!important}
  .showcase-slide.slot-2 .slide-doodle,.showcase-slide.slot-3 .slide-doodle{width:72%!important;height:34%!important}
}

@media(max-width:999px){
  .how-pro-hero{grid-template-columns:1fr;gap:20px;padding:30px 0}
  .how-flow{grid-template-columns:1fr}
  .how-flow article:nth-child(5){grid-column:auto}
  .how-control{grid-template-columns:1fr}
}

@media(max-width:699px){
  .showcase-track{height:316px!important;min-height:316px!important}
  .showcase-slide{height:310px!important;min-height:310px!important}
  .showcase-slide .slide-copy,.showcase-slide:not(.active) .slide-copy{top:42px!important}
  .showcase-slide .slide-copy b,.showcase-slide:not(.active) .slide-copy b{font-size:clamp(34px,10vw,42px)!important;line-height:.9!important}
  .showcase-slide .slide-copy em,.showcase-slide:not(.active) .slide-copy em{max-width:15ch!important;font-size:12px!important}
  .showcase-slide .slide-doodle,.showcase-slide:not(.active) .slide-doodle{right:2%!important;bottom:38px!important;width:39%!important;height:37%!important}
  .showcase-slide.gray .slide-doodle,.showcase-slide.dark .slide-doodle{width:41%!important;height:36%!important}
  .showcase-slide>i,.showcase-slide:not(.active)>i{bottom:11px!important;height:41px!important;min-width:150px!important;padding-left:17px!important}
  .showcase-slide>i span,.showcase-slide:not(.active)>i span{width:31px!important;height:31px!important}
  .how-pro-hero{padding:14px 0 24px}
  .how-pro-hero h1{font-size:48px}
  .how-pro-hero>p{font-size:16px}
  .how-flow{margin-bottom:24px}
  .how-flow article{grid-template-columns:48px 1fr;min-height:0;padding:24px 18px}
  .how-flow h2{font-size:28px}
  .how-flow p{font-size:14px}
  .how-control{gap:26px;padding:26px 22px;border-radius:22px}
  .how-control h2{font-size:43px}
  .how-company{align-items:flex-start;flex-direction:column;padding:25px 22px;border-radius:22px}
  .how-company h2{font-size:42px}
  .how-company .light-btn{width:100%}
}