/* ============================================================
   VidVisual — guide.css (how-to-use page, extends landing.css)
   ============================================================ */

.guide {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(110px, 15vh, 150px) clamp(18px, 5vw, 40px) 40px;
}
.guide__head { text-align: center; margin-bottom: 70px; }
.guide__head h1 {
  font-family:"Space Grotesk", sans-serif;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.05;
}
.guide__sub { color: var(--muted); font-size: 18px; margin: 18px 0 30px; }

.guide__section { padding: 44px 0; border-top: 1px solid var(--border); }
.guide__section h2 {
  display: flex; align-items: center; gap: 14px;
  font-family:"Space Grotesk", sans-serif;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.guide__section h2 .step__num { position: static; width: 42px; height: 42px; font-size: 19px; }
.guide__section > p { color: var(--muted); font-size: 16px; margin-bottom: 16px; }
.guide__section p strong { color: #d8d8e2; font-weight: 600; }

.guide__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.guide__list li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  font-size: 15.5px;
}
.guide__list li::before {
  content: '';
  position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-2));
}
.guide__list li strong { color: var(--text); font-weight: 600; }

.tip {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255,0,51,.08);
  border: 1px solid rgba(255,84,112,.3);
  color: #ffb3c1 !important;
  font-size: 14px !important;
}

kbd {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #1a1a24;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--text);
}

code {
  font-size: 13px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #1a1a24;
  border: 1px solid var(--border);
  color: var(--red-2);
}

@media (max-width: 600px) {
  .guide__section h2 { align-items: flex-start; }
}