/* How to buy and footer. Both sit far below the fold, so this file loads
   without blocking the first paint. Same lead ground as the rest of the store,
   set apart by hairlines. Tokens: base.css. */

/* ---------- How to buy ---------- */

.how-to { border-top: 1px solid var(--border); }
.how-to__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.how-to .section-head { margin-bottom: var(--space-6); }

.how-to__steps {
  display: grid;
  gap: var(--space-7);
  width: 100%;
  max-width: 980px;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.how-to__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.how-to__num {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
}

.how-to__step-title {
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
}

.how-to__step-text { max-width: 18rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }

@media (min-width: 768px) {
  .how-to__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}

.how-to__instagram {
  margin-top: var(--space-8);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

/* .reveal.is-visible sets its own transition; keep the hover fade alongside it. */
.how-to__instagram,
html.js .how-to__instagram.reveal.is-visible {
  transition:
    opacity var(--dur-reveal) var(--ease-out-soft) var(--d, 0s),
    transform var(--dur-reveal) var(--ease-out-soft) var(--d, 0s),
    border-color var(--dur-base) var(--ease-out-soft),
    color var(--dur-base) var(--ease-out-soft);
}

.how-to__instagram:hover { border-color: var(--text); color: var(--text); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--border); padding: var(--space-9) 0 calc(var(--space-7) + env(safe-area-inset-bottom)); text-align: center; }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.site-footer__link { padding-block: var(--space-2); color: var(--text); transition: color var(--dur-base) var(--ease-out-soft); }
.site-footer__link:hover { color: var(--accent); }
.site-footer__notice { max-width: 30rem; color: var(--muted); font-size: var(--fs-xs); line-height: 1.8; }