.tutorial-hero{
  position:relative;
  max-width:100%;
  padding-top:72px;
  padding-bottom:78px;
  background:
    radial-gradient(520px 360px at 14% 18%,var(--color-glow-green),transparent 70%),
    radial-gradient(620px 420px at 88% 78%,var(--color-glow-sky),transparent 72%),
    linear-gradient(180deg,var(--color-bg-top),var(--color-bg));
  overflow-x:clip;
}
.tutorial-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--color-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(to bottom,var(--color-text),transparent);
  mask-image:linear-gradient(to bottom,var(--color-text),transparent);
}
.tutorial-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);
  align-items:center;
  gap:64px;
}
.tutorial-hero-copy{
  min-width:0;
}
.tutorial-hero-copy .badge{
  margin-bottom:24px;
}
.tutorial-hero-copy h1{
  margin-bottom:22px;
}
.tutorial-hero-copy>p{
  max-width:680px;
  margin-bottom:30px;
  color:var(--color-muted);
  font-size:18px;
}
.tutorial-hero-actions{
  margin-top:8px;
}
.tutorial-route{
  position:relative;
  min-width:0;
  min-height:390px;
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-xl);
  background:var(--color-panel-deep);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
}
.tutorial-route::before{
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(var(--color-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-grid) 1px,transparent 1px),
    var(--color-panel);
  background-size:40px 40px;
}
.tutorial-route-line{
  position:absolute;
  top:50%;
  right:58px;
  left:58px;
  height:4px;
  border-radius:var(--radius-pill);
  background:var(--color-accent);
  transform:translateY(-50%);
  box-shadow:0 8px 24px var(--color-shadow-accent);
}
.tutorial-route-line::before,
.tutorial-route-line::after{
  content:"";
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  border:4px solid var(--color-panel);
  border-radius:50%;
  background:var(--color-accent-dark);
  transform:translateY(-50%);
}
.tutorial-route-line::before{
  left:0;
}
.tutorial-route-line::after{
  right:0;
}
.tutorial-route-node{
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:112px;
  min-height:82px;
  padding:14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  box-shadow:var(--shadow-small);
}
.tutorial-route-node span{
  margin-bottom:5px;
  color:var(--color-accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:750;
  letter-spacing:.08em;
}
.tutorial-route-node b{
  font-size:14px;
}
.route-account{
  top:54px;
  left:46px;
}
.route-plan{
  bottom:48px;
  left:24%;
}
.route-sub{
  top:42px;
  left:50%;
  transform:translateX(-50%);
}
.route-client{
  right:24%;
  bottom:48px;
}
.route-check{
  top:54px;
  right:46px;
}
.tutorial-flow{
  position:relative;
  padding-top:46px;
  padding-bottom:var(--section-space);
}
.tutorial-intro{
  max-width:var(--reading-max);
  margin:0 auto 64px;
}
.tutorial-step{
  display:grid;
  grid-template-columns:minmax(150px,220px) minmax(0,var(--reading-max));
  justify-content:center;
  gap:clamp(32px,6vw,84px);
  padding-top:72px;
  padding-bottom:72px;
  border-bottom:1px solid var(--color-border);
}
.tutorial-step:last-child{
  border-bottom:0;
}
.tutorial-step-aside{
  min-width:0;
  padding-top:8px;
}
.tutorial-step-aside p{
  margin-top:14px;
  color:var(--color-muted);
  font-size:14px;
}
.tutorial-step-tag,
.client-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-height:30px;
  padding:4px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-mint);
  color:var(--color-accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:750;
  letter-spacing:.1em;
}
.tutorial-step-body{
  min-width:0;
}
.tutorial-step-body h2{
  margin-bottom:24px;
}
.tutorial-step-body>p{
  color:var(--color-muted);
}
.tutorial-step-body>p strong{
  color:var(--color-text);
}
.tutorial-step-body a:not(.btn){
  color:var(--color-accent-dark);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--color-accent);
  text-underline-offset:3px;
}
.tutorial-step-body code{
  padding:2px 7px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel-deep);
  color:var(--color-text);
}
.tutorial-step-body .button-row{
  margin-top:28px;
}
.tutorial-text-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.client-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:34px;
}
.client-guide{
  min-width:0;
  padding:26px;
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:var(--shadow-small);
}
.client-guide:nth-child(1){
  border-top-color:var(--color-lavender);
}
.client-guide:nth-child(2){
  border-top-color:var(--color-sky);
}
.client-guide:nth-child(3){
  border-top-color:var(--color-mint);
}
.client-guide:nth-child(4){
  border-top-color:var(--color-butter);
}
.client-guide h3{
  margin-top:17px;
  margin-bottom:13px;
  font-size:23px;
}
.client-guide p{
  color:var(--color-muted);
  font-size:15px;
}
.client-guide p:last-child{
  margin-bottom:0;
}
.tutorial-step .callout{
  margin-top:30px;
}
.tutorial-step .promo-block{
  margin-top:52px;
}
@media (max-width:1080px){
  .tutorial-hero-inner{
    grid-template-columns:1fr;
    gap:46px;
  }
  .tutorial-hero-copy{
    max-width:780px;
    margin-inline:auto;
    text-align:center;
  }
  .tutorial-hero-copy>p{
    margin-inline:auto;
  }
  .tutorial-hero-actions{
    justify-content:center;
  }
  .tutorial-route{
    width:100%;
    max-width:820px;
    margin-inline:auto;
  }
}
@media (max-width:768px){
  .tutorial-hero{
    padding-top:56px;
    padding-bottom:56px;
  }
  .tutorial-hero-inner{
    gap:36px;
  }
  .tutorial-hero-copy>p{
    font-size:16px;
  }
  .tutorial-route{
    min-height:310px;
  }
  .tutorial-route-node{
    width:96px;
    min-height:72px;
    padding:11px;
  }
  .tutorial-route-node b{
    font-size:12px;
  }
  .route-account{
    top:38px;
    left:30px;
  }
  .route-plan{
    bottom:32px;
    left:18%;
  }
  .route-sub{
    top:30px;
  }
  .route-client{
    right:18%;
    bottom:32px;
  }
  .route-check{
    top:38px;
    right:30px;
  }
  .tutorial-step{
    grid-template-columns:1fr;
    gap:12px;
    padding-top:60px;
    padding-bottom:60px;
  }
  .tutorial-step-aside{
    padding-top:0;
  }
  .tutorial-step-aside p{
    max-width:520px;
    margin-bottom:10px;
  }
  .client-guide-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .tutorial-hero-copy{
    text-align:left;
  }
  .tutorial-hero-actions{
    justify-content:stretch;
  }
  .tutorial-route{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    min-height:0;
    padding:16px;
  }
  .tutorial-route::before,
  .tutorial-route-line{
    display:none;
  }
  .tutorial-route-node{
    position:static;
    width:100%;
    min-height:58px;
    transform:none;
  }
  .tutorial-flow{
    padding-top:28px;
  }
  .tutorial-intro{
    margin-bottom:34px;
  }
  .tutorial-step{
    padding-top:50px;
    padding-bottom:50px;
  }
  .client-guide{
    padding:22px;
  }
  .tutorial-step .promo-block{
    padding:24px;
  }
}