.hp-community {
	display: grid;
	gap: 18px;
	align-items: center;
	max-width: 1180px;
	margin: 32px auto;
	padding: 24px;
	border: 1px solid #d9c9f5;
	border-radius: 18px;
	background: #f7f2ff;
	color: #17131f;
}
.hp-community__logo { width: 72px; height: 72px; object-fit: contain; }
.hp-community__content > * { margin-block: 0; }
.hp-community__content > * + * { margin-top: 8px; }
.hp-community__content h2 { font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.15; }
.hp-community__content p:last-child { color: #5d5666; line-height: 1.55; }
.hp-community__eyebrow { color: #6d28d9; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hp-community__updated,.hp-community__unavailable { font-size: .9rem; }
.hp-community a { min-height: 44px; white-space: nowrap; }
.hp-community--compact {
	width: min(calc(100% - 32px), 1180px);
	margin-block: 22px;
	padding: 16px;
	gap: 14px;
	border-radius: 16px;
	background: linear-gradient(110deg,#faf7ff 0%,#f1e9ff 100%);
}
.hp-community--compact .hp-community__logo { width: 48px; height: 48px; }
.hp-community--compact .hp-community__content h2 { font-size: 1.1rem; }
.hp-community--compact .hp-community__content p:last-child { font-size: .9rem; }
.hp-community--compact .hp-community__cta { justify-self: start; padding-inline: 16px; }
.hp-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 24px 0; }
.hp-share a,.hp-share button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #7c3aed; border-radius: 10px; background: #fff; color: #4c1d95; font: inherit; cursor: pointer; }
/* L01.1 (2026-09-12): the share controls were hard #fff/#4c1d95 in both
   themes, so on a dark article they were white chips with their label at
   2.15:1. Same shape, dark values. */
.hp-experience-dark .hp-share a,.hp-experience-dark .hp-share button { background: #2a1f37; border-color: #8b5cf6; color: #e2cfff; }
.hp-experience-dark .hp-share a:hover,.hp-experience-dark .hp-share button:hover { background: #372549; }
@media(min-width:760px) {
	.hp-community { grid-template-columns: auto 1fr auto; }
	.hp-community--compact { padding: 14px 18px; }
}
@media(prefers-reduced-motion:reduce) { .hp-community *,.hp-share * { transition: none!important; } }