@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Lora:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --s-bg:        #faf6f1;
  --s-surface:   #f3ece3;
  --s-border:    #e8ddd2;
  --s-terra:     #1a1a1a;
  --s-terra-lt:  #f0e0d4;
  --s-brown:     #1a1a1a;
  --s-mid:       #1a1a1a;
  --s-muted:     #1a1a1a;
  --s-quote-bg:  #fdf8f3;
}

.pilp-social-content {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  color: var(--s-brown);
  background: transparent;
}

/* секции */
.pilp-social-content .pilp-section {
  display: none;
  max-width: 760px;
}
.pilp-social-content .pilp-section.active {
  display: block;
}

/* метка */
.s-label {
  display: inline-block;
  font-family: 'Syne', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--s-terra);
  margin-bottom: 10px;
}

/* заголовки */
.pilp-social-content h1 {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--s-brown);
  margin: 0 0 18px 0;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.pilp-social-content h2 {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--s-brown);
  margin: 28px 0 10px 0;
}

/* тело текста */
.pilp-social-content p {
  font-size: 15px;
  font-weight: 500;
  color: var(--s-mid);
  line-height: 1.75;
  margin: 0 0 16px 0;
}

/* лид */
.s-lead {
/*  font-family: 'Lora', serif !important; */
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--s-brown) !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

/* цитата / блок-история */
.s-quote {
  background: var(--s-quote-bg);
  border-left: 3px solid var(--s-terra);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 22px 0;
}
.s-quote p {
/*  font-family: 'Lora', serif;   */
  font-style: italic;
  font-size: 15.5px;
  color: var(--s-brown);
  margin: 0;
  line-height: 1.7;
}
.s-quote .s-quote-attr {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: 12px;
  color: var(--s-muted);
  margin-top: 10px !important;
  font-weight: 400;
}

/* карточки-проблемы */
.s-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 24px 0;
}
.s-card {
  flex: 1 1 200px;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: 10px;
  padding: 16px 18px;
}
.s-card .s-card-icon {
  font-size: 22px;
  margin-bottom: 8px;
  display: block;
}
.s-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--s-brown);
  margin: 0 0 6px 0;
}
.s-card p {
  font-size: 13px;
  color: var(--s-mid);
  margin: 0;
  line-height: 1.55;
}

/* highlight box */
.s-highlight {
  background: var(--s-terra-lt);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 20px 0;
}
.s-highlight p {
  font-size: 14.5px;
  color: var(--s-brown);
  margin: 0;
  line-height: 1.65;
}

/* список */
.s-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.s-list li {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--s-mid);
  padding: 8px 0 8px 24px;
  border-bottom: 1px solid var(--s-border);
  position: relative;
  line-height: 1.55;
}
.s-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--s-terra);
  font-size: 13px;
}
.s-list li:last-child { border-bottom: none; }
.s-list li strong { color: var(--s-brown); font-weight: 500; }

/* таблица компонентов */
.s-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px 0;
  font-size: 14px;
}
.s-table th {
  text-align: left;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--s-muted);
  padding: 8px 12px;
  border-bottom: 2px solid var(--s-brown);
}
.s-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--s-border);
  vertical-align: top;
  color: var(--s-mid);
  font-weight: 300;
  line-height: 1.55;
  font-size: 13.5px;
}
.s-table td:first-child {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  color: var(--s-brown);
  font-size: 13px;
  width: 110px;
}

/* stat inline */
.s-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.s-stat {
  flex: 1 1 120px;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.s-stat .s-stat-n {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--s-terra);
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}
.s-stat .s-stat-l {
  font-size: 11.5px;
  color: var(--s-muted);
  font-weight: 300;
  line-height: 1.4;
  display: block;
}

/* Gutenberg блок */
.s-gutenberg {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
}
.s-gutenberg-icon {
  font-size: 36px;
  flex-shrink: 0;
  line-height: 1;
}
.s-gutenberg-text h3 {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--s-brown);
  margin: 0 0 6px 0;
}
.s-gutenberg-text p {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  line-height: 1.6;
}

/* разделитель */
.s-hr {
  border: none;
  border-top: 1px solid var(--s-border);
  margin: 24px 0;
}

/* CTA */
.s-cta {
  display: inline-block;
  padding: 12px 26px;
  background: var(--s-terra);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin-top: 6px;
  transition: background 0.2s;
}
.s-cta:hover { background: #b0521f; }
.s-cta-soft {
  display: inline-block;
  padding: 12px 26px;
  background: transparent;
  color: var(--s-terra);
  border: 1.5px solid var(--s-terra);
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-top: 6px;
  margin-left: 10px;
  transition: background 0.2s, color 0.2s;
}
.s-cta-soft:hover {
  background: var(--s-terra-lt);
}

@media (max-width: 768px) {
  .pilp-social-content { padding: 15px 15px; }
  .pilp-social-content h1 { font-size: 22px; }
  .s-stats { gap: 10px; }
  .s-gutenberg { flex-direction: column; }
}

/**********   *********/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

.pilp-social-sidebar {
  width: 280px;
  background: #faf6f1;
  border: 1.5px solid #e8ddd2;
  padding: 22px 18px;
  box-sizing: border-box;
  position: sticky;
  top: 20px;
  height: fit-content;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
}

.pilp-social-sidebar h2 {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #3d2b1f;
  margin: 0 0 6px 0;
  letter-spacing: 0.2px;
}

.pilp-social-sidebar .pilp-social-subtitle {
  font-size: 13px;
  color: #1a1a1a;
  margin: 0 0 20px 0;
  font-weight: 500;
  line-height: 1.4;
}

/* разделитель */
.pilp-social-sidebar .pilp-social-divider {
  border: none;
  border-top: 1px solid #e8ddd2;
  margin: 0 0 16px 0;
}

.pilp-social-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  margin-bottom: 4px;
  cursor: pointer;
  border-radius: 8px;
  color: #1a1a1a;
  transition: background 0.18s ease, color 0.18s ease;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.pilp-social-menu-item .menu-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.75;
}

.pilp-social-menu-item:hover {
  background: #f0e6da;
  color: #3d2b1f;
}

.pilp-social-menu-item.active {
  background: #c8612a;
  color: #fff;
  font-weight: 500;
}

.pilp-social-menu-item.active .menu-icon {
  opacity: 1;
}

/* нижний тег */
.pilp-social-tag {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #1a1a1a;
  font-size: 11px;
  color: #b09070;
  font-weight: 500;
  line-height: 1.5;
}

.pilp-social-tag strong {
  color: #c8612a;
  font-weight: 500;
}

@media (max-width: 768px) {
  .pilp-social-sidebar {
    width: 100%;
    position: relative;
    top: auto;
    margin-bottom: 20px;
  }
}