/* GUIDE PAGES — Zigzag walkthrough layout */

/* Path grouping */
.guide-path{padding:0 24px}

/* Path header */
.guide-path-header{text-align:center;max-width:700px;margin:0 auto;padding:80px 0 40px}
.guide-path-label{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:3px;color:#ea580c;font-weight:700;margin-bottom:12px}
.guide-path-header h2{font-size:1.75rem;font-weight:800;color:#0f172a;margin-bottom:8px}
.guide-path-header p{color:#64748b;font-size:1rem;line-height:1.6}

/* Zigzag step */
.guide-step{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1100px;margin:0 auto;padding:48px 0}
.guide-step+.guide-step{border-top:1px solid #f1f5f9}

/* Reverse order for even steps */
.guide-step.reverse .guide-screenshot{order:-1}

/* Step number badge */
.guide-step-number{width:44px;height:44px;border-radius:12px;background:#ea580c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;margin-bottom:16px;flex-shrink:0}

/* Text column */
.guide-text h3{font-size:1.25rem;font-weight:700;color:#0f172a;margin-bottom:10px}
.guide-text p{font-size:.95rem;color:#64748b;line-height:1.7;margin-bottom:16px}

/* Tip list */
.guide-tip-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.guide-tip-list li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:#475569;line-height:1.5}
.guide-tip-list i{color:#ea580c;font-size:.95rem;flex-shrink:0}

/* Screenshot column — reuses .screenshot-frame and .screenshot-placeholder from feature.css */
.guide-screenshot .screenshot-frame{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.06)}
.guide-screenshot .screenshot-placeholder{background:#e2e8f0;border:2px dashed #cbd5e1;border-radius:12px;height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#94a3b8;font-size:.95rem;gap:8px}
.guide-screenshot .screenshot-placeholder i{font-size:2.5rem;opacity:.5}
.guide-screenshot .screenshot-img{width:100%;border-radius:12px;display:block}

/* CTA sub-text */
.cta-sub{color:rgba(255,255,255,.8);font-size:1.05rem;margin:-8px 0 24px}

/* Mobile */
@media(max-width:768px){
  .guide-step{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .guide-step.reverse .guide-screenshot{order:1}
  .guide-path-header{padding:60px 0 24px}
  .guide-screenshot .screenshot-placeholder{height:220px}
}