/* Compact VibeCept workflow, assembled from the user's original asset sheet. */
.site-2026 #process.process-journey{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:36px 0 38px;
  color:#0a1a43;
  background:radial-gradient(circle at 45% 0%,#e8f4ff 0,transparent 48%),linear-gradient(180deg,#fff 0%,#f1f8ff 67%,#eaf3ff 100%);
}
.site-2026 #process.process-journey:before{display:none}
.site-2026 #process.process-journey:after{display:none}
.site-2026 #faq{background:radial-gradient(circle at 1% 100%,#c8e0ff 0,transparent 28%),radial-gradient(circle at 100% 45%,#dceaff 0,transparent 35%),linear-gradient(180deg,#eaf3ff 0%,#f7fbff 100%)}
.site-2026 #process .process-layout{display:grid;grid-template-columns:minmax(260px,.88fr) minmax(185px,.7fr) minmax(0,2.15fr);align-items:center;gap:18px}
.site-2026 #process .process-intro{min-width:0}
.site-2026 #process h2{margin:0 0 10px;color:#081a42;font-size:clamp(32px,3vw,46px);font-weight:900;line-height:1.12;letter-spacing:-.052em}
.site-2026 #process h2 span{color:#0768ef}
.site-2026 #process .process-intro>p{max-width:320px;margin:0 0 16px;color:#52688c;font-size:13px;font-weight:600;line-height:1.55}
.site-2026 #process .process-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:45px;padding:0 16px;border-radius:999px;background:linear-gradient(100deg,#087df9,#0754ea);color:#fff;font-size:13px;font-weight:850;text-decoration:none;box-shadow:0 9px 20px rgba(11,91,211,.2);transition:transform .2s,box-shadow .2s}
.site-2026 #process .process-cta:hover{transform:translateY(-2px);box-shadow:0 13px 23px rgba(11,91,211,.27)}
.site-2026 #process .process-cta:focus-visible{outline:3px solid #063c96;outline-offset:3px}
.site-2026 #process .process-cta span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#fff;color:#075cf0;font-size:17px;line-height:1}
.site-2026 #process .process-points{display:flex;flex-wrap:wrap;gap:6px 13px;margin-top:19px;color:#36537d;font-size:10px;font-weight:800;white-space:nowrap}
.site-2026 #process .process-visual{position:relative;align-self:end;min-width:0;height:255px;pointer-events:none}
.site-2026 #process .process-visual-mascot{position:absolute;z-index:2;right:-6px;bottom:0;display:block;width:min(118%,238px);height:auto;object-fit:contain;filter:drop-shadow(0 12px 15px rgba(33,95,180,.14))}
.site-2026 #process .process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;min-width:0;margin:0;padding:13px 0 0;list-style:none}
.site-2026 #process .process-steps li{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:226px;padding:14px 9px 13px;border:1px solid #d7e8fb;border-radius:18px;background:linear-gradient(165deg,#fff,#f4f9ff);box-shadow:0 10px 22px rgba(42,107,182,.1);text-align:center}
.site-2026 #process .process-steps li:not(:last-child):after{content:'›';position:absolute;z-index:3;top:84px;right:-18px;display:grid;place-items:center;width:26px;height:26px;border:2px solid #fff;border-radius:50%;background:#eaf4ff;color:#0768ee;font-size:27px;font-weight:800;line-height:1;box-shadow:0 3px 9px rgba(19,83,170,.13)}
.site-2026 #process .step-no{display:grid;place-items:center;width:34px;height:34px;margin:-27px auto 6px;border:2px solid #fff;border-radius:50%;background:#0965ed;color:#fff;font:900 12px Inter,'Noto Sans Thai',sans-serif;box-shadow:0 5px 12px rgba(11,99,231,.23)}
.site-2026 #process .process-steps img{display:block;width:100%;height:85px;margin:0 auto 9px;object-fit:contain;mix-blend-mode:multiply}
.site-2026 #process .process-steps h3{margin:0 0 6px;color:#0b1e4a;font-size:clamp(12px,1.05vw,15px);font-weight:900;line-height:1.3;letter-spacing:-.025em}
.site-2026 #process .process-steps p{margin:0;color:#58708e;font-size:10px;font-weight:600;line-height:1.5}
@media(max-width:1100px){
  .site-2026 #process .process-layout{grid-template-columns:minmax(0,1fr) 200px;gap:10px 18px}
  .site-2026 #process .process-visual{height:230px}
  .site-2026 #process .process-steps{grid-column:1/-1;gap:12px;margin-top:4px}
  .site-2026 #process .process-steps li{min-height:180px}
  .site-2026 #process .process-steps img{height:70px}
}
@media(max-width:700px){
  .site-2026 #process.process-journey{padding:20px 0 25px;background:linear-gradient(180deg,#edf6ff 0%,#f1f8ff 67%,#eaf3ff 100%);scroll-margin-top:0}
  .site-2026 #process .process-layout{grid-template-columns:minmax(0,1fr) 128px;gap:13px 8px}
  .site-2026 #process h2{font-size:clamp(28px,7.2vw,38px)}
  .site-2026 #process .process-intro>p{margin-bottom:11px;font-size:11px;line-height:1.5}
  .site-2026 #process .process-cta{min-height:39px;padding:0 11px;font-size:11px;gap:7px}
  .site-2026 #process .process-cta span{width:20px;height:20px;font-size:15px}
  .site-2026 #process .process-points{gap:5px 9px;margin-top:11px;font-size:9px}
  .site-2026 #process .process-visual{height:190px}
  .site-2026 #process .process-visual-mascot{right:-5px;width:145px}
  .site-2026 #process .process-steps{display:flex;grid-column:1/-1;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;padding:15px 2px 8px;scrollbar-width:none}
  .site-2026 #process .process-steps::-webkit-scrollbar{display:none}
  .site-2026 #process .process-steps li{flex:0 0 min(48vw,190px);min-height:175px;padding:11px 9px 10px;scroll-snap-align:start}
  .site-2026 #process .process-steps li:not(:last-child):after{display:none}
  .site-2026 #process .step-no{width:30px;height:30px;margin:-25px auto 4px;font-size:10px}
  .site-2026 #process .process-steps img{height:65px;margin-bottom:6px}
  .site-2026 #process .process-steps h3{font-size:12px}
  .site-2026 #process .process-steps p{font-size:10px}
}
@media(max-width:390px){
  .site-2026 #process .process-layout{grid-template-columns:minmax(0,1fr) 104px}
  .site-2026 #process .process-visual{height:164px}
  .site-2026 #process .process-visual-mascot{width:120px}
  .site-2026 #process .process-points{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.site-2026 #process .process-cta{transition:none}}

/* Phones: show all four steps as a 2x2 board instead of a sideways scroller,
   so nothing is hidden off the right edge. */
@media(max-width:700px){
  .site-2026 #process .process-steps{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 10px;
    overflow:visible;
    scroll-snap-type:none;
    padding:22px 0 2px;
  }
  .site-2026 #process .process-steps li{
    flex:none;
    min-height:0;
    padding:11px 8px 12px;
    scroll-snap-align:none;
  }
  .site-2026 #process .process-steps img{height:60px}
}
@media(max-width:390px){
  .site-2026 #process .process-steps{gap:20px 8px}
  .site-2026 #process .process-steps img{height:54px}
  .site-2026 #process .process-steps h3{font-size:11.5px}
  .site-2026 #process .process-steps p{font-size:9.5px}
}