.guide-hero{
  padding-top:58px;
  padding-bottom:70px;
}
.guide-hero .hero-lead{
  max-width:760px;
}
.guide-track{
  width:100%;
  margin-top:34px;
  padding:20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);
  align-items:center;
  text-align:left;
}
.guide-track-item{
  min-height:112px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-panel);
}
.guide-track-item:nth-of-type(1){
  background:var(--tint-blue-bg);
  border-color:var(--tint-blue-line);
}
.guide-track-item:nth-of-type(3){
  background:var(--tint-cyan-bg);
  border-color:var(--tint-cyan-line);
}
.guide-track-item:nth-of-type(5){
  background:var(--tint-green-bg);
  border-color:var(--tint-green-line);
}
.guide-track-mark{
  align-self:flex-start;
  margin-bottom:7px;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  background:var(--pill);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:750;
}
.guide-track-item strong{
  font-family:var(--font-display);
  font-size:16px;
}
.guide-track-item small{
  margin-top:3px;
  color:var(--text-muted);
  font-size:12px;
}
.guide-track-line{
  position:relative;
  height:1px;
  background:var(--connection);
}
.guide-track-line::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:7px;
  height:7px;
  border-top:1px solid var(--connection);
  border-right:1px solid var(--connection);
  transform:translateY(-50%) rotate(45deg);
}
.guide-prose{
  max-width:calc(940px + var(--gutter) * 2);
  padding-top:48px;
  padding-bottom:88px;
  counter-reset:guide-step;
}
.guide-prose .toc-tabs{
  top:12px;
}
.guide-section{
  position:relative;
  padding-top:48px;
  padding-bottom:48px;
  border-bottom:1px solid var(--border);
  counter-increment:guide-step;
}
.guide-section:last-child{
  border-bottom:0;
}
.guide-section h2{
  margin:8px 0 20px;
  font-size:clamp(28px,4vw,40px);
}
.guide-section h3{
  margin:0 0 12px;
  font-size:22px;
}
.guide-section p{
  margin-bottom:17px;
  color:var(--text-muted);
}
.guide-section p strong{
  color:var(--text);
}
.guide-step-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:750;
  letter-spacing:.05em;
}
.guide-step-label::before{
  content:counter(guide-step);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:var(--bg-panel);
  box-shadow:var(--shadow-button);
}
.guide-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.text-link{
  color:var(--accent-dark);
  font-weight:750;
  text-decoration:underline;
  text-decoration-color:var(--tint-blue-line);
  text-underline-offset:3px;
}
.text-link:hover{
  text-decoration-color:var(--accent);
}
.platform-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:26px;
  margin-bottom:25px;
}
.platform-guide-card{
  min-width:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.platform-guide-card p{
  font-size:15px;
}
.platform-guide-card .btn{
  margin-top:auto;
}
.platform-code{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-bottom:14px;
  padding:3px 9px;
  border:1px solid var(--tint-cyan-line);
  border-radius:var(--radius-sm);
  background:var(--tint-cyan-bg);
  color:var(--tint-cyan-fg);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}
.platform-guide-note{
  padding:16px 18px;
  border:1px solid var(--tint-green-line);
  border-radius:var(--radius);
  background:var(--tint-green-bg);
  color:var(--tint-green-fg);
}
.guide-section pre{
  margin-bottom:20px;
}
.guide-section pre code{
  white-space:pre;
}

@media(max-width:900px){
  .guide-track{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
  }
  .guide-track-line{
    display:none;
  }
  .guide-track-item{
    min-height:126px;
  }
}
@media(max-width:768px){
  .guide-hero{
    padding-top:44px;
    padding-bottom:54px;
  }
  .guide-track{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .guide-track-item:last-child{
    grid-column:1 / -1;
    min-height:96px;
  }
  .guide-prose{
    padding-top:34px;
    padding-bottom:64px;
  }
  .guide-section{
    padding-top:40px;
    padding-bottom:40px;
  }
  .platform-guide-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:520px){
  .guide-track{
    grid-template-columns:1fr;
    padding:14px;
  }
  .guide-track-item,
  .guide-track-item:last-child{
    grid-column:auto;
    min-height:92px;
  }
  .guide-actions{
    flex-direction:column;
  }
  .guide-actions .btn{
    width:100%;
  }
  .platform-guide-card{
    padding:20px;
  }
}
@media(prefers-reduced-motion:reduce){
  .guide-track-item,
  .platform-guide-card{
    transition:none;
  }
}