/* Shared layout for the standalone content pages (How it works, Contact). */

.page-hero { text-align: center; margin-bottom: clamp(22px, 4vw, 34px); }
.page-hero .lede { max-width: 38rem; margin-inline: auto; }
.page-hero h1 em { font-style: normal; color: var(--pink); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 2.5vw, 22px);
}

.steps-col { display: flex; flex-direction: column; }
.steps-col h2 { margin-bottom: 16px; }

.steps-tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.steps-tag.is-alt { background: linear-gradient(135deg, #8f7bd6, #6d5bb8); }

/* Numbered by CSS so the markup stays a plain ordered list. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }

.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 18px 44px;
}

.steps li:last-child { padding-bottom: 0; }

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pink-wash);
  border: 1px solid var(--pink-line);
  color: var(--pink);
  font-size: 12.5px;
  font-weight: 800;
}

/* Connector between the numbers, so the column reads as a sequence. */
.steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 6px;
  width: 1px;
  background: var(--pink-line);
}

.steps strong { display: block; font-size: 14.5px; }
.steps p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.steps-col .actions { margin-top: auto; padding-top: 22px; }

.page-text { margin: 0; color: var(--muted); line-height: 1.65; }
.page-cta { margin-top: 18px; text-align: center; }
.page-cta h2 { margin-bottom: 8px; }
.page-cta .actions { justify-content: center; }

.contact-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.contact-links .directory-link { padding: 7px 15px; font-size: 13px; }
.directory-link.is-instagram:hover { border-color: #c13584; color: #c13584; background: #fdf0f7; }

/* Sub-tabs, where one page is two halves of the same errand. */
.doc-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto clamp(18px, 3vw, 26px);
  padding: 5px;
  width: max-content;
  max-width: 100%;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.doc-tabs a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}

.doc-tabs a:hover { color: var(--pink); background: rgba(255, 245, 248, .9); }

.doc-tabs a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  box-shadow: 0 4px 14px rgba(254, 81, 130, .3);
}