/* Extend the established green and black product card with five linked views. */
.connected-view[data-product-vision]{container-type:inline-size;scroll-margin-top:115px}
.vision-tabs button{position:relative;min-width:0;min-height:44px;padding:12px 4px;background:white;border:1px solid var(--line);color:var(--ink);font-size:.875rem;font-weight:500;line-height:1.3;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.vision-tabs button[aria-selected=true]{background:var(--green);border-color:var(--green);color:white}
.vision-tabs button:focus-visible{outline-offset:3px;z-index:2}
.vision-tabs button:after{content:"";position:absolute;top:100%;left:50%;height:18px;border-left:1px solid #94a48a}
.vision-tabs button[aria-selected=true]:after{border-color:var(--green);border-width:2px}
.vision-panels{display:grid}
.vision-panel{grid-area:1/1;min-width:0;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease}
.vision-panel.is-active{visibility:visible;opacity:1;pointer-events:auto}
.vision-panel:focus-visible{outline:3px solid var(--green);outline-offset:5px}
.vision-panel .eyebrow{margin-bottom:12px}
.vision-panel h3{font-size:clamp(1.75rem,5.8cqi,2rem);margin-bottom:14px}
.vision-panel>p:not(.eyebrow){font-size:1rem;margin-bottom:20px}
.vision-panel li{font-size:.9375rem;padding:9px 0}
.vision-panel .snapshot-summary{font-size:.9375rem;line-height:1.5}
.vision-visual{background:#f4f7f0;color:var(--ink);padding:16px;margin:0 0 22px;border:1px solid #d9e4d0;min-width:0}
.vision-visual-note{display:block;margin-top:12px;color:#596255;font-size:.75rem;line-height:1.3}
.vision-system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:91px}
.vision-system-grid>div{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:white;border:1px solid #d9e4d0;padding:12px 5px;font-size:.875rem;line-height:1.3}
.vision-system-grid img{width:24px;height:24px}
.vision-capacity,.vision-close{display:grid;gap:11px;min-height:91px;align-content:center}
.vision-capacity>div,.vision-close>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:center;font-size:.875rem;line-height:1.3}
.vision-capacity>div>div{height:8px;background:#dfe7d8}
.vision-capacity i{display:block;height:100%;background:var(--green)}
.vision-capacity>div:nth-child(2) i{background:#699b4e}
.vision-capacity>div:nth-child(3) i{background:#9cbd86}
.vision-scenarios svg{display:block;width:100%;height:70px;overflow:visible}
.vision-gridline{fill:none;stroke:#d9e4d0;stroke-width:1}
.vision-line{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vision-line-soft{stroke:#73955f;stroke-width:2}
.vision-line-dashed{stroke:#596255;stroke-width:2;stroke-dasharray:5 5}
.vision-scenarios>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.875rem;line-height:1.3;margin-top:8px}
.vision-progress{display:flex;gap:4px}
.vision-progress i{flex:1;height:9px;background:#dfe7d8}
.vision-progress i.is-filled{background:var(--green)}
.vision-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:91px;align-items:center;position:relative}
.vision-timeline:before{content:"";position:absolute;left:16.666%;right:16.666%;top:29px;height:2px;background:#98b488}
.vision-timeline>div{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px;font-size:.875rem;line-height:1.3;padding-top:4px}
.vision-timeline i{display:block;width:12px;height:12px;background:var(--green);border:3px solid #f4f7f0;box-shadow:0 0 0 1px var(--green)}
@container(max-width:440px){.vision-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vision-tabs button:last-child{grid-column:1/-1}.vision-tabs:after,.vision-tabs button:after{display:none}.connected-view .connection-line{height:24px;margin-top:0}.vision-panel{padding:24px 20px}}
@container(max-width:310px){.vision-panel{padding:22px 16px}.vision-visual{padding:12px}.vision-capacity>div,.vision-close>div{grid-template-columns:75px minmax(0,1fr);gap:8px}}
@media(prefers-reduced-motion:reduce){.vision-tabs button,.vision-panel{transition:none}}