/* ==== Two-card result layout (2026-10-23) - NTI Control / Repel / Bio ============================
   Enabled per quiz by Settings -> Result layout = "Two cards". Same navy shell and tokens as the
   rest of this sheet; the structure follows the client's finder designs: heading strip, two cards,
   one note, text footer. Everything is scoped to .sf-r2 so no other quiz is touched. */
.sf-quiz .sf-r2 {
	padding: var(--sf-space-6) var(--sf-space-6) var(--sf-space-5);
}
.sf-quiz .sf-r2-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sf-space-5);
	align-items: stretch;
}
.sf-quiz .sf-r2-grid.sf-r2-cards-1 { grid-template-columns: minmax(0, 1fr); }
/* A product card next to an enquiry card: the product gets the wider column, as in the designs. */
.sf-quiz .sf-r2-grid.sf-r2-mixed { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); }

.sf-quiz .sf-r2-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 300px;
	margin: 0;
	padding: var(--sf-space-6) var(--sf-space-6);
	border: 1px solid rgba(55, 192, 235, 0.55);
	border-radius: var(--sf-card-radius);
	background: linear-gradient(145deg, rgba(55, 192, 235, 0.10), rgba(255, 255, 255, 0.03));
	color: var(--sf-white);
}
.sf-quiz .sf-r2-card-enquiry {
	border-color: var(--sf-border);
	background: rgba(255, 255, 255, 0.05);
}
.sf-quiz .sf-r2-title {
	margin: 0 0 var(--sf-space-3);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--sf-white);
}
.sf-quiz .sf-r2-card-enquiry .sf-r2-title { font-size: 22px; line-height: 1.25; }
.sf-quiz .sf-r2-role {
	margin: 0 0 var(--sf-space-4);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--sf-accent);
}
.sf-quiz .sf-r2-card-enquiry .sf-r2-role { color: var(--sf-muted-white); font-size: 14px; }
.sf-quiz .sf-r2-copy {
	margin: 0 0 var(--sf-space-5);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--sf-muted-white);
}
.sf-quiz .sf-r2-card-enquiry .sf-r2-copy { font-size: 15px; }

/* Buttons: product = filled gradient pill; enquiry = outline pill. Both pushed to the card foot. */
.sf-quiz .sf-r2-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.sf-quiz .sf-r2-cta-product {
	border: 0;
	background: linear-gradient(72.7deg, var(--sf-primary), var(--sf-accent));
	color: var(--sf-white);
}
.sf-quiz .sf-r2-cta-product:hover { opacity: 0.88; color: var(--sf-white); }
.sf-quiz .sf-r2-cta-enquiry {
	border: 1px solid var(--sf-white);
	background: transparent;
	color: var(--sf-white);
}
.sf-quiz .sf-r2-cta-enquiry:hover { background: var(--sf-white); color: var(--sf-primary); }

.sf-quiz .sf-r2-note {
	margin: var(--sf-space-5) 0 0;
	max-width: 880px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}
.sf-quiz .sf-r2-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sf-space-5);
	margin-top: var(--sf-space-5);
}
.sf-quiz .sf-r2-again,
.sf-quiz .sf-r2-footer-link {
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--sf-accent);
	border-radius: 0;
	background: none;
	color: var(--sf-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.sf-quiz .sf-r2-again:hover,
.sf-quiz .sf-r2-footer-link:hover { color: var(--sf-accent); background: none; }

/* NTI Repel: the design tints each card by product family; two product cards use text-link buttons. */
.sf-quiz-repel .sf-r2-card.sf-fam-oleo { background: linear-gradient(145deg, #3b4143, #70614e); border-color: #c9aa6b; }
.sf-quiz-repel .sf-r2-card.sf-fam-oleo .sf-r2-role { color: #ead3a1; }
.sf-quiz-repel .sf-r2-card.sf-fam-hydro { background: linear-gradient(145deg, #0c3f59, #0b5365); border-color: rgba(111, 220, 235, 0.7); }
.sf-quiz-repel .sf-r2-card.sf-fam-hydro .sf-r2-role { color: #73e0ee; }
.sf-quiz-repel .sf-r2-card.sf-fam-circuit { background: linear-gradient(145deg, #0b375b, #173e64); border-color: #6d9ed1; }
.sf-quiz-repel .sf-r2-card.sf-fam-circuit .sf-r2-role { color: #9fd1ff; }
.sf-quiz-repel .sf-r2-grid:not(.sf-r2-mixed) .sf-r2-cta-product {
	padding: 10px 0;
	border-radius: 0;
	border-bottom: 1px solid #58d7ea;
	background: none;
	font-weight: 800;
}


/* Footer links come before the note on Bio and on Repel's two-product result (as in their designs);
   every other result keeps cards -> note -> footer. */
.sf-quiz .sf-r2 { display: flex; flex-direction: column; }
.sf-quiz-bio .sf-r2 .sf-r2-footer,
.sf-quiz-repel .sf-r2:not(:has(.sf-r2-card-enquiry)) .sf-r2-footer { order: 2; }
.sf-quiz-bio .sf-r2 .sf-r2-note,
.sf-quiz-repel .sf-r2:not(:has(.sf-r2-card-enquiry)) .sf-r2-note { order: 3; }
@media (max-width: 900px) {
	.sf-quiz .sf-r2-grid,
	.sf-quiz .sf-r2-grid.sf-r2-mixed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.sf-quiz .sf-r2 { padding: var(--sf-space-5) var(--sf-space-4); }
	.sf-quiz .sf-r2-card { min-height: 0; padding: var(--sf-space-5) var(--sf-space-4); }
	.sf-quiz .sf-r2-title { font-size: 26px; }
}
/* ==== end two-card result layout ==== */