/* Editorial reading rhythm for the Shopify field guide. */
.shopify-guide {
  font-optical-sizing: auto;
}

.shopify-guide .guide-hero {
  padding-top: 3.75rem;
  padding-bottom: 4.5rem;
}

.shopify-guide .guide-breadcrumb {
  margin-bottom: 4.25rem;
  font-size: 13px;
}

.shopify-guide .guide-hero .section-label,
.shopify-guide .guide-section-count {
  font-size: 11px;
  letter-spacing: .105em;
  line-height: 1.5;
}

.shopify-guide .guide-hero h1 {
  max-width: 18ch;
  margin: 1.4rem 0 1.6rem;
  font-size: clamp(3.25rem, 5.1vw, 4.4rem);
  font-weight: 580;
  letter-spacing: -.047em;
  line-height: 1.11;
  text-wrap: balance;
}

.shopify-guide .guide-deck {
  max-width: 66ch;
  font-size: 1.16rem;
  line-height: 1.7;
  letter-spacing: -.008em;
  color: #53647b;
  text-wrap: pretty;
}

.shopify-guide .guide-context {
  max-width: 66ch;
  margin: 1rem 0 0;
  color: #657790;
  font-size: 14px;
  line-height: 1.65;
}

.shopify-guide .guide-context a {
  color: #0755ed;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shopify-guide .guide-meta {
  margin-top: 2.5rem;
  font-size: 12px;
  line-height: 1.5;
}

.shopify-guide .guide-layout {
  grid-template-columns: 190px minmax(0, 760px);
  gap: clamp(3.5rem, 6vw, 6rem);
  padding-top: 5.5rem;
  padding-bottom: 7rem;
}

.shopify-guide .guide-aside span {
  font-size: 10px;
  letter-spacing: .12em;
}

.shopify-guide .guide-aside a {
  font-size: 13px;
  line-height: 1.5;
}

.shopify-guide .guide-section + .guide-section {
  margin-top: 5rem;
  padding-top: 5rem;
}

.shopify-guide .guide-section h2 {
  max-width: 22ch;
  margin: 1.1rem 0 1.45rem;
  font-size: clamp(2.4rem, 3.55vw, 3.15rem);
  font-weight: 570;
  line-height: 1.17;
  letter-spacing: -.044em;
  text-wrap: balance;
}

.shopify-guide .guide-section > p {
  max-width: 68ch;
  margin-bottom: 1.45rem;
  font-size: 16px;
  line-height: 1.82;
  color: #4f6078;
  text-wrap: pretty;
}

.shopify-guide .guide-section > .guide-small {
  font-size: 13px;
  line-height: 1.7;
  color: #6b7b90;
}

.shopify-guide .guide-evidence {
  margin-top: 2.2rem;
}

.shopify-guide .guide-evidence-top {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .075em;
}

.shopify-guide .guide-evidence-grid > div {
  padding: 1.5rem 1.35rem 1.7rem;
}

.shopify-guide .guide-evidence-grid p {
  font-size: 13px;
  line-height: 1.65;
}

.shopify-guide .guide-checks {
  margin-top: 2.4rem;
}

.shopify-guide .guide-checks > div {
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 2rem 0;
}

.shopify-guide .guide-checks h3 {
  font-size: 21px;
  font-weight: 590;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.shopify-guide .guide-checks p {
  max-width: 61ch;
  margin-top: .7rem;
  font-size: 15px;
  line-height: 1.75;
  color: #5d6e84;
  text-wrap: pretty;
}

.shopify-guide .guide-method {
  margin-block: 2rem;
}

.shopify-guide .guide-method > div {
  min-height: 6rem;
}

.shopify-guide .guide-cta {
  padding-block: 6rem;
}

.shopify-guide .guide-cta h2 {
  max-width: 18ch;
  font-size: clamp(2.8rem, 4.3vw, 4rem);
  line-height: 1.14;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.shopify-guide .guide-cta p {
  max-width: 53ch;
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .shopify-guide .guide-layout {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 700px) {
  .shopify-guide .guide-hero {
    padding-top: 2rem;
    padding-bottom: 3.3rem;
  }

  .shopify-guide .guide-breadcrumb {
    margin-bottom: 3rem;
  }

  .shopify-guide .guide-hero h1 {
    max-width: 100%;
    margin-top: 1.2rem;
    font-size: clamp(2.35rem, 9.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -.043em;
  }

  .shopify-guide .guide-deck {
    font-size: 1.02rem;
    line-height: 1.72;
  }

  .shopify-guide .guide-context {
    font-size: 13px;
  }

  .shopify-guide .guide-meta {
    gap: .35rem .8rem;
    margin-top: 2rem;
    font-size: 11px;
  }

  .shopify-guide .guide-layout {
    display: block;
    padding-top: 4rem;
    padding-bottom: 5rem;
  }

  .shopify-guide .guide-section + .guide-section {
    margin-top: 4rem;
    padding-top: 4rem;
  }

  .shopify-guide .guide-section h2 {
    max-width: 100%;
    font-size: clamp(2.1rem, 8.7vw, 2.7rem);
    line-height: 1.18;
  }

  .shopify-guide .guide-section > p {
    font-size: 15.5px;
    line-height: 1.78;
  }

  .shopify-guide .guide-evidence-top {
    font-size: 9px;
  }

  .shopify-guide .guide-evidence-grid > div {
    padding: 1.25rem;
  }

  .shopify-guide .guide-checks > div {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .85rem;
    padding: 1.7rem 0;
  }

  .shopify-guide .guide-checks h3 {
    font-size: 18px;
  }

  .shopify-guide .guide-checks p {
    font-size: 14px;
    line-height: 1.72;
  }

  .shopify-guide .guide-cta {
    padding-block: 4.8rem;
  }

  .shopify-guide .guide-cta h2 {
    font-size: clamp(2.4rem, 9.3vw, 3rem);
  }
}