/* « Comment ça marche ? » (from concepts/v3/comment-ca-marche.html, moved out of the page for a strict CSP). */
/* The technical details, moved off the home page at the owner's request (03.11.2026): the home
   page speaks to merchants, this page to the bitcoiners among their customers. */
.howto { padding: 64px 0 112px; }
.howto__back { margin-bottom: 40px; }
.howto__back svg { transform: scaleX(-1); }
.howto__head { max-width: 44em; margin-bottom: 48px; }
.howto__head .lead { margin-top: 18px; }
/* First the plain account, in the home page's own words, for merchants; then the details. */
.plain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 88px; }
.plain > div { padding-top: 22px; border-top: 2px solid var(--text); }
.plain p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.howto__h2 { margin-bottom: 24px; font-size: 36px; }
.nav__links [aria-current] { color: var(--text); font-weight: 700; }

/* Narrower screens (1280 px and wider stay as drawn). */
@media (max-width: 1023px) {
  .plain { gap: 32px; margin-bottom: 72px; }
}
@media (max-width: 767px) {
  .howto { padding: 32px 0 72px; }
  .howto__back { margin-bottom: 20px; }
  .howto__head { margin-bottom: 36px; }
  .plain { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 56px; }
  .plain p { font-size: 16px; }
  .howto__h2 { margin-bottom: 16px; font-size: 28px; }
}