.landing>.hero:before{content:'';position:absolute;inset:0;z-index:8;background:#111116;opacity:1;pointer-events:none;transition:opacity 1.2s ease}
.intro-connect.landing>.hero:before,.is-ready.landing>.hero:before{opacity:0}
.intro-disconnected{position:absolute;z-index:12;left:50%;top:44%;width:min(90%,1000px);transform:translate(-50%,-50%);color:#fff;text-align:center;font-size:clamp(38px,5.8vw,82px);font-weight:900;line-height:1.25;letter-spacing:-.065em;opacity:0;transition:opacity .5s,transform .7s;pointer-events:none}
.intro-visible .intro-disconnected{opacity:1}
.intro-connect .intro-disconnected{opacity:0;transform:translate(-50%,-70%)}
.intro-visible:not(.intro-connect) .intro-photo{opacity:0;visibility:hidden}
.intro-visible:not(.intro-connect) .intro-disconnected{transition:none;opacity:1}
.intro-disconnected{display:grid}
.intro-disconnected>span{grid-area:1/1;display:inline-block;align-self:center;opacity:0;word-break:keep-all}
.intro-visible .intro-disconnected-first{animation:intro-disconnected-out 1s .65s ease both}
.intro-visible .intro-disconnected-shopping{animation:intro-disconnected-pop .22s 1.65s cubic-bezier(.16,1,.3,1) both}
@keyframes intro-disconnected-out{0%{opacity:0;transform:translateY(14px) scale(.94);filter:blur(4px)}20%,75%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(-6px) scale(.98);filter:blur(2px)}}
@keyframes intro-disconnected-pop{0%{opacity:0;transform:translateY(14px) scale(.94);filter:blur(4px)}75%{opacity:1;transform:translateY(-1px) scale(1.015);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.intro-catalog{position:absolute;inset:5% 0 9%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:4vh;opacity:0;transition:opacity .6s ease;pointer-events:none}
.intro-visible:not(.intro-connect) .intro-catalog{opacity:1}
.intro-catalog-row{min-width:0;overflow:hidden}
.intro-catalog-track{width:200%;height:100%;display:flex;animation:intro-catalog-left 24s linear infinite;animation-play-state:paused;will-change:transform}
.intro-catalog-track.moves-right{animation-name:intro-catalog-right}
.intro-visible:not(.intro-connect) .intro-catalog-track{animation-play-state:running}
.intro-catalog-group{flex:0 0 50%;min-width:0;height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.8vw;padding-inline:.4vw}
.intro-catalog-tile{min-width:0;overflow:hidden;border:1px solid #3a3843;border-radius:2px;filter:brightness(.42)}
.intro-catalog-tile svg{display:block;width:100%;height:100%}
.intro-catalog-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.intro-shrink .intro-catalog{visibility:hidden}
@keyframes intro-catalog-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes intro-catalog-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.intro-photo{transition:left 1.1s cubic-bezier(.22,1,.36,1),right 1.1s,top 1.1s cubic-bezier(.22,1,.36,1),width 1.1s,height 1.1s,border-radius .6s,opacity .45s,filter .8s,transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:0ms}
.intro-visible .intro-statement{opacity:0}
.intro-visible .intro-copy-first,.intro-visible .intro-copy-last{animation:none;opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.intro-connect .intro-statement{opacity:1}
.intro-connect .intro-copy-first{opacity:1;transform:none}
.intro-converge .intro-copy-last{opacity:1;transform:none;animation:introTextCharge 1.05s 0s 2 both}
.intro-converge:not(.intro-shrink) .intro-photo{transform:translate(var(--pull-x),var(--pull-y)) scale(.88) rotate(var(--photo-angle));filter:blur(.1px)}
.intro-photo-grid-one{left:26%;top:10%;width:110px}
.intro-photo-grid-two{right:25%;top:10%;width:110px}
.intro-photo-grid-three{left:22%;top:65%;width:110px}
.intro-photo-grid-four{right:22%;top:65%;width:110px}
.intro-shrink .intro-statement{opacity:0}
@media(max-width:680px){.intro-disconnected{font-size:clamp(33px,9vw,48px)}.intro-photo-grid-one{left:25%;top:8%;width:64px}.intro-photo-grid-two{right:23%;top:22%;width:64px}.intro-photo-grid-three{left:24%;top:55%;width:64px}.intro-photo-grid-four{right:22%;top:55%;width:64px}}
@media(prefers-reduced-motion:reduce){.landing>.hero:before,.intro-disconnected{display:none}}

/* Keep a clear center, with notes pointing to the cards around it. */
.note-discover{left:55px;top:550px}
.note-connect{left:1290px;top:145px}
.note-recommend{left:1370px;top:640px;--arrow-left:-48px;--arrow-top:-100px}
.note-new{left:1350px;top:885px;--arrow-width:130px;--arrow-left:-140px;--arrow-top:-60px}
@media(min-width:681px){.hero-copy::before{width:460px;height:470px}}
html[lang=en] .side-note{font-size:20px;line-height:1.2;white-space:normal;width:165px}
html[lang=en] .card-footer strong{white-space:normal;font-size:17px;line-height:1.15}
@media(max-width:680px){.landing>.hero{min-height:max(100svh,800px)}.hero-copy{top:35%}html[lang=en] .card-footer strong{font-size:11.5px}.float[data-card=review] .review-heading{flex-basis:31px}.float[data-card=review] .card-media{flex-basis:51px}.float[data-card=review] .review-footer p{font-size:9px}.float[data-card=review] .review-tags span{font-size:7px;padding:2px 3px}.float[data-card=review] .review-heading strong{font-size:15px}}