/* 2026-10-21 v2: visual VS sections (photo duel, illustrated point cards, field photos) */ .gx .gx7{--c-bg:#fff;--c-line:#e4e6ea;--c-ink:#111316;--c-sub:#4a5059;--c-us:#fff3ee;--c-them:#f3f4f6;--g7s:#2a2f36;--g7m:#c9ced5;--g7m2:#e6e9ed;--g7mt:#98a1ab;--g7w:#e8a33d;margin:8px 0 8px} .gx .is-dark .gx7{--c-bg:#16181c;--c-line:rgba(255,255,255,.1);--c-ink:#fff;--c-sub:#b8bec6;--c-us:rgba(240,74,36,.14);--c-them:rgba(255,255,255,.045);--g7s:#e6e9ed;--g7m:#4a5058;--g7m2:#2c3138;--g7mt:#7f8892} .gx .gx7-hero{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:center} .gx .gx7-hero figure{margin:0} .gx .gx7-ph{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#0f1113;cursor:zoom-in;isolation:isolate;box-shadow:0 22px 50px rgba(0,0,0,.18)} .gx .gx7-ph::before,.gx .gx7-field figure::before{content:"";position:absolute;inset:-30px;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.55);z-index:-1} .gx .gx7-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;border:3px solid var(--o);pointer-events:none} .gx .is-them .gx7-ph::after{border-color:#5b6470} .gx .gx7-ph img,.gx .gx7-field img{position:relative;width:100%;height:100%;object-fit:contain;display:block} .gx .gx7-pill{position:absolute;left:14px;top:14px;z-index:2;padding:8px 14px;border-radius:999px;font-weight:800;font-size:13px;letter-spacing:.07em;text-transform:uppercase;background:var(--o);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)} .gx .is-them .gx7-pill{background:#4b5563} .gx .gx7-hero figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--c-sub)} .gx .gx7-vs{display:flex;justify-content:center;position:relative;z-index:3;margin-bottom:40px} .gx .gx7-vs span{width:68px;height:68px;border-radius:50%;background:var(--o);color:#fff;font-weight:900;font-size:21px;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(240,74,36,.16),0 12px 28px rgba(240,74,36,.4)} .gx .gx7-bar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px 24px;margin:44px 0 16px} .gx .gx7-sub{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-sub);margin:0!important} .gx p.gx7-sub{margin:40px 0 14px!important} .gx .gx7-bar p.gx7-sub{margin:0!important} .gx .gx7-leg{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--c-sub)} .gx .gx7-leg span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px;background:var(--o)} .gx .gx7-leg span.is-them::before{background:var(--g7mt)} .gx .gx7-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .gx .gx7-pt{background:var(--c-bg);border:1px solid var(--c-line);border-radius:22px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.07);display:flex;flex-direction:column} .gx .gx7-pt header{display:flex;align-items:baseline;gap:12px;padding:16px 20px 14px} .gx .gx7-pt header span{font-size:13px;font-weight:800;color:var(--o);letter-spacing:.08em} .gx .gx7-pt h3{font-size:20px!important;line-height:1.2;font-weight:800;margin:0!important;color:var(--c-ink)!important} .gx .gx7-sides{display:grid;grid-template-columns:1fr 1fr;position:relative;flex:1;border-top:1px solid var(--c-line)} .gx .gx7-s{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;min-width:0} .gx .gx7-s.is-us{background:var(--c-us)} .gx .gx7-s.is-them{background:var(--c-them)} .gx .gx7-ill{aspect-ratio:16/10;margin:0 0 10px} .gx .gx7-ill svg{width:100%;height:100%;display:block;overflow:visible} .gx .gx7-s.is-us svg{color:var(--o)} .gx .gx7-s.is-them svg{color:var(--g7mt)} .gx .gx7 svg .s{fill:none;stroke:var(--g7s);stroke-linecap:round;stroke-linejoin:round} .gx .gx7 svg .a{fill:currentColor} .gx .gx7 svg .af{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round} .gx .gx7 svg .m{fill:var(--g7m)} .gx .gx7 svg .m2{fill:var(--g7m2)} .gx .gx7 svg .mt{fill:none;stroke:var(--g7mt);stroke-width:2.5} .gx .gx7 svg .dash{stroke-dasharray:4 4} .gx .gx7 svg .warn{fill:none;stroke:var(--g7w);stroke-linecap:round;stroke-linejoin:round} .gx .gx7 svg .warnf{fill:var(--g7w)} .gx .gx7 svg text{font-family:inherit} .gx .gx7 svg .t{fill:var(--g7s);font-size:10px;font-weight:600} .gx .gx7 svg .t.sm{font-size:8.5px} .gx .gx7 svg .t.big{font-size:14px;font-weight:800} .gx .gx7 svg .tw{fill:#fff;font-weight:800;font-size:11px} .gx .gx7-who{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--o)} .gx .is-them .gx7-who{color:var(--g7mt)} .gx .gx7-s b{font-size:18px;line-height:1.25;font-weight:800;color:var(--c-ink)} .gx .gx7-s.is-them b{color:var(--c-sub)} .gx .gx7-s p{font-size:13.5px;line-height:1.45;color:var(--c-sub);margin:2px 0 0!important} .gx .gx7-x{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--c-ink);color:var(--c-bg);font-style:normal;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;border:3px solid var(--c-bg);z-index:2} .gx .gx7 .gx3-note{margin-top:16px!important} .gx .gx7-field{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .gx .gx7-field figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#0f1113;cursor:zoom-in;isolation:isolate} .gx .gx7-ig figure{position:relative}.gx .gx7-ig .is-field{background:#0f1113}.gx .gx7-field span,.gx .gx7-ig figure span{position:absolute;left:10px;bottom:10px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:4px 9px;border-radius:999px} .gx .gx7-ig{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .gx .gx7-ig.is-3{grid-template-columns:repeat(3,minmax(0,1fr))} .gx .gx7-ig.is-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px} .gx .gx7-ig figure{margin:0;border-radius:16px;overflow:hidden;background:#111316;aspect-ratio:1080/1350;cursor:zoom-in;box-shadow:0 10px 26px rgba(0,0,0,.14);transition:transform .25s} .gx .gx7-ig figure:hover{transform:translateY(-4px)} .gx .gx7-ig img{width:100%;height:100%;object-fit:contain;display:block} .gx .gx7-fn{font-size:12px;color:var(--c-sub);margin-top:12px!important;opacity:.85} .gx7-js .gx .gx7-pt{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .gx7-js .gx .gx7-pt.is-in{opacity:1;transform:none} .gx7-js .gx .gx7-pt .dot,.gx7-js .gx .gx7-pt .grow{transform-box:fill-box;transform-origin:center;transform:scale(0)} .gx7-js .gx .gx7-pt .grow{transform-origin:left center;transform:scaleX(0)} .gx7-js .gx .gx7-pt.is-in .dot{animation:gx7pop .35s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i) * 90ms + 250ms)} .gx7-js .gx .gx7-pt.is-in .grow{animation:gx7grow 1s cubic-bezier(.2,.8,.2,1) .3s forwards} @keyframes gx7pop{to{transform:scale(1)}} @keyframes gx7grow{to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){.gx7-js .gx .gx7-pt,.gx7-js .gx .gx7-pt .dot,.gx7-js .gx .gx7-pt .grow{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}} @media (max-width:1024px){.gx .gx7-grid{grid-template-columns:1fr}.gx .gx7-ig,.gx .gx7-ig.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:700px){.gx .gx7-hero{grid-template-columns:1fr}.gx .gx7-vs{margin:-14px 0 -14px}.gx .gx7-vs span{width:56px;height:56px;font-size:18px}.gx .gx7-pt header{padding:14px 16px 12px}.gx .gx7-pt h3{font-size:18px!important}.gx .gx7-s{padding:16px 12px 16px}.gx .gx7-s b{font-size:15px}.gx .gx7-s p{font-size:12.5px}.gx .gx7-who{font-size:10px}.gx .gx7-field{grid-template-columns:repeat(2,minmax(0,1fr))}.gx .gx7-pill{font-size:11px;padding:6px 11px}.gx .gx7-ig,.gx .gx7-ig.is-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}} .gx .gx7-not,.gx .gx7 figure span.gx7-notp{position:absolute;z-index:2;background:#b42318;color:#fff;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.3)}.gx .gx7-not{left:14px;bottom:14px;font-size:12px;padding:7px 13px}.gx .gx7 figure span.gx7-notp{left:8px;right:auto;bottom:8px;font-size:10px;padding:5px 9px;line-height:1.2}@media (max-width:700px){.gx .gx7-not{font-size:10px;padding:5px 10px;left:10px;bottom:10px}}@media (max-width:700px){.gx .gx7-hero .is-us figcaption{margin-bottom:22px}.gx .gx7-vs{margin:-6px 0 -22px}}