/* jbl how-it-works + contact pages — additions on top of main.css only.
   Loaded via the jbl_page_start 'styles' option (design doc §6). */

/* how: steps carry two paragraphs — main.css zeroes .step p margins */
.step p + p { margin-top: .65em; }

/* how: "what you get with it" checklist */
.kit-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.kit-list li { position: relative; padding-left: 1.7em; margin-bottom: .5em; }
.kit-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

/* contact: channel cards — big tap targets, label over value */
.contact-ch { display: grid; gap: .9rem; margin-block: 1.6rem; }
@media (min-width: 720px) { .contact-ch { grid-template-columns: repeat(3, 1fr); } }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
}
a.contact-card:hover { border-color: var(--accent-2); }
.contact-card-l {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.contact-card-v {
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--accent-deep);
  overflow-wrap: anywhere;
}
/* non-link channel (placeholder value): quiet, clearly not clickable */
div.contact-card .contact-card-v { color: var(--muted); font-weight: 600; }

/* contact: info cards top-aligned (grid-2 centres by default) */
.contact-cols { align-items: start; }