/* =============================================================================
   ZASTRON LABS V2  ·  services.css
   Page-specific layout only. Visual system (tokens, type, buttons, forms,
   reveal, focus) lives in styles.css. Owner: PAGE-SERVICES builder.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.svc-intro {
  margin-top: var(--sect);
}

.svc-intro__line {
  font: 400 var(--fs-lead) var(--font-sans);
  color: var(--ink);
  max-width: 34rem;
  margin-top: var(--s-4);
}

.svc-intro__body {
  font: 400 var(--fs-lead) var(--font-sans);
  color: var(--ink-2);
  line-height: var(--lh-body);
  max-width: var(--w-read);
  margin-top: var(--s-4);
}

/* -----------------------------------------------------------------------------
   Offers (three deep blocks: what goes in / what comes out / how long)
   -------------------------------------------------------------------------- */
.offer__title {
  font: 500 var(--fs-h2) var(--font-sans);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-head);
  color: var(--ink);
}

.offer__one-liner {
  font: 400 var(--fs-lead) var(--font-sans);
  color: var(--ink-2);
  line-height: var(--lh-body);
  max-width: var(--w-read);
  margin-top: var(--s-4);
}

.offer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  margin-top: var(--s-8);
}

@media (min-width: 720px) {
  .offer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.offer__block p {
  font: 400 var(--fs-body) var(--font-sans);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* -----------------------------------------------------------------------------
   How I work
   -------------------------------------------------------------------------- */
.how__list {
  max-width: var(--w-read);
  margin-top: var(--s-7);
}

.how__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}

.how__item:last-child {
  border-bottom: 1px solid var(--line);
}

.how__num {
  font: 400 0.8125rem var(--font-mono);
  letter-spacing: var(--ls-label);
  color: var(--accent-deep);
  align-self: start;
  padding-top: 0.15em;
}

.how__name {
  font: 500 var(--fs-body) var(--font-sans);
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.how__note {
  font: 400 var(--fs-small) var(--font-sans);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.how__price {
  font: 400 var(--fs-body) var(--font-sans);
  color: var(--ink-2);
  max-width: var(--w-read);
  margin-top: var(--s-7);
}

.how__freelance {
  font: 400 var(--fs-body) var(--font-sans);
  color: var(--ink);
  max-width: var(--w-read);
  margin-top: var(--s-3);
}