/* Pages with a main form: Contact, Commissions. */

.contact-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 56rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }
}

.form-stack {
  display: grid;
  gap: var(--space-m);
  max-width: 40rem;
}

.form-stack .field-row {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  align-items: start;
}

/* ---- Commissions ---------------------------------------------------------- */

.commissions-hero {
  max-width: 48rem;
}


/* Numbered process steps, numbers drawn from the list counter. */
.process {
  display: grid;
  gap: var(--space-m) var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-block-start: var(--space-m);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.process li {
  display: grid;
  gap: var(--space-3xs);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--color-border-subtle);
  counter-increment: step;
}

.process h3::before {
  content: counter(step) ". ";
  color: var(--accent);
}

.process p {
  color: var(--text-muted);
}

h2 + .grid {
  margin-block-start: var(--space-m);
}

.faq {
  display: grid;
  margin-block-start: var(--space-m);
  border-block-start: 1px solid var(--color-border-subtle);
}

.faq__item {
  border-block-end: 1px solid var(--color-border-subtle);
}

.faq__item summary {
  padding-block: var(--space-s);
  font-weight: 600;
  cursor: pointer;
}

.faq__item[open] > :not(summary) {
  margin-block-end: var(--space-s);
}

.request-form {
  margin-block-start: var(--space-l);
}

.choice-grid {
  display: grid;
  gap: var(--space-2xs) var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  margin-block-start: var(--space-2xs);
}

#request:focus {
  outline: none;
}

/* Websites page: package cards. The middle card is marked as recommended. */
.tiers {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
  align-items: stretch;
}

@media (min-width: 56rem) {
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tier {
  gap: var(--space-s);
}

.tier__name {
  font-size: var(--step-2);
}

.tier__for {
  color: var(--text-muted);
}

.tier__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

.tier__from {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.tier__monthly {
  margin-top: calc(var(--space-s) * -0.5);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.tier__list {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border-subtle);
}

.tier__list li {
  position: relative;
  padding-left: 1.25em;
}

.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--accent);
}

.tier--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}

.tier__badge {
  position: absolute;
  top: 0;
  left: var(--space-m);
  translate: 0 -50%;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--color-on-accent);
  font-size: var(--step--1);
  font-weight: 600;
}