/*
 * The panel brings its own dark surface.
 *
 * Written first against a dark page, then dropped onto a white one —
 * where the headings were nearly invisible and the artwork was pale
 * orange on pale orange. A block that inherits its contrast from
 * whatever it lands in is a block that will eventually land somewhere
 * that breaks it. This one decides for itself, and reads the same in
 * Elementor, in the app, and in a theme nobody has chosen yet.
 */
.ogou-help {
	max-width: 900px; margin: 0 auto; padding: 26px 22px 30px;
	background: #0f0f16; border: 1px solid #23232f; border-radius: 20px;
	color: #edecf3;
	font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
.ogou-help * { box-sizing: border-box; }

/*
 * Every language is in the page; CSS decides which is visible.
 *
 * Written this way rather than fetched per language so the page works
 * with no connection, prints correctly, and can be read by anyone who
 * lands on it with a translator or a screen reader — and so switching
 * costs nothing at all.
 */
.ogou-help [data-l] { display: none; }
.ogou-help[data-lang="ht"] [data-l="ht"],
.ogou-help[data-lang="fr"] [data-l="fr"],
.ogou-help[data-lang="en"] [data-l="en"] { display: inline; }

.ogou-help-group { display: none; }
.ogou-help[data-who="fans"] [data-group="fans"],
.ogou-help[data-who="artists"] [data-group="artists"] { display: block; }

.ogou-help-bar {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
	align-items: center; margin-bottom: 22px;
}
.ogou-help-langs, .ogou-help-who { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); }
.ogou-help-bar button {
	padding: 8px 15px; border: 0; border-radius: 999px; background: transparent;
	color: #8b8b9c; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
	box-shadow: none;
}
.ogou-help-langs button.is-on { background: rgba(255,255,255,.1); color: #fff; }
.ogou-help-who button.is-on { background: #ff5a1f; color: #fff; }

.ogou-help-lead {
	margin: 0 0 28px !important; font-size: 17px; line-height: 1.55;
	color: #cfcfe0 !important; max-width: 62ch;
}
.ogou-help-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ogou-help-steps li {
	display: flex; gap: 26px; align-items: flex-start;
	padding: 28px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.ogou-help-steps li:first-child { border-top: 0; padding-top: 4px; }

.ogou-help-shot { position: relative; flex: 0 0 auto; width: 210px; }
.ogou-help-art { display: block; width: 100%; height: auto; }
.ogou-help-shot .n {
	position: absolute; top: 0; left: 0; z-index: 2;
	min-width: 27px; height: 27px; padding: 0 8px; border-radius: 999px;
	background: #ff5a1f; color: #fff;
	font-size: 13px; font-weight: 800; line-height: 27px; text-align: center;
}
.ogou-help-text { padding-top: 26px; }
.ogou-help-text h3 {
	margin: 2px 0 8px !important; padding: 0;
	font-size: 18px; line-height: 1.3; font-weight: 700;
	color: #ffffff !important;
}
.ogou-help-text p {
	margin: 0 !important; font-size: 15px; line-height: 1.62;
	color: #b9b9c8 !important; max-width: 62ch;
}

/*
 * On a phone the picture goes above the words.
 *
 * Side by side at this width the illustration would be too small to
 * make out which button is circled — which is the only thing it is
 * there to show.
 */
@media (max-width: 720px) {
	.ogou-help { padding: 20px 14px 24px; border-radius: 16px; }
	.ogou-help-bar { gap: 8px; }
	.ogou-help-bar button { padding: 7px 12px; font-size: 12.5px; }
	.ogou-help-steps li { flex-direction: column; gap: 16px; padding: 24px 0; }
	.ogou-help-shot { width: 100%; max-width: 260px; margin: 0 auto; }
	.ogou-help-text { padding-top: 0; }
	.ogou-help-text h3 { font-size: 17px; }
}