/*
 * FAQ — Help + Trust strip (2-col: dark help-card, white trust-card)
 * Depends on: design-tokens.css, log-faq-hub.css
 * Page: body.log-faq-page
 */

/* !important: beats log-global-layout-fix.css's .entry-content.is-layout-constrained > *
   margin-block reset — ref's footer.site{margin-top:60px} becomes this section's own
   bottom margin since our footer is the shared sitewide footer, not page-owned markup. */
.help-strip-wrap { max-width: 900px; margin: 40px auto 60px !important; padding: 0 20px; }
.help-strip { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

.help-card {
	background: linear-gradient(160deg, var(--ink-950), var(--ink-900));
	border-radius: var(--r-lg);
	padding: 26px 26px;
	color: var(--white);
	position: relative;
	overflow: hidden;
}

.help-card::before {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	background: var(--gold-500);
	border-radius: 50%;
	filter: blur(60px);
	opacity: .28;
	top: -70px;
	right: -50px;
}

.help-card h4 {
	font-family: var(--display);
	font-size: 19px;
	font-weight: 700;
	position: relative;
	z-index: 1;
	/* Explicit — WP global-styles heading reset otherwise wins over
	   inheritance, resolving to a dark tone invisible on this dark card. */
	color: var(--white);
}
.help-card p { font-size: 12px; color: var(--gray-light); margin-top: 6px; max-width: 280px; position: relative; z-index: 1; }

.help-methods-row { display: flex; gap: 10px; margin-top: 16px; position: relative; z-index: 1; flex-wrap: wrap; }

.hm-chip {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--white-glass-08);
	border: 1px solid var(--white-glass-15);
	padding: 8px 13px;
	border-radius: var(--r-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	transition: background .25s var(--ease), transform .25s var(--ease);
}

.hm-chip:hover { background: var(--gold-glass-10); transform: translateY(-2px); }
.hm-chip .icon { width: 12px; height: 12px; color: var(--gold-400); }

.trust-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }

.trust-card h5 {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-700);
	margin-bottom: 12px;
}

.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.tc-badge {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink-700);
	background: var(--paper);
	padding: 8px 9px;
	border-radius: 10px;
}

@media(max-width:700px) { .help-strip { grid-template-columns: 1fr; } }