/* ===== ПростОптима Article — Scoped Styles ===== */

/* --- Full isolation reset: kill ALL inherited/external styles --- */
.po-article,
.po-article *,
.po-article *::before,
.po-article *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: left !important;
  vertical-align: baseline !important;
  float: none !important;
  list-style: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  display: block !important;
  overflow: visible !important;
  transition: none !important;
  transform: none !important;
}

/* --- Restore inline elements to inline display --- */
.po-article span,
.po-article a,
.po-article strong,
.po-article b,
.po-article em,
.po-article i,
.po-article br {
  display: inline !important;
}

/* --- Restore list items --- */
.po-article li {
  display: list-item !important;
}

/* --- Root container --- */
.po-article {
  --po-green: #00b050;
  --po-green-dark: #009440;
  --po-green-deeper: #007a34;
  --po-green-light: #e6f9ee;
  --po-green-pale: #f0faf4;
  --po-text: #1a1a2e;
  --po-text-secondary: #4a4a5a;
  --po-text-muted: #7a7a8a;
  --po-bg: #ffffff;
  --po-bg-warm: #fafaf8;
  --po-bg-cool: #f5f7fa;
  --po-border: #e8e8ec;
  --po-accent: #00b050;
  --po-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --po-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --po-shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --po-radius: 12px;
  --po-radius-lg: 20px;
  --po-font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --po-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  font-family: var(--po-font-sans) !important;
  color: var(--po-text) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

/* ---- Hero Section ---- */
.po-article .po-hero {
  position: relative !important;
  display: block !important;
  margin: 0 0 48px 0 !important;
  padding: 56px 40px 48px !important;
  background: linear-gradient(135deg, #003d1a 0%, #00522a 30%, #007a3d 60%, #00b050 100%) !important;
  border-radius: var(--po-radius-lg) !important;
  color: #fff !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: var(--po-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.po-article .po-hero::before {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: -60% !important;
  right: -20% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.po-article .po-hero::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  bottom: -40% !important;
  left: -10% !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(0,176,80,0.2) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.po-article .po-hero-badge {
  display: inline-block !important;
  padding: 6px 16px !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin: 0 0 24px 0 !important;
  backdrop-filter: blur(8px);
  color: #fff !important;
  line-height: 1.4 !important;
  font-family: var(--po-font-sans) !important;
}

.po-article .po-hero-title {
  font-family: var(--po-font-serif) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin: 0 0 20px 0 !important;
  max-width: 650px !important;
  color: #fff !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.po-article .po-hero-title span {
  color: #7dffb3 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.po-article .po-hero-subtitle {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.85) !important;
  max-width: 620px !important;
  font-weight: 300 !important;
  font-family: var(--po-font-sans) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Stats Bar ---- */
.po-article .po-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin: -28px 20px 48px !important;
  position: relative !important;
  z-index: 2 !important;
}

.po-article .po-stat-card {
  background: var(--po-bg) !important;
  border-radius: var(--po-radius) !important;
  padding: 24px 20px !important;
  text-align: center !important;
  box-shadow: var(--po-shadow-md) !important;
  border: 1px solid var(--po-border) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.po-article .po-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--po-shadow-lg) !important;
}

.po-article .po-stat-number {
  font-family: var(--po-font-serif) !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--po-green) !important;
  line-height: 1 !important;
  margin: 0 0 6px 0 !important;
}

.po-article .po-stat-label {
  font-size: 12px !important;
  color: var(--po-text-muted) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  font-family: var(--po-font-sans) !important;
}

/* ---- Section Titles (H2) — Premium Gradient Blocks ---- */
.po-article .po-section-title {
  position: relative !important;
  display: block !important;
  font-family: var(--po-font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.35 !important;
  margin: 0 0 28px 0 !important;
  padding: 24px 28px 24px 28px !important;
  background: linear-gradient(135deg, #003d1a 0%, #005c2e 40%, #008542 70%, #00b050 100%) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0,100,50,0.18) !important;
}

.po-article .po-section-title::before {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  height: auto !important;
  background: rgba(255,255,255,0.4) !important;
  border-radius: 14px 0 0 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.po-article .po-section-title::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: -50% !important;
  right: -10% !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ---- Two Column Layout ---- */
.po-article .po-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  margin: 0 0 24px 0 !important;
}

.po-article .po-two-col--wide-left {
  grid-template-columns: 1.3fr 0.7fr !important;
}

.po-article .po-two-col--wide-right {
  grid-template-columns: 0.7fr 1.3fr !important;
}

/* ---- Paragraph ---- */
.po-article .po-text {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--po-text-secondary) !important;
  margin: 0 0 16px 0 !important;
  font-family: var(--po-font-sans) !important;
  font-weight: 400 !important;
}

.po-article .po-text:last-child {
  margin-bottom: 0 !important;
}

.po-article .po-text strong {
  color: var(--po-text) !important;
  font-weight: 600 !important;
}

/* ---- Lead Paragraph ---- */
.po-article .po-lead {
  font-family: var(--po-font-serif) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: var(--po-text) !important;
  margin: 0 0 20px 0 !important;
  font-weight: 300 !important;
}

.po-article .po-lead strong {
  font-weight: 700 !important;
  color: var(--po-green-deeper) !important;
}

/* ---- Pull Quote ---- */
.po-article .po-pullquote {
  position: relative !important;
  padding: 28px 28px 28px 32px !important;
  margin: 0 0 16px 0 !important;
  background: var(--po-green-pale) !important;
  border: none !important;
  border-left: 4px solid var(--po-green) !important;
  border-radius: 0 var(--po-radius) var(--po-radius) 0 !important;
  font-family: var(--po-font-serif) !important;
  font-size: 16px !important;
  font-style: italic !important;
  line-height: 1.65 !important;
  color: var(--po-green-deeper) !important;
}

.po-article .po-pullquote::before {
  content: '❝' !important;
  position: absolute !important;
  display: block !important;
  top: 12px !important;
  left: 12px !important;
  font-size: 28px !important;
  color: var(--po-green) !important;
  opacity: 0.3 !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
}

/* ---- Info Box ---- */
.po-article .po-infobox {
  background: var(--po-bg-cool) !important;
  border-radius: var(--po-radius) !important;
  padding: 28px !important;
  margin: 0 0 16px 0 !important;
  border: 1px solid var(--po-border) !important;
}

.po-article .po-infobox-title {
  font-family: var(--po-font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--po-green-dark) !important;
  margin: 0 0 14px 0 !important;
}

.po-article .po-infobox-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.po-article .po-infobox-list li {
  position: relative !important;
  padding: 0 0 0 22px !important;
  margin: 0 0 10px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--po-text-secondary) !important;
  font-family: var(--po-font-sans) !important;
  display: list-item !important;
  list-style: none !important;
}

.po-article .po-infobox-list li:last-child {
  margin-bottom: 0 !important;
}

.po-article .po-infobox-list li::before {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  left: 0 !important;
  top: 8px !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--po-green) !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ---- Highlight Card ---- */
.po-article .po-highlight {
  background: linear-gradient(135deg, var(--po-green-light) 0%, #d4f5e2 100%) !important;
  border-radius: var(--po-radius-lg) !important;
  padding: 32px !important;
  margin: 0 0 24px 0 !important;
  border: 1px solid rgba(0,176,80,0.15) !important;
}

.po-article .po-highlight-title {
  font-family: var(--po-font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--po-green-deeper) !important;
  margin: 0 0 16px 0 !important;
}

/* ---- Mechanism Flow ---- */
.po-article .po-flow {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 24px 0 0 0 !important;
}

.po-article .po-flow-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  position: relative !important;
  padding: 0 0 20px 0 !important;
  margin: 0 !important;
}

.po-article .po-flow-step:last-child {
  padding-bottom: 0 !important;
}

.po-article .po-flow-icon {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  background: var(--po-green) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #fff !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 3px 12px rgba(0,176,80,0.25) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.po-article .po-flow-step:not(:last-child) .po-flow-icon::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 2px !important;
  height: calc(100% + 20px) !important;
  background: linear-gradient(180deg, var(--po-green) 0%, rgba(0,176,80,0.15) 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.po-article .po-flow-content {
  flex: 1 !important;
  padding: 8px 0 0 0 !important;
  margin: 0 !important;
}

.po-article .po-flow-label {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--po-text) !important;
  margin: 0 0 4px 0 !important;
  font-family: var(--po-font-sans) !important;
}

.po-article .po-flow-desc {
  font-size: 13px !important;
  color: var(--po-text-muted) !important;
  line-height: 1.55 !important;
  font-family: var(--po-font-sans) !important;
}

/* ---- Divider ---- */
.po-article .po-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--po-border) 20%, var(--po-border) 80%, transparent 100%) !important;
  margin: 44px 0 !important;
  padding: 0 !important;
  display: block !important;
}

.po-article .po-divider--green {
  background: linear-gradient(90deg, transparent 0%, var(--po-green) 20%, var(--po-green) 80%, transparent 100%) !important;
  opacity: 0.25 !important;
}

/* ---- Three Column ---- */
.po-article .po-three-col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 0 0 24px 0 !important;
}

.po-article .po-factor-card {
  background: var(--po-bg) !important;
  border-radius: var(--po-radius) !important;
  padding: 24px 20px !important;
  border: 1px solid var(--po-border) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.po-article .po-factor-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--po-shadow-md) !important;
}

.po-article .po-factor-icon {
  width: 48px !important;
  height: 48px !important;
  background: var(--po-green-light) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.po-article .po-factor-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--po-text) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
  font-family: var(--po-font-sans) !important;
}

.po-article .po-factor-desc {
  font-size: 13px !important;
  color: var(--po-text-muted) !important;
  line-height: 1.55 !important;
  font-family: var(--po-font-sans) !important;
}

/* ---- Product Section ---- */
.po-article .po-product {
  background: linear-gradient(180deg, #f8fdf9 0%, #eef9f1 50%, #e2f5e8 100%) !important;
  border-radius: var(--po-radius-lg) !important;
  padding: 40px 36px !important;
  margin: 0 0 24px 0 !important;
  border: 1px solid rgba(0,176,80,0.12) !important;
  position: relative !important;
  overflow: hidden !important;
}

.po-article .po-product::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  right: 0 !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(circle, rgba(0,176,80,0.08) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.po-article .po-product-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
}

.po-article .po-product-logo {
  width: 56px !important;
  height: 56px !important;
  background: var(--po-green) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-family: var(--po-font-serif) !important;
  box-shadow: 0 4px 16px rgba(0,176,80,0.3) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.po-article .po-product-name {
  font-family: var(--po-font-serif) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--po-green-deeper) !important;
  margin: 0 !important;
}

.po-article .po-product-tagline {
  font-size: 13px !important;
  color: var(--po-text-muted) !important;
  font-weight: 400 !important;
  font-family: var(--po-font-sans) !important;
}

/* ---- Ingredient Grid ---- */
.po-article .po-ingredients {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}

.po-article .po-ingredient {
  background: rgba(255,255,255,0.8) !important;
  border-radius: var(--po-radius) !important;
  padding: 20px !important;
  border: 1px solid rgba(0,176,80,0.1) !important;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease !important;
}

.po-article .po-ingredient:hover {
  transform: translateY(-2px) !important;
}

.po-article .po-ingredient-icon {
  font-size: 28px !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
  line-height: 1 !important;
}

.po-article .po-ingredient-name {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--po-green-deeper) !important;
  margin: 0 0 6px 0 !important;
  font-family: var(--po-font-sans) !important;
}

.po-article .po-ingredient-desc {
  font-size: 13px !important;
  color: var(--po-text-secondary) !important;
  line-height: 1.55 !important;
  font-family: var(--po-font-sans) !important;
}

/* ---- Callout ---- */
.po-article .po-callout {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  background: #fffbf0 !important;
  border-radius: var(--po-radius) !important;
  padding: 24px !important;
  margin: 0 0 24px 0 !important;
  border: 1px solid #f0e6c8 !important;
}

.po-article .po-callout-icon {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: #fff3d0 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.po-article .po-callout-text {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #6b5a2e !important;
  font-family: var(--po-font-sans) !important;
}

.po-article .po-callout-text strong {
  color: #4a3d1e !important;
}

/* ---- Aside Box ---- */
.po-article .po-aside {
  background: var(--po-bg-warm) !important;
  border-radius: var(--po-radius) !important;
  padding: 24px !important;
  border: 1px solid var(--po-border) !important;
}

.po-article .po-aside-title {
  font-family: var(--po-font-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--po-text) !important;
  margin: 0 0 12px 0 !important;
}

/* ---- Numbered List ---- */
.po-article .po-numbered-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  counter-reset: po-counter;
}

.po-article .po-numbered-list li {
  counter-increment: po-counter;
  position: relative !important;
  padding: 0 0 0 40px !important;
  margin: 0 0 16px 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--po-text-secondary) !important;
  font-family: var(--po-font-sans) !important;
  display: list-item !important;
  list-style: none !important;
}

.po-article .po-numbered-list li:last-child {
  margin-bottom: 0 !important;
}

.po-article .po-numbered-list li::before {
  content: counter(po-counter) !important;
  position: absolute !important;
  display: flex !important;
  left: 0 !important;
  top: 0 !important;
  width: 28px !important;
  height: 28px !important;
  background: var(--po-green) !important;
  color: #fff !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--po-font-sans) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ---- Treatment Comparison ---- */
.po-article .po-comparison {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}

.po-article .po-comparison-card {
  border-radius: var(--po-radius) !important;
  padding: 24px !important;
  border: 1px solid var(--po-border) !important;
}

.po-article .po-comparison-card--pharma {
  background: #f8f5ff !important;
  border-color: #e8e0f5 !important;
}

.po-article .po-comparison-card--alpha {
  background: #f5f8ff !important;
  border-color: #e0e8f5 !important;
}

.po-article .po-comparison-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin: 0 0 8px 0 !important;
  font-family: var(--po-font-sans) !important;
}

.po-article .po-comparison-card--pharma .po-comparison-label {
  color: #7c5cbf !important;
}

.po-article .po-comparison-card--alpha .po-comparison-label {
  color: #5c7cbf !important;
}

.po-article .po-comparison-title {
  font-family: var(--po-font-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--po-text) !important;
  margin: 0 0 10px 0 !important;
}

.po-article .po-comparison-text {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--po-text-muted) !important;
  font-family: var(--po-font-sans) !important;
}

/* ---- Mosaic Grid ---- */
.po-article .po-mosaic {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 20px !important;
  margin: 0 0 24px 0 !important;
}

.po-article .po-mosaic-item--full {
  grid-column: 1 / -1 !important;
}

/* ---- CTA Block ---- */
.po-article .po-cta {
  background: linear-gradient(135deg, #003d1a 0%, #00522a 40%, #007a3d 80%, #009944 100%) !important;
  border-radius: var(--po-radius-lg) !important;
  padding: 36px 32px !important;
  text-align: center !important;
  margin: 0 0 20px 0 !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  font-family: var(--po-font-sans) !important;
}

.po-article .po-cta::before {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: -50% !important;
  right: -30% !important;
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(125,255,179,0.1) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.po-article .po-cta-title {
  font-family: var(--po-font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
  color: #fff !important;
}

.po-article .po-cta-text {
  font-size: 14px !important;
  color: rgba(255,255,255,0.8) !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  font-family: var(--po-font-sans) !important;
}

/* ---- Footer Note ---- */
.po-article .po-footer-note {
  text-align: center !important;
  font-size: 12px !important;
  color: var(--po-text-muted) !important;
  padding: 24px 0 40px !important;
  line-height: 1.6 !important;
  font-family: var(--po-font-sans) !important;
  margin: 0 !important;
}

/* ---- Section Spacing ---- */
.po-article .po-section {
  margin: 0 0 44px 0 !important;
  padding: 0 !important;
}

/* ---- Dropping Cap ---- */
.po-article .po-dropcap::first-letter {
  float: left !important;
  font-family: var(--po-font-serif) !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  line-height: 0.85 !important;
  color: var(--po-green) !important;
  margin: 4px 8px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* ---- Small Caps Label ---- */
.po-article .po-label {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--po-green) !important;
  margin: 0 0 12px 0 !important;
  font-family: var(--po-font-sans) !important;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 720px) {
  .po-article {
    font-size: 14px !important;
    padding: 0 16px !important;
  }

  .po-article .po-hero {
    padding: 36px 24px 32px !important;
    margin: 0 0 36px 0 !important;
    border-radius: 16px !important;
  }

  .po-article .po-hero-title {
    font-size: 24px !important;
  }

  .po-article .po-hero-subtitle {
    font-size: 14px !important;
  }

  .po-article .po-stats-bar {
    grid-template-columns: 1fr !important;
    margin: -20px 10px 36px !important;
    gap: 10px !important;
  }

  .po-article .po-stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    padding: 16px 20px !important;
  }

  .po-article .po-stat-number {
    font-size: 28px !important;
    margin-bottom: 0 !important;
  }

  .po-article .po-two-col,
  .po-article .po-two-col--wide-left,
  .po-article .po-two-col--wide-right {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .po-article .po-three-col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .po-article .po-section-title {
    font-size: 18px !important;
    padding: 20px 22px 20px 22px !important;
    border-radius: 12px !important;
  }

  .po-article .po-comparison {
    grid-template-columns: 1fr !important;
  }

  .po-article .po-ingredients {
    grid-template-columns: 1fr !important;
  }

  .po-article .po-product {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  .po-article .po-product-name {
    font-size: 22px !important;
  }

  .po-article .po-mosaic {
    grid-template-columns: 1fr !important;
  }

  .po-article .po-pullquote {
    padding: 20px 20px 20px 24px !important;
    font-size: 15px !important;
  }

  .po-article .po-callout {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .po-article .po-cta {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  .po-article .po-cta-title {
    font-size: 19px !important;
  }

  .po-article .po-lead {
    font-size: 15px !important;
  }

  .po-article .po-flow-step {
    gap: 12px !important;
  }

  .po-article .po-flow-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .po-article .po-flow-step:not(:last-child) .po-flow-icon::after {
    top: 38px !important;
  }

  .po-article .po-divider {
    margin: 32px 0 !important;
  }

  .po-article .po-product-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

@media (max-width: 420px) {
  .po-article .po-hero {
    padding: 28px 18px 24px !important;
  }

  .po-article .po-hero-title {
    font-size: 21px !important;
  }

  .po-article .po-section-title {
    font-size: 16px !important;
    padding: 18px 18px 18px 18px !important;
  }

  .po-article .po-product-name {
    font-size: 20px !important;
  }
}