/* Guide page: a vertical timeline of seven steps, each with a small drawn visual (styles for the visuals live in features.css). */
.g-steps{max-width:1040px;margin:0 auto;padding:0 clamp(16px,3vw,28px);display:flex;flex-direction:column;gap:22px;position:relative;}
.g-steps::before{content:'';position:absolute;left:calc(clamp(16px,3vw,28px) + 22px);top:24px;bottom:24px;width:1px;background:linear-gradient(180deg,rgba(245,243,255,.55),rgba(245,243,255,.05));}
.g-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,.9fr);gap:22px;align-items:center;}
.g-num span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:500;color:#14122b;background:var(--pro-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 6px #0a0a0b,0 8px 22px rgba(139,92,246,.32);position:relative;z-index:1;}
.g-text h3{font-size:clamp(20px,2.4vw,28px);line-height:1.15;margin:0 0 10px;}
.g-text p{font-size:15px;line-height:1.6;color:#a8a8b0;margin:0;max-width:38em;}
.g-text strong{color:#e8e8ee;font-weight:500;}
.g-vis{padding:18px !important;min-height:0;}
.g-vis.v-search .box{margin:0;}
.g-vis.v-saved .g{margin:0;}
@media(max-width:820px){
  .g-step{grid-template-columns:44px minmax(0,1fr);}
  .g-step .g-vis{grid-column:2;}
}
.g-note{max-width:1040px;margin:34px auto 0;padding:0 clamp(16px,3vw,28px) clamp(64px,9vw,110px);}
.g-note .feature-card{padding:clamp(24px,4vw,40px) !important;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.g-note h2{font-size:clamp(24px,3.4vw,38px);margin:0;}
.g-note p{color:#a8a8b0;max-width:42em;margin:0;line-height:1.6;}
.g-note strong{color:#e8e8ee;font-weight:500;}