/* A single active step makes the sequence legible while the other two stay visible. */
.process-layout .steps{order:0}
.process-layout .process-media{order:1}
#how-it-works .steps{
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:4px;
}
#how-it-works .steps article{
  box-sizing:border-box;
  min-width:0;
  min-height:227px;
  padding:22px 20px 24px;
  grid-template-columns:70px minmax(0,1fr);
  gap:12px;
  align-content:start;
  border-radius:22px;
  background:#f1f5fd;
  transition:background .4s,box-shadow .4s,transform .4s;
}
#how-it-works .steps article>img{grid-column:1;grid-row:1;width:70px;filter:drop-shadow(0 8px 9px #0a38831c)}
#how-it-works .steps article>span,
#how-it-works .steps article.step-visible>span{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  color:#9aadd0;
  font-size:54px;
  transition:color .4s;
}
#how-it-works .steps article>div{grid-column:1/-1;grid-row:2;min-width:0}
#how-it-works .steps article h3{color:#1a3155;transition:color .4s}
#how-it-works .steps article p{color:#627796;transition:color .4s}
#how-it-works .steps article.process-current{
  background:radial-gradient(circle at 14% 8%,#6090ff 0,transparent 56%),#245cf6;
  box-shadow:0 15px 32px #1e56d02b;
  transform:translateY(-5px);
}
#how-it-works .steps article.process-current>span,
#how-it-works .steps article.process-current.step-visible>span{color:white}
#how-it-works .steps article.process-current h3{color:white}
#how-it-works .steps article.process-current p{color:#e0eaff}
.process-step-select{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:pointer;
}
.process-step-select:focus-visible{outline:3px solid #173c9a;outline-offset:4px}
#how-it-works .guide-details>summary{
  color:#2056d7;
  font-size:14px;
  padding:17px 0;
  transition:color .2s;
}
#how-it-works .guide-details>summary:hover{color:#113a9d}
#how-it-works .guide-details>summary>svg{display:none}
#how-it-works .guide-details>summary::after{
  content:"+";
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:none;
  font-size:22px;
  line-height:1;
  font-weight:400;
}
#how-it-works .guide-details[open]>summary::after{content:"−"}
#how-it-works .motion-player{margin-top:12px}
/* Shared grid footprints keep the player height stable between all three stages. */
#how-it-works #motion-title,#how-it-works #motion-description,#how-it-works .demo-body{display:grid}
#how-it-works .guide-stage{grid-area:1/1;min-width:0;visibility:hidden;opacity:0;transition:opacity .35s ease}
#how-it-works .guide-stage.is-active{visibility:visible;opacity:1}
#how-it-works .guide-demo-stage{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
#how-it-works .progress-step{height:6px;border-radius:6px;overflow:hidden;background:#3a5377}
#how-it-works .progress-step>span{display:block;width:100%;height:100%;background:#81b4ff;transform:scaleX(0);transform-origin:left center;will-change:transform}
#how-it-works .progress-step.done>span{transform:scaleX(1)}
#how-it-works .progress-step.active>span{transform:scaleX(var(--guide-progress,0))}
@media(prefers-reduced-motion:reduce){#how-it-works .guide-stage{transition:none}}
@media(max-width:1100px) and (min-width:761px){
  #how-it-works .steps{gap:12px}
  #how-it-works .steps article{padding:19px 17px 22px;min-height:224px;grid-template-columns:61px minmax(0,1fr)}
  #how-it-works .steps article>img{width:61px}
  #how-it-works .steps article>span,#how-it-works .steps article.step-visible>span{font-size:44px}
}
@media(max-width:760px){
  #how-it-works .steps{grid-template-columns:1fr;gap:10px}
  #how-it-works .steps article{
    grid-template-columns:53px 38px minmax(0,1fr);
    grid-template-rows:auto;
    align-items:center;
    gap:12px;
    min-height:107px;
    padding:13px 17px;
    border-radius:17px;
  }
  #how-it-works .steps article>img{grid-column:1;grid-row:1;width:53px}
  #how-it-works .steps article>span,
  #how-it-works .steps article.step-visible>span{grid-column:2;grid-row:1;justify-self:start;font-size:30px}
  #how-it-works .steps article>div{grid-column:3;grid-row:1}
  #how-it-works .steps article h3{font-size:18px;margin:0 0 4px}
  #how-it-works .steps article p{font-size:13px;line-height:1.6}
  #how-it-works .steps article.process-current{transform:none}
}
@media(max-width:360px){
  #how-it-works .steps article{grid-template-columns:44px 32px minmax(0,1fr);gap:8px;padding:12px;min-height:102px}
  #how-it-works .steps article>img{width:44px}
  #how-it-works .steps article>span,#how-it-works .steps article.step-visible>span{font-size:27px}
  #how-it-works .steps article h3{font-size:16px}
  #how-it-works .steps article p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  #how-it-works .steps article,#how-it-works .steps article>span,#how-it-works .steps article h3,#how-it-works .steps article p,#how-it-works .guide-details>summary>svg{transition:none}
}
.effects-paused #how-it-works .steps article,.effects-paused #how-it-works .steps article>span,.effects-paused #how-it-works .steps article h3,.effects-paused #how-it-works .steps article p{transition:none}

/* Keep the two direct-contact actions in the page gutter on desktop. */
@media(min-width:761px){
  main .container,.footer .container{padding-right:48px}
  .floating-contact{
    left:auto;
    right:0;
    bottom:calc(22px + env(safe-area-inset-bottom));
    width:72px;
    grid-template-columns:1fr;
    gap:7px;
    transform:none;
  }
  .floating-contact-link{
    flex-direction:column;
    gap:5px;
    height:88px;
    padding:9px 4px;
    border-radius:17px 0 0 17px;
    font-size:13px;
    line-height:1.25;
    text-align:center;
  }
  .floating-contact-link>span{width:56px;white-space:normal;word-break:keep-all}
  .floating-contact-icon{width:24px;height:24px}
  .floating-contact-arrow{display:none}
  html{scroll-padding-bottom:80px}
}
@media(max-width:760px){
  .floating-contact{
    width:min(440px,calc(100% - 16px));
    bottom:calc(8px + env(safe-area-inset-bottom));
    gap:7px;
    grid-template-columns:1fr 1fr;
  }
  .floating-contact-link{height:51px;padding:0 10px;border-radius:13px;font-size:13px;gap:8px}
  .floating-contact-icon{width:22px;height:22px}
  .floating-contact-arrow{display:none}
  .footer{padding-bottom:calc(102px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  main :is(button,a,input,select,summary):focus-visible{scroll-margin-bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .floating-contact-link{height:48px;font-size:13px;padding:0 7px}
  .floating-contact-icon{width:20px;height:20px}
}