/* ============================================================
   Optivro ISPU — Two-Column Groups (`.tk-wins` / `.tk-win-group`)
   Responsive grid of white group cards: gold uppercase label (h5) + a
   bulleted list. Two bullet styles: navy dot (default) and gold
   checkmark (`.checks`). Static; reveals on the frontend only. Scoped
   under `.oiw-wins`. Values verbatim from the source kit; sits in the
   820px narrow column.
   ============================================================ */
.oiw-wins {
	padding: 0 40px; /* horizontal gutter matches source `.tk-section` */
}
.oiw-wins .oiw-inner {
	max-width: 820px; /* source `.tk-narrow` */
	margin: 0 auto;
	width: 100%;
}
.oiw-wins .oiw-wins-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
/* Single-column layout variant (source's standalone `.checks` groups). */
.oiw-wins .oiw-wins-grid.oiw-wins-single {
	grid-template-columns: 1fr;
}
.oiw-wins .oiw-win-group {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 26px 28px;
	min-width: 0; /* let a grid card shrink so long items wrap instead of overflowing */
}
.oiw-wins .oiw-win-group h5 {
	font-family: Lato, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}
.oiw-wins .oiw-win-group ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.oiw-wins .oiw-win-group li {
	font-size: 14.5px;
	line-height: 21px;
	color: #001D3A;
	opacity: .82;
	/* Source is 16px; increased to 22px per client request for clearer bullet↔text
	   separation (the source's faint 5px dot at 16px reads as too tight). The ONLY
	   deliberate deviation from the verbatim source value in this widget. */
	padding-left: 22px;
	position: relative;
	overflow-wrap: anywhere;
}
/* Default bullet: faint navy dot. Scoped to NON-check groups with :not(.checks)
   so a `.checks` item's ::before is styled ONLY by the checkmark rule below — the
   dot's navy `background` is never declared on a check item, so it can never bleed
   through as a navy diamond if the checkmark's `background:none` fails to win
   (stale/cached CSS, theme cascade-layer overrides, etc.). Each rule is now
   fully self-contained (position/left set in both). */
.oiw-wins .oiw-win-group:not(.checks) li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--navy);
	opacity: .4;
}
/* Checkmark variant. */
.oiw-wins .oiw-win-group.checks li {
	/* Source 26px; +4 to keep the same ~17px gap as the enlarged dot variant. */
	padding-left: 30px;
}
/* A 13×7 transparent box with only the left + bottom edges drawn in gold, rotated
   -45° = a checkmark (✓). Self-contained (no dot properties to override). */
.oiw-wins .oiw-win-group.checks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 13px;
	height: 7px;
	border: 0;
	border-left: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	border-radius: 0;
	background: none;
	transform: rotate(-45deg);
	opacity: 1;
}
@media (max-width: 900px) {
	.oiw-wins {
		padding: 0 24px;
	}
	.oiw-wins .oiw-wins-grid {
		grid-template-columns: 1fr;
	}
}