/* Brand Sauce SEO/GEO narrative sections
   Keeps long-form SEO copy useful without looking bolted on. */
.bs-seo-section,
.catalog-seo-copy,
.newsletter-seo-copy,
.masterclass-seo-copy,
.stores-seo-copy,
.seo-copy,
.seo-detail-copy {
  --bs-seo-bg: #fff8ef;
  --bs-seo-card: rgba(255, 255, 255, 0.82);
  --bs-seo-ink: #2a001f;
  --bs-seo-muted: #5f4a58;
  --bs-seo-border: rgba(42, 0, 31, 0.12);
  --bs-seo-pepper: #ff5a1f;
  --bs-seo-gold: #f5b84b;
  position: relative;
  isolation: isolate;
  max-width: 1180px !important;
  margin: clamp(48px, 7vw, 96px) auto !important;
  padding: clamp(28px, 4.5vw, 56px) !important;
  color: var(--bs-seo-ink) !important;
  line-height: 1.7;
  border: 1px solid var(--bs-seo-border);
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 90, 31, 0.16), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(245, 184, 75, 0.22), transparent 28%),
    linear-gradient(135deg, var(--bs-seo-bg), #ffffff 58%, #fff2df);
  box-shadow: 0 22px 70px rgba(42, 0, 31, 0.10);
  overflow: hidden;
}

.bs-seo-section::before,
.catalog-seo-copy::before,
.newsletter-seo-copy::before,
.masterclass-seo-copy::before,
.stores-seo-copy::before,
.seo-copy::before,
.seo-detail-copy::before {
  content: "Brand Sauce Playbook";
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 12px;
  border: 1px solid rgba(42, 0, 31, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--bs-seo-ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bs-seo-section::after,
.catalog-seo-copy::after,
.newsletter-seo-copy::after,
.masterclass-seo-copy::after,
.stores-seo-copy::after,
.seo-copy::after,
.seo-detail-copy::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -72px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,90,31,.16), rgba(245,184,75,.2));
  z-index: -1;
}

.bs-seo-section h2,
.catalog-seo-copy h2,
.newsletter-seo-copy h2,
.masterclass-seo-copy h2,
.stores-seo-copy h2,
.seo-copy h2,
.seo-detail-copy h2 {
  max-width: 760px;
  margin: 0 0 18px !important;
  color: var(--bs-seo-ink) !important;
  font-family: Archivo, Inter, system-ui, sans-serif;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.bs-seo-section > p,
.catalog-seo-copy > p,
.newsletter-seo-copy > p,
.masterclass-seo-copy > p,
.stores-seo-copy > p,
.seo-copy > p,
.seo-detail-copy > p {
  margin: 0 !important;
  color: var(--bs-seo-muted) !important;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
}

.bs-seo-section > p + p,
.catalog-seo-copy > p + p,
.newsletter-seo-copy > p + p,
.masterclass-seo-copy > p + p,
.stores-seo-copy > p + p,
.seo-copy > p + p,
.seo-detail-copy > p + p {
  margin-top: 14px !important;
}

.bs-seo-section > p:nth-of-type(n+3),
.catalog-seo-copy > p:nth-of-type(n+3),
.newsletter-seo-copy > p:nth-of-type(n+3),
.masterclass-seo-copy > p:nth-of-type(n+3),
.stores-seo-copy > p:nth-of-type(n+3),
.seo-copy > p:nth-of-type(n+3),
.seo-detail-copy > p:nth-of-type(n+3) {
  display: block;
  margin-top: 18px !important;
  padding: 18px 20px;
  border: 1px solid var(--bs-seo-border);
  border-radius: 20px;
  background: var(--bs-seo-card);
  box-shadow: 0 10px 30px rgba(42, 0, 31, 0.06);
}

.bs-seo-section .bs-seo-grid,
.catalog-seo-copy .bs-seo-grid,
.newsletter-seo-copy .bs-seo-grid,
.masterclass-seo-copy .bs-seo-grid,
.stores-seo-copy .bs-seo-grid,
.seo-copy .bs-seo-grid,
.seo-detail-copy .bs-seo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.bs-seo-card {
  padding: 18px;
  border: 1px solid var(--bs-seo-border);
  border-radius: 20px;
  background: var(--bs-seo-card);
  box-shadow: 0 10px 30px rgba(42, 0, 31, 0.06);
}

.bs-seo-card strong {
  display: block;
  margin-bottom: 5px;
  color: var(--bs-seo-ink);
  font-size: 0.98rem;
}

.bs-seo-card span {
  color: var(--bs-seo-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.stores-seo-copy {
  --bs-seo-bg: #190014;
  --bs-seo-card: rgba(255, 255, 255, 0.08);
  --bs-seo-ink: #ffffff;
  --bs-seo-muted: rgba(255, 255, 255, 0.76);
  --bs-seo-border: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 90, 31, 0.22), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(245, 184, 75, 0.20), transparent 28%),
    linear-gradient(135deg, #190014, #2a001f 58%, #140010) !important;
}

.stores-seo-copy::before { content: "Storefront Strategy"; }
.catalog-seo-copy::before { content: "Catalog Strategy"; }
.newsletter-seo-copy::before { content: "Swag Intelligence"; }
.masterclass-seo-copy::before { content: "Masterclass Notes"; }
.seo-detail-copy::before { content: "Why it works"; }

@media (max-width: 820px) {
  .bs-seo-section,
  .catalog-seo-copy,
  .newsletter-seo-copy,
  .masterclass-seo-copy,
  .stores-seo-copy,
  .seo-copy,
  .seo-detail-copy {
    margin: 36px 16px !important;
    padding: 26px 20px !important;
    border-radius: 24px;
  }
  .bs-seo-section .bs-seo-grid,
  .catalog-seo-copy .bs-seo-grid,
  .newsletter-seo-copy .bs-seo-grid,
  .masterclass-seo-copy .bs-seo-grid,
  .stores-seo-copy .bs-seo-grid,
  .seo-copy .bs-seo-grid,
  .seo-detail-copy .bs-seo-grid {
    grid-template-columns: 1fr;
  }
}