/* ════════════════════════════════════════
   HOW IT WORKS — Section + Step layout
════════════════════════════════════════ */
.how-sec { padding:80px 48px; border-bottom:1px solid #1e1b3a; }
.step { display:grid; grid-template-columns:60px 1fr 300px; gap:28px; align-items:center; padding:32px 0; border-bottom:1px solid #111120; }
.step:last-child { border-bottom:none; }
.step-n { width:52px; height:52px; border-radius:50%; background:#0f0a1e; border:1px solid #4c1d95; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:#a78bfa; flex-shrink:0; }
.step-t h4 { font-size:18px; font-weight:800; color:#fff; margin-bottom:8px; }
.step-t p { font-size:13px; color:#6b7280; line-height:1.65; }
.step-illus { display:flex; align-items:flex-start; justify-content:center; }

/* ════════════════════════════════════════
   Step panel illustrations (sp-* classes)
════════════════════════════════════════ */
.sp-panel { background:#141420; border:1px solid #2d1f5e; border-radius:10px; padding:0; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:11px; color:#ccc; width:260px; }
.sp-section-hdr { padding:8px 10px; font-size:10px; font-weight:700; color:#9ca3af; letter-spacing:.5px; background:#0f0f1a; border-bottom:1px solid #1e1b3a; }
.sp-container { display:flex; align-items:center; gap:6px; padding:6px 10px; border-bottom:1px solid #1a1a2e; color:#bbb; font-size:11px; }
.sp-selected { background:#1a2a50; border-left:2px solid #4c8eff; color:#fff; }
.sp-drag { color:#555; cursor:grab; }
.sp-x { margin-left:auto; color:#666; cursor:pointer; font-size:12px; }
.sp-divider { height:1px; background:#1e1b3a; margin:4px 0; }
.sp-duration { padding:6px 10px; font-size:10px; color:#9ca3af; }
.sp-duration strong { color:#e2e8f0; }
.sp-tl { display:flex; height:10px; margin:0 10px 2px; border-radius:3px; overflow:hidden; }
.sp-tl > div { height:100%; }
.sp-tl-hint { padding:2px 10px 6px; font-size:9px; color:#4b5563; }

/* Step 2 — IN/OUT columns */
.sp-dir-row { display:flex; gap:0; }
.sp-dir-col { flex:1; border-right:1px solid #1e1b3a; }
.sp-dir-col:last-child { border-right:none; }
.sp-in-col { }
.sp-out-col { }
.sp-dir-hdr { padding:7px 8px; font-size:10px; font-weight:700; display:flex; justify-content:space-between; background:#0f0f1a; border-bottom:1px solid #1e1b3a; }
.sp-in-hdr { color:#5bc4ff; }
.sp-out-hdr { color:#f59e0b; }
.sp-actions { color:#666; font-size:9px; font-weight:400; }
.sp-sublabel { padding:4px 8px 2px; font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.sp-in-label { color:#5bc4ff; }
.sp-out-label { color:#f59e0b; }
.sp-field { display:flex; align-items:center; justify-content:space-between; padding:3px 8px; gap:4px; }
.sp-dim { opacity:.5; }
.sp-dropdown { background:#1e1b3a; border:1px solid #333; border-radius:3px; padding:2px 6px; font-size:9px; color:#aaa; white-space:nowrap; }
.sp-input-val { background:#1e1b3a; border:1px solid #333; border-radius:3px; padding:2px 6px; font-size:9px; color:#aaa; min-width:30px; text-align:right; }
.sp-effect-card { margin:3px 8px; background:#1a1a2e; border:1px solid #2d1f5e; border-radius:4px; padding:4px 8px; }
.sp-in-card { border-color:#1a3a6b; }
.sp-out-card { border-color:#3a2a00; }
.sp-add-fx { padding:5px 10px; color:#7c3aed; font-size:10px; font-weight:600; cursor:pointer; }

/* Step 3 — Bake + footer */
.sp-bake-row { padding:8px 10px; }
.sp-bake-btn { width:100%; background:#252035; border:1px solid #4c1d95; color:#d1d5db; padding:7px; border-radius:5px; font-size:12px; font-weight:600; text-align:center; cursor:pointer; }
.sp-footer-row { display:flex; align-items:center; gap:6px; padding:6px 10px 8px; border-top:1px solid #1e1b3a; }
.sp-refresh-btn { color:#666; font-size:14px; cursor:pointer; }
.sp-autosave-btn { color:#9ca3af; font-size:10px; display:flex; align-items:center; gap:4px; }
.sp-green-dot { color:#22c55e; font-size:8px; }
.sp-footer-right { margin-left:auto; display:flex; gap:5px; }
.sp-delete-btn { background:#ef4444; color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:10px; font-weight:700; cursor:pointer; }
.sp-update-btn { background:#3b82f6; color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:10px; font-weight:700; cursor:pointer; }

/* Global timing header variant */
.sp-timing-hdr { color:#6b7280; font-size:9px; }
.sp-meta { color:#6b7280; margin-left:4px; }

/* ════════════════════════════════════════
   Bake callout box
════════════════════════════════════════ */
.bake-box { background:linear-gradient(135deg,#0f0a1e,#160d2a); border:1px solid #4c1d95; border-radius:16px; padding:30px 34px; margin-top:40px; display:flex; gap:36px; align-items:center; }
.bake-visual { flex-shrink:0; }
.bake-kf-field {
  position:relative;
  width:280px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kf {
  position:absolute;
  color:#a78bfa;
  font-size:20px;
  pointer-events:none;
  user-select:none;
}
.kf-1 { top:  4%; left:  2%; font-size:28px; color:#7c3aed;  opacity:0.9; }
.kf-2 { top:  6%; right: 4%; font-size:14px; color:#c4b5fd;  opacity:0.6; }
.kf-3 { top: 38%; left:  0%; font-size:12px; color:#4c1d95;  opacity:0.8; }
.kf-4 { top: 35%; right: 0%; font-size:22px; color:#a78bfa;  opacity:0.8; }
.kf-5 { bottom:5%; left:  8%; font-size:18px; color:#6d28d9; opacity:0.7; }
.kf-6 { bottom:2%; right: 5%; font-size:26px; color:#7c3aed; opacity:0.9; }
.kf-7 { top: 15%; left: 28%; font-size:10px; color:#c4b5fd;  opacity:0.4; }
.bake-btn-demo {
  position:relative;
  z-index:2;
  background:#1a1530;
  border:1.5px solid #5b21b6;
  color:#e2e8f0;
  font-size:20px;
  font-weight:700;
  padding:16px 40px;
  border-radius:8px;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  box-shadow:0 0 32px rgba(124,58,237,0.35), 0 0 60px rgba(124,58,237,0.15);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.bake-text h4 { font-size:18px; font-weight:800; color:#fff; margin-bottom:10px; }
.bake-text p  { font-size:13px; color:#94a3b8; line-height:1.7; margin-bottom:14px; }
.bake-pills { display:flex; flex-wrap:wrap; gap:8px; }
.bake-pill { background:rgba(124,58,237,0.15); border:1px solid rgba(124,58,237,0.3); color:#c4b5fd; font-size:11px; font-weight:600; padding:3px 12px; border-radius:20px; }

/* ════════════════════════════════════════
   Delivery options (Step 3 text column)
════════════════════════════════════════ */
.delivery-opts { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.dopt { display:flex; gap:10px; align-items:center; }
.dopt-tag { color:#a78bfa; font-weight:700; font-size:11px; flex-shrink:0; margin-top:2px; background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.25); padding:1px 8px; border-radius:20px; }
.dopt-desc { font-size:12px; color:#6b7280; line-height:1.5; }