/* 3DPE · how-it-works page layout
 * Auto-enqueued by functions.php for slug "how-it-works" (file_exists-guarded).
 * Uses brand tokens from brand.css; mirrors the numbered-step language used on
 * the service pages (mint-tinted nodes, display headings, ink body). 2026-06-04. */

.hiw-page { padding-bottom: 16px; }

/* ---------- Hero ---------- */
.hiw-hero { text-align: center; max-width: 760px; margin: 0 auto; padding: 52px 16px 36px; }
.hiw-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: #015a4a; background: rgba(14, 231, 191, 0.18);
  padding: 6px 14px; border-radius: 100px; margin-bottom: 18px;
}
.hiw-h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 46px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 16px;
}
.hiw-lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 19px); line-height: 1.55;
  color: var(--ink-600); margin: 0 auto; max-width: 580px;
}

/* ---------- Steps (timeline) ---------- */
.hiw-steps { padding: 8px 16px 52px; }
.hiw-steps-inner { max-width: 740px; margin: 0 auto; }

.hiw-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  column-gap: 24px;
  padding-bottom: 40px;
}
/* connector line running down through the number nodes */
.hiw-step:not(.hiw-step-final)::before {
  content: "";
  position: absolute;
  left: 27px; top: 60px; bottom: 4px;
  width: 2px; background: var(--ink-200);
}
.hiw-step-num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: #015a4a; background: var(--mint-50);
  border: 2px solid var(--mint-300);
  box-shadow: 0 4px 14px -6px rgba(14, 231, 191, 0.5);
}
.hiw-step-final .hiw-step-num {
  color: #fff; background: var(--mint-500); border-color: var(--mint-500);
}
.hiw-step-body { padding-top: 6px; }
.hiw-step-h {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 8px;
}
.hiw-step-p {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.6; color: var(--ink-700); margin: 0 0 14px;
}
.hiw-step-p:last-child { margin-bottom: 0; }
/* the small "Your effort / lead time / carriers" captions — clean tinted chip */
.hiw-step-meta {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-600);
  background: var(--ink-50);
  border-left: 3px solid var(--mint-300);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin: 0;
}
.hiw-step-meta strong { color: var(--ink); font-weight: 700; }
.hiw-step-meta a { color: var(--purple-700); text-decoration: underline; text-underline-offset: 2px; }
.hiw-step-meta a:hover { color: var(--purple-800); }

/* spacing above the closing CTA band (band itself is styled by brand.css) */
.hiw-page .sec-09 { padding: 8px 16px 56px; }

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .hiw-hero { padding: 36px 16px 28px; }
  .hiw-step { grid-template-columns: 44px 1fr; column-gap: 16px; padding-bottom: 32px; }
  .hiw-step:not(.hiw-step-final)::before { left: 21px; top: 48px; }
  .hiw-step-num { width: 44px; height: 44px; font-size: 15px; }
  .hiw-step-body { padding-top: 2px; }
  .hiw-step-p { font-size: 15px; }
}