:root {
	--surveyBG: var(--amex-deepblue);
}

/* benefitExperience2.html Q6 ("How would you rate the ease of
   redeeming/accessing this benefit?"): value=1 and value=2 each have
   their own set of six category-specific follow-up blocks (.isDining,
   .isTravel, etc., scoped with .q6v1 / .q6v2 since both sets reuse the
   same six class names), only one of which should match whichever
   category was picked in Q1 (input[data-redemption]). The design
   system's general rule (.inline-label:has(input:checked) +
   .conditional-indent) only reaches the physically-adjacent block, so
   without this it always reveals the first block in whichever set is
   adjacent to the checked value, regardless of category. This
   overrides that default: hide every block in both sets unless its
   matching category is also checked. */
.content-box:has(input[name="benefitExperience2q6"]:checked) .q6v1,
.content-box:has(input[name="benefitExperience2q6"]:checked) .q6v2 {
	display: none;
}

.content-box:has(input[name="benefitExperience2q1"][data-redemption="Dining"]:checked):has(input[name="benefitExperience2q6"][value="1"]:checked) .q6v1.isDining,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Travel"]:checked):has(input[name="benefitExperience2q6"][value="1"]:checked) .q6v1.isTravel,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Retail"]:checked):has(input[name="benefitExperience2q6"][value="1"]:checked) .q6v1.isRetail,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Entertainment"]:checked):has(input[name="benefitExperience2q6"][value="1"]:checked) .q6v1.isEntertainment,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="EverydayLifestyle"]:checked):has(input[name="benefitExperience2q6"][value="1"]:checked) .q6v1.isEverydayLifestyle,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Banking"]:checked):has(input[name="benefitExperience2q6"][value="1"]:checked) .q6v1.isBanking,

.content-box:has(input[name="benefitExperience2q1"][data-redemption="Dining"]:checked):has(input[name="benefitExperience2q6"][value="2"]:checked) .q6v2.isDining,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Travel"]:checked):has(input[name="benefitExperience2q6"][value="2"]:checked) .q6v2.isTravel,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Retail"]:checked):has(input[name="benefitExperience2q6"][value="2"]:checked) .q6v2.isRetail,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Entertainment"]:checked):has(input[name="benefitExperience2q6"][value="2"]:checked) .q6v2.isEntertainment,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="EverydayLifestyle"]:checked):has(input[name="benefitExperience2q6"][value="2"]:checked) .q6v2.isEverydayLifestyle,
.content-box:has(input[name="benefitExperience2q1"][data-redemption="Banking"]:checked):has(input[name="benefitExperience2q6"][value="2"]:checked) .q6v2.isBanking {
	display: block;
}

/* servicing.html: several full top-level questions only apply if the
   respondent said they spoke with a live representative (Q4 = "Yes") —
   none of them are adjacent to Q4 in the DOM, so the general
   adjacent-sibling rule (.inline-label:has(input:checked) +
   .conditional-indent) can't reach them. Each one uses
   .conditional-fieldset (not .conditional-indent) since they're full
   questions, not nested follow-ups — still gets automatically swept for
   stale answers by clearHiddenConditionals() in global.js, which checks
   for .conditional-fieldset alongside .conditional-indent. */
.content-box:has(input[name="servicingq4"][value="Yes"]:checked) .q4Yes {
	display: block;
}