/* ==========================================================================
   Guide pages (/voice-chat-app/, /fadfed/, /people-nearby/, /talk-now/, /bored/ and their /en/ copies).
   Builds on the .legal reading layout in styles.css; tokens only.
   ========================================================================== */

.guide .crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); color: var(--c-t3); font-size: var(--fs-sm); }
.guide .crumbs a { color: var(--c-t2); text-decoration: none; }
.guide .crumbs a:hover { color: var(--c-t1); }
.guide .crumbs [aria-current] { color: var(--c-t2); }

/* Download card: the same white App Store pill as the homepage */
.guide-cta {
  display: grid; justify-items: center; gap: var(--s-3); text-align: center;
  padding: var(--s-8) var(--s-6); margin: var(--s-8) 0; border-radius: var(--r-xl);
  background: radial-gradient(80% 120% at 50% 0%, var(--c-accent-dim), transparent 70%), linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border: 1px solid var(--c-border);
}
.guide-cta .cta-title { color: var(--c-t1); font-size: var(--fs-lg); font-weight: 800; margin: 0; }
.guide-cta .cta-sub { color: var(--c-t2); font-size: var(--fs-sm); margin: 0; }
.guide .guide-cta .store-btn { color: var(--c-bg); text-decoration: none; margin-top: var(--s-2); }
.guide-cta .soon { margin: 0; }

/* Numbered steps */
.guide-steps { counter-reset: step; display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.guide-steps li {
  counter-increment: step; position: relative;
  padding: var(--s-4) var(--s-5); padding-inline-start: calc(var(--s-5) + var(--s-10));
  border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border);
}
.guide-steps li::before {
  content: counter(step); position: absolute; inset-inline-start: var(--s-4); top: var(--s-4);
  width: calc(var(--s-6) + var(--s-1)); height: calc(var(--s-6) + var(--s-1)); display: grid; place-items: center; border-radius: 50%;
  background: var(--g-accent); color: var(--c-t1); font-size: var(--fs-xs); font-weight: 800; line-height: 1;
}

/* Related pages */
.related { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--c-border); }
.related h2 { margin-top: 0; }
.guide .related ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.guide .related li { padding: 0; }
.guide .related li::before { content: none; }
.guide .related a {
  display: inline-flex; align-items: center; min-height: calc(var(--s-10) + var(--s-1)); padding: 0 var(--s-4);
  border-radius: var(--r-pill); border: 1px solid var(--c-glass-edge); background: rgb(255 255 255 / 0.04);
  color: var(--c-t1); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
}
.guide .related a:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.18); }