/* Step-by-step guides: /tutorial/clip-all, /tutorial/grocery-list (partials/tutorial-guide.php). */
.guide { max-width: 860px; margin: 0 auto; }
.guide-step {
  display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: center;
  padding: 36px 0; border-bottom: 1px solid var(--border, #e3e7ec);
}
.guide-step:nth-child(even) { grid-template-columns: 340px 1fr; }
.guide-step:nth-child(even) .guide-text { order: 2; }
.guide-step.no-shot, .guide-step.no-shot:nth-child(even) { grid-template-columns: 1fr; }  /* no screenshot: full width */
.guide-step.no-shot .guide-text { order: 0; max-width: 720px; }
.guide-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--dc-blue-bright, #0a7aff); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; margin-bottom: 12px;
}
.guide-text h2 { margin: 0 0 10px; font-size: 1.5rem; }
.guide-text p { margin: 0; color: var(--text-medium); font-size: 1.08rem; line-height: 1.6; }
.guide-shot {
  width: 100%; height: auto; display: block; border-radius: 20px;
  border: 1px solid var(--border, #e3e7ec); box-shadow: 0 10px 30px rgba(16, 32, 47, .12); background: #fff;
}
.guide-tips { padding: 36px 0 8px; }
.guide-tips h2 { margin: 0 0 12px; }
.guide-tips ul { margin: 0 0 24px; padding-left: 22px; color: var(--text-medium); line-height: 1.7; font-size: 1.05rem; }
.guide-tips .guide-shot { max-width: 340px; margin: 0 auto; }

@media (max-width: 720px) {
  .guide-step, .guide-step:nth-child(even) { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .guide-step:nth-child(even) .guide-text { order: 0; }
  .guide-shot { max-width: 380px; margin: 0 auto; }
}

/* App-style tabs across the three How It Works pages (partials/tutorial-tabs.php). */
.tut-tabs { background: #fff; border-bottom: 1px solid var(--border, #e3e7ec); }
.tut-tabs-inner { max-width: 640px; margin: 0 auto; display: flex; }
.tut-tab {
  flex: 1; text-align: center; padding: 16px 8px 14px; font-weight: 800; font-size: 1rem;
  color: var(--text-medium, #5d6773); text-decoration: none; border-bottom: 3px solid transparent;
}
.tut-tab:hover { color: var(--dc-blue-bright, #0a7aff); }
.tut-tab.active { color: var(--dc-blue-bright, #0a7aff); border-bottom-color: var(--dc-blue-bright, #0a7aff); }
.guide-video { max-width: 340px; margin: 0 auto 8px; }
.guide-video video { width: 100%; display: block; border-radius: 16px; }
@media (max-width: 420px) { .tut-tab { font-size: .92rem; padding: 14px 4px 12px; } }