/* Edition 21: one active, three finished-product contexts. */
.feed-visual--three-products { background: radial-gradient(circle at 78% 24%, rgba(112,207,93,.20), transparent 23%), linear-gradient(132deg, #0a2942, #153c57); }
.feed-visual--three-products .feed-visual-label { z-index: 4; padding: 4px 6px; color: #d8e9ed; border: 1px solid rgba(200,229,237,.26); background: rgba(8,39,61,.83); }
.feed-visual--three-products .feed-visual-mark { top: 34px; right: 18px; width: 142px; height: 64px; }
.feed-visual--three-products .feed-visual-mark::before { content: ''; position: absolute; right: 4px; bottom: 4px; left: 4px; height: 1px; background: linear-gradient(90deg, #e9a96c 0 27%, rgba(207,232,237,.4) 27% 37%, #79bfd8 37% 63%, rgba(207,232,237,.4) 63% 73%, #8edb7b 73%); }
.feed-visual--three-products .feed-visual-mark i { position: absolute; bottom: 13px; width: 26px; height: 34px; border: 2px solid #d3eaef; background: #184763; }
.feed-visual--three-products .feed-visual-mark i:nth-child(1) { left: 8px; border-radius: 13px 13px 7px 7px; border-color: #e9a96c; background: #a75528; }
.feed-visual--three-products .feed-visual-mark i:nth-child(2) { left: 58px; border-radius: 7px 7px 11px 11px; border-color: #79bfd8; background: #2e748d; }
.feed-visual--three-products .feed-visual-mark i:nth-child(3) { right: 8px; border-radius: 6px 6px 8px 8px; border-color: #8edb7b; background: #3d7f4e; }
.feed-visual--three-products .feed-visual-mark i:nth-child(1)::before, .feed-visual--three-products .feed-visual-mark i:nth-child(3)::before { content: ''; position: absolute; top: -8px; left: 6px; width: 10px; height: 7px; border: 1px solid currentColor; border-radius: 3px 3px 0 0; background: #0d2d46; }
.feed-visual--three-products .feed-visual-mark i:nth-child(2)::before { content: ''; position: absolute; top: -12px; left: 9px; width: 5px; height: 10px; background: #d3eaef; }
.feed-visual--three-products .feed-visual-mark i:nth-child(n+4) { display: none; }

.featured-visual--three-products { background: radial-gradient(circle at 74% 26%, rgba(112,207,93,.22), transparent 24%), linear-gradient(132deg, #0a2942, #153c57); }
.featured-visual--three-products .featured-visual-label, .featured-visual--three-products .featured-visual-caption { z-index: 5; padding: 5px 7px; color: #d8e9ed; border: 1px solid rgba(200,229,237,.24); background: rgba(8,39,61,.78); }
.featured-visual--three-products .featured-visual-caption { right: 25px; bottom: 23px; left: auto; }
.featured-visual--three-products .featured-visual-mark { inset: 0; }
.featured-visual--three-products .featured-visual-mark::before { content: ''; position: absolute; right: 14%; bottom: 28%; left: 14%; height: 2px; background: linear-gradient(90deg, #e9a96c 0 27%, rgba(207,232,237,.35) 27% 37%, #79bfd8 37% 63%, rgba(207,232,237,.35) 63% 73%, #8edb7b 73%); }
.featured-visual--three-products .featured-visual-mark i { position: absolute; bottom: calc(28% + 13px); width: 58px; height: 78px; border: 3px solid #d5ebef; background: #17445f; box-shadow: 0 0 0 10px rgba(121,191,216,.05); }
.featured-visual--three-products .featured-visual-mark i:nth-child(1) { left: 13%; border-radius: 28px 28px 13px 13px; border-color: #e9a96c; background: #a75528; }
.featured-visual--three-products .featured-visual-mark i:nth-child(2) { left: calc(50% - 29px); border-radius: 12px 12px 20px 20px; border-color: #79bfd8; background: #2e748d; }
.featured-visual--three-products .featured-visual-mark i:nth-child(3) { right: 13%; border-radius: 10px 10px 14px 14px; border-color: #8edb7b; background: #3d7f4e; }
.featured-visual--three-products .featured-visual-mark i:nth-child(1)::before, .featured-visual--three-products .featured-visual-mark i:nth-child(3)::before { content: ''; position: absolute; top: -18px; left: 13px; width: 25px; height: 16px; border: 2px solid currentColor; border-radius: 7px 7px 0 0; background: #0d2d46; }
.featured-visual--three-products .featured-visual-mark i:nth-child(2)::before { content: ''; position: absolute; top: -23px; left: 24px; width: 7px; height: 20px; background: #d5ebef; }
.featured-visual--three-products .featured-visual-mark i:nth-child(n+4) { display: none; }

.three-product-evidence { background: #edf4f6; }
.three-product-board { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); overflow: hidden; background: #0d2b45; }
.three-product-source { display: flex; flex-direction: column; justify-content: center; min-height: 548px; margin: 0; padding: 27px; background: #0d2b45; }
.three-product-source img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #0d2b45; }
.three-product-source figcaption { margin: 14px 0 0; color: #bdd1dc; font-size: 11px; line-height: 1.52; }
.three-product-guide { padding: 41px 43px; color: #fff; background: linear-gradient(145deg, #123852, #0a253d); }
.three-product-guide .comparison-label, .three-product-question .comparison-label, .three-product-plan .comparison-label, .three-product-route .comparison-label { color: #9dde91 !important; }
.three-product-guide h3 { max-width: 510px; margin: 0; color: #fff; font-size: clamp(29px, 3vw, 40px); line-height: 1.05; letter-spacing: -.06em; }
.three-product-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 28px 0 22px; background: rgba(205,231,241,.22); }
.three-product-tab { min-height: 53px; padding: 9px 10px; color: #bfd4de; border: 0; background: rgba(255,255,255,.045); font: 11px/1.23 var(--sans); font-weight: 800; text-align: left; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.three-product-tab:hover, .three-product-tab:focus-visible { color: #fff; outline: 2px solid var(--journal-green); outline-offset: -2px; background: rgba(112,207,93,.14); }
.three-product-tab[aria-selected='true'] { color: #0b263e; background: var(--journal-green); }
.three-product-detail { min-height: 292px; }
.three-product-detail-header { display: grid; grid-template-columns: 49px 1fr; gap: 17px; align-items: start; }
.three-product-icon { position: relative; display: block; width: 40px; height: 44px; margin-top: 4px; border: 2px solid #d5ebef; background: #17445f; }
.three-product-icon--oil { border-color: #e9a96c; border-radius: 20px 20px 8px 8px; background: #9b5228; }.three-product-icon--oil::before { content: ''; position: absolute; top: -10px; left: 10px; width: 15px; height: 9px; border: 2px solid #e9a96c; border-bottom: 0; border-radius: 5px 5px 0 0; }
.three-product-icon--beverage { border-color: #79bfd8; border-radius: 7px 7px 14px 14px; background: #2e748d; }.three-product-icon--beverage::before { content: ''; position: absolute; top: -13px; left: 15px; width: 6px; height: 11px; background: #d5ebef; }
.three-product-icon--supplement { border-color: #8edb7b; border-radius: 7px 7px 11px 11px; background: #3d7f4e; }.three-product-icon--supplement::before { content: ''; position: absolute; top: -10px; left: 9px; width: 18px; height: 8px; border: 2px solid #8edb7b; border-bottom: 0; border-radius: 4px 4px 0 0; }
.three-product-index { display: block; margin-bottom: 7px; color: var(--journal-green); font: 10px var(--mono); }
.three-product-detail-header h4 { max-width: 470px; margin: 0 0 9px; color: #fff; font-size: 24px; line-height: 1.1; letter-spacing: -.05em; }
.three-product-detail-header p { max-width: 550px; margin: 0; color: #c6d8e1; font-size: 14px; line-height: 1.62; }
.three-product-detail-columns { display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; margin: 22px 0 0 66px; padding: 17px 0; border-top: 1px solid rgba(209,234,243,.2); border-bottom: 1px solid rgba(209,234,243,.15); }
.three-product-question-copy { margin: 10px 0 0; color: #e3eef2; font-size: 13px; line-height: 1.5; }
.three-product-plan ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }.three-product-plan li { position: relative; padding-left: 13px; color: #e2edf1; font-size: 12px; line-height: 1.44; }.three-product-plan li::before { content: ''; position: absolute; top: .56em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--journal-green); }
.three-product-boundary { margin: 16px 0 0 66px; color: #a8c4d1; font-size: 12px; line-height: 1.5; }
.three-product-route { margin-top: 37px; padding: 31px; color: #fff; background: #0d2b45; }.three-product-route h3 { max-width: 620px; margin: 0; color: #fff; font-size: 29px; line-height: 1.1; letter-spacing: -.057em; }
.three-product-route-list { display: grid; grid-template-columns: 1fr 27px 1fr 27px 1fr; gap: 9px; align-items: stretch; margin: 26px 0 0; padding: 0; list-style: none; }.three-product-route-list li { min-height: 144px; padding: 19px; background: rgba(255,255,255,.055); border-top: 1px solid rgba(210,233,243,.25); }.three-product-route-list li > span { display: block; margin-bottom: 25px; color: var(--journal-green); font: 10px var(--mono); }.three-product-route-list b { display: block; margin-bottom: 7px; color: #fff; font-size: 16px; letter-spacing: -.035em; }.three-product-route-list p { margin: 0; color: #bdd1dc; font-size: 12px; line-height: 1.53; }.three-product-arrow { align-self: center; color: var(--journal-green); font-size: 16px; font-style: normal; text-align: center; }

@media (max-width: 900px) { .three-product-board { grid-template-columns: 1fr; }.three-product-source { min-height: 415px; } }
@media (max-width: 720px) { .feed-visual--three-products .feed-visual-mark { top: 34px; right: 13px; width: 121px; height: 56px; }.feed-visual--three-products .feed-visual-mark i { width: 22px; height: 28px; }.feed-visual--three-products .feed-visual-mark i:nth-child(1) { left: 8px; }.feed-visual--three-products .feed-visual-mark i:nth-child(2) { left: 50px; }.feed-visual--three-products .feed-visual-mark i:nth-child(3) { right: 8px; }
  .featured-visual--three-products .featured-visual-caption { right: 17px; bottom: 16px; }.featured-visual--three-products .featured-visual-mark i { bottom: calc(28% + 10px); width: 40px; height: 60px; border-width: 2px; }.featured-visual--three-products .featured-visual-mark i:nth-child(1) { left: 13%; }.featured-visual--three-products .featured-visual-mark i:nth-child(2) { left: calc(50% - 20px); }.featured-visual--three-products .featured-visual-mark i:nth-child(3) { right: 13%; }
  .three-product-source { min-height: 0; padding: 21px; }.three-product-source img { height: auto; }.three-product-source figcaption { margin-top: 12px; font-size: 10px; line-height: 1.45; }.three-product-guide { padding: 30px 21px; }.three-product-guide h3 { font-size: 30px; }.three-product-tabs { margin: 23px 0 18px; }.three-product-tab { min-height: 47px; padding: 8px 9px; font-size: 11px; }
  .three-product-detail { min-height: 0; }.three-product-detail-header { grid-template-columns: 38px 1fr; gap: 13px; }.three-product-icon { width: 33px; height: 37px; }.three-product-icon--oil::before { top: -9px; left: 8px; width: 12px; height: 8px; }.three-product-icon--beverage::before { top: -11px; left: 12px; }.three-product-icon--supplement::before { top: -9px; left: 7px; width: 15px; height: 7px; }.three-product-detail-header h4 { font-size: 21px; }.three-product-detail-header p { font-size: 13px; line-height: 1.57; }
  .three-product-detail-columns { display: block; margin: 18px 0 0 51px; padding: 14px 0; }.three-product-plan { margin-top: 16px; }.three-product-plan li { font-size: 12px; }.three-product-boundary { margin: 15px 0 0 51px; font-size: 12px; line-height: 1.48; }.three-product-route { margin-top: 26px; padding: 24px 21px; }.three-product-route h3 { font-size: 26px; }.three-product-route-list { display: block; margin-top: 22px; }.three-product-route-list li { min-height: 0; }.three-product-route-list li > span { margin-bottom: 13px; }.three-product-arrow { width: 1px; height: 22px; display: block; margin: 0 auto; overflow: hidden; background: rgba(210,233,243,.35); font-size: 0; }.three-product-arrow::after { content: '↓'; position: relative; top: 12px; left: -4px; color: var(--journal-green); font-size: 14px; } }