.benefits-page main { max-width: 1320px; margin-inline: auto; padding: 0 5.4% 64px; }
.benefits-intro { text-align: center; }
.benefits-intro .values-eyebrow { line-height: 1.8; }
.benefits-page .benefits-intro h1 { font-size: clamp(40px, 5vw, 68px); }
.benefits-lead { max-width: 720px; margin: 24px auto; color: #555e50; line-height: 1.85; }
.spice-jump-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 40px; }
.spice-jump-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid #d8cdb7; border-radius: 30px; font-size: 15px; font-weight: 600; transition: background 180ms, color 180ms; }
.spice-jump-links a:hover { background: var(--green); color: var(--cream); }
.benefits-takeaway { display: flex; gap: 20px; padding: 26px 30px; text-align: left; background: #eef1e7; border: 1px solid #d4dcc8; border-radius: 16px; }
.benefits-takeaway > span { color: #9a6c2c; font-size: 32px; }
.benefits-takeaway h2 { margin: 0 0 6px; font: 700 26px/1.3 var(--font-display); }
.benefits-takeaway p { margin: 0; color: #555e50; font-size: 16px; }
.benefits-takeaway a { color: #765323; text-decoration: underline; text-underline-offset: 3px; }
.benefits-collection { display: grid; gap: 32px; }
.benefit-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: #fffdf8; border: 1px solid #e0d6c4; border-radius: 20px; overflow: hidden; scroll-margin-top: 24px; }
.benefit-photo { position: relative; min-width: 0; background: #e8e3d8; }
.benefit-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.benefit-number { position: absolute; top: 18px; left: 18px; background: var(--cream); color: #765323; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; font-weight: 700; }
.benefit-copy { padding: clamp(24px, 3vw, 40px); min-width: 0; }
.spice-local { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #765323; letter-spacing: 1px; }
.spice-local span { color: #606858; font-weight: 500; letter-spacing: 0; }
.benefit-copy h2 { margin: 0; font: 700 clamp(30px, 3vw, 40px)/1.2 var(--font-display); }
.spice-subtitle { margin: 8px 0 24px; color: #765323; font-style: italic; }
.benefit-copy h3 { margin: 0 0 8px; font-size: 16px; }
.benefit-copy h3 + p { margin: 0; color: #555e50; font-size: 16px; line-height: 1.8; }
.benefit-copy .research-note { padding-left: 14px; border-left: 2px solid #d8bf93; color: #646b5e; font-size: 14px; line-height: 1.75; margin: 18px 0; }
.cooking-tip { padding: 18px 20px; background: #f4eee1; border-radius: 10px; }
.benefit-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; }
.benefit-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 600; color: #765323; text-decoration: underline; text-underline-offset: 4px; }
.benefits-closing { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.benefits-closing > div { max-width: 700px; }
.benefits-closing h2 { margin: 0; font: 700 var(--text-section)/1.2 var(--font-display); }
.benefits-closing h2 em { color: #9a6c2c; font-style: normal; }
.benefits-closing p:not(.values-eyebrow) { font-size: 15px; color: #555e50; }
.benefits-closing .primary { flex-shrink: 0; }
@media (max-width: 900px) {
 .benefit-card { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
 .benefits-closing { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
 .benefits-page main { padding: 0 7% 40px; }
 .benefit-card { grid-template-columns: minmax(0, 1fr); }
 .benefit-photo { aspect-ratio: 4 / 3; }
 .benefits-takeaway { padding: 22px; gap: 12px; }
 .benefits-takeaway h2 { font-size: 23px; }
 .benefits-takeaway > span { font-size: 24px; }
 .spice-jump-links { gap: 8px; }
 .spice-jump-links a { font-size: 14px; padding-inline: 14px; }
}
/* Alternate ingredient photos while preserving the stacked mobile layout. */
@media (min-width: 601px) {
 .benefit-card:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
 .benefit-card:nth-child(even) .benefit-photo { grid-column: 2; grid-row: 1; }
 .benefit-card:nth-child(even) .benefit-copy { grid-column: 1; grid-row: 1; }
}
@media (min-width: 601px) and (max-width: 900px) {
 .benefit-card:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}