.app-guide-block {
  margin-top: 8px;
}

.app-guide-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-guide-section__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.app-guide-section__intro {
  margin: 4px 0 0;
  max-width: 62ch;
}

.app-guide-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr);
  gap: 24px;
  align-items: start;
}

.app-guide-section__notes {
  font-size: 0.92rem;
  color: rgba(28, 26, 23, 0.72);
}

.app-guide-section__notes p {
  margin: 0 0 10px;
}

.app-guide-custom-notes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 20, 0.08);
}

.app-guide-mock {
  display: inline-block;
  min-width: 100px;
  min-height: 64px;
  margin: 4px;
  padding: 8px;
  border-radius: 6px;
  background: #eef1f2;
  border: 1px solid rgba(15, 23, 20, 0.08);
  vertical-align: top;
  position: relative;
}

.app-guide-mock__label {
  display: block;
  font-size: 0.72rem;
  color: rgba(28, 26, 23, 0.55);
  margin-top: 4px;
}

.app-guide-mock--hero {
  display: block;
  width: 100%;
  min-height: 100px;
  background: linear-gradient(135deg, #f3e8e2, #0b5a3b);
}

.app-guide-mock--web,
.app-guide-mock--pdp {
  display: block;
  width: 100%;
  min-height: 120px;
}

.app-guide-mock--email {
  width: 200px;
  min-height: 140px;
  background: #fff;
}

.app-guide-mock--banner {
  width: 120px;
  min-height: 48px;
}

.app-guide-mock--app,
.app-guide-mock--feed,
.app-guide-mock--story,
.app-guide-mock--reels {
  width: 88px;
  min-height: 120px;
}

.app-guide-mock--story,
.app-guide-mock--reels,
.app-guide-mock--live {
  min-height: 156px;
  width: 88px;
}

.app-guide-mock--store,
.app-guide-mock--counter {
  width: 140px;
  min-height: 100px;
}

.app-guide-mock--posm {
  width: 72px;
  min-height: 96px;
}

.app-guide-mock--screen {
  width: 160px;
  min-height: 90px;
  background: #2a3540;
}

.app-guide-mock--screen .app-guide-mock__label {
  color: rgba(255, 255, 255, 0.7);
}

.app-guide-overview__grid,
.app-guide-web__modules,
.app-guide-app,
.app-guide-formats,
.app-guide-display,
.app-guide-retail-overview,
.app-guide-signage,
.app-guide-posm,
.app-guide-press-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-guide-platform-chip,
.app-guide-store-chip,
.app-guide-promo-badge {
  display: inline-block;
  padding: 8px 14px;
  margin: 4px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #e8f5ef;
  color: #0b5a3b;
}

.app-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.app-guide-table th,
.app-guide-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(15, 23, 20, 0.08);
  text-align: left;
  vertical-align: top;
}

.app-guide-pdp__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.app-guide-pdp__gallery span {
  padding: 6px 10px;
  font-size: 0.78rem;
  border-radius: 4px;
  background: #eef1f2;
}

.app-guide-email__types {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.88rem;
}

.app-guide-ugc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.app-guide-ugc article {
  padding: 12px;
  border-radius: 8px;
  background: #f7f3ea;
}

.app-guide-ugc h4 {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.app-guide-comment-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #eef1f2;
  border-radius: 8px;
}

.app-guide-comment {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  max-width: 85%;
}

.app-guide-comment--user {
  align-self: flex-start;
  background: #fff;
}

.app-guide-comment--brand {
  align-self: flex-end;
  background: #e8f5ef;
}

.app-guide-listing__thumbs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.app-guide-listing__thumbs span {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  border-radius: 4px;
  background: #eef1f2;
}

.app-guide-copy {
  padding: 16px;
  border-radius: 8px;
  background: #f7f3ea;
  font-size: 0.9rem;
}

.app-guide-copy__title {
  margin: 0 0 8px;
}

.app-guide-copy__sku {
  margin: 0 0 8px;
}

.app-guide-planogram {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #eef1f2;
  border-radius: 8px;
}

.app-guide-planogram span {
  padding: 12px;
  border-radius: 4px;
  background: #fff;
  font-size: 0.85rem;
  border-left: 4px solid #0b5a3b;
}

.app-guide-pr-structure {
  margin: 0;
  padding-left: 20px;
  font-size: 0.92rem;
}

.app-guide-pr-structure li {
  margin-bottom: 8px;
}

.app-guide-boilerplate blockquote {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-left: 3px solid #0b5a3b;
  background: #f7f3ea;
  font-size: 0.9rem;
}

.app-guide-media-kit {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
}

.app-guide-media-kit li {
  margin-bottom: 6px;
}

@media (max-width: 720px) {
  .app-guide-section__layout {
    grid-template-columns: 1fr;
  }

  .app-guide-ugc {
    grid-template-columns: 1fr;
  }
}