/* The system map (scripts/system.mjs renders it, js/cases-eco.js wires it): the system sheet of the AI system page and the
   brand system on the Marketing OS pages. Every selector sits under .eco, every colour is a site token or mixed from tokens. The map is drawn at build time;
   its loops (the agents' pulse, the rings, the brain-flow wires) run only while the sheet is on screen (.eco-live). */
.eco{
  --eco-blue-soft:color-mix(in srgb,var(--blue) 52%,var(--paper));
  --eco-terra-soft:color-mix(in srgb,var(--terra) 72%,var(--paper));
  --eco-sun-soft:color-mix(in srgb,var(--sun) 80%,var(--paper));
  --eco-sun-ink:color-mix(in srgb,var(--sun) 55%,var(--ink));
  --eco-lime-ink:color-mix(in srgb,var(--lime) 45%,var(--ink));
  --eco-lime-tint:color-mix(in srgb,var(--lime) 28%,var(--paper));
  --eco-terra-ink:color-mix(in srgb,var(--terra) 70%,var(--ink));
  --eco-dark-3:color-mix(in srgb,var(--dark-2) 80%,var(--blue));
  --eco-glass:color-mix(in srgb,var(--chalk) 6%,transparent);
  --eco-cli:var(--eco-blue-soft);--eco-pro:var(--eco-terra-soft);--eco-grow:var(--eco-sun-soft);
  --eco-com:var(--lime);--eco-data:var(--chalk);--eco-team:var(--sun);--eco-hub:var(--blue);
  padding-top:clamp(88px,12vh,136px);padding-bottom:clamp(88px,12vh,136px)
}
.eco [data-cl="cli"]{--c:var(--eco-cli)}.eco [data-cl="pro"]{--c:var(--eco-pro)}.eco [data-cl="grow"]{--c:var(--eco-grow)}
.eco [data-cl="com"]{--c:var(--eco-com)}.eco [data-cl="data"]{--c:var(--eco-data)}.eco [data-cl="team"]{--c:var(--eco-team)}
.eco [data-cl="hub"]{--c:var(--eco-hub)}

/* ---------- head ---------- */
.eco .eco-head{margin-bottom:0}
.eco .eco-head h2{max-width:15ch}
.eco .eco-arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- small controls ---------- */
.eco .eco-pill{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid var(--line-d);color:var(--chalk);background:var(--eco-glass);transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.eco .eco-pill:hover{border-color:var(--chalk)}
.eco .eco-pill:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.eco .eco-pill svg{width:12px;height:12px;fill:currentColor;flex:none}
.eco .eco-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line-d);background:var(--eco-glass)}
.eco .eco-switch .eco-pill{border-color:transparent;background:transparent}
.eco .eco-switch .eco-pill.on{background:var(--chalk);color:var(--ink)}
.eco .eco-switch .eco-pill.on.bad{background:var(--terra);color:var(--paper)}
.eco .eco-tour.on{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.eco .eco-tour .eco-ts,.eco .eco-tour.on .eco-tp{display:none}.eco .eco-tour.on .eco-ts{display:block}
/* the switch and the pause sit together; paused, every loop on the map holds still */
.eco .eco-ctl{display:flex;align-items:center;gap:10px}
.eco .eco-still{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.eco .eco-still .eco-sg,.eco .eco-still[aria-pressed="true"] .eco-sp{display:none}.eco .eco-still[aria-pressed="true"] .eco-sg{display:block}
.eco.eco-still *,.eco.eco-still *::before,.eco.eco-still *::after{animation-play-state:paused}
/* before the script wires the map, its controls would do nothing: they keep their place but stay out of sight and out of the tab order */
.eco:not([data-wired]) .eco-switch,.eco:not([data-wired]) .eco-still,.eco:not([data-wired]) .eco-tourw,.eco:not([data-wired]) .eco-hint{visibility:hidden}

/* ---------- the bar over the map: legend and the agents switch ---------- */
.eco .eco-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;margin:clamp(48px,7vh,80px) 0 16px}
.eco .eco-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-2)}
.eco .eco-legend li{display:inline-flex;gap:7px;align-items:center}
.eco .eco-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--c)}
.eco .eco-legend .eco-lag i,.eco .eco-legend .eco-lsk i{width:8px;height:8px;border-radius:1.5px;transform:rotate(45deg);margin:0 1px;background:var(--sun)}
.eco .eco-legend .eco-lsk i{background:var(--eco-terra-soft)}

/* ---------- the map and its panel ---------- */
.eco .eco-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:stretch}
.eco .eco-box{position:relative;min-width:0;display:flex;align-items:center;border:1px solid var(--line-d);border-radius:24px;overflow:hidden;background:radial-gradient(90% 80% at 50% 50%,var(--eco-dark-3) 0%,var(--dark) 70%) var(--dark)}
.eco .eco-stage{position:relative;width:100%}
.eco .eco-pk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .4s}
.eco .eco-net{position:relative;display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.eco .eco-e{fill:none;stroke:var(--eco-blue-soft);stroke-opacity:.34;stroke-width:1.3;transition:stroke .4s,stroke-opacity .4s,opacity .4s}
.eco .eco-x{stroke:var(--chalk);stroke-opacity:.16}
.eco .eco-dim .eco-e:not(.hl){opacity:.18}
.eco .eco-n{cursor:pointer;outline:none;transition:opacity .3s}
.eco .eco-halo{fill:none;stroke:var(--c);stroke-width:1.5;opacity:0;pointer-events:all;transition:opacity .3s}
.eco .eco-n:hover .eco-halo,.eco .eco-n.sel .eco-halo{opacity:1}
.eco .eco-n:focus-visible .eco-halo{opacity:1;stroke:var(--sun);stroke-width:3}
.eco .eco-dot{fill:var(--c);stroke:var(--dark);stroke-width:3}
.eco .eco-lb{font-family:var(--sans);font-size:18px;font-weight:500;fill:var(--chalk);paint-order:stroke;stroke:var(--dark);stroke-width:5px;stroke-linejoin:round}
.eco .eco-n.sel .eco-lb{fill:var(--sun)}
.eco .eco-ag{fill:var(--sun);transform-box:fill-box;transform-origin:center;animation:eco-pulse 2.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s);transition:opacity .4s}
.eco .eco-man{opacity:0;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;fill:var(--eco-terra-soft);paint-order:stroke;stroke:var(--dark);stroke-width:4px;transition:opacity .4s}
.eco .eco-dim .eco-n:not(.sel):not(.nb){opacity:.32}
.eco .eco-glow{opacity:.55}
.eco .eco-core{fill:var(--blue)}
.eco .eco-bicon{fill:none;stroke:var(--chalk);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.eco .eco-ring{fill:none;stroke:var(--eco-blue-soft);stroke-width:1.2;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;animation:eco-spin 22s linear infinite}
.eco .eco-brain .eco-halo{stroke:var(--eco-sun-soft)}
.eco .eco-bt{font-family:var(--display);font-weight:800;font-size:19px;fill:var(--paper);pointer-events:none}
.eco .eco-s0{stop-color:var(--eco-blue-soft)}.eco .eco-s1{stop-color:var(--blue)}.eco .eco-s2{stop-color:var(--blue);stop-opacity:0}
.eco .eco-sk{pointer-events:none;transition:opacity .4s}
.eco .eco-skr{fill:none;stroke:var(--eco-terra-soft);stroke-width:1.4;stroke-dasharray:4 6;opacity:.75}
.eco .eco-skd{fill:var(--eco-terra-soft)}
.eco .eco-orbit{transform-box:view-box;animation:eco-spin 8.8s linear infinite}
.eco .eco-skl{fill:var(--eco-terra-soft);font-family:var(--mono);font-size:12px;letter-spacing:1.5px;paint-order:stroke;stroke:var(--dark);stroke-width:4px}
@keyframes eco-pulse{50%{transform:scale(1.28)}}
@keyframes eco-spin{to{transform:rotate(360deg)}}
/* without agents: the net goes grey and manual, the panel tells what happens by hand */
.eco.eco-manual .eco-e{stroke:var(--chalk);stroke-opacity:.14;stroke-dasharray:3 6}
.eco.eco-manual .eco-e.hl{stroke:var(--chalk);stroke-opacity:.55;stroke-width:1.6}
.eco.eco-manual .eco-ag{opacity:0}
.eco.eco-manual .eco-man{opacity:1}
.eco.eco-manual .eco-pk{opacity:0}
.eco.eco-manual .eco-brainc{filter:grayscale(1);opacity:.35}
.eco.eco-manual .eco-sk{opacity:.18}
.eco .eco-e.hl{stroke:var(--sun);stroke-opacity:.9;stroke-width:2}

.eco .eco-panel{border:1px solid var(--line-d);border-radius:24px;background:var(--dark-2);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.eco .eco-pl{display:flex;flex-direction:column;gap:14px;flex:1 0 auto}
/* the links, the hint and the tour sit at the foot of the reserved panel, so a longer or shorter text above never moves them */
.eco .eco-pl+.eco-sub{margin-top:auto}
.eco .eco-pl p{margin:0;max-width:none}
.eco .eco-pcl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2);display:flex;align-items:center;gap:8px}
.eco .eco-pcl i,.eco .eco-chip i,.eco .eco-lh i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;background:var(--c)}
.eco .eco-pname{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.2vw,28px);letter-spacing:-.02em;line-height:1.08;margin:0;color:var(--chalk)}
.eco .eco-agent{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--sun) 10%,transparent);border:1px solid color-mix(in srgb,var(--sun) 30%,transparent)}
.eco .eco-mark{display:inline-block;width:12px;height:12px;flex:none;margin-top:5px;background:var(--sun);-webkit-mask:var(--panot) center/contain no-repeat;mask:var(--panot) center/contain no-repeat}
.eco .eco-agent b{display:block;font-weight:600;color:var(--sun);font-size:14px;margin-bottom:2px}
.eco .eco-agent span{font-size:15px;line-height:1.5;color:var(--chalk)}
.eco .eco-mtxt{display:none;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--terra) 12%,transparent);border:1px solid color-mix(in srgb,var(--terra) 40%,transparent);color:var(--chalk);font-size:15px;line-height:1.5}
.eco .eco-mtxt b{display:block;color:var(--eco-terra-soft);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.eco.eco-manual .eco-agent{display:none}
.eco.eco-manual .eco-mtxt{display:block}
.eco .eco-sub{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2);max-width:none}
.eco .eco-links{display:flex;flex-wrap:wrap;gap:6px}
.eco .eco-chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;line-height:1.3;padding:5px 10px;border-radius:999px;background:var(--eco-glass);border:1px solid var(--line-d);color:var(--chalk-2);transition:border-color .2s,color .2s}
.eco .eco-chip i{width:7px;height:7px}
.eco button.eco-chip{cursor:pointer}
.eco button.eco-chip:hover{border-color:var(--chalk);color:var(--chalk)}
.eco button.eco-chip:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.eco .eco-hint{margin:auto 0 0;font-size:12.5px;line-height:1.45;color:var(--chalk-2);max-width:none}
.eco .eco-tourw{margin:0}
.eco .eco-meta{display:none;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-2);max-width:none;pointer-events:none}

/* the whole map as text: one list per cluster */
.eco .eco-list{margin-top:18px;border-top:1px solid var(--line-d)}
.eco .eco-list summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:16px 0 4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk)}
.eco .eco-list summary::-webkit-details-marker{display:none}
.eco .eco-list summary::after{content:"+";font-size:16px;line-height:1;color:var(--sun);transition:rotate .3s var(--ease)}
.eco .eco-list[open] summary::after{rotate:45deg}
.eco .eco-list summary:focus-visible{outline:2px solid var(--sun);outline-offset:4px;border-radius:6px}
.eco .eco-lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px 32px;padding:18px 0 6px}
.eco .eco-lh{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2)}
.eco .eco-lc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.eco .eco-lc li{font-size:14.5px;line-height:1.5;color:var(--chalk-2)}
.eco .eco-lc li b{display:block;font-weight:600;color:var(--chalk)}

/* ---------- the brain flow: what goes in, the brain, what comes out ---------- */
.eco .eco-bf{position:relative;margin-top:clamp(64px,9vh,104px);padding:clamp(28px,4vw,56px);border-radius:36px;background:var(--ground);color:var(--ink);overflow:hidden;isolation:isolate}
.eco .eco-bf::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--panot-ink) 0 0/56px 56px repeat;opacity:.045;pointer-events:none}
.eco .eco-bfhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px 40px;align-items:end}
.eco .eco-bf .kicker{color:var(--ink-2);margin-bottom:16px}
.eco .eco-bf .kicker::before{background:var(--blue)}
.eco .eco-bfh{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 96;font-size:clamp(28px,3.4vw,46px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;max-width:17ch;margin:0}
.eco .eco-bfh em{font-style:normal;color:var(--blue)}
.eco .eco-bflead{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.eco .eco-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px) minmax(0,1fr);column-gap:clamp(48px,7.5vw,112px);align-items:center;margin-top:clamp(32px,5vh,52px)}
.eco .eco-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;opacity:0;transition:opacity .8s var(--ease)}
.eco .eco-flow.eco-wired .eco-wires{opacity:1}
.eco .eco-wb{fill:none;stroke:var(--w);stroke-opacity:.22;stroke-width:1.5;transition:stroke-opacity .25s,stroke-width .25s}
.eco .eco-wf{fill:none;stroke:var(--w);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:0 15;animation:eco-wire 1.5s linear infinite}
.eco .eco-wb.hot{stroke-opacity:.6;stroke-width:2.5}
.eco .eco-wp{fill:var(--w)}
@keyframes eco-wire{to{stroke-dashoffset:-15}}
.eco [data-tone="terra"]{--c:var(--eco-terra-ink);--t:var(--terra-tint);--w:var(--terra)}
.eco [data-tone="blue"]{--c:var(--blue);--t:var(--blue-tint);--w:var(--blue)}
.eco [data-tone="sun"]{--c:var(--eco-sun-ink);--t:var(--sun-tint);--w:var(--sun)}
.eco [data-tone="lime"]{--c:var(--eco-lime-ink);--t:var(--eco-lime-tint);--w:var(--eco-lime-ink)}
.eco [data-tone="ink"]{--c:var(--ink);--t:var(--ground-2);--w:var(--ink)}
.eco .eco-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(12px,2.8vh,26px);min-width:0}
.eco .eco-ch{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.eco .eco-cin .eco-ch{text-align:right}
.eco .eco-row{display:flex;align-items:center;gap:14px}
.eco .eco-cin .eco-row{flex-direction:row-reverse;text-align:right}
.eco .eco-row p{margin:0;max-width:none}
.eco .eco-ic{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--t);color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 14%,transparent);transition:transform .3s var(--ease)}
.eco .eco-row:hover .eco-ic{transform:scale(1.08)}
.eco .eco-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eco .eco-row b{display:block;font-weight:600;font-size:16.5px;line-height:1.25;color:var(--ink)}
.eco .eco-row small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.eco .eco-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:42px 26px 30px;border-radius:32px;color:var(--chalk);background:radial-gradient(120% 85% at 50% 26%,color-mix(in srgb,var(--blue) 26%,var(--dark)) 0%,var(--dark) 64%);box-shadow:0 34px 80px -36px color-mix(in srgb,var(--blue) 70%,transparent),0 0 0 1px var(--line-d) inset;overflow:hidden;isolation:isolate}
.eco .eco-core p{margin:0;max-width:none}
.eco .eco-orb{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--eco-blue-soft) 55%,var(--paper)) 0%,var(--blue) 40%,var(--blue-ink) 68%,color-mix(in srgb,var(--blue-ink) 30%,var(--dark)) 100%);box-shadow:0 0 54px 6px color-mix(in srgb,var(--blue) 50%,transparent);animation:eco-orb 3.4s ease-in-out infinite}
.eco .eco-orb::before{content:"";position:absolute;inset:-13px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--chalk) 30%,transparent);animation:eco-spin 46s linear infinite}
.eco .eco-orb::after{content:"";position:absolute;inset:-25px;border-radius:50%;border:1px dotted color-mix(in srgb,var(--eco-terra-soft) 45%,transparent);animation:eco-spin 70s linear infinite reverse}
@keyframes eco-orb{50%{transform:scale(1.045)}}
.eco .eco-orb svg{width:62px;height:62px;fill:none;stroke:var(--chalk);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.eco .eco-ct{margin-top:32px!important;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.3vw,32px);letter-spacing:-.025em;line-height:1}
.eco .eco-cs{margin-top:8px!important;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.eco .eco-mem{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px!important}
.eco .eco-mem span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--line-d);color:var(--chalk-2);background:color-mix(in srgb,var(--chalk) 4%,transparent)}

/* ---------- on a content page (Marketing OS): the sheet sits between two halves of the article ---------- */
.cbody:has(+ .eco-page){padding-bottom:clamp(110px,14vh,150px)}
.eco.eco-page + .csplit{padding-top:clamp(64px,9vh,104px)}

/* ---------- loops run only while the sheet is on screen, and never under reduced motion ---------- */
.eco:not(.eco-live) .eco-net *,.eco:not(.eco-live) .eco-flow *,.eco:not(.eco-live) .eco-flow *::before,.eco:not(.eco-live) .eco-flow *::after{animation-play-state:paused}
html.stilled .eco *,html.stilled .eco *::before,html.stilled .eco *::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .eco *,.eco *::before,.eco *::after{animation:none!important}
  .eco .eco-wf{stroke-dasharray:none;stroke-opacity:.5}
}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .eco .eco-grid{grid-template-columns:1fr}
  .eco .eco-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:14px 24px}
  .eco .eco-pl{grid-row:span 4}
  .eco .eco-panel>p{margin:0}
  .eco .eco-hint{margin:0}
}
@media (max-width:900px){
  .eco .eco-bfhead{grid-template-columns:1fr}
}
/* the brain flow needs about 980px for three columns of labels in every language */
@media (max-width:980px){
  .eco .eco-flow{grid-template-columns:1fr;row-gap:26px}
  .eco .eco-wires{display:none}
  .eco .eco-cin .eco-row{flex-direction:row;text-align:left}
  .eco .eco-cin .eco-ch{text-align:left}
  .eco .eco-col{gap:14px}
  .eco .eco-ic{width:42px;height:42px;border-radius:13px}
  .eco .eco-core{max-width:380px;width:100%;margin:0 auto}
}
@media (max-width:820px){
  .eco .eco-box{display:block;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:0 -5vw;border-radius:0;border-left:0;border-right:0;scrollbar-width:thin}
  .eco .eco-stage{width:860px}
  .eco .eco-lb{font-size:21px}
  .eco .eco-man{font-size:15px}
  .eco .eco-bt{font-size:22px}
  .eco .eco-meta{position:sticky;left:5vw;display:inline-block;max-width:90vw;margin:-6px 0 14px;line-height:1.6}
  .eco .eco-panel{display:flex}
  .eco .eco-bar{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .eco .eco-ctl{width:100%}
  .eco .eco-switch{flex:1 1 auto}
  .eco .eco-switch .eco-pill{flex:1 1 0;justify-content:center;padding:9px 8px}
  .eco .eco-bf{border-radius:26px;margin-left:-2vw;margin-right:-2vw}
  .eco .eco-lgrid{grid-template-columns:1fr}
}
