/* Diamond 4Cs — accent-bordered info cards, per-C sub-content (feature grid,
   grading-scale swatches, highlight box). Colors reuse the global tokens. */

.c4-card {
	background: #fff;
	border-radius: 20px;
	padding: 3rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 24px rgba(18, 80, 96, .06);
	border-left: 6px solid var(--p);
}

.c4-card:last-child {
	margin-bottom: 0;
}

.c4-card--gold {
	border-left-color: var(--s);
}

.c4-card--teal-light {
	border-left-color: var(--p-l);
}

.c4-card__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.c4-card__head .icon-box {
	margin-bottom: 0;
}

.c4-card__head h3 {
	margin: 0;
	font-size: 1.5rem;
}

.c4-card__text {
	color: var(--muted);
	line-height: 1.8;
}

.c4-card__text + .c4-card__text {
	margin-top: 1rem;
}

.c4-card__text em {
	color: var(--p);
	font-style: normal;
	font-weight: 600;
}

.c4-card__text strong {
	color: var(--p);
}

.c4-subgrid {
	margin-top: 1.5rem;
}

.c4-subcard {
	background: #1250600a;
	border-radius: 12px;
	padding: 1.25rem;
}

.c4-subcard h4 {
	font-family: Inter, sans-serif;
	font-weight: 700;
	color: var(--p);
	margin-bottom: .5rem;
	font-size: .95rem;
}

.c4-subcard p {
	color: var(--muted);
	font-size: .88rem;
	line-height: 1.65;
	margin: 0;
}

.c4-grades {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .75rem;
}

.c4-grade {
	border: 2px solid #12506033;
	border-radius: 10px;
	padding: 1rem;
	border-top: 4px solid var(--p);
}

.c4-grade--teal-light {
	border-color: #1b738a33;
	border-top-color: var(--p-l);
}

.c4-grade--gold {
	border-color: #bc8d5333;
	border-top-color: var(--s);
}

.c4-grade--gold-dark {
	border-color: #9a704033;
	border-top-color: var(--s-d);
}

.c4-grade__range {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--p);
}

.c4-grade--teal-light .c4-grade__range {
	color: var(--p-l);
}

.c4-grade--gold .c4-grade__range {
	color: var(--s);
}

.c4-grade--gold-dark .c4-grade__range {
	color: var(--s-d);
}

.c4-grade__label {
	font-weight: 700;
	font-size: .85rem;
	color: var(--text);
	margin: .25rem 0;
}

.c4-grade__desc {
	font-size: .8rem;
	color: var(--muted);
}

.c4-highlight {
	margin-top: 1.5rem;
	background: #bc8d5314;
	border-radius: 12px;
	padding: 1.5rem;
	border-left: 4px solid var(--s);
}

.c4-highlight strong {
	color: var(--p);
}

.c4-highlight span {
	color: var(--muted);
	font-size: .95rem;
}