/* PulsarERP — contact: the three ways to reach us beside the title, and what happens after you do.
   No form: every way here opens something the visitor already has (WhatsApp, the phone, their mail). */

.contact-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7) var(--space-8); align-items: center;
}
.contact-hero-grid .page-lede { max-width: 32rem; margin-block-start: var(--space-5); }

/* ---- The three ways, as rows ---- */

.reach { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.reach-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  text-decoration: none;
  transition: border-color var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.reach-item:hover { border-color: var(--line-strong); background: var(--surface); }
.reach-icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 1.25rem;
}
.reach-item.is-primary .reach-icon { background: var(--accent); color: var(--accent-ink); }
.reach-text { display: grid; gap: 2px; min-width: 0; }
.reach-text small { font-size: var(--fs-small); color: var(--muted); }
.reach-text b { justify-self: start; font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; color: var(--ink); }
.reach-text b[dir="ltr"] { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.reach-arrow { color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); }
.reach-item:hover .reach-arrow { transform: translateX(-4px); }

/* ---- After you reach out: three steps in a row ---- */

.after-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.after-steps li { display: grid; align-content: start; gap: var(--space-3); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line-strong); }
.after-steps li:nth-child(2) { transition-delay: 90ms; }
.after-steps li:nth-child(3) { transition-delay: 180ms; }
.after-num { font-family: var(--font-mono); font-size: var(--fs-lead); color: var(--accent); }
.after-steps h3 { font-family: var(--font-display); font-size: var(--fs-answer); font-weight: 600; line-height: var(--lh-snug); }
.after-steps p { color: var(--ink-2); line-height: 1.7; text-wrap: pretty; }
.after-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-block-start: var(--space-7); }
.after-links .more { margin-block-start: 0; }

/* ---- Narrow screens ---- */

@media (max-width: 64rem) {
  .contact-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .after-steps { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 40rem) {
  .reach-item { padding: var(--space-4); gap: var(--space-3); }
  .reach-icon { width: 2.5rem; height: 2.5rem; }
}