/* Support */

.sf-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.sf-contact .sf-panel { display: flex; flex-direction: column; gap: 14px; }
.sf-contact h2, .sf-help > h2 { font-size: 24px; font-weight: 800; line-height: 1.25; }
.sf-contact p { color: var(--ink-2); }
.sf-contact .sf-btn-row { margin-top: auto; padding-top: 4px; }

.sf-page > .sf-help { margin-top: 56px; }
/* The cards share a row when they fit. When one wraps on its own, it widens to
   fill the row instead of leaving an empty half beside it. */
.sf-help-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.sf-help-grid > li { display: flex; flex: 1 1 260px; min-width: 0; }
.sf-help-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 22px 24px;
	border-radius: 24px;
	background: var(--glass-dark);
	box-shadow: var(--glass-dark-ring);
	color: var(--ink-2);
	font-size: 16px;
	text-decoration: none;
}
.sf-help-card:hover { background: rgba(8, 20, 36, .62); color: var(--ink-2); }
.sf-help-title { color: var(--ink); font-size: 19px; font-weight: 700; }
.sf-help-card:hover .sf-help-title { text-decoration: underline; }