/* Clip decorative waves without creating an inner scroll container. */
.concern-card{overflow:clip;min-height:0;height:auto}
.concern-card:before{inset:100px 0 0;background:url('assets/card-ocean-waves.svg?v=2') repeat;background-size:520px 240px;transform:none}
.concern-card:after{inset:100px 0 0;background:linear-gradient(140deg,#ffffff24,transparent 45%,#ffffff15);transform:none}
.concern-copy{min-height:0}
/* Diet: white panels, centered descriptions, one shade per complete row. */
#concern-1 .diet-column,#concern-1 .diet-both{background:#fff;border:1px solid var(--detail-line)}
#concern-1 .diet-column h4+ul{padding-left:0;text-align:center;list-style-position:inside}
#concern-1 .diet-column h5+ul li:nth-child(n){background:var(--detail-soft)}
#concern-1 .diet-column h5+ul li:nth-child(6n+1),
#concern-1 .diet-column h5+ul li:nth-child(6n+2),
#concern-1 .diet-column h5+ul li:nth-child(6n+3){background:var(--detail-medium)}

/* Blend the photo into its category color along a soft wave. */
.concern-photo{height:200px;clip-path:none;-webkit-mask-image:url('assets/card-photo-wave-mask.svg');mask-image:url('assets/card-photo-wave-mask.svg');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Scale all nine cards to 80% together, including photos, type and controls. */
.concern-grid{width:80%;max-width:864px;margin-inline:auto;gap:20px}
.concern-card{zoom:.8}
/* Preserve the requested word grouping without overflowing narrow cells. */
#concern-1 .diet-column h5+ul li.diet-item-nowrap,
#concern-1 .diet-column h5+ul li.diet-item-two-lines{container-type:inline-size}
#concern-1 .diet-item-label{display:block;max-width:100%;letter-spacing:0;white-space:nowrap}
#concern-1 .diet-item-nowrap .diet-item-label{font-size:min(1em,10.8cqi)}
#concern-1 .diet-item-two-lines .diet-item-label{font-size:min(1em,13.9cqi)}
#concern-1 .diet-item-two-lines .diet-item-label>span{display:block}
@media(max-width:700px){.concern-grid{max-width:328px}}

/* Stronger type across all nine concern cards. */
.concern-card h3{font-weight:800}
.concern-card .concern-pain-label,.concern-card .concern-pain-list{font-weight:700}
.concern-card .concern-open{font-weight:800}

/* Two-column concern cards on phones, preserving all copy and controls. */
@media(max-width:700px){
 #worries .concern-grid{width:100%;max-width:560px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;align-items:stretch}
 #worries .concern-card{border-radius:22px}
 #worries .concern-photo{height:145px;min-height:0}
 #worries .concern-copy{padding:96px 10px 12px}
 #worries .concern-card h3{font-size:22px;min-height:64px;line-height:1.4;letter-spacing:0;margin-bottom:6px}
 #worries .concern-card[data-concern="concern-2"] h3,#worries .concern-card[data-concern="concern-4"] h3,#worries .concern-card[data-concern="concern-9"] h3{font-size:19px}
 #worries .concern-info{padding:10px 9px 9px;border-radius:15px}
 #worries .concern-pain-label{font-size:16px;letter-spacing:0;margin-bottom:8px;padding-bottom:6px}
 #worries .concern-pain-list{font-size:15px;line-height:1.65;padding-left:1em;margin-bottom:12px}
 #worries .concern-open{font-size:14px;letter-spacing:0;min-height:55px;padding:10px 25px 10px 6px;white-space:nowrap}
 #worries .concern-plus{width:18px;height:18px;font-size:16px;right:6px}
}