/* =========================================================
   Page — Getting started

   A walk-through, so it is built as one column of numbered
   steps rather than a grid of cards. A merchant reads this with
   the dashboard open beside it, following in order; a grid
   invites them to scan, and scanning is how step six gets
   skipped and the shop launches with no delivery zones.

   Layer 3 only — every value below reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   The head
   --------------------------------------------------------- */
.gs-head {
  padding-block: var(--space-16) var(--space-10);
}

.gs-head__inner {
  max-width: 44rem;
}

/* The way back up to the help centre, set in the eyebrow's
   place so the reader knows what this page is a part of. */
.gs-head__up {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.gs-head__up:hover {
  border-block-end-color: currentColor;
}

.gs-head__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.gs-head__lead {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
}

.gs-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------------------------------------------------------
   A phase
   --------------------------------------------------------- */
.gs-phase__inner {
  max-width: 50rem;
}

.gs-phase__head {
  margin-block-end: var(--space-10);
}

.gs-phase__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.gs-phase__lead {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   The steps

   The number sits in its own column with a hairline running
   down beside it, so the list reads as one continuous walk
   rather than as ten separate blocks. The rule is drawn on the
   list instead of per step, which is what stops it appearing
   below the last number with nothing under it.
   --------------------------------------------------------- */
.gs-steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-10);
}

.gs-step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-5);
  align-items: start;
}

.gs-step__index {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-gold-text);
  font-variant-numeric: tabular-nums;
}

.gs-step__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.gs-step__text {
  margin: 0;
  max-width: 44rem;
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* Where it is, and how long it takes. Small, muted, and on one
   line: this is the reader's orientation, not the instruction. */
.gs-step__meta {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.gs-step__meta:empty {
  display: none;
}

.gs-step__where {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The sidebar label, set apart so the eye finds it. It is the
   answer to "where do I click", and it should be findable
   without reading the sentence around it. */
.gs-step__screen {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

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

/* ---------------------------------------------------------
   The checklist

   Deliberately a repetition of the steps. This is what a
   merchant reopens on the morning they launch, and re-reading
   ten steps to find five boxes is why they would not reopen it.
   --------------------------------------------------------- */
.gs-check__inner {
  max-width: 50rem;
}

.gs-check__title {
  margin: var(--space-10) 0 var(--space-6);
  font-size: var(--fs-h3);
}

.gs-check__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.gs-check__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-4);
  align-items: start;
  color: var(--color-text-secondary);
  line-height: var(--lh-snug);
}

.gs-check__item svg {
  width: 20px;
  height: 20px;
  margin-block-start: 0.15rem;
  color: var(--color-gold-text);
}

.gs-check__foot {
  margin: var(--space-10) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .gs-head {
    padding-block: var(--space-12) var(--space-8);
  }

  .gs-steps {
    gap: var(--space-8);
  }

  /* The number moves above the step on a narrow screen: a
     3.5rem gutter beside a phone-width column leaves the text
     at about twenty characters. */
  .gs-step {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .gs-step__index {
    font-size: var(--fs-lg);
  }
}